@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes scrollcue {
  0% { opacity: 0; transform: translate(-50%, 0); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 14px); }
}

@keyframes wave {
  0%, 100% { transform: rotate(0deg); }
  15% { transform: rotate(14deg); }
  30% { transform: rotate(-8deg); }
  45% { transform: rotate(14deg); }
  60% { transform: rotate(-4deg); }
  75% { transform: rotate(10deg); }
}

.hero-wave {
  animation: wave 2.5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .hero-wave,
  .hero-visual-ring,
  .scroll-cue .mouse::before {
    animation: none !important;
  }
}