/* CRT Effects overlay */
.crt-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
}

/* Scanlines */
.crt-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,0.15) 2px,
        rgba(0,0,0,0.15) 4px
    );
    z-index: 2;
}

/* Screen curvature vignette */
.crt-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at center,
        transparent 60%,
        rgba(0,0,0,0.7) 100%
    );
    z-index: 3;
}

/* RGB aberration */
.aberration {
    position: absolute;
    inset: 0;
    background: transparent;
    z-index: 4;
    mix-blend-mode: screen;
    pointer-events: none;
}

/* Phosphor glow */
.screen-glow {
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 60px rgba(0,255,136,0.03);
    z-index: 5;
    pointer-events: none;
    border-radius: 8px;
}

/* Moving scanline */
.scanline-moving {
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(
        transparent,
        rgba(0,255,136,0.06),
        transparent
    );
    z-index: 6;
    pointer-events: none;
    animation: scanmove 6s linear infinite;
}

@keyframes scanmove {
    0% { top: -3px; }
    100% { top: 100%; }
}

/* Static noise overlay */
.static-overlay {
    position: absolute;
    inset: 0;
    z-index: 7;
    pointer-events: none;
    opacity: 0;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
    transition: opacity 0.1s;
}

.static-overlay.active {
    opacity: 0.9;
    animation: staticflicker 0.1s infinite;
}

@keyframes staticflicker {
    0%, 100% { opacity: 0.8; transform: translateX(0); }
    25% { opacity: 1; transform: translateX(-2px); }
    75% { opacity: 0.7; transform: translateX(2px); }
}

/* YT static noise overlay — cubre mientras carga, se desvanece al revelar */
.yt-fog {
    position: absolute;
    inset: 0;
    z-index: 16;
    pointer-events: none;
    background: #000;
    opacity: 0;
    transition: opacity 1.6s ease;
}

.yt-fog.show { opacity: 1; transition: opacity 0s; }

#fog-canvas, #watch-fog-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
}

#yt-container {
    transition: opacity 1.8s ease;
}

/* Global TV Animations */
@keyframes tv-on {
  0%   { transform: scaleY(0.008) scaleX(1); opacity:1; filter: brightness(5); }
  6%   { transform: scaleY(0.008) scaleX(0.55); }
  20%  { transform: scaleY(1) scaleX(1); filter: brightness(2.5); }
  100% { transform: scaleY(1) scaleX(1); filter: brightness(1); }
}

@keyframes tv-off {
  0%   { transform: scaleY(1) scaleX(1); filter: brightness(1); opacity:1; }
  55%  { transform: scaleY(0.008) scaleX(0.55); filter: brightness(4); opacity:1; }
  100% { transform: scaleY(0) scaleX(0); opacity:0; }
}

@keyframes tv-flicker {
  0%, 82%, 84%, 87%, 100% { opacity: 1; }
  83% { opacity: 0.82; }
  85% { opacity: 0.94; }
  86% { opacity: 0.86; }
}