/* TV Effects CSS - CRT Effects, Scan Lines, Glitch, Snow, VCR */

/* CSS Custom Properties for Effects */
:root {
    --scan-lines-opacity: 0.2;
    --scan-lines-thickness: 1px;
    --scan-lines-spacing: 2px;

    --glitch-speed: 0.2s;
    --glitch-distance: 5px;
    --glitch-opacity: 0.3;

    --vcr-opacity: 1.0;
    --vcr-blur: 1px;

    --video-contrast: 1.2;
    --video-brightness: 1.1;
    --video-saturation: 1.0;
    --video-sepia: 0;
    --video-hue: 0deg;

    --snow-size: 100%;
    --snow-opacity: 0;
    --snow-speed: 0.5s;
}

/* Nostalgia Scan Lines Effect */
.scan-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0px,
        rgba(0, 0, 0, var(--scan-lines-opacity)) var(--scan-lines-thickness),
        rgba(0, 0, 0, 0) var(--scan-lines-spacing)
    );
    pointer-events: none;
    z-index: 2;
    display: none;
}

.scan-lines.active {
    display: block;
}

.scan-lines::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--scan-lines-thickness);
    background: rgba(255, 255, 255, 0.1);
    animation: moving-scanline 2s linear infinite;
    z-index: 3;
}

@keyframes moving-scanline {
    0% {
        top: -10%;
    }
    100% {
        top: 110%;
    }
}

/* Nostalgia Glitch Effect */
.glitch {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("https://upload.wikimedia.org/wikipedia/commons/0/02/Television_static.gif");
    mix-blend-mode: multiply;
    opacity: var(--glitch-opacity);
    animation: glitchMove var(--glitch-speed) infinite linear;
    z-index: 2;
    display: none;
}

.glitch.active {
    display: block;
}

/* Apply glitch movement to video content when glitch is active */
.tv-screen.glitch-active .screen-content,
.tv-screen.glitch-active .screen-content video,
.tv-screen.glitch-active .screen-content .channel-video,
.tv-screen.glitch-active .screen-content .static-noise {
    animation: glitchMove var(--glitch-speed) infinite linear;
}

@keyframes glitchMove {
    0% { transform: translateX(0); }
    33% { transform: translateX(calc(-1 * var(--glitch-distance))); }
    66% { transform: translateX(var(--glitch-distance)); }
    100% { transform: translateX(0); }
}

/* Nostalgia Snow Effect */
.snow-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("https://upload.wikimedia.org/wikipedia/commons/0/02/Television_static.gif");
    background-size: var(--snow-size);
    opacity: var(--snow-opacity);
    z-index: 3;
    pointer-events: none;
    transition: opacity var(--snow-speed) ease-in-out;
    display: none;
}

.snow-effect.active {
    display: block;
}

/* Canvas styles moved to core-layout.css - canvas is viewport-wide, not TV-specific */

/* Nostalgia Video Filters */
video, iframe {
    filter: contrast(var(--video-contrast))
            brightness(var(--video-brightness))
            saturate(var(--video-saturation))
            sepia(var(--video-sepia))
            hue-rotate(var(--video-hue));
}

/* Static noise effect for missing channels */
.static-noise {
    width: 100%;
    height: 100%;
    background:
        #222,
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.8) 1px, transparent 1px),
        radial-gradient(circle at 80% 70%, rgba(255,255,255,0.6) 1px, transparent 1px),
        radial-gradient(circle at 40% 90%, rgba(255,255,255,0.7) 1px, transparent 1px),
        radial-gradient(circle at 90% 20%, rgba(255,255,255,0.5) 1px, transparent 1px),
        radial-gradient(circle at 10% 80%, rgba(255,255,255,0.9) 1px, transparent 1px);
    background-size: 100% 100%, 4px 4px, 6px 6px, 5px 5px, 7px 7px, 3px 3px;
    animation: static-animation 0.1s infinite steps(10);
    position: relative;
}

.static-noise::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle, rgba(255,255,255,0.9) 0.5px, transparent 1px),
        radial-gradient(circle, rgba(200,200,200,0.7) 0.8px, transparent 1.2px),
        radial-gradient(circle, rgba(150,150,150,0.5) 1px, transparent 1.5px),
        radial-gradient(circle, rgba(100,100,100,0.3) 0.3px, transparent 0.8px);
    background-size: 2px 2px, 3px 3px, 4px 4px, 1px 1px;
    background-position: 0 0, 1px 1px, 2px 2px, 0.5px 0.5px;
    animation: static-dots 0.08s infinite steps(20);
    opacity: 0.8;
}

.static-noise::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            rgba(255,255,255,0.3) 1px,
            transparent 2px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            rgba(255,255,255,0.2) 1px,
            transparent 3px
        );
    animation: static-lines 0.05s infinite linear;
    opacity: 0.6;
}

@keyframes static-animation {
    0% {
        background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
        filter: contrast(1.5) brightness(1.1);
    }
    10% {
        background-position: 0 0, 1px 2px, 3px 1px, 2px 3px, 4px 0px, 1px 1px;
        filter: contrast(1.2) brightness(1.4);
    }
    20% {
        background-position: 0 0, 2px 1px, 1px 2px, 3px 0px, 0px 2px, 2px 3px;
        filter: contrast(1.8) brightness(0.9);
    }
    30% {
        background-position: 0 0, 3px 3px, 2px 0px, 1px 2px, 2px 1px, 0px 2px;
        filter: contrast(1.1) brightness(1.3);
    }
    40% {
        background-position: 0 0, 0px 1px, 3px 2px, 2px 1px, 1px 3px, 3px 0px;
        filter: contrast(1.6) brightness(1.0);
    }
    50% {
        background-position: 0 0, 2px 3px, 0px 1px, 3px 2px, 3px 1px, 1px 2px;
        filter: contrast(1.3) brightness(1.2);
    }
    60% {
        background-position: 0 0, 1px 0px, 2px 3px, 0px 1px, 2px 2px, 3px 1px;
        filter: contrast(1.7) brightness(0.8);
    }
    70% {
        background-position: 0 0, 3px 2px, 1px 1px, 2px 0px, 0px 3px, 2px 2px;
        filter: contrast(1.0) brightness(1.5);
    }
    80% {
        background-position: 0 0, 2px 0px, 3px 3px, 1px 1px, 1px 0px, 0px 1px;
        filter: contrast(1.4) brightness(1.1);
    }
    90% {
        background-position: 0 0, 0px 2px, 2px 1px, 3px 3px, 3px 2px, 1px 3px;
        filter: contrast(1.2) brightness(1.3);
    }
    100% {
        background-position: 0 0, 1px 1px, 0px 0px, 2px 2px, 2px 0px, 3px 2px;
        filter: contrast(1.5) brightness(1.0);
    }
}

@keyframes static-dots {
    0% {
        background-position: 0 0, 1px 1px, 2px 2px, 0.5px 0.5px;
        opacity: 0.8;
    }
    25% {
        background-position: 1px 0px, 0px 2px, 3px 1px, 1px 0px;
        opacity: 0.6;
    }
    50% {
        background-position: 2px 1px, 3px 0px, 0px 3px, 2px 1px;
        opacity: 0.9;
    }
    75% {
        background-position: 0px 2px, 2px 3px, 1px 0px, 0px 2px;
        opacity: 0.7;
    }
    100% {
        background-position: 3px 3px, 1px 2px, 2px 1px, 3px 0px;
        opacity: 0.8;
    }
}

@keyframes static-lines {
    0% {
        transform: translateY(0px);
        opacity: 0.6;
    }
    25% {
        transform: translateY(-1px);
        opacity: 0.4;
    }
    50% {
        transform: translateY(1px);
        opacity: 0.8;
    }
    75% {
        transform: translateY(-0.5px);
        opacity: 0.5;
    }
    100% {
        transform: translateY(0px);
        opacity: 0.6;
    }
}

/* TV Power On/Off Animations - Extracted from example files */
@keyframes turn-on {
    0% {
        transform: scale(1, 0.8) translate3d(0, 0, 0);
        filter: brightness(30);
        opacity: 1;
    }
    3.5% {
        transform: scale(1, 0.8) translate3d(0, 100%, 0);
    }
    3.6% {
        transform: scale(1, 0.8) translate3d(0, -100%, 0);
        opacity: 1;
    }
    9% {
        transform: scale(1.3, 0.6) translate3d(0, 100%, 0);
        filter: brightness(30);
        opacity: 0;
    }
    11% {
        transform: scale(1, 1) translate3d(0, 0, 0);
        filter: contrast(0) brightness(0);
        opacity: 0;
    }
    100% {
        transform: scale(1, 1) translate3d(0, 0, 0);
        filter: contrast(1) brightness(1.2) saturate(1.3);
        opacity: 1;
    }
}

@keyframes turn-off {
    0% {
        transform: scale(1, 1.3) translate3d(0, 0, 0);
        filter: brightness(1);
        opacity: 1;
    }
    60% {
        transform: scale(1.3, 0.001) translate3d(0, 0, 0);
        filter: brightness(10);
    }
    100% {
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        transform: scale(0.000, 0.0001) translate3d(0, 0, 0);
        filter: brightness(50);
    }
}

@keyframes flicker {
    0% { opacity: 0.8; }
    10% { opacity: 1; }
    20% { opacity: 0.6; }
    30% { opacity: 1; }
    40% { opacity: 0.9; }
    50% { opacity: 0.7; }
    60% { opacity: 1; }
    70% { opacity: 0.8; }
    80% { opacity: 0.9; }
    90% { opacity: 1; }
    100% { opacity: 0.8; }
}

/* TV Screen Power States */
.screen-content.power-off {
    animation: turn-off 0.55s cubic-bezier(0.230, 1.000, 0.320, 1.000);
    animation-fill-mode: forwards;
}

.screen-content.power-on {
    animation: turn-on 4s linear;
    animation-fill-mode: forwards;
}

.screen-content.screen-flicker {
    animation: flicker 0.15s infinite;
}