/* Entrance motion for the first view. Everything below rises in once the
   splash has started to leave, not while it is still covering the page.
   Per-element delays live next to the element (header.css, hero.css). */

@keyframes rise {
  from {
    opacity: 0;
    transform: translate3d(0, 1rem, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

header,
.hero h1 > span,
.hero > p,
.hero > div {
  animation: rise 1s var(--ease-out) both;
}

/* Paused on the first frame (opacity 0, because of `both`) while the splash
   holds the page. The splash leaves the layout when it is hidden, so this
   releases the moment it starts fading. */
html:has(.splash:not([hidden]):not(.is-leaving)) :is(header, .hero h1 > span, .hero > p, .hero > div) {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  header,
  .hero h1 > span,
  .hero > p,
  .hero > div {
    animation: none;
  }
}