/* One finite introduction. The untouched full poster is always the final state. */
.hero .hero-assembly > picture > img {
  animation: none;
}
.hero .hero-assembly > .hero-plane {
  position: absolute;
  pointer-events: none;
  visibility: hidden;
  transition: none;
  will-change: auto;
}
.hero .hero-assembly > .hero-plane img {
  filter: none;
}

@media (prefers-reduced-motion: no-preference) {
  .hero .hero-copy > .eyebrow,
  .hero .hero-copy > h1,
  .hero .hero-copy > .hero-lead,
  .hero .hero-copy > .actions {
    animation: nexus-hero-copy 480ms var(--ease) both;
    --hero-copy-offset: 20px;
  }
  .hero .hero-copy > .eyebrow {
    animation-duration: 450ms;
    --hero-copy-offset: 16px;
  }
  .hero .hero-copy > h1 {
    animation-delay: 70ms;
  }
  .hero .hero-copy > .hero-lead {
    animation-duration: 500ms;
    animation-delay: 140ms;
    --hero-copy-offset: 18px;
  }
  .hero .hero-copy > .actions {
    animation-delay: 210ms;
    --hero-copy-offset: 16px;
  }
  /* Keyboard users never have to wait for the controls to become visible. */
  .hero .hero-copy > .actions:focus-within {
    animation: none;
  }

}

@keyframes nexus-hero-copy {
  from { opacity: 0; transform: translateY(var(--hero-copy-offset)); }
  to { opacity: 1; transform: none; }
}