/**
 * phlip-hud.css — Animated HUD visualization for the Phlip case study.
 *
 * Scoped under .innov8-csid-hud so none of these rules bleed into the rest
 * of the case-study layout. The HUD's internal CSS variable names (--amber,
 * --steel-*, etc.) are redefined within the wrapper to map to the site's
 * design tokens — the JS files reference these names via inline SVG fill
 * attributes (e.g. fill="var(--amber-bright)") and cannot be renamed without
 * touching every JS-generated element.
 *
 * Two-accent mapping:
 *   --amber* → --accent-data (amber = structured information signal per #164)
 *   --red    → kept as-is (alert/error state, not a brand accent)
 *
 * Loaded only on /case-studies/phlip via case-studies.11tydata.cjs
 * when data.hud === true.
 *
 * Ported from docs/branding/design-system/hero.css.
 */

@layer components {
	/* ─── HUD wrapper ────────────────────────────────────────────────── */
	.innov8-csid-hud {
		/* Map site design tokens to the HUD's internal variable names.
		   Cascades to all children, so JS-generated SVG elements that
		   reference var(--amber-bright) etc. resolve to site tokens. */
		--amber: var(--accent-data);
		--amber-bright: #ffc36a;
		--amber-hot: #ff7a18;
		--amber-deep: #c46a04;
		--red: #e54d2e;
		--yellow: #f7d234;
		--bg: var(--color-ink-1000);
		--bg-2: var(--color-ink-950);
		--steel-1: var(--color-ink-950);
		--steel-2: var(--color-ink-900);
		--steel-3: var(--color-ink-800);
		--steel-4: var(--color-ink-700);
		--steel-5: var(--fg-tertiary);
		--steel-6: var(--fg-secondary);
		--line-faint: rgba(255, 255, 255, 0.04);
		--line: rgba(255, 255, 255, 0.08);
		--line-strong: rgba(255, 255, 255, 0.14);
		--mono: var(--font-mono);
		--sans: var(--font-sans);

		position: relative;
		width: 100%;
		aspect-ratio: 16 / 9;
		background:
			radial-gradient(1200px 600px at 70% 50%, rgba(245, 166, 35, 0.05), transparent 60%),
			radial-gradient(800px 500px at 30% 60%, rgba(229, 77, 46, 0.035), transparent 65%),
			linear-gradient(180deg, var(--color-ink-1000) 0%, var(--color-ink-1000) 100%);
		border-radius: var(--radius-lg);
		overflow: hidden;
		box-shadow:
			0 0 0 1px rgba(255, 255, 255, 0.05),
			0 30px 90px rgba(0, 0, 0, 0.7),
			inset 0 1px 0 rgba(255, 255, 255, 0.04);
		isolation: isolate;
		font-family: var(--font-mono);
		font-size: 10px;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--fg-tertiary);
	}

	/* ─── Grid overlays ──────────────────────────────────────────────── */
	.innov8-csid-hud .grid-overlay {
		position: absolute;
		inset: 0;
		background-image:
			linear-gradient(to right, var(--line-faint) 1px, transparent 1px),
			linear-gradient(to bottom, var(--line-faint) 1px, transparent 1px);
		background-size: 60px 60px;
		mask-image: radial-gradient(ellipse at center, #000 30%, transparent 85%);
		z-index: 1;
	}

	.innov8-csid-hud .grid-overlay.fine {
		background-size: 12px 12px;
		opacity: 0.5;
		mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%);
	}

	/* ─── Scan / film effects ────────────────────────────────────────── */
	.innov8-csid-hud .scanline {
		position: absolute;
		inset: 0;
		background: linear-gradient(
			180deg,
			transparent 0%,
			transparent 49%,
			rgba(245, 166, 35, 0.06) 50%,
			transparent 51%,
			transparent 100%
		);
		background-size: 100% 4px;
		pointer-events: none;
		z-index: 8;
		opacity: 0.35;
	}

	.innov8-csid-hud .vignette {
		position: absolute;
		inset: 0;
		background: radial-gradient(ellipse 90% 70% at center, transparent 55%, rgba(0, 0, 0, 0.8) 100%);
		pointer-events: none;
		z-index: 9;
	}

	.innov8-csid-hud .noise {
		position: absolute;
		inset: 0;
		pointer-events: none;
		z-index: 10;
		opacity: 0.045;
		mix-blend-mode: overlay;
		background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
	}

	/* ─── Network SVG ────────────────────────────────────────────────── */
	.innov8-csid-hud .network {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		z-index: 3;
	}

	.innov8-csid-hud .path-base {
		fill: none;
		stroke: var(--steel-3);
		stroke-width: 1.2;
		opacity: 0.55;
	}

	.innov8-csid-hud .path-glow {
		fill: none;
		stroke: var(--amber);
		stroke-width: 1.5;
		opacity: 0;
		filter: drop-shadow(0 0 4px rgba(245, 166, 35, 0.8));
	}

	.innov8-csid-hud .path-tick {
		fill: none;
		stroke: var(--steel-4);
		stroke-width: 0.8;
		stroke-dasharray: 2 6;
		opacity: 0.4;
	}

	.innov8-csid-hud .node-ring {
		fill: none;
		stroke: var(--steel-4);
		stroke-width: 1;
	}

	.innov8-csid-hud .node-ring.brand {
		stroke: var(--amber);
		opacity: 0.8;
		filter: drop-shadow(0 0 6px rgba(245, 166, 35, 0.6));
	}

	.innov8-csid-hud .node-core {
		fill: var(--steel-2);
		stroke: var(--steel-5);
		stroke-width: 1;
	}

	.innov8-csid-hud .node-core.brand {
		fill: var(--amber-deep);
		stroke: var(--amber-bright);
		filter: drop-shadow(0 0 8px rgba(255, 180, 71, 0.8));
	}

	.innov8-csid-hud .hex-outer {
		fill: none;
		stroke: var(--steel-4);
		stroke-width: 1.2;
	}

	.innov8-csid-hud .hex-inner {
		fill: rgba(245, 166, 35, 0.04);
		stroke: var(--amber);
		stroke-width: 1;
		opacity: 0.9;
	}

	.innov8-csid-hud .hex-core {
		fill: var(--amber-deep);
		stroke: var(--amber-bright);
		stroke-width: 1.2;
		filter: drop-shadow(0 0 10px rgba(255, 180, 71, 0.7));
	}

	.innov8-csid-hud .hex-tick {
		stroke: var(--amber);
		stroke-width: 1.5;
		stroke-linecap: round;
		opacity: 0.85;
	}

	.innov8-csid-hud .label-mono {
		fill: var(--steel-5);
		font: 600 9px/1 var(--mono);
		letter-spacing: 0.14em;
		text-transform: uppercase;
	}

	.innov8-csid-hud .label-mono.brand {
		fill: var(--amber-bright);
	}

	.innov8-csid-hud .label-mono.dim {
		fill: var(--steel-4);
	}

	.innov8-csid-hud .particle {
		fill: var(--amber-bright);
		filter: drop-shadow(0 0 4px rgba(255, 180, 71, 0.9));
	}

	.innov8-csid-hud .particle-hot {
		fill: var(--amber-hot);
		filter: drop-shadow(0 0 6px rgba(255, 122, 24, 0.9));
	}

	.innov8-csid-hud .particle-red {
		fill: var(--red);
		filter: drop-shadow(0 0 5px rgba(229, 77, 46, 0.8));
	}

	.innov8-csid-hud .particle-yellow {
		fill: var(--yellow);
		filter: drop-shadow(0 0 4px rgba(247, 210, 52, 0.8));
	}

	/* ─── HUD overlay layer ──────────────────────────────────────────── */
	.innov8-csid-hud .hud {
		position: absolute;
		inset: 0;
		pointer-events: none;
		z-index: 6;
		font-family: var(--mono);
		font-size: 10px;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--steel-5);
	}

	/* ─── Corner brackets ────────────────────────────────────────────── */
	.innov8-csid-hud .bracket {
		position: absolute;
		width: 1.75%; /* 28/1600 ≈ 1.75% */
		aspect-ratio: 1;
		border: 1px solid var(--amber);
		opacity: 0.75;
	}

	.innov8-csid-hud .bracket.tl {
		top: 3.1%; /* 28/900 ≈ 3.1% */
		left: 1.75%;
		border-right: none;
		border-bottom: none;
	}

	.innov8-csid-hud .bracket.tr {
		top: 3.1%;
		right: 1.75%;
		border-left: none;
		border-bottom: none;
	}

	.innov8-csid-hud .bracket.bl {
		bottom: 3.1%;
		left: 1.75%;
		border-right: none;
		border-top: none;
	}

	.innov8-csid-hud .bracket.br {
		bottom: 3.1%;
		right: 1.75%;
		border-left: none;
		border-top: none;
	}

	.innov8-csid-hud .bracket::after {
		content: '';
		position: absolute;
		width: 4px;
		height: 4px;
		background: var(--amber);
		border-radius: 50%;
		box-shadow: 0 0 6px var(--amber);
	}

	.innov8-csid-hud .bracket.tl::after {
		top: -2px;
		left: -2px;
	}
	.innov8-csid-hud .bracket.tr::after {
		top: -2px;
		right: -2px;
	}
	.innov8-csid-hud .bracket.bl::after {
		bottom: -2px;
		left: -2px;
	}
	.innov8-csid-hud .bracket.br::after {
		bottom: -2px;
		right: -2px;
	}

	/* ─── HUD data panels ────────────────────────────────────────────── */
	.innov8-csid-hud .hud-panel {
		position: absolute;
		border: 1px solid var(--line);
		background: rgba(10, 12, 16, 0.55);
		backdrop-filter: blur(8px);
		-webkit-backdrop-filter: blur(8px);
		padding: 10px 14px;
		min-width: 180px;
	}

	.innov8-csid-hud .hud-panel .row {
		display: flex;
		justify-content: space-between;
		gap: 12px;
		padding: 2px 0;
	}

	.innov8-csid-hud .hud-panel .row .k {
		color: var(--steel-4);
	}

	.innov8-csid-hud .hud-panel .row .v {
		color: var(--steel-6);
		font-variant-numeric: tabular-nums;
	}

	.innov8-csid-hud .hud-panel .row .v.amber {
		color: var(--amber-bright);
		text-shadow: 0 0 6px rgba(255, 180, 71, 0.5);
	}

	.innov8-csid-hud .hud-panel h4 {
		font-size: 9px;
		color: var(--amber-bright);
		margin-bottom: 6px;
		display: flex;
		align-items: center;
		gap: 8px;
		font-weight: 600;
	}

	.innov8-csid-hud .hud-panel h4::before {
		content: '';
		width: 6px;
		height: 6px;
		background: var(--amber);
		border-radius: 50%;
		box-shadow: 0 0 6px var(--amber);
		animation: hud-blink 1.4s infinite;
		flex-shrink: 0;
	}

	@keyframes hud-blink {
		0%,
		60% {
			opacity: 1;
		}
		61%,
		100% {
			opacity: 0.25;
		}
	}

	/* Panel positions — percentage-based to scale at all container sizes */
	.innov8-csid-hud .hud-tl {
		top: 6.2%;
		left: 3.5%;
	}
	.innov8-csid-hud .hud-tr {
		top: 6.2%;
		right: 3.5%;
		text-align: right;
	}
	.innov8-csid-hud .hud-bl {
		bottom: 6.2%;
		left: 3.5%;
	}
	.innov8-csid-hud .hud-br {
		bottom: 6.2%;
		right: 3.5%;
	}

	/* ─── Center title ───────────────────────────────────────────────── */
	.innov8-csid-hud .hud-title {
		position: absolute;
		top: 6.2%;
		left: 50%;
		transform: translateX(-50%);
		text-align: center;
		white-space: nowrap;
	}

	.innov8-csid-hud .hud-title .eyebrow {
		color: var(--amber-bright);
		font-size: 9px;
		letter-spacing: 0.3em;
	}

	.innov8-csid-hud .hud-title .ttl {
		font-family: var(--sans);
		font-weight: 700;
		font-size: clamp(10px, 1.1vw, 14px);
		color: var(--steel-6);
		letter-spacing: 0.02em;
		text-transform: none;
		margin-top: 4px;
	}

	/* ─── Progress bars ──────────────────────────────────────────────── */
	.innov8-csid-hud .bar {
		height: 3px;
		background: rgba(255, 255, 255, 0.06);
		position: relative;
		margin: 4px 0;
		overflow: hidden;
	}

	.innov8-csid-hud .bar > i {
		position: absolute;
		inset: 0 auto 0 0;
		background: linear-gradient(90deg, var(--amber-deep), var(--amber-bright));
		box-shadow: 0 0 8px rgba(255, 180, 71, 0.6);
		width: 50%;
	}

	/* ─── Event feed ─────────────────────────────────────────────────── */
	.innov8-csid-hud .feed {
		font-size: 9px;
		color: var(--steel-4);
		line-height: 1.6;
		font-variant-numeric: tabular-nums;
		white-space: nowrap;
		text-transform: none;
		letter-spacing: 0.02em;
	}

	.innov8-csid-hud .feed .hot {
		color: var(--amber-bright);
	}
	.innov8-csid-hud .feed .ok {
		color: var(--steel-6);
	}
	.innov8-csid-hud .feed .err {
		color: var(--red);
	}

	/* ─── Radar ──────────────────────────────────────────────────────── */
	.innov8-csid-hud .radar {
		position: relative;
		width: 130px;
		height: 130px;
		flex-shrink: 0;
	}

	.innov8-csid-hud .radar svg {
		width: 100%;
		height: 100%;
	}

	/* ─── Horizontal scan sweep ──────────────────────────────────────── */
	.innov8-csid-hud .sweep {
		position: absolute;
		inset: 0;
		z-index: 4;
		pointer-events: none;
		background: linear-gradient(
			90deg,
			transparent 0%,
			transparent 45%,
			rgba(245, 166, 35, 0.05) 49%,
			rgba(255, 195, 106, 0.18) 50%,
			rgba(245, 166, 35, 0.05) 51%,
			transparent 55%,
			transparent 100%
		);
		mix-blend-mode: screen;
		animation: hud-sweep 8s linear infinite;
	}

	@keyframes hud-sweep {
		0% {
			transform: translateX(-100%);
		}
		100% {
			transform: translateX(100%);
		}
	}

	/* ─── Aurora glows ───────────────────────────────────────────────── */
	.innov8-csid-hud .aurora {
		position: absolute;
		border-radius: 50%;
		filter: blur(70px);
		pointer-events: none;
		z-index: 2;
		mix-blend-mode: screen;
		transform: translate(-50%, -50%);
	}

	.innov8-csid-hud .aurora.a1 {
		width: 32.5%; /* 520/1600 */
		aspect-ratio: 1;
		left: 50%;
		top: 50%;
		background: radial-gradient(circle, rgba(245, 166, 35, 0.55), transparent 62%);
		animation: hud-aura-pulse 6s ease-in-out infinite;
	}

	.innov8-csid-hud .aurora.a2 {
		width: 20%; /* 320/1600 */
		aspect-ratio: 1;
		left: 35%;
		top: 50%;
		background: radial-gradient(circle, rgba(245, 166, 35, 0.28), transparent 62%);
		animation: hud-aura-pulse 8s ease-in-out infinite -2s;
	}

	.innov8-csid-hud .aurora.a3 {
		width: 20%;
		aspect-ratio: 1;
		left: 65%;
		top: 50%;
		background: radial-gradient(circle, rgba(247, 210, 52, 0.22), transparent 62%);
		animation: hud-aura-pulse 7s ease-in-out infinite -4s;
	}

	@keyframes hud-aura-pulse {
		0%,
		100% {
			opacity: 0.7;
			transform: translate(-50%, -50%) scale(1);
		}
		50% {
			opacity: 1;
			transform: translate(-50%, -50%) scale(1.06);
		}
	}

	/* ─── Alert system ───────────────────────────────────────────────── */
	.innov8-csid-hud .alert-aura {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 40%; /* 640/1600 */
		aspect-ratio: 1;
		border-radius: 50%;
		background: radial-gradient(circle, rgba(229, 77, 46, 0.55), transparent 60%);
		filter: blur(60px);
		mix-blend-mode: screen;
		transform: translate(-50%, -50%) scale(0.6);
		opacity: 0;
		pointer-events: none;
		z-index: 2;
		transition:
			opacity 0.18s linear,
			transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
	}

	.innov8-csid-hud .alert-aura.on {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
		animation: hud-alert-aura-blink 0.42s steps(1) infinite;
	}

	@keyframes hud-alert-aura-blink {
		0%,
		49% {
			opacity: 1;
		}
		50%,
		100% {
			opacity: 0.35;
		}
	}

	.innov8-csid-hud .alert-edge {
		position: absolute;
		inset: 0;
		pointer-events: none;
		z-index: 6;
		opacity: 0;
		background: radial-gradient(ellipse at center, transparent 55%, rgba(229, 77, 46, 0.55) 100%);
		transition: opacity 0.18s linear;
	}

	.innov8-csid-hud .alert-edge.on {
		animation: hud-alert-edge-blink 0.42s steps(1) infinite;
	}

	@keyframes hud-alert-edge-blink {
		0%,
		49% {
			opacity: 0.9;
		}
		50%,
		100% {
			opacity: 0.15;
		}
	}

	/* ─── Spin / pulse animations ────────────────────────────────────── */
	/* NOTE: transform-box intentionally NOT set here — these are applied
	   to in-SVG elements that set transform-origin in viewBox user-space
	   coordinates via inline style. transform-box: fill-box would
	   reinterpret those coords as bbox-local. */
	.innov8-csid-hud .spin-slow {
		animation: hud-spin 24s linear infinite;
	}
	.innov8-csid-hud .spin-rev {
		animation: hud-spin 32s linear infinite reverse;
	}
	.innov8-csid-hud .spin-fast {
		animation: hud-spin 8s linear infinite;
	}

	@keyframes hud-spin {
		to {
			transform: rotate(360deg);
		}
	}

	.innov8-csid-hud .pulse {
		animation: hud-pulse 2.4s ease-in-out infinite;
		transform-origin: center;
		transform-box: fill-box;
	}

	@keyframes hud-pulse {
		0%,
		100% {
			opacity: 0.9;
		}
		50% {
			opacity: 0.4;
		}
	}

	.innov8-csid-hud .radar-sweep {
		transform-origin: center;
		animation: hud-spin 4s linear infinite;
	}

	/* ─── Alert state — node / path flash ────────────────────────────── */
	.innov8-csid-hud .hex-outer.alert,
	.innov8-csid-hud .hex-inner.alert {
		stroke: var(--red) !important;
		filter: drop-shadow(0 0 10px rgba(229, 77, 46, 0.95)) drop-shadow(0 0 22px rgba(229, 77, 46, 0.55));
		animation: hud-alert-blink 0.42s steps(1) infinite;
	}

	.innov8-csid-hud .hex-outer.alert {
		fill: rgba(229, 77, 46, 0.08) !important;
	}
	.innov8-csid-hud .hex-inner.alert {
		fill: rgba(229, 77, 46, 0.1) !important;
	}

	.innov8-csid-hud .node-ring.alert {
		stroke: var(--red) !important;
		filter: drop-shadow(0 0 8px rgba(229, 77, 46, 0.9));
		animation: hud-alert-blink 0.42s steps(1) infinite;
	}

	.innov8-csid-hud .node-core.alert {
		fill: var(--red) !important;
		stroke: #ffd1c4 !important;
		filter: drop-shadow(0 0 10px rgba(229, 77, 46, 0.95));
		animation: hud-alert-blink 0.42s steps(1) infinite;
	}

	.innov8-csid-hud .path-base.alert {
		stroke: var(--red) !important;
		stroke-width: 1.6 !important;
		opacity: 0.95 !important;
		filter: drop-shadow(0 0 6px rgba(229, 77, 46, 0.7));
		animation: hud-alert-blink 0.42s steps(1) infinite;
	}

	@keyframes hud-alert-blink {
		0%,
		49% {
			opacity: 1;
		}
		50%,
		100% {
			opacity: 0.25;
		}
	}

	/* ─── Healing state ──────────────────────────────────────────────── */
	.innov8-csid-hud .hex-outer.healing,
	.innov8-csid-hud .hex-inner.healing,
	.innov8-csid-hud .node-ring.healing,
	.innov8-csid-hud .node-core.healing,
	.innov8-csid-hud .path-base.healing {
		animation: hud-heal-pulse 0.9s ease-out 1;
	}

	@keyframes hud-heal-pulse {
		0% {
			filter: drop-shadow(0 0 14px rgba(229, 77, 46, 0.9));
		}
		35% {
			filter: drop-shadow(0 0 18px rgba(255, 180, 71, 1));
		}
		100% {
			filter: drop-shadow(0 0 0px rgba(255, 180, 71, 0));
		}
	}

	/* ─── Alert badge (SVG-floating) ─────────────────────────────────── */
	.innov8-csid-hud .alert-badge text {
		font-family: var(--mono);
		font-size: 10px;
		font-weight: 700;
		letter-spacing: 0.22em;
		fill: var(--red);
	}

	.innov8-csid-hud .alert-badge rect {
		fill: rgba(229, 77, 46, 0.12);
		stroke: var(--red);
		stroke-width: 1;
	}

	.innov8-csid-hud .alert-badge {
		animation: hud-alert-blink 0.42s steps(1) infinite;
	}

	.innov8-csid-hud .alert-badge.healed text {
		fill: var(--amber-bright);
	}

	.innov8-csid-hud .alert-badge.healed rect {
		fill: rgba(245, 166, 35, 0.12);
		stroke: var(--amber-bright);
	}

	.innov8-csid-hud .alert-badge.healed {
		animation: none;
		opacity: 1;
	}

	/* ─── HUD-level alert banner ─────────────────────────────────────── */
	.innov8-csid-hud .hud-alert {
		position: absolute;
		left: 50%;
		top: 9.8%; /* 88/900 */
		transform: translateX(-50%);
		z-index: 30;
		font-family: var(--mono);
		font-size: clamp(9px, 1vw, 12px);
		font-weight: 700;
		letter-spacing: 0.32em;
		padding: 10px 20px;
		color: var(--red);
		background: rgba(8, 9, 12, 0.82);
		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);
		border: 1px solid var(--red);
		text-shadow: 0 0 6px rgba(229, 77, 46, 0.9);
		box-shadow:
			0 0 24px rgba(229, 77, 46, 0.45),
			inset 0 0 16px rgba(229, 77, 46, 0.18);
		opacity: 0;
		pointer-events: none;
		display: flex;
		align-items: center;
		gap: 12px;
		white-space: nowrap;
	}

	.innov8-csid-hud .hud-alert::before {
		content: '';
		width: 7px;
		height: 7px;
		background: var(--red);
		border-radius: 50%;
		box-shadow: 0 0 6px var(--red);
		flex-shrink: 0;
	}

	.innov8-csid-hud .hud-alert.on {
		opacity: 1;
		animation: hud-alert-blink 0.42s steps(1) infinite;
	}

	.innov8-csid-hud .hud-alert.healed {
		opacity: 1;
		color: var(--amber-bright);
		border-color: var(--amber-bright);
		text-shadow: 0 0 6px rgba(255, 180, 71, 0.9);
		box-shadow:
			0 0 24px rgba(255, 180, 71, 0.45),
			inset 0 0 16px rgba(255, 180, 71, 0.18);
		animation: none;
	}

	.innov8-csid-hud .hud-alert.healed::before {
		background: var(--amber-bright);
		box-shadow: 0 0 6px var(--amber-bright);
	}

	/* Alert feed entry colors */
	.innov8-csid-hud .feed .alert {
		color: var(--red);
		text-shadow: 0 0 6px rgba(229, 77, 46, 0.7);
	}
	.innov8-csid-hud .feed .heal {
		color: var(--amber-bright);
	}

	/* ─── Responsive: hide HUD chrome at narrow widths ───────────────── */
	/* At small breakpoints the panels and brackets are too small to read.
	   The network + particle animation still plays; only the overlay chrome
	   hides. At very small viewports the whole HUD degrades to the static
	   hero image shown via the Nunjucks template fallback. */
	@media (max-width: 640px) {
		.innov8-csid-hud .hud-panel,
		.innov8-csid-hud .hud-title,
		.innov8-csid-hud .bracket,
		.innov8-csid-hud .hud-alert {
			display: none;
		}
	}

	/* ─── prefers-reduced-motion ─────────────────────────────────────── */
	/* CSS animations stop; JS checks the media query and skips setInterval
	   loops + requestAnimationFrame ticks when reduced motion is preferred. */
	@media (prefers-reduced-motion: reduce) {
		.innov8-csid-hud .sweep,
		.innov8-csid-hud .spin-slow,
		.innov8-csid-hud .spin-rev,
		.innov8-csid-hud .spin-fast,
		.innov8-csid-hud .pulse,
		.innov8-csid-hud .radar-sweep,
		.innov8-csid-hud .aurora,
		.innov8-csid-hud .hud-panel h4::before,
		.innov8-csid-hud .alert-badge,
		.innov8-csid-hud .hud-alert.on,
		.innov8-csid-hud .path-base.alert,
		.innov8-csid-hud .node-core.alert,
		.innov8-csid-hud .node-ring.alert,
		.innov8-csid-hud .hex-outer.alert,
		.innov8-csid-hud .hex-inner.alert {
			animation: none;
		}
	}
}