/* Copyright © beginning at 2026 - BlackDevilCreations
* CRT + VHS + Screen-Curvature + Vignette post-processing overlay.
* Drop-in: linked from index.html, driven by JS/crt-overlay.js.
* All effect layers live inside #crt-screen so the barrel-warp filter
* bends the whole picture (content + scanlines + vignette) as one.
*/

/* The wrapper that JS moves .bg-container + .ui-root into.
   The SVG barrel filter is applied here so real geometry curves. */
#crt-screen {
    position: fixed;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    /* filter is set from JS (url(#crtWarp)) so it can be toggled */
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Overlay lives ABOVE the UI (ui-root is z-index:100) */
#crt-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    pointer-events: none;
    overflow: hidden;
}
#crt-overlay > * {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* ---- Horizontal scanlines ---------------------------------------- */
#crt-scanlines {
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0px,
        rgba(0, 0, 0, 0) 1.5px,
        rgba(0, 0, 0, 0.32) 2px,
        rgba(0, 0, 0, 0.32) 3px
    );
    mix-blend-mode: multiply;
    opacity: 0.85;
    animation: crt-flicker 5.5s steps(60) infinite;
}

/* ---- Aperture-grille / RGB shadow-mask (very subtle) ------------- */
#crt-mask {
    background: repeating-linear-gradient(
        to right,
        rgba(255, 0, 0, 0.05) 0px,
        rgba(0, 255, 0, 0.05) 1px,
        rgba(0, 0, 255, 0.05) 2px,
        rgba(0, 0, 0, 0.05) 3px
    );
    mix-blend-mode: screen;
    opacity: 0.5;
}

/* ---- Film / VHS grain (SVG turbulence, set by JS) ---------------- */
#crt-grain {
    opacity: 0.10;
    mix-blend-mode: overlay;
    background-repeat: repeat;
    animation: crt-grain 0.6s steps(4) infinite;
    will-change: transform;
}

/* ---- Rolling brightness band (VHS head-switch sweep) ------------- */
#crt-roll {
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.035) 45%,
        rgba(255, 255, 255, 0.07) 50%,
        rgba(255, 255, 255, 0.035) 55%,
        rgba(255, 255, 255, 0) 100%
    );
    height: 28%;
    inset: -28% 0 auto 0;
    mix-blend-mode: screen;
    animation: crt-roll 7s linear infinite;
}

/* ---- Vignette (darkened, rounded tube edges) -------------------- */
#crt-vignette {
    background:
        radial-gradient(ellipse 100% 100% at 50% 50%,
            rgba(0,0,0,0) 55%,
            rgba(0,0,0,0.35) 78%,
            rgba(0,0,0,0.78) 100%);
    mix-blend-mode: multiply;
}

/* ---- Screen glass glare (top-left soft highlight) --------------- */
#crt-glare {
    background:
        radial-gradient(ellipse 60% 45% at 28% 18%,
            rgba(255,255,255,0.05) 0%,
            rgba(255,255,255,0) 60%);
    mix-blend-mode: screen;
}

/* ---- Curved-tube bezel frame (rounded black corners) ------------ */
#crt-frame {
    /* rounded glass corners: opaque black only in the four corners so
       straight edges keep their content, unlike a uniform bezel band */
    background:
        radial-gradient(circle 120px at 0 0,        #000 34px, rgba(0,0,0,0) 66px),
        radial-gradient(circle 120px at 100% 0,      #000 34px, rgba(0,0,0,0) 66px),
        radial-gradient(circle 120px at 0 100%,      #000 34px, rgba(0,0,0,0) 66px),
        radial-gradient(circle 120px at 100% 100%,   #000 34px, rgba(0,0,0,0) 66px);
    box-shadow:
        inset 0 0 50px 8px rgba(0,0,0,0.45),
        inset 0 0 130px 26px rgba(0,0,0,0.30);
}

/* ---- VHS tracking-glitch slice (toggled on by JS) --------------- */
#crt-glitch {
    opacity: 0;
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,0) 0px,
            rgba(255,255,255,0.10) 1px,
            rgba(0,0,0,0.10) 2px,
            rgba(255,255,255,0) 4px
        );
    mix-blend-mode: overlay;
    height: 14%;
    inset: 30% 0 auto 0;
    box-shadow: 0 0 24px 6px rgba(0,0,0,0.4);
}

/* ---- Animations ------------------------------------------------- */
@keyframes crt-flicker {
    0%   { opacity: 0.84; }
    10%  { opacity: 0.80; }
    20%  { opacity: 0.86; }
    35%  { opacity: 0.82; }
    50%  { opacity: 0.88; }
    60%  { opacity: 0.81; }
    75%  { opacity: 0.86; }
    90%  { opacity: 0.83; }
    100% { opacity: 0.85; }
}
@keyframes crt-grain {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(-2%, 1%); }
    50%  { transform: translate(1%, -2%); }
    75%  { transform: translate(-1%, 2%); }
    100% { transform: translate(2%, -1%); }
}
@keyframes crt-roll {
    0%   { transform: translateY(0); }
    100% { transform: translateY(calc(100vh + 28vh)); }
}

/* Respect reduced-motion: kill the moving parts, keep the look */
@media (prefers-reduced-motion: reduce) {
    #crt-scanlines,
    #crt-grain,
    #crt-roll { animation: none; }
    #crt-roll { display: none; }
}