/* =============================================================
   Circuit Background — utility CSS classes
   Usage: add one style class + one bg variant + one color variant
   to any block's "Additional CSS class(es)" field.

   Style classes:   circuit-bg-trace | circuit-bg-particles | circuit-bg-hex
   BG variants:     cb-dark | cb-light
   Color variants:  cb-green | cb-blue | cb-purple | cb-amber

   Example: circuit-bg-trace cb-dark cb-green
   ============================================================= */

/* ── Shared positioning ───────────────────────────────────── */

.circuit-bg-trace,
.circuit-bg-particles,
.circuit-bg-hex {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

/* The canvas is injected by JS — keep it pinned behind everything */
.circuit-bg-trace > canvas.cbg-canvas,
.circuit-bg-particles > canvas.cbg-canvas,
.circuit-bg-hex > canvas.cbg-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 0;
	pointer-events: none;
}

/* All direct children (block content) sit above the canvas */
.circuit-bg-trace > *:not(canvas.cbg-canvas),
.circuit-bg-particles > *:not(canvas.cbg-canvas),
.circuit-bg-hex > *:not(canvas.cbg-canvas) {
	position: relative;
	z-index: 1;
}

/* ── Background color variants ────────────────────────────── */

.cb-dark  { background-color: #0a0f0e; }
.cb-light { background-color: #f2f4f3; }

/* ── Accent color CSS variables ───────────────────────────── */
/* These are read by the JS to drive canvas stroke/fill colors  */

.cb-green  { --cbg-r: 0;   --cbg-g: 255; --cbg-b: 160; }
.cb-blue   { --cbg-r: 80;  --cbg-g: 200; --cbg-b: 255; }
.cb-purple { --cbg-r: 180; --cbg-g: 130; --cbg-b: 255; }
.cb-amber  { --cbg-r: 255; --cbg-g: 190; --cbg-b: 60;  }

/* Fallback if no color class is set */
.circuit-bg-trace,
.circuit-bg-particles,
.circuit-bg-hex {
	--cbg-r: 0;
	--cbg-g: 255;
	--cbg-b: 160;
}

/* ── Light variant text overrides ─────────────────────────── */

.cb-light { color: #1a1a1a; }
.cb-light h1, .cb-light h2, .cb-light h3,
.cb-light h4, .cb-light h5, .cb-light h6 { color: #111; }
.cb-light p { color: #444; }

/* ── Dark variant text overrides ─────────────────────────── */

.cb-dark { color: #e8ece9; }
.cb-dark h1, .cb-dark h2, .cb-dark h3,
.cb-dark h4, .cb-dark h5, .cb-dark h6 { color: #f2f4f3; }
.cb-dark p { color: #a8b0ab; }

/* ── Reduced motion ───────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.circuit-bg-trace > canvas.cbg-canvas,
	.circuit-bg-particles > canvas.cbg-canvas,
	.circuit-bg-hex > canvas.cbg-canvas {
		opacity: 0.35;
	}
}