/* Mirror the cinematic reveal when the React overlay switches to openingDone. */
.openingDone + main .heroImage {
  animation: hero-arrival 2.2s cubic-bezier(.2, .75, .2, 1) both;
}

.openingDone + main .heroCopy > * {
  animation: hero-copy-in .85s cubic-bezier(.2, .8, .2, 1) forwards;
}

.openingDone + main .heroCopy > :nth-child(1) { animation-delay: .3s; }
.openingDone + main .heroCopy > :nth-child(2) { animation-delay: .42s; }
.openingDone + main .heroCopy > :nth-child(3) { animation-delay: .57s; }
.openingDone + main .heroCopy > :nth-child(4) { animation-delay: .7s; }

.openingDone + main .topbar {
  animation: nav-arrival .8s .65s ease forwards;
}

.openingDone + main .heroMeta {
  animation: meta-arrival .8s .85s ease forwards;
}

@media (prefers-reduced-motion: reduce) {
  .openingDone + main .heroImage,
  .openingDone + main .heroCopy > *,
  .openingDone + main .topbar,
  .openingDone + main .heroMeta {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}