/* V1: reserve the measured heading height before the animated stage. */
.hero-pin {
  --hero-head-bottom: 320px;
  --hero-stage-gap: 24px;
  --hero-clear-top: calc(var(--hero-head-bottom) + var(--hero-stage-gap));
  min-height: max(720px, calc(var(--hero-clear-top) + 320px));
}
.hero-theatre {
  /* Keep the clearance until the intro is fully transparent (hp >= 1 / 2.2).
     The original expansion continues after that, reaching its original end state. */
  top: max(
    calc(var(--stage-top) * (1 - var(--stage-open))),
    calc(var(--hero-clear-top) * (1 - clamp(0, (var(--hp) - .46) / .54, 1)))
  );
}
.hero-word { top: max(57%, calc(var(--hero-clear-top) + 24px)); }
@media (max-width: 1100px) {
  .hero-word { top: max(60%, calc(var(--hero-clear-top) + 24px)); }
}
@media (max-width: 760px) {
  .hero-pin { min-height: max(600px, calc(var(--hero-clear-top) + 320px)); }
  .hero-word { top: max(50%, calc(var(--hero-clear-top) + 24px)); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-theatre { top: max(34svh, var(--hero-clear-top)); }
  .hero-a { min-height: max(100svh, calc(var(--hero-clear-top) + 60svh)); }
  .hero-word { top: max(61svh, calc(var(--hero-clear-top) + 24px)); }
}