/*
  Motion: one orchestrated load sequence per page, scroll reveals,
  and soft page transitions. All of it is switched off under
  prefers-reduced-motion.
*/

@keyframes rise {
  from {
    opacity: 0;
    translate: 0 1.25rem;
  }
}

@keyframes word-rise {
  from {
    translate: 0 108%;
  }
}

@keyframes fade-down {
  from {
    opacity: 0;
    translate: 0 -0.75rem;
  }
}

.js .site-header {
  animation: fade-down 0.9s var(--ease-out) both 0.1s;
}

.js [data-load] {
  animation: rise 1s var(--ease-out) both;
  animation-delay: calc(var(--d, 0) * 1ms + 150ms);
}

/* Headline split into words by site.js, each rising out of its own mask. */
.is-split .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}

.is-split .word__inner {
  display: inline-block;
  animation: word-rise 1.1s var(--ease-out) both;
  animation-delay: calc(var(--w) * 70ms + var(--split-delay, 220ms));
}

/* Scroll reveals (classes added by site.js). */
.js [data-reveal] {
  transition:
    opacity 0.9s var(--ease-out) calc(var(--i, 0) * 90ms),
    translate 1s var(--ease-out) calc(var(--i, 0) * 90ms),
    transform 0.45s var(--ease-out),
    box-shadow 0.45s var(--ease-out),
    background-color 0.4s;
}

.js [data-reveal]:not(.is-in) {
  opacity: 0;
  translate: 0 1.75rem;
}

.js .card--frame[data-reveal]:not(.is-in)::after {
  opacity: 0;
  scale: 0.96;
}

/* Cross-document page transitions (Chromium); other browsers navigate normally. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: 0.25s var(--ease-in-out) both vt-out;
}

::view-transition-new(root) {
  animation: 0.55s var(--ease-out) both vt-in;
}

@keyframes vt-out {
  to {
    opacity: 0;
  }
}

@keyframes vt-in {
  from {
    opacity: 0;
    translate: 0 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}