/* ============================================================
   HERO · SCENES  (the copy blocks that scroll over the 3D scene)
   These carry the hero's own type scale so they never collide
   with the flat-section scale in css/02-typography.css.
   ============================================================ */
#stage3d{position:relative;z-index:4}

/* STICKY STAGES.
   Each scene pins to the top of the viewport, so a later scene paints cleanly
   OVER the previous one instead of the two scrolling past each other. Before
   this, two copy blocks shared the viewport at almost every scroll position
   (measured: a dead 50/50 split at p=0.25), which is what made the headlines
   look like they were clashing behind the laptop.

   Opacity is driven per-scene by js/ui/scene-copy.js, keyed to the same
   timeline as the 3D, so exactly one block is legible at a time. */
.scene{
  position:sticky;top:0;height:100svh;
  display:flex;align-items:center;
  padding:120px clamp(24px,9vw,144px) 80px;
  opacity:var(--fade,1);
  transition:opacity .45s linear;
}
/* a faded-out stage must not swallow clicks meant for the one on top */
.scene[data-faded="1"]{pointer-events:none}
.scene.right{justify-content:flex-end;text-align:right}
.scene.mid{justify-content:center;text-align:center}

.copy{max-width:600px}
.copy.narrow{max-width:380px}
.scene.mid .copy{max-width:720px}

/* hero kicker (scoped so the dark hero keeps the light-blue label) */
.scene .kick{font-size:clamp(10px,1.1vw,11px);letter-spacing:.16em;color:var(--b300)}
.scene .kick i{width:34px;height:1px;background:var(--onblue);display:block;flex:0 0 auto}
.scene.right .kick{justify-content:flex-end}
.scene.mid .kick{justify-content:center}

/* Hero headings.
   The vw cap is 5vw (was 8vw) and there is a hard 13vh ceiling. At 8vw a
   1395px-wide window rendered the h1 at 100px, which wrapped to FOUR lines and
   made the copy 856px tall — 403px more than the stage had room for. A centred
   flex box splits that overflow, so the headline rose to y=-43px and sat on top
   of the nav brand mark and the menu links. The vh term keeps it in bounds on
   short windows; 68px keeps each line inside the 600px copy column. */
h1{font-family:Archivo;font-weight:800;
  font-size:min(clamp(34px,5vw,68px),13vh);
  letter-spacing:-.035em;line-height:1.0;margin:20px 0 20px}
#stage3d h2{font-family:Archivo;font-weight:800;
  font-size:min(clamp(28px,4.4vw,54px),11.5vh);
  letter-spacing:-.03em;line-height:1.04;margin:18px 0 16px}

.lead{color:var(--dim);font-size:clamp(15px,1.6vw,19px);line-height:1.62;max-width:520px}
.scene.right .lead{margin-left:auto}
.scene.mid .lead{margin:0 auto}
.accent{color:var(--b300)}

.scene .btns{margin-top:32px}
.scene.mid .btns{justify-content:center}

/* stat row */
.stats{display:flex;gap:clamp(22px,5vw,60px);margin-top:clamp(36px,5vw,54px);flex-wrap:wrap}
.stats b{font-family:Archivo;font-weight:700;font-size:clamp(24px,4vw,40px);
  letter-spacing:-.03em;display:block}
.stats span{font-family:'Geist Mono',monospace;font-size:clamp(9px,1vw,10px);
  letter-spacing:.14em;color:var(--b300);display:block;margin-top:7px}

/* chip row (available for a scene that needs it) */
.chips{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.chips span{font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:.14em;
  color:var(--dim);border:1px solid var(--onblue);border-radius:3px;padding:8px 13px}

/* scroll cue */
.cue{position:absolute;left:50%;translate:-50% 0;bottom:26px;
  font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:.16em;color:#7d88b8;
  text-transform:uppercase;animation:bob 2.4s ease-in-out infinite}
@keyframes bob{
  0%,100%{transform:translateY(0);opacity:.6}
  50%{transform:translateY(7px);opacity:1}
}

/* SHORT WINDOWS.
   Two safeguards so the copy can never reach the nav again:
   1. tighten the vertical rhythm so the content fits the stage
   2. top-align the hero (its block is the tallest), so any residual overflow
      goes DOWNWARD off-screen instead of upward under the fixed header */
@media(max-height:820px){
  .scene{padding-top:clamp(92px,14vh,120px);padding-bottom:52px}
  .scene[data-s="1"]{align-items:flex-start}
  .scene h1{margin:12px 0 14px}
  #stage3d h2{margin:10px 0 12px}
  .scene .lead{font-size:clamp(14px,1.3vw,16.5px);line-height:1.55}
  .scene .btns{margin-top:20px}
  .stats{margin-top:clamp(18px,3vh,30px);gap:clamp(18px,3.2vw,42px)}
  .stats b{font-size:clamp(19px,2.8vw,30px)}
  .stats span{margin-top:5px}
  .cue{display:none}          /* no room for it, and it duplicates the scrollbar */
}

@media(max-width:900px){
  .scene{padding:96px 30px 72px}
}
@media(max-width:400px){
  .scene{padding-left:24px;padding-right:24px}
}
@media(prefers-reduced-motion:reduce){
  .cue{animation:none}
}