/* ═══════════════════════════════════════════════════════════
   Signal-Reveal hero — DEMO overlay (loads after styles.css)
   Replaces the generative #hero-canvas with a cursor "denoise" lens:
   base = jagged grey market noise; the soft lens reveals the SAME
   series as a clean mint signal (smoothed curve + glow + grid).
   The existing .hero-inner text/CTAs sit on top, unchanged.
   Mask = pure CSS radial-gradient driven by --sr-mx/--sr-my vars.
   ═══════════════════════════════════════════════════════════ */
/* ── Corridor (calm): scroll-fly-forward 3D scene as the deep background, BELOW the fold.
   #scene fixed behind content; body transparent so it shows through the (transparent)
   sections; the hero keeps an OPAQUE bg so the corridor stays hidden behind the pure
   denoise hero and only appears as you scroll past it. */
#scene{ position:fixed; inset:0; width:100%; height:100%; z-index:-1; display:block; pointer-events:none; }
body{ background:transparent; }
#hero{ position:relative;
  background:
    radial-gradient(1100px 600px at 85% -8%, rgba(var(--accent-rgb),.07), transparent 60%),
    radial-gradient(900px 520px at -10% 38%, rgba(74,163,255,.045), transparent 60%),
    var(--bg);
  --sr-mx:50%; --sr-my:42%; --sr-r:260px; cursor:none;
}
#hero.sr-touch{ cursor:auto; }

/* layer stack sits where the old canvas was (low z); text/veils overridden above */
.sr-layer{ position:absolute; inset:0; }
#sr-noise{ z-index:1; }
.sr-signal{ z-index:2;
  -webkit-mask-image:radial-gradient(circle var(--sr-r) at var(--sr-mx) var(--sr-my),#000 0%,#000 40%,rgba(0,0,0,.75) 60%,rgba(0,0,0,.4) 75%,rgba(0,0,0,.12) 88%,transparent 100%);
          mask-image:radial-gradient(circle var(--sr-r) at var(--sr-mx) var(--sr-my),#000 0%,#000 40%,rgba(0,0,0,.75) 60%,rgba(0,0,0,.4) 75%,rgba(0,0,0,.12) 88%,transparent 100%);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
.sr-signal .sr-grid{ position:absolute; inset:0; opacity:.85;
  background-image:radial-gradient(rgba(var(--accent-rgb),.32) 1.1px,transparent 1.3px);
  background-size:46px 46px; background-position:23px 23px;
}
#sr-signal-canvas{ position:absolute; inset:0; }

/* cursor lens ring (affordance) */
.sr-lens{ position:absolute; left:var(--sr-mx); top:var(--sr-my);
  width:calc(var(--sr-r) * 2); height:calc(var(--sr-r) * 2);
  transform:translate(-50%,-50%); border-radius:50%; z-index:3; pointer-events:none;
  opacity:0; transition:opacity .4s ease;
  border:1px solid rgba(var(--accent-rgb),.26);
  box-shadow:inset 0 0 60px rgba(var(--accent-rgb),.09), 0 0 30px rgba(var(--accent-rgb),.07);
}
#hero.sr-armed .sr-lens{ opacity:1; }

/* GUARANTEE the existing hero content stays above the reveal layers,
   independent of styles.css z-values (this sheet loads after it). */
#hero .hero-veil{ z-index:4; }
#hero .hero-inner{ position:relative; z-index:5; }
#hero .scroll-cue{ z-index:5; }
#hero .ticker-strip{ z-index:5; }

@media (prefers-reduced-motion:reduce){ .sr-lens{ transition:none; } }

/* ── Loader storm: lightning + thunder around the boot logo (loader-storm.js) ── */
#loader-bolts{ position:absolute; inset:0; z-index:1; pointer-events:none; }
#loader .loader-flash{ position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0;
  mix-blend-mode:screen;
  background:radial-gradient(55% 42% at 50% 34%, rgba(210,235,255,.85), rgba(74,163,255,.22) 45%, transparent 72%); }
/* electrified boot logo — glow follows --glow set by loader-storm.js (logoFloat still runs) */
#loader .loader-hero-logo{
  filter:
    drop-shadow(0 0 calc(14px + var(--glow,0)*42px) rgba(var(--accent-rgb), calc(.4 + var(--glow,0)*.45)))
    drop-shadow(0 0 calc(26px + var(--glow,0)*66px) rgba(74,163,255, calc(.16 + var(--glow,0)*.42))); }
@media (prefers-reduced-motion:reduce){ #loader-bolts,#loader .loader-flash{ display:none; } }