/* ============================================================
   HERO · OVERLAYS  (film grain, vignette, progress bar)
   Opacities are animated by js/loop.js as you scroll.

   ---- HERO STACKING ORDER (single source of truth) ----
     0  #gl / #staticmark   the 3D canvas
     1  #grain              film grain
     2  #vig                vignette
     3  #chips              floating UI chips
     4  #stage3d            scene copy (sticky)
     4  #zoom / #deck       the laptop and the page inside it. Same level as
                            the scene copy and AFTER it in the document, so
                            it scrolls up over the 3D without needing to be
                            lifted above it
     7  #bridge / #flat     the flat page below

   #whiteout is gone. It existed to cover the 3D while a white DOM panel
   took over from a WebGL texture; there is no such hand-off any more.
   Every value below is part of that ladder — change them together.
   ============================================================ */

/* Film grain over the 3D scene. Kept light — at .14 it visibly hazed the
   laptop display. If you change this, change the multiplier in js/loop.js too. */
#grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* Vignette darkening the edges. The clear centre is pushed out to 62% and the
   edge softened from .86 -> .55: this overlay is FIXED while the camera drifts
   with the cursor, so a hard vignette reads as a spotlight tracking the mouse. */
#vig{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,transparent 62%,rgba(0,10,61,.55) 100%);
}

/* top scroll-progress bar */
#bar{position:fixed;left:0;top:0;height:3px;background:var(--b500);width:0;z-index:70}