/* ============================================
   Old TV Static Noise Overlay - Minimal Setup
   ============================================ */

/* Version A: Using noise.png image */
/* 
   First, create or download a small noise texture image (200x200px)
   Save it as 'noise.png' in your project root or images folder
   Then uncomment this version and comment out Version B
*/

/*
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('noise.png') repeat;
    background-size: 200px 200px;
    opacity: 0.08;
    z-index: 99999;
    pointer-events: none;
    animation: moveNoise 10s linear infinite;
}

@keyframes moveNoise {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 200px 200px;
    }
}
*/

/* Version B: CSS-generated noise pattern (No image needed) */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: repeating-radial-gradient(
        circle at 17% 32%,
        rgba(255, 255, 255, 0.8),
        rgba(0, 0, 0, 0.2) 0.00085px,
        rgba(255, 255, 255, 0.8) 0.0017px
    );
    background-size: 200px 200px;
    opacity: 0.08;
    z-index: 99999;
    pointer-events: none;
    mix-blend-mode: overlay;
    animation: moveNoise 5s linear infinite, noiseFlicker 0.1s infinite;
    will-change: background-position, opacity;
}

@keyframes moveNoise {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 200px 200px;
    }
}

@keyframes noiseFlicker {
    0%, 100% {
        opacity: 0.08;
    }
    50% {
        opacity: 0.12;
    }
}

/* Optional: Additional scanlines effect for more realism */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.1) 0px,
        transparent 1px,
        transparent 2px,
        rgba(0, 0, 0, 0.1) 3px
    );
    background-size: 100% 4px;
    opacity: 0.3;
    z-index: 99998;
    pointer-events: none;
    mix-blend-mode: overlay;
    animation: scanlineMove 8s linear infinite;
}

@keyframes scanlineMove {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(4px);
    }
}

/* ============================================
   Usage Instructions:
   ============================================
   
   1. Link this CSS file in your HTML:
      <link rel="stylesheet" href="tv-noise-overlay.css">
   
   2. For Version A (using image):
      - Create/download a 200x200px noise texture
      - Save as 'noise.png' in your project
      - Uncomment Version A code above
      - Comment out Version B code
   
   3. For Version B (CSS only):
      - No image needed
      - Already active by default
      - Uses repeating-radial-gradient for noise pattern
   
   4. Adjust opacity values if needed:
      - body::before opacity: 0.05-0.12 (noise overlay)
      - body::after opacity: 0.2-0.4 (scanlines)
   
   5. Customize animation speed:
      - moveNoise: 5s-10s (slower = more subtle)
      - noiseFlicker: 0.1s-0.2s (faster = more flicker)
      - scanlineMove: 8s-12s (slower = smoother)
*/