.reveal {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--duration-slower) var(--ease-out-quart), transform var(--duration-slower) var(--ease-out-quart);
  }

  .reveal.revealed {
    opacity: 1;
    transform: translateY(0);
  }

  .hero-stripes {
    animation: stripeIn var(--duration-page) var(--ease-out-quart) both;
  }

  @keyframes stripeIn {
    from {
      opacity: 0;
      transform: translateX(48px);
    }

    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
}