/* ==========================================================================
   Gugudde TV — Animation base states
   GSAP (main.js) animates from these; if JS fails to load, content is
   still visible because [data-reveal] only hides once .js-ready is set.
   ========================================================================== */

[data-reveal] { opacity: 1; }
.js-ready [data-reveal] { opacity: 0; }

.hero-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
}
.hero-slide.is-active { opacity: 1; }
.hero-slide img {
  width: 100%; height: 100%; object-fit: cover;
  animation: kenburns 14s ease-in-out infinite alternate;
}
@keyframes kenburns {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.12) translate(-1.5%, -1.5%); }
}

.fade-in { animation: fadeIn 0.6s var(--ease-out) both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.pulse-ring {
  position: relative;
}
.pulse-ring::after {
  content: '';
  position: absolute; inset: -6px;
  border-radius: inherit;
  border: 2px solid var(--color-accent);
  animation: pulse-ring 2.2s ease-out infinite;
}
@keyframes pulse-ring {
  0% { transform: scale(0.9); opacity: 0.9; }
  100% { transform: scale(1.35); opacity: 0; }
}

.marquee-track {
  display: flex;
  gap: var(--space-2xl);
  width: max-content;
  animation: marquee 28s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide img { animation: none; }
  .marquee-track { animation: none; }
  .pulse-ring::after { animation: none; display: none; }
}