/* NEW-HAND storyboard. Remove data-scene="dunes" to return to the original intro. */
html[data-scene="dunes"] { --hero-pin: 720vh; /* 960vh -> 720vh: the hero read as too long; every beat 25% shorter, the curve untouched */ --story-why-tail: 0.0108695652173913; }
html[data-scene="dunes"] .hero-content,
html[data-scene="dunes"] .hero-partners {
  visibility: visible;
  transition: visibility 0s;
}
/* Initial reveal belongs to ui.js, independently of the 3D model or scroll. */
html[data-scene="dunes"] .story-copy-out .hero-content,
html[data-scene="dunes"] .story-copy-out .hero-partners {
  visibility: hidden;
  pointer-events: none;
  transition-delay: 0.85s; /* let the existing line masks finish, even at rest */
}
/* Overlap the empty tail of the hero, so Why us is already pinned at EQ completion. */
html[data-scene="dunes"] .s-why {
  margin-top: calc(-100vh - var(--hero-pin) * var(--story-why-tail));
  /* Native and smooth-scroll anchors must cross the EQ handoff despite pixel rounding. */
  scroll-margin-top: -1px;
}
html[data-scene="dunes"]:not(.story-why-active) .s-why {
  pointer-events: none;
}
/* The section does not wipe itself open: it is simply not there until the hand has
   finished becoming the EQ and the hero's copy has left (story-why-in at EQ completion
   -- story-handoff.js). At that instant its text is still under its own masks,
   so what plays is the page's standard rise, in view. Wiping the whole block open, as this
   used to, spent that rise behind the clip and the phrase was simply there. */
html[data-scene="dunes"] .why-head,
html[data-scene="dunes"] .waveform { visibility: hidden; }
html[data-scene="dunes"].story-why-in .why-head,
html[data-scene="dunes"].story-why-in .waveform { visibility: visible; }

/* ...and the phrases wait under their masks until then, with no transition to unwind */
html[data-scene="dunes"]:not(.story-why-in) .why-line .rli {
  transform: translateY(110%);
  transition: none;
}
/* The terrain itself becomes the waveform; keep the existing player and labels. */
html[data-scene="dunes"] .wave-ribbon { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  html[data-scene="dunes"] { --hero-pin: 200vh; }
  html[data-scene="dunes"] .why-head,
  html[data-scene="dunes"] .waveform,
  html[data-scene="dunes"] .why-line .rli,
  html[data-scene="dunes"] .hero-content,
  html[data-scene="dunes"] .hero-partners { transition: none !important; }
}