/* ============================================================
   ARUNA · scroll scenes (A7) — css/scenes.css
   Only what js/scenes.js needs on top of css/aruna.css (A4):
   no layout here, and no `transform` on anything GSAP animates.
   ============================================================ */

/* The wordmark widens its tracking to .55em while it leaves: it must never wrap mid-animation. */
.hero-title { white-space: nowrap; }

/* Pin safety: a 100svh stage pinned while a mobile toolbar collapses leaves a strip below it
   that shows the pin spacer. Paint it the stage colour instead of the ivory page. */
.hero > .pin-spacer,
.walk > .pin-spacer { background: var(--cjp-charcoal, #211E1A); }
@media (max-width: 899px) and (orientation: portrait) { /* the whole walk section is pinned there, on the ivory page (css/aruna.css) */
  main > .pin-spacer { background: transparent; }
}

/* Compositor hints for the layers the scrub changes every frame (motion only). */
body.has-motion .hero-fog { will-change: opacity, transform; }
body.has-motion .walk-item picture { will-change: transform; }

/* ---- walk, frames mode (scenes.js adds .is-frames / .is-frames-live to #walk) ----
   The canvas draws the sequence; the figures stay up only to carry their captions above it.
   Until the first pass of frames is decoded, stage 1's still is the poster. display:none (not
   visibility) also keeps the lazy stills 2-7 from downloading at all. */
.walk.is-frames .walk-stills { z-index: 2; }
.walk.is-frames .walk-item picture { display: none; }
.walk.is-frames:not(.is-frames-live) .walk-item[data-stage="1"] picture { display: block; }