/* Shared marquee utilities (used by homepage + landing pages) */

@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.animate-marquee {
  animation: marquee 30s linear infinite;
  will-change: transform;
}

/* Supports both legacy class usage (.pause-animation) and current Tailwind-style class (hover:pause-animation) */
.pause-animation:hover,
.hover\:pause-animation:hover {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .animate-marquee {
    animation: none;
    transform: none;
  }
}