/* ========================================================================== Circuit / Hexagon Background System - Fixed full-page layer behind all sections (see index.html for markup) - Section backgrounds are transparent (see Pages/*.razor) so this layer is the single, continuous backdrop for the whole site - Glow intensity is driven by the "circuit-scrolling" class toggled on from js/circuitBackground.js ========================================================================== */ :root { --circuit-glow-base: 0.12; --circuit-glow-active: 0.28; } .circuit-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: #0A1628; } .circuit-bg__radial { position: absolute; inset: -10%; background: radial-gradient(ellipse 70% 55% at 50% 32%, rgba(0, 229, 255, 0.07), transparent 65%); } /* One hand-composed scene (not a repeating pattern): a small honeycomb cluster, scaled to cover the viewport via viewBox + "slice" like a background image. */ .circuit-bg__scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .circuit-bg__layer { opacity: var(--circuit-glow-base); transition: opacity 1.6s ease-out; will-change: opacity; } html.circuit-scrolling .circuit-bg__layer { opacity: var(--circuit-glow-active); transition: opacity 0.25s ease-in; } /* Hidden while the Home page's hero (#track) is still in view; fades in once the user has scrolled past it. No-ops on pages without a hero. */ html.circuit-hero-active .circuit-bg__hexes { opacity: 0; } .circuit-hex-fill { fill: #00E5FF; stroke: #00E5FF; stroke-width: 1; stroke-opacity: 0.35; } .circuit-node--pulse { animation: circuit-node-pulse 4.5s ease-in-out infinite; } @keyframes circuit-node-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } } /* ========== Circuit Divider (between sections) ========== */ .circuit-divider { position: relative; width: 100%; height: 56px; margin: -1px 0; overflow: visible; pointer-events: none; z-index: 5; } .circuit-divider-svg { width: 100%; height: 100%; display: block; overflow: visible; } .circuit-divider-svg path, .circuit-divider-svg circle { fill: none; stroke: #00E5FF; stroke-width: 1.8; stroke-opacity: var(--circuit-glow-base); transition: stroke-opacity 1.6s ease-out; } html.circuit-scrolling .circuit-divider-svg path, html.circuit-scrolling .circuit-divider-svg circle { stroke-opacity: var(--circuit-glow-active); transition: stroke-opacity 0.25s ease-in; } /* ========== Mobile: simplify ========== */ @media (max-width: 768px) { :root { --circuit-glow-active: 0.22; } .circuit-divider { height: 34px; } } /* ========== Reduced motion ========== */ @media (prefers-reduced-motion: reduce) { .circuit-bg__layer, .circuit-divider-svg path, .circuit-divider-svg circle { transition: none !important; } .circuit-node--pulse { animation: none !important; } }