/* --- Entrance choreography ------------------------------------------------ */

.rise { opacity: 0; transform: translateY(18px); }
.mask > span { transform: translateY(105%); }

@media (prefers-reduced-motion: no-preference) {
  .mask > span {
    animation: unmask 1.05s var(--ease) forwards;
    animation-delay: calc(var(--i, 0) * 95ms + 120ms);
  }
  .rise {
    animation: rise 0.9s var(--ease) forwards;
    animation-delay: calc(var(--i, 0) * 95ms + 320ms);
  }
  @keyframes unmask { to { transform: translateY(0); } }
  @keyframes rise   { to { opacity: 1; transform: translateY(0); } }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise { opacity: 1; transform: none; }
  .mask > span { transform: none; }
  .beat { opacity: 1; }
  .stage__frame .plate { transition: none; transform: none; }
  /* The films are not started for a reduced-motion reader — the poster stands
     until Play is pressed (see story-clips.js) — and a pointer that flies
     around the screen is exactly what was asked not to happen. */
  .clip-cursor { display: none; }
  .clip__video { cursor: pointer; }
  .clip__btn { transition: none; }
  .beats__progress { transition: none; }
  .btn, .btn .arw, .header, .cap { transition: none; }

  /* Unpin the reel: the video holds its poster, the captions stack. With the
     stack back in flow the box has to be allowed to grow, or all three
     captions get clipped at one viewport. */
  .reel__sticky { position: relative; height: auto; min-height: 100dvh; }
  .reel__steps { display: none; }
  .reel__stack {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(2.5rem, 6vh, 4rem);
    justify-content: center;
    min-height: 100dvh;
  }
  .cap { opacity: 1; visibility: visible; transform: none; max-width: 46ch; }
  .reel__cue { display: none; }

  /* Same for the setting: 300dvh of pinned still frame would be three screens
     of nothing. Collapse it to a single ordinary block. */
  .film { height: auto; }
  .film__sticky { position: relative; height: auto; min-height: 100dvh; }
  .film__inner {
    position: relative;
    opacity: 1;
    transform: none;
    transition: none;
    min-height: 100dvh;
  }
}