/* V4B: source-inspected timing restoration — deliberately additive.
 * The original page pins its hero for ~500vh; the standalone V4A hero
 * had a shorter travel. In reference mode restore the long scrub distance
 * WITHOUT modifying the core frame/stacking scroll calculations.
 */
@media (prefers-reduced-motion: no-preference) {
  html.jsrm-reference-timing .hero-section,
  html.jsrm-reference-timing .hero-section.container {
    height: 600svh !important; /* one viewport high + 500vh of scroll travel */
  }
  html.jsrm-reference-timing .jsrm-word-reel {
    animation-name: jsrmReferenceReel !important;
    animation-duration: 8s !important; /* 4 words × 2s, from the original */
    animation-delay: .6s !important;
    animation-timing-function: ease !important;
  }
}
/* Preserve a usable reading distance and shorter motion on small screens. */
@media (max-width: 950px) and (prefers-reduced-motion: no-preference) {
  html.jsrm-reference-timing .hero-section,
  html.jsrm-reference-timing .hero-section.container { height: 510svh !important; }
}
@media (max-width: 650px) and (prefers-reduced-motion: no-preference) {
  html.jsrm-reference-timing .hero-section,
  html.jsrm-reference-timing .hero-section.container { height: 390svh !important; }
}
/* Based on the page component's actual 0 / 25 / 50 / 75 / 100 keyframes:
 * unlike the approximate V4A hold-and-jump reel, each word slides through
 * its full upward movement in the two-second slot. */
@keyframes jsrmReferenceReel {
  0%   { transform: translateY(0); }
  25%  { transform: translateY(-1.10em); }
  50%  { transform: translateY(-2.20em); }
  75%  { transform: translateY(-3.30em); }
  100% { transform: translateY(-4.40em); }
}