[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
}
[data-reveal].is-in { opacity: 1; transform: none }
[data-reveal="2"] { transition-delay: .08s }
[data-reveal="3"] { transition-delay: .16s }
[data-reveal="4"] { transition-delay: .24s }

.cutout { animation: float 5.5s ease-in-out infinite }
@keyframes float {
  0%, 100% { translate: 0 0 }
  50% { translate: 0 -3px }
}

.nav-screen a {
  opacity: 0;
  transform: translateY(16px);
}
body.nav-open .nav-screen a { animation: rise .6s cubic-bezier(.2, .7, .2, 1) forwards }
body.nav-open .nav-screen a:nth-child(1) { animation-delay: .05s }
body.nav-open .nav-screen a:nth-child(2) { animation-delay: .12s }
body.nav-open .nav-screen a:nth-child(3) { animation-delay: .19s }
body.nav-open .nav-screen a:nth-child(4) { animation-delay: .26s }
body.nav-open .nav-screen a:nth-child(5) { animation-delay: .33s }
body.nav-open .nav-screen a:nth-child(6) { animation-delay: .4s }
@keyframes rise {
  to { opacity: 1; transform: none }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  [data-reveal], .cutout, .nav-screen a {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .site-header { transform: none !important }
  .story, .rail-wrap { height: auto !important; min-height: 0 !important }
  .story-pin, .rail-pin { position: relative !important; height: auto !important }
}