/* Phone intro (Oct 2026, Simon). On a phone standing up, the galaxy used to build in a strip at the top with black below.
   Now: stardust drifts in while the film loads, the galaxy fills the screen while it swirls, the word forms at its final
   size (intro.js pulls the camera back as the letters gather), then rises into its place at the top, the copy underneath. */
.hero-loader { display: none; }

@media (max-width: 680px) and (max-aspect-ratio: 1/1) {
  .films .hero-loader { display: grid; place-items: center; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    transition: opacity .5s var(--ease-exit); animation: introLoaderOut .5s var(--ease-exit) 4s forwards; }   /* never longer than the poster's own wait */
  .hero-loader canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
  .films .hero:has(.hero-film.is-live) .hero-loader, .films .hero:has(.hero-film.is-failed) .hero-loader, .hero-go .hero-loader { opacity: 0; }
  .films .hero:not(:has(.hero-film.is-live)) .hero-hint { opacity: 0; }   /* "playing live" only once it is */

  /* fill the screen while it builds: intro.js sets --is (scale) and --ity (lift) so the film's box covers the hero */
  .films .hero-film { transform: translate3d(0, var(--ity, 0px), 0) scale(calc(var(--hs, 1) * var(--is, 1))); transform-origin: 50% 50%; }
  .films:not(.hero-settled) .hero-film { transition: transform 1.1s var(--ease-arrive); }
  /* the copy waits a beat so it rises under a film that has already made it most of the way home */
  .films .hero .in { animation-delay: calc(var(--d, 0s) + .55s); }
}
@keyframes introLoaderOut { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hero-loader { display: none !important; } }