/*
Theme Name: Ben IPTV Custom Theme
Theme URI: https://tv.ben-iptv.com
Author: Senior WordPress Architect
Description: 100% Native, high-performance custom WordPress theme converted directly from completed design package.
Version: 1.0.0
Text Domain: ben-iptv
*/

/* Custom Keyframe Animations for BEN IPTV Homepage Body */
@keyframes fade-in-up {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes marquee-left {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

@keyframes marquee-right {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0%); }
}

@keyframes pulse-slow {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.05); }
}

@keyframes cinematic-logo {
  0% { transform: scale(0.9); filter: blur(10px) brightness(0.5); opacity: 0; }
  40% { transform: scale(1.02); filter: blur(0px) brightness(1.1); opacity: 1; }
  100% { transform: scale(1); filter: blur(0px) brightness(1); opacity: 1; }
}

.animate-fade-in-up {
  animation: fade-in-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}

.animate-fade-in {
  animation: fade-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}

.animate-marquee-left {
  animation: marquee-left 35s linear infinite !important;
}

.animate-marquee-right {
  animation: marquee-right 35s linear infinite !important;
}

.animate-pulse-slow {
  animation: pulse-slow 4s ease-in-out infinite !important;
}

.animate-cinematic-logo {
  animation: cinematic-logo 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}


/* ============================================================
   ANIMATION FIX: Prevent opacity-0 from overriding animation fill
   Elements using animate-fade-in-up start at opacity 0 but must
   end at opacity 1. The animation-fill-mode:forwards handles this
   but .opacity-0 in the Tailwind bundle overrides it.
   This fix uses higher specificity to let the animation win.
   ============================================================ */
.animate-fade-in-up.opacity-0,
.animate-fade-in.opacity-0,
.will-change-transform.opacity-0 {
  /* Allow the animation to control opacity via fill-mode:forwards */
  /* Do NOT set opacity here - the animation handles it */
  animation-fill-mode: forwards !important;
}

/* Force all animated sections visible immediately as fallback */
@keyframes reveal-immediately {
  to { opacity: 1; transform: none; }
}

/* After any fade-in-up animation completes (1s), ensure opacity=1 */
.animate-fade-in-up {
  animation: fade-in-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
  opacity: 1 !important; /* Override .opacity-0 after animation */
}

.animate-fade-in {
  animation: fade-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
  opacity: 1 !important;
}


/* Channels page responsive col span fixes */
@media (min-width: 640px) {
  .sm\:col-span-2 {
    grid-column: span 2 / span 2 !important;
  }
}
@media (min-width: 1024px) {
  .lg\:col-span-3 {
    grid-column: span 3 / span 3 !important;
  }
}
@media (min-width: 1280px) {
  .xl\:col-span-4 {
    grid-column: span 4 / span 4 !important;
  }
}