/* ========================================
   TV TEXTURE AUTHENTIQUE - ÉCRAN CRT RÉTRO
   Texture d'ambiance immersive pour univers TV
   ======================================== */

/* Import des polices rétro */
@import url('https://fonts.googleapis.com/css2?family=VT323&family=Press+Start+2P&family=Share+Tech+Mono&display=swap');

/* Variables pour la texture TV */
:root {
    /* Couleurs authentiques écran CRT */
    --tv-black: #0a0a0a;
    --tv-dark: #0d1117;
    --tv-gray: #161b22;
    --tv-green: #00ff41;
    --tv-amber: #ffb000;
    --tv-blue: #00d4ff;
    --tv-white: #f0f0f0;
    
    /* Paramètres CRT */
    --scanline-height: 2px;
    --scanline-opacity: 0.08;
    --curvature-intensity: 0.03;
    --flicker-opacity: 0.02;
    --vignette-intensity: 0.4;
}

/* ========================================
   COUCHE PRINCIPALE - FOND NOIR TV
   ======================================== */
.tv-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--tv-black);
    z-index: -1000;
    overflow: hidden;
}

/* Fond avec légère texture granuleuse */
.tv-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(ellipse at center, 
            var(--tv-dark) 0%, 
            var(--tv-black) 70%,
            #050505 100%);
    opacity: 1;
}

/* ========================================
   SCANLINES - LIGNES HORIZONTALES CRT
   ======================================== */
.tv-scanlines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: -500;
    overflow: hidden;
}

.tv-scanlines::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent calc(var(--scanline-height) - 1px),
        rgba(255, 255, 255, var(--scanline-opacity)) calc(var(--scanline-height) - 1px),
        rgba(255, 255, 255, var(--scanline-opacity)) var(--scanline-height)
    );
    background-size: 100% calc(var(--scanline-height) * 2);
}

/* Scanlines secondaires plus subtiles */
.tv-scanlines::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 3px,
        rgba(0, 0, 0, 0.15) 3px,
        rgba(0, 0, 0, 0.15) 4px
    );
    background-size: 100% 8px;
}

/* ========================================
   BRUIT STATIQUE - NOISE TEXTURE
   ======================================== */
.tv-noise {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: -400;
    opacity: 0.03;
    animation: noiseFlicker 0.15s infinite;
}

.tv-noise::before {
    content: '';
    position: absolute;
    top: -100%;
    left: -100%;
    width: 300%;
    height: 300%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 200px 200px;
}

@keyframes noiseFlicker {
    0%, 100% { opacity: 0.025; }
    50% { opacity: 0.04; }
}

/* ========================================
   VIGNETTE - ASSOMBRISSEMENT DES COINS
   ======================================== */
.tv-vignette {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: -300;
}

.tv-vignette::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        ellipse at center,
        transparent 0%,
        transparent 40%,
        rgba(0, 0, 0, var(--vignette-intensity)) 100%
    );
}

/* Vignette supplémentaire pour effet tube CRT */
.tv-vignette::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        ellipse at center,
        transparent 30%,
        rgba(0, 0, 0, 0.2) 70%,
        rgba(0, 0, 0, 0.8) 100%
    );
}

/* ========================================
   FLICKER D'ÉCRAN - SCINTILLEMENT CRT
   ======================================== */
.tv-flicker {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: -200;
    animation: screenFlicker 0.1s infinite;
}

.tv-flicker::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.01);
}

@keyframes screenFlicker {
    0% { opacity: 0.98; }
    50% { opacity: 1; }
    100% { opacity: 0.99; }
}

/* ========================================
   EFFET DE CURVURE - ÉCRAN BOMBÉ
   ======================================== */
.tv-curvature {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: -100;
}

.tv-curvature::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        farthest-corner ellipse at center,
        transparent 0%,
        transparent 85%,
        rgba(0, 0, 0, 0.1) 95%,
        rgba(0, 0, 0, 0.3) 100%
    );
}

/* Bordure intérieure simulant le cadre du tube */
.tv-curvature::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border: 2px solid rgba(0, 0, 0, 0.5);
    border-radius: 20px;
    pointer-events: none;
}

/* ========================================
   LIGNES DE BALAYAGE - EFFET行
   ======================================== */
.tv-scan-effect {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9998;
    opacity: 0;
    animation: scanlineMove 8s linear infinite;
}

.tv-scan-effect::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(255, 255, 255, 0.02) 50%,
        transparent 100%
    );
}

@keyframes scanlineMove {
    0% { transform: translateY(-100px); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(100vh); opacity: 0; }
}

/* ========================================
   EFFET GLOW - LUMIÈRE D'ÉCRAN
   ======================================== */
.tv-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: -600;
    mix-blend-mode: screen;
}

.tv-glow::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80vw;
    height: 80vh;
    background: radial-gradient(
        ellipse at center,
        rgba(0, 100, 150, 0.03) 0%,
        transparent 70%
    );
    filter: blur(50px);
}

/* ========================================
   RGB SEPARATION - CHROMATIC ABERRATION
   ======================================== */
.tv-chroma {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: -700;
    opacity: 0.003;
}

.tv-chroma::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 100px,
            rgba(255, 0, 0, 0.01) 100px,
            rgba(255, 0, 0, 0.01) 101px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 100px,
            rgba(0, 255, 0, 0.005) 100px,
            rgba(0, 255, 0, 0.005) 101px
        );
}

/* ========================================
   ÉLÉMENTS INTERACTIFS AVEC EFFET TV
   ======================================== */

/* Boutons avec effet glow TV */
.tv-button {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.tv-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    animation: buttonShine 3s infinite;
}

@keyframes buttonShine {
    0% { left: -100%; }
    50%, 100% { left: 100%; }
}

/* Cartes avec léger glow */
.tv-card {
    background: rgba(20, 20, 30, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    backdrop-filter: blur(5px);
    transition: all 0.3s ease;
}

.tv-card:hover {
    border-color: rgba(0, 212, 255, 0.3);
    box-shadow: 
        0 0 20px rgba(0, 212, 255, 0.1),
        inset 0 0 20px rgba(0, 212, 255, 0.05);
}

/* ========================================
   INDICATEUR DE SIGNAL TV
   ======================================== */
.tv-signal {
    position: fixed;
    bottom: 20px;
    left: 20px;
    font-family: 'VT323', monospace;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.3);
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tv-signal::before {
    content: '';
    width: 40px;
    height: 12px;
    background: repeating-linear-gradient(
        90deg,
        rgba(0, 255, 65, 0.3) 0px,
        rgba(0, 255, 65, 0.3) 6px,
        transparent 6px,
        transparent 8px
    );
    animation: signalPulse 2s infinite;
}

@keyframes signalPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* ========================================
   HORLOGE TV STYLE
   ======================================== */
.tv-clock {
    position: fixed;
    top: 20px;
    right: 20px;
    font-family: 'VT323', monospace;
    font-size: 24px;
    color: rgba(255, 255, 255, 0.4);
    z-index: 10000;
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
    :root {
        --scanline-opacity: 0.05;
        --vignette-intensity: 0.3;
    }
    
    .tv-clock {
        font-size: 18px;
    }
    
    .tv-signal {
        bottom: 10px;
        left: 10px;
    }
}

/* ========================================
   DÉSACTIVATION SUR DEMANDE
   ======================================== */
.tv-texture-disabled .tv-scanlines,
.tv-texture-disabled .tv-noise,
.tv-texture-disabled .tv-vignette,
.tv-texture-disabled .tv-flicker,
.tv-texture-disabled .tv-curvature,
.tv-texture-disabled .tv-glow,
.tv-texture-disabled .tv-chroma,
.tv-texture-disabled .tv-scan-effect {
    display: none !important;
}