/* Let the first hero scene begin beneath the opening panels.
   This avoids a second blank-to-content transition after the doors finish. */
html.intro-playing .exact-hero-image{
  animation:hero-cinematic-zoom 8s 1.55s cubic-bezier(.2,.65,.3,1) both;
}
html.intro-playing .hero-opening-copy>p{
  animation:hero-copy-rise .7s 1.55s cubic-bezier(.2,.65,.3,1) forwards;
}
html.intro-playing .hero-opening-copy h1{
  animation:hero-copy-rise .85s 1.7s cubic-bezier(.2,.65,.3,1) forwards;
}
html.intro-playing .hero-opening-copy>span{
  animation:hero-copy-rise .8s 1.86s cubic-bezier(.2,.65,.3,1) forwards;
}
html.intro-playing .hero-opening-meta{
  animation:hero-meta-in .75s 2.02s cubic-bezier(.2,.65,.3,1) forwards;
}
html.intro-playing .scroll-follow{
  animation:hero-scroll-in .65s 2.15s ease forwards;
}

/* The original intro-complete rules replayed the hero after the panels had
   opened. Hold the completed first frame instead, so there is no flicker. */
html.intro-complete .exact-hero-image{animation:none;transform:scale(1)}
html.intro-complete .hero-opening-copy>p,
html.intro-complete .hero-opening-copy h1,
html.intro-complete .hero-opening-copy>span{animation:none;opacity:1;transform:none;filter:none}
html.intro-complete .hero-opening-meta{animation:none;opacity:1;transform:none}
html.intro-complete .scroll-follow{animation:none;opacity:1;transform:rotate(-90deg)}

/* Keep the departing overlay composited until it is removed. */
.opening-intro{will-change:transform,opacity}
.opening-logo{display:block;width:min(340px,56vw);height:auto;margin:0 auto 25px;opacity:0;transform:translateY(12px) scale(.97);animation:opening-logo-in .72s .45s cubic-bezier(.2,.75,.3,1) forwards}
@keyframes opening-logo-in{to{opacity:1;transform:none}}

@media (prefers-reduced-motion: reduce){
  html.intro-playing .exact-hero-image,
  html.intro-playing .hero-opening-copy>p,
  html.intro-playing .hero-opening-copy h1,
  html.intro-playing .hero-opening-copy>span,
  html.intro-playing .hero-opening-meta,
  html.intro-playing .scroll-follow{animation-duration:.01ms;animation-delay:0s}
  .opening-logo{animation-duration:.01ms;animation-delay:0s}
}