@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 620ms ease, transform 620ms ease;
  }

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

  .hero-content {
    animation: heroRise 760ms ease both;
  }

  .btn-primary {
    background-size: 180% 180%;
    animation: buttonDrift 5s ease infinite;
  }

  @keyframes heroRise {
    from {
      opacity: 0;
      transform: translateY(18px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes buttonDrift {
    0%,
    100% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
  }
}