/* ═══════════════════════════════════════════════════════════════════
   TOONSHEAD — scroll cinematic layer (ADDITIVE).
   Pairs with scroll.js. index.html gets 2 wiring lines + a no-js class.
   styles.css / app.js are NOT touched (md5 identical).
   Motif matches the site: chunky plastic snaps in like a cel, the
   figure rides on the water (parallax), the counts get pressed out
   one unit at a time, and a bowl-blue depth meter tracks how far in
   you've gone.  With JS off or reduced-motion on, everything is at
   its real resting position — motion is a bonus, legibility is the
   product.
   ═══════════════════════════════════════════════════════════════════ */

/* ── no-JS / error guard: content is ALWAYS visible unless JS opts in ── */
.no-js .rv,
.no-js .rv-st > *{ opacity:1 !important; transform:none !important; }

/* ── scroll-depth meter: a bowl-blue press gauge across the very top ── */
#sprog{
  position:fixed; left:0; top:0; height:5px; width:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:var(--bowl);
  box-shadow:0 2px 0 var(--ink);
  z-index:41; pointer-events:none;
  will-change:transform;
}

/* ── reveal: parts snap up into their real slot, toon-bounce ── */
.rv{
  opacity:0;
  transform:translateY(26px) rotate(-1deg);
  transition:opacity .5s ease, transform .62s cubic-bezier(.34,1.56,.64,1);
  will-change:opacity, transform;
}
.rv.in{ opacity:1; transform:none; }

/* ── staggered containers: each child lands a beat after the last ── */
.rv-st > *{
  opacity:0;
  transform:translateY(30px) rotate(-1.2deg);
  transition:opacity .48s ease, transform .6s cubic-bezier(.34,1.56,.64,1);
  will-change:opacity, transform;
}
.rv-st.in > *{ opacity:1; transform:none; }
.rv-st.in > *:nth-child(1){ transition-delay:0s }
.rv-st.in > *:nth-child(2){ transition-delay:.08s }
.rv-st.in > *:nth-child(3){ transition-delay:.16s }
.rv-st.in > *:nth-child(4){ transition-delay:.24s }
.rv-st.in > *:nth-child(5){ transition-delay:.32s }
.rv-st.in > *:nth-child(6){ transition-delay:.40s }

/* ── the hero figure rides the water: subtle parallax drift ──
   .figure has no base transform (the .fbody inside carries the
   rotate + hover), so translating the wrapper never fights it. */
.figure{ transform:translate3d(0,var(--par,0px),0); will-change:transform; }

/* count-up numbers must not jitter in width while ticking */
.chip-n strong{ font-variant-numeric:tabular-nums; }

/* ── degrade: reduced-motion lands everything, kills the meter ──
   (styles.css already zeroes animation/transition durations; this
   just guarantees the resting frame and hides motion-only chrome.) */
@media(prefers-reduced-motion:reduce){
  .rv,.rv-st > *{ opacity:1 !important; transform:none !important; transition:none !important; }
  .figure{ transform:none !important; }
  #sprog{ display:none; }
}