/* base.css — reset, self-hosted fonts, and the persistent atmosphere layers
   (ported from glory-storm-background.html; colors point at tokens.css).
   Layers (back → front):
     firewash → glory ring → cloud veil → embers(canvas) → storm(canvas:
     bolts + rain + smoke) → #shake [page content] → lightning flash
     → vignette → grain                                                    */

/* ---------- fonts (self-hosted woff2, never CDN) ---------- */
@font-face{
  font-family:'Barlow Condensed';
  font-weight:600; font-style:normal; font-display:swap;
  src:url('../assets/fonts/barlow-condensed-600.woff2') format('woff2');
}
@font-face{
  font-family:'Barlow Condensed';
  font-weight:700; font-style:normal; font-display:swap;
  src:url('../assets/fonts/barlow-condensed-700.woff2') format('woff2');
}
@font-face{
  font-family:'Barlow Condensed';
  font-weight:900; font-style:normal; font-display:swap;
  src:url('../assets/fonts/barlow-condensed-900.woff2') format('woff2');
}
@font-face{
  font-family:'Barlow';
  font-weight:400; font-style:normal; font-display:swap;
  src:url('../assets/fonts/barlow-400.woff2') format('woff2');
}
@font-face{
  font-family:'Barlow';
  font-weight:600; font-style:normal; font-display:swap;
  src:url('../assets/fonts/barlow-600.woff2') format('woff2');
}

/* ---------- reset ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--cream);
  font-family:var(--body),system-ui,sans-serif;
  overflow-x:hidden;
}

/* ---------- skip link (scroll-jacked stretch escape hatch) ---------- */
.skip-link{
  position:fixed;left:12px;top:12px;z-index:100;
  padding:10px 16px;border-radius:999px;
  font:600 13px/1 var(--body),sans-serif;letter-spacing:.06em;
  color:var(--ink);background:var(--gold2);
  transform:translateY(-64px);opacity:0;transition:.2s;
}
.skip-link:focus-visible{transform:none;opacity:1}

/* ---------- atmosphere layers ---------- */
.firewash{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(130% 78% at 50% 6%, rgba(84,26,5,.92) 0%, rgba(26,11,4,.55) 46%, rgba(11,6,3,.15) 74%),
    radial-gradient(120% 70% at 50% 104%, rgba(70,22,4,.7) 0%, rgba(11,6,3,0) 60%);}
.ring{position:fixed;left:50%;top:40%;width:min(150vh,1500px);aspect-ratio:1;z-index:0;
  transform:translate(-50%,-50%) scale(.8);pointer-events:none;opacity:.55;
  background:radial-gradient(circle, rgba(255,208,74,0) 34%, rgba(255,178,0,.4) 47%,
    rgba(255,90,18,.26) 56%, rgba(255,90,18,0) 70%);
  filter:blur(4px);mix-blend-mode:screen;}
/* darkens the firewash/ring behind it as params.cloud rises (storm.js) —
   part of the one persistent atmosphere, not a per-section background;
   opacity is 0 outside sections that raise cloud, same as warmth/brightness */
.cloudveil{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;
  background:radial-gradient(120% 80% at 50% 45%, rgba(6,4,7,.88) 0%,
    rgba(6,4,7,.6) 55%, rgba(6,4,7,0) 88%);}
#embers{position:fixed;inset:0;z-index:1;pointer-events:none}
#storm{position:fixed;inset:0;z-index:2;pointer-events:none}

/* page content sits between the storm canvases and the flash.
   No will-change:transform here: it silently makes #shake a containing
   block for position:fixed descendants (even with no active transform),
   which breaks GSAP ScrollTrigger's native fixed-position pin — the pinned
   element scrolls with the page instead of holding. Losing the hint costs
   one negligible reflow on the very first lightning-shake; keeping it costs
   every pinned section a JS-recalculated (non-compositor) pin instead of
   the smooth, GPU-only native one. See docs/BUILD-PLAN.md Phase 2 notes. */
#shake{position:relative;z-index:3}

/* lightning flash — screen-blended so it lights everything above the base */
.flash{position:fixed;inset:0;z-index:4;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:linear-gradient(180deg, rgba(219,232,255,1) 0%, rgba(150,185,255,.55) 55%, rgba(120,150,230,.15) 100%);}

.vignette{position:fixed;inset:0;z-index:5;pointer-events:none;
  background:radial-gradient(125% 85% at 50% 42%, transparent 52%, rgba(0,0,0,.78) 100%);}
.grain{position:fixed;inset:0;z-index:6;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .grain{opacity:.03}
}