@keyframes grain {
  0% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(1.5%, -1%, 0); }
  50% { transform: translate3d(-1%, 1.5%, 0); }
  75% { transform: translate3d(1%, 1%, 0); }
  100% { transform: translate3d(-1.5%, -1%, 0); }
}

@keyframes loaderLetter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroDrift {
  from {
    transform: scale(var(--scale, 1.01));
  }

  to {
    transform: scale(calc(var(--scale, 1.01) + .025));
  }
}

.reveal {
  opacity: 0;
  transform: translateY(42px) scale(.985);
  transition:
    opacity 1s var(--ease),
    transform 1.15s var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .reveal,
  .hero-shot {
    opacity: 1;
    transform: none;
  }
}