@keyframes rise-in {
  from { opacity: 0; transform: translate3d(0, 48px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
/* First beat: navigation and portrait. Second beat: supporting hero content. */
@media (prefers-reduced-motion: no-preference) {
  header { animation: rise-in .85s cubic-bezier(.22, 1, .36, 1) .05s both; }
  .portrait-wrap { animation: rise-in 1.05s cubic-bezier(.22, 1, .36, 1) .12s both; }
  .hero-top { animation: rise-in .85s cubic-bezier(.22, 1, .36, 1) .48s both; }
  .hero-word { animation: rise-in 1s cubic-bezier(.22, 1, .36, 1) .55s both; }
  .intro > * { animation: rise-in .9s cubic-bezier(.22, 1, .36, 1) both; }
  .intro > :nth-child(1) { animation-delay: .62s; }
  .intro > :nth-child(2) { animation-delay: .76s; }
  .intro > :nth-child(3) { animation-delay: .90s; }
  .intro > :nth-child(4) { animation-delay: 1.04s; }
  .hero-note { animation: rise-in .95s cubic-bezier(.22, 1, .36, 1) 1.12s both; }
  .hero-bottom { animation: rise-in .9s cubic-bezier(.22, 1, .36, 1) 1.22s both; }
  .scroll-reveal {
    opacity: 0;
    transform: translate3d(0, 42px, 0);
    transition: opacity .8s ease var(--reveal-delay, 0ms), transform .9s cubic-bezier(.22, 1, .36, 1) var(--reveal-delay, 0ms);
  }
  .scroll-reveal.is-visible { opacity: 1; transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce), print {
  header, .portrait-wrap, .hero-top, .hero-word, .intro > *, .hero-note, .hero-bottom, .scroll-reveal {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}