.reveal-hero,
.reveal-line {
  opacity: 0;
  transform: translate3d(0, 2.2rem, 0);
  filter: blur(10px);
  transition:
    opacity 1500ms var(--ease-organic),
    transform 1500ms var(--ease-organic),
    filter 1500ms var(--ease-organic);
}

.reveal-hero.is-visible,
.reveal-line.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

.reveal-delay-1 {
  transition-delay: 700ms;
}

.silent-film {
  animation:
    opticalFlicker 5.7s steps(1, end) infinite,
    microDrift 7.3s var(--ease-organic) infinite alternate;
}

@keyframes opticalFlicker {
  0%, 100% { opacity: .86; text-shadow: 0 0 0 rgba(255,255,255,0); }
  8% { opacity: .78; }
  9% { opacity: .9; }
  24% { opacity: .84; }
  25% { opacity: .72; }
  26% { opacity: .88; }
  57% { opacity: .82; text-shadow: 0 0 10px rgba(255,255,255,.06); }
  58% { opacity: .76; }
  59% { opacity: .88; }
}

@keyframes microDrift {
  from { transform: translate3d(-0.025em, 0, 0); }
  to { transform: translate3d(0.025em, -0.015em, 0); }
}

@keyframes slowMatter {
  from { transform: translate3d(-2%, -1%, 0) rotate(0deg); }
  to { transform: translate3d(2%, 1%, 0) rotate(2deg); }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }

  .parallax-image {
    transform: none !important;
  }
}


@keyframes materialGrain {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  20% { transform: translate3d(-3%, 2%, 0) scale(1.03); }
  40% { transform: translate3d(2.5%, -2.5%, 0) scale(1.04); }
  60% { transform: translate3d(-2%, -3%, 0) scale(1.02); }
  80% { transform: translate3d(3%, 1.5%, 0) scale(1.05); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}


@keyframes photoCurrent {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}