/* ==========================================================================
   XiroTV — animations.css
   Keyframes, marquee motion, entrance animations, reduced-motion guards.
   ========================================================================== */

/* ---------- Seamless marquee ----------
   JS duplicates the track content, so translating -50% loops perfectly.
   --duration is set per-row by marquee.js from data-speed. */
.marquee-track {
  animation: marquee-scroll var(--duration, 40s) linear infinite;
}
.marquee-track[data-direction="right"] {
  animation-direction: reverse;
}
.marquee:hover .marquee-track {
  animation-play-state: paused;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Hero entrance ---------- */
.hero-content > * {
  opacity: 0;
  transform: translateY(18px);
  animation: hero-rise .8s cubic-bezier(.2, .7, .2, 1) forwards;
}
.hero-content > *:nth-child(1) { animation-delay: .05s; }
.hero-content > *:nth-child(2) { animation-delay: .16s; }
.hero-content > *:nth-child(3) { animation-delay: .27s; }
.hero-content > *:nth-child(4) { animation-delay: .38s; }
.hero-content > *:nth-child(5) { animation-delay: .49s; }

@keyframes hero-rise {
  to { opacity: 1; transform: translateY(0); }
}

/* Very slow cinematic drift on the blurred hero layer */
.hero-blur {
  animation: hero-drift 24s ease-in-out infinite alternate;
}
@keyframes hero-drift {
  from { transform: scale(1.08) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(1.5%, -1%, 0); }
}

/* Soft accent pulse on the CTA glow */
.cta-glow {
  animation: glow-pulse 6s ease-in-out infinite alternate;
}
@keyframes glow-pulse {
  from { opacity: .35; }
  to   { opacity: .6; }
}

/* Scroll-reveal (added by main.js via IntersectionObserver) */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .marquee-track { animation: none !important; transform: none !important; }
  .hero-content > * { opacity: 1 !important; transform: none !important; }
  .hero-blur { animation: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}