/* Chapter 01, "After hours": the h1 and the first two doors. The headline
   paints from the first frame (it is the LCP element), so nothing here waits
   for the film bundle and the entrance only moves it, it never hides it. */
.sh-ch--hero .sh-ch__head { max-width: min(58vw, 820px); }
.sh-ch--hero .sh-ch__foot { max-width: 460px; }
.sh-ch--hero .sh-ch__cta .sh-btn { min-height: 48px; padding: 0 22px; font-size: 15px; }
.sh-ch--hero .sh-ch__micro { max-width: 34em; }
html.film-live .sh-ch--hero .sh-ch__head, html.film-live .sh-ch--hero .sh-ch__foot { animation: sh-hero-in .9s var(--sh-ease-out) both; }
html.film-live .sh-ch--hero .sh-ch__foot { animation-delay: .12s; }
@keyframes sh-hero-in { from { transform: translateY(14px); } }
.sh-film__cue::after { content: ""; width: 1px; height: 12px; background: linear-gradient(var(--sh-fg-2), transparent); }
html.sh-ambient .sh-film__cue::after { animation: sh-cue 1.8s ease-in-out infinite; }
@keyframes sh-cue { 0% { transform: scaleY(.2); transform-origin: top; } 60% { transform: scaleY(1); transform-origin: top; } 100% { opacity: 0; } }
@media (max-width: 767px) and (orientation: portrait) {
  .sh-ch--hero .sh-ch__head { max-width: none; }
  .sh-ch--hero .sh-ch__foot { max-width: none; }
  .sh-ch--hero .sh-ch__cta .sh-btn { min-height: 48px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .sh-ch--hero .sh-ch__head, .sh-ch--hero .sh-ch__foot { animation: none !important; } }