@keyframes fadeUp{
  from{opacity: 0; transform: translateY(24px);}
  to{opacity: 1; transform: translateY(0);}
}
@keyframes scrollDown{
  0%{top: -50%;}
  100%{top: 100%;}
}

.fade-in{
  opacity: 0;
  animation: fadeUp 1s cubic-bezier(.2,.7,.2,1) forwards;
}
.delay-1{animation-delay: .15s;}
.delay-2{animation-delay: .3s;}
.delay-3{animation-delay: .45s;}
.delay-4{animation-delay: .6s;}

.reveal{
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1);
}
.reveal.visible{
  opacity: 1;
  transform: translateY(0);
}
.reveal.delay-1{transition-delay: .12s;}
.reveal.delay-2{transition-delay: .24s;}
.reveal.delay-3{transition-delay: .36s;}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}