/* ==========================================================================
   YOLO Group – Keyframe Animations
   ========================================================================== */

/* ---------- Marquee infinite scroll ---------- */
@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-33.333%);
  }
}

.hero-marquee {
  animation: marquee-scroll 30s linear infinite;
}

/* ---------- Clip-path reveal ---------- */
@keyframes reveal {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}

.animate-reveal {
  animation: reveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

/* ---------- Scroll indicator bar ---------- */
@keyframes scroll-indicator-bounce {
  0%,
  100% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateY(8px);
    opacity: 0.4;
  }
}

.scroll-indicator-bar {
  animation: scroll-indicator-bounce 2s ease-in-out infinite;
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  .hero-marquee {
    animation: none;
  }

  .animate-reveal {
    clip-path: inset(0 0 0 0);
    animation: none;
  }

  .scroll-indicator-bar {
    animation: none;
  }

  .animate-on-scroll {
    opacity: 1;
    transform: none;
  }
}