/* ==============================================
   CRT - always-on screen simulation
   ============================================== */

:root {
    --crt-scan-opacity: 0.05;
    --crt-scan-period: 5px;
    --crt-noise-opacity: 0.007;
    --crt-vignette: 0.08;
    --crt-sheen: 0.008;

    --crt-band-opacity: 0.03;
    --crt-band-speed: 14s;
    --crt-drift-speed: 8s;
    --crt-flicker-speed: 7s;
    --crt-flicker-min: 0.985;

    --crt-scan-burst-speed: 6.7s;
    --crt-scan-breathe-speed: 11.3s;
    --crt-scan-flicker-min: 0.3;
}

.crt {
    position: fixed;
    inset: 0;
    z-index: 10000;
    pointer-events: none;
    background:
        radial-gradient(ellipse 62% 46% at 28% 16%,
            rgba(255, 255, 255, var(--crt-sheen)) 0%,
            transparent 62%),
        radial-gradient(ellipse 110% 110% at 50% 50%,
            transparent 58%,
            rgba(0, 0, 0, var(--crt-vignette)) 100%);
    box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, 0.15);
    animation: crt-flicker var(--crt-flicker-speed) linear infinite;
}

/* ---------- tracking band ---------- */

.crt::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 16%;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(255, 255, 255, var(--crt-band-opacity)) 45%,
        rgba(255, 255, 255, var(--crt-band-opacity)) 55%,
        transparent 100%);
    animation: crt-roll var(--crt-band-speed) linear infinite;
    will-change: transform;
}

@keyframes crt-roll {
    from { transform: translateY(-120%); }
    to   { transform: translateY(720%); }
}

@keyframes crt-flicker {
    0%, 94%, 100% { opacity: 1; }
    95%           { opacity: var(--crt-flicker-min); }
    96%           { opacity: 1; }
    97%           { opacity: var(--crt-flicker-min); }
    98%           { opacity: 1; }
}

/* ---------- noise ---------- */

.crt::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    opacity: var(--crt-noise-opacity);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: crt-noise 0.7s steps(1, end) infinite;
    will-change: transform;
}

@keyframes crt-noise {
    0%   { transform: translate3d(0, 0, 0); }
    12%  { transform: translate3d(-7%, 4%, 0); }
    25%  { transform: translate3d(5%, -8%, 0); }
    37%  { transform: translate3d(-3%, -3%, 0); }
    50%  { transform: translate3d(8%, 6%, 0); }
    62%  { transform: translate3d(-6%, -5%, 0); }
    75%  { transform: translate3d(2%, 7%, 0); }
    87%  { transform: translate3d(-8%, 1%, 0); }
}

/* ---------- scanlines ---------- */

.crt-scan {
    position: absolute;
    inset: 0;
    animation: crt-scan-breathe var(--crt-scan-breathe-speed) ease-in-out infinite;
    will-change: opacity;
}

.crt-scan::before {
    content: '';
    position: absolute;
    top: calc(-1 * var(--crt-scan-period));
    right: 0;
    bottom: 0;
    left: 0;
    background: repeating-linear-gradient(180deg,
        rgba(0, 0, 0, var(--crt-scan-opacity)) 0 1px,
        transparent 1px var(--crt-scan-period));
    animation:
        crt-drift var(--crt-drift-speed) linear infinite,
        crt-scan-burst var(--crt-scan-burst-speed) steps(1, end) infinite;
    will-change: transform, opacity;
}

@keyframes crt-drift {
    from { transform: translateY(0); }
    to   { transform: translateY(var(--crt-scan-period)); }
}

@keyframes crt-scan-burst {
    0%, 19%   { opacity: 1; }
    20%       { opacity: 0.34; }
    21.5%     { opacity: 0.92; }
    23%       { opacity: var(--crt-scan-flicker-min); }
    24%       { opacity: 0.71; }
    25.5%     { opacity: 0.28; }
    27%       { opacity: 0.96; }
    28%, 46%  { opacity: 1; }
    47%       { opacity: 0.55; }
    48%, 63%  { opacity: 1; }
    64%       { opacity: var(--crt-scan-flicker-min); }
    65%       { opacity: 0.83; }
    66.5%     { opacity: 0.41; }
    68%       { opacity: 1; }
    69.5%     { opacity: 0.22; }
    71%       { opacity: 0.88; }
    72.5%     { opacity: 0.6; }
    74%, 88%  { opacity: 1; }
    89%       { opacity: 0.47; }
    90%, 100% { opacity: 1; }
}

@keyframes crt-scan-breathe {
    0%, 100% { opacity: 1; }
    17%      { opacity: 0.72; }
    34%      { opacity: 0.45; }
    51%      { opacity: 0.9; }
    68%      { opacity: 0.58; }
    85%      { opacity: 0.8; }
}

@media (max-width: 899px) {
    :root {
        --crt-vignette: 0.4;
    }
}

@media (prefers-reduced-motion: reduce) {
    .crt,
    .crt::before,
    .crt::after,
    .crt-scan,
    .crt-scan::before {
        animation: none;
    }

    .crt::before {
        display: none;
    }
}