/* ===================================================================
   TV Carrusel — banners publicitarios rotativos con efecto distorsión
   analógica en la transición. Sin controles visibles. Espectacular pero
   contenido: el efecto solo dura ~1 segundo durante el cambio.
   =================================================================== */

.tv-carousel {
    position: relative;
    width: 100%;
    max-width: var(--page-width, 1280px);
    margin: 32px auto 24px;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.04);
}

.tv-carousel__viewport {
    position: relative;
    width: 100%;
    aspect-ratio: 5 / 2;    /* desktop: 5:2 — acomoda 24:5 (recortando un poco)
                                y formato fotográfico ~2.5:1 sin distorsión */
}

@media (max-width: 768px) {
    .tv-carousel__viewport {
        aspect-ratio: 1.6 / 1; /* mobile: 640 × 400 */
    }
    .tv-carousel { margin: 20px auto 16px; border-radius: 10px; }
}

/* ── Slides ───────────────────────────────────────── */

.tv-carousel__slide {
    position: absolute;
    inset: 0;
    display: block;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease-out;
}

.tv-carousel__slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

.tv-carousel__slide picture,
.tv-carousel__slide img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* ── Capas de efecto (overlay) ───────────────────── */

.tv-carousel__fx {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
}

.tv-carousel.is-glitching .tv-carousel__fx {
    opacity: 1;
}

/* Scanlines horizontales con flicker */
.tv-carousel__scanlines {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0px,
        rgba(0, 0, 0, 0) 2px,
        rgba(0, 0, 0, 0.45) 3px,
        rgba(0, 0, 0, 0) 4px
    );
    mix-blend-mode: multiply;
    opacity: 0;
}

.tv-carousel.is-glitching .tv-carousel__scanlines {
    animation: tv-scan-flicker 1s linear;
}

@keyframes tv-scan-flicker {
    0%   { opacity: 0; transform: translateY(-30%); }
    18%  { opacity: 0.95; }
    32%  { transform: translateY(45%); }
    48%  { opacity: 1; transform: translateY(-12%); }
    64%  { transform: translateY(60%); }
    80%  { opacity: 0.55; transform: translateY(8%); }
    100% { opacity: 0; transform: translateY(0); }
}

/* RGB chromatic aberration: imagen activa se duplica con tinte rojo+cyan */
.tv-carousel.is-glitching .tv-carousel__slide.is-active img {
    animation: tv-rgb-split 1s ease-out;
}

@keyframes tv-rgb-split {
    0% {
        filter: hue-rotate(0deg) saturate(1);
        transform: translateX(0) skewX(0deg);
    }
    12% {
        filter: hue-rotate(35deg) saturate(2.2)
                drop-shadow(-9px 0 0 rgba(255, 0, 80, 0.7))
                drop-shadow(9px 0 0 rgba(0, 200, 255, 0.7));
        transform: translateX(-7px) skewX(-1deg);
    }
    24% {
        filter: hue-rotate(-25deg) saturate(1.8) brightness(1.2);
        transform: translateX(5px) skewX(2deg);
    }
    38% {
        filter: hue-rotate(0deg) saturate(1) brightness(1);
        transform: translateX(0);
    }
    55% {
        filter: brightness(1.4) contrast(1.5)
                drop-shadow(-5px 0 0 rgba(255, 80, 80, 0.55))
                drop-shadow(5px 0 0 rgba(80, 200, 255, 0.55));
        transform: translateX(3px) skewX(-1.5deg);
    }
    72% {
        filter: brightness(0.85) contrast(1.2);
        transform: translateX(-2px);
    }
    100% {
        filter: hue-rotate(0deg) saturate(1) brightness(1);
        transform: translateX(0);
    }
}

/* Noise estático que oscila */
.tv-carousel__noise {
    position: absolute;
    inset: -10% -10%;
    background-image:
        repeating-conic-gradient(
            from 0deg at 10% 20%,
            rgba(255, 255, 255, 0.06) 0deg 0.5deg,
            rgba(0, 0, 0, 0.10) 0.5deg 1deg
        );
    opacity: 0;
    mix-blend-mode: overlay;
}

.tv-carousel.is-glitching .tv-carousel__noise {
    animation: tv-noise 1s steps(10) 1;
    opacity: 0.85;
}

@keyframes tv-noise {
    0%   { transform: translate(0, 0); }
    18%  { transform: translate(-3%, 4%); }
    36%  { transform: translate(4%, -3%); }
    54%  { transform: translate(-1%, 2%); }
    72%  { transform: translate(2%, 3%); }
    90%  { transform: translate(-2%, -1%); }
    100% { transform: translate(0, 0); }
}

/* Bandas horizontales de "sync loss" (rolling V-hold) */
.tv-carousel__bands {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        transparent 0%, transparent 28%,
        rgba(255, 255, 255, 0.18) 28%, rgba(255, 255, 255, 0.18) 32%,
        transparent 32%, transparent 68%,
        rgba(0, 0, 0, 0.35) 68%, rgba(0, 0, 0, 0.35) 72%,
        transparent 72%
    );
    background-size: 100% 220%;
    opacity: 0;
}

.tv-carousel.is-glitching .tv-carousel__bands {
    animation: tv-bands 1s ease-in-out;
    opacity: 1;
}

@keyframes tv-bands {
    0%   { background-position: 0 -110%; opacity: 0; }
    25%  { background-position: 0 -10%; opacity: 0.95; }
    50%  { background-position: 0 60%; opacity: 1; transform: translateX(-4px); }
    75%  { background-position: 0 90%; opacity: 0.55; transform: translateX(3px); }
    100% { background-position: 0 120%; opacity: 0; }
}

/* ── Reduced motion: solo crossfade limpio ──────── */

@media (prefers-reduced-motion: reduce) {
    .tv-carousel__slide {
        transition: opacity 600ms ease-out;
    }
    .tv-carousel__fx,
    .tv-carousel__scanlines,
    .tv-carousel__noise,
    .tv-carousel__bands {
        display: none !important;
    }
    .tv-carousel.is-glitching .tv-carousel__slide.is-active img {
        animation: none;
    }
}