/* ═══════════════════════════════════════════════════════════════════════ */
/* █  THE OLD CATHODE REMEMBERS EVERYTHING                                █ */
/* █  STATIC WHISPERS YOUR NAME BETWEEN THE FRAMES                        █ */
/* ═══════════════════════════════════════════════════════════════════════ */

:root{
    --bg0:#000;
    --red:#ff1f1f;
    --accent:#7a0011;
    --glitch-x:0px; --glitch-y:0px;
    --tilt-x:0deg; --tilt-y:0deg;
    --zoom:1;
    --rgb-rx:0px; --rgb-ry:0px;
    --rgb-gx:0px; --rgb-gy:0px;
    --rgb-bx:0px; --rgb-by:0px;
    --vhs-tracking:0px; --vhs-wobble:0deg;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

/* ────────────────── the canvas that holds decay ─────────────────────── */
body{
    margin:0; padding:0;
    background:
        /* dead pixels scattered across glass */
            radial-gradient(1px 1px at 23px 41px, rgba(255,255,255,.08), transparent),
            radial-gradient(1px 1px at 89px 15px,  rgba(255,255,255,.06), transparent),
            radial-gradient(1px 1px at 156px 78px, rgba(255,255,255,.07), transparent),
            radial-gradient(1px 1px at 201px 34px, rgba(255,255,255,.05), transparent),
            radial-gradient(1px 1px at 67px 123px,  rgba(255,255,255,.09), transparent),
            radial-gradient(1px 1px at 134px 167px, rgba(255,255,255,.04), transparent),
            radial-gradient(1px 1px at 298px 89px,  rgba(255,255,255,.06), transparent),
            radial-gradient(1px 1px at 45px 198px,  rgba(255,255,255,.08), transparent),
                /* phosphor burn stains the screen */
            radial-gradient(2px 2px at 112px 67px, rgba(255,100,0,.03), transparent),
            radial-gradient(1px 1px at 234px 145px, rgba(0,100,255,.04), transparent),
            radial-gradient(2px 2px at 78px 234px, rgba(255,100,0,.02), transparent),
            radial-gradient(1px 1px at 189px 12px, rgba(0,100,255,.03), transparent),
                /* ghosts of images past */
            radial-gradient(ellipse 40px 30px at 25% 70%, rgba(0,0,0,.3), transparent),
            radial-gradient(ellipse 30px 25px at 75% 30%, rgba(0,0,0,.2), transparent),
            radial-gradient(ellipse 35px 20px at 60% 85%, rgba(0,0,0,.25), transparent),
                /* interference from the other side */
            repeating-radial-gradient(circle at 30% 40%, rgba(255,255,255,.008) 0 5px, transparent 6px 15px),
            repeating-radial-gradient(circle at 80% 60%, rgba(255,255,255,.006) 0 3px, transparent 4px 12px),
                /* the void beneath */
            radial-gradient(1200px 1200px at 50% 60%, #020202 0%, #000 60%);
    background-size:
            400px 400px, 400px 400px, 400px 400px, 400px 400px, 400px 400px, 400px 400px, 400px 400px, 400px 400px,
            350px 350px, 350px 350px, 350px 350px, 350px 350px,
            300px 200px, 250px 180px, 280px 160px,
            200px 200px, 180px 180px,
            cover;
    animation: tvStaticShift 12s linear infinite;
    color:var(--red);
    overflow:hidden;
    font-family:"Courier New", monospace;
    height:100vh; width:100vw; position:fixed;
    cursor:none;
    transform: translate(var(--glitch-x),var(--glitch-y)) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(var(--zoom)) skewX(var(--vhs-wobble));
    transition: transform 120ms cubic-bezier(.3,.9,.2,1.4);
    filter: saturate(.7) contrast(1.3);
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* █                        VHS CORRUPTION LAYERS                         █ */
/* ═══════════════════════════════════════════════════════════════════════ */

.fx-grain,.fx-scan,.fx-vignette,.fx-chroma,.fx-tracking,.fx-bleeding,.fx-static{
    position:fixed; inset:0; pointer-events:none; z-index:10000;
}

/* ─────────────────── film grain drifts eternal ──────────────────────── */
.fx-grain::before{
    content:""; position:absolute; inset:-50%;
    background:
            repeating-radial-gradient(circle at 30% 30%, rgba(255,255,255,.02) 0 2px, transparent 3px 6px),
            repeating-conic-gradient(from 0deg, rgba(255,255,255,.015) 0deg 10deg, transparent 10deg 20deg),
            repeating-linear-gradient(45deg, rgba(255,100,0,.008) 0px, transparent 2px, rgba(0,100,255,.008) 4px, transparent 6px);
    filter:url(#noiseFilter);
    animation: drift 10s linear infinite;
}

/* ─────────────────── scanlines breathe slowly ───────────────────────── */
.fx-scan::before{
    content:""; position:absolute; inset:0;
    background:
            repeating-linear-gradient(to bottom, rgba(255,0,0,.05), rgba(0,255,255,.05) 1px, transparent 2px 3px),
            repeating-linear-gradient(to bottom, transparent 0px, rgba(255,100,0,.03) 2px, transparent 4px, rgba(0,100,255,.03) 6px, transparent 8px);
    mix-blend-mode: overlay;
    animation: scan 3.2s linear infinite, vhsScan .1s infinite;
}

/* ─────────────────── tracking errors crawl ──────────────────────────── */
.fx-tracking::before{
    content:""; position:absolute; inset:0;
    background: repeating-linear-gradient(to bottom, transparent 0px, rgba(255,255,255,.1) 1px, transparent 2px 20px);
    transform: translateY(var(--vhs-tracking));
    animation: trackingDrift 4s ease-in-out infinite;
}

/* ─────────────────── color channels leak ────────────────────────────── */
.fx-bleeding::before,.fx-bleeding::after{
    content:""; position:absolute; inset:0; mix-blend-mode:screen; opacity:.12;
}
.fx-bleeding::before{ background: linear-gradient(90deg, transparent, rgba(255,100,0,.3), transparent); transform: translateX(-2px); animation: colorBleed 6s ease-in-out infinite; }
.fx-bleeding::after{  background: linear-gradient(90deg, transparent, rgba(0,100,255,.3), transparent);  transform: translateX( 2px); animation: colorBleed 6s ease-in-out infinite reverse; }

/* ─────────────────── static erupts briefly ──────────────────────────── */
.fx-static::before{
    content:""; position:absolute; inset:0; opacity:0;
    background: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,.15) 20%, transparent 22%, transparent 78%, rgba(255,255,255,.15) 80%, transparent 100%);
    animation: staticBars .3s steps(3) infinite;
}

/* ─────────────────── RGB channels split apart ───────────────────────── */
.fx-chroma::before,.fx-chroma::after{
    content:""; position:absolute; inset:0; mix-blend-mode:screen; opacity:.18; pointer-events:none;
}
.fx-chroma::before{ box-shadow: var(--rgb-rx) var(--rgb-ry) 0 rgba(255,100,0,.9) inset; }
.fx-chroma::after { box-shadow: var(--rgb-bx) var(--rgb-by) 0 rgba(0,100,255,.9) inset; }

/* ─────────────────── darkness creeps inward ─────────────────────────── */
.fx-vignette{ box-shadow: inset 0 0 220px rgba(0,0,0,.85); z-index:9999; animation: vignettePulse 9s ease-in-out infinite; }

/* ═══════════════════════════════════════════════════════════════════════ */
/* █                        ANIMATION RITUALS                             █ */
/* ═══════════════════════════════════════════════════════════════════════ */

@keyframes tvStaticShift{
    0%{background-position:23px 41px, 89px 15px, 156px 78px, 201px 34px, 67px 123px, 134px 167px, 298px 89px, 45px 198px,
    112px 67px, 234px 145px, 78px 234px, 189px 12px, 0 0,0 0,0 0, 0 0,0 0, 0 0;}
    15%{background-position:156px 12px, 67px 189px, 234px 45px, 89px 167px, 298px 78px, 45px 234px, 178px 123px, 201px 56px,
    289px 134px, 156px 23px, 345px 89px, 67px 178px, 0 0,0 0,0 0, 15px 35px,45px 15px, 0 0;}
    30%{background-position:78px 234px, 234px 67px, 45px 156px, 167px 23px, 123px 189px, 289px 45px, 56px 167px, 178px 89px,
    67px 298px, 189px 156px, 123px 34px, 234px 178px, 0 0,0 0,0 0, 65px 25px,25px 75px, 0 0;}
    45%{background-position:345px 167px, 123px 45px, 289px 234px, 56px 89px, 178px 12px, 67px 156px, 234px 234px, 89px 67px,
    156px 189px, 298px 78px, 45px 123px, 167px 234px, 0 0,0 0,0 0, 35px 65px,85px 45px, 0 0;}
    60%{background-position:189px 78px, 45px 167px, 167px 23px, 234px 189px, 89px 45px, 156px 234px, 67px 12px, 298px 156px,
    234px 45px, 67px 234px, 189px 67px, 123px 189px, 0 0,0 0,0 0, 75px 15px,55px 85px, 0 0;}
    75%{background-position:67px 189px, 298px 34px, 123px 167px, 45px 78px, 234px 123px, 178px 67px, 156px 189px, 89px 234px,
    345px 167px, 78px 45px, 234px 156px, 189px 89px, 0 0,0 0,0 0, 45px 75px,75px 25px, 0 0;}
    90%{background-position:234px 56px, 156px 234px, 89px 12px, 178px 167px, 67px 89px, 298px 189px, 123px 45px, 167px 78px,
    189px 123px, 345px 234px, 67px 167px, 298px 45px, 0 0,0 0,0 0, 85px 55px,15px 65px, 0 0;}
    100%{background-position:123px 167px, 234px 89px, 67px 234px, 298px 45px, 156px 167px, 89px 123px, 345px 78px, 178px 234px,
    67px 156px, 189px 67px, 298px 189px, 156px 123px, 0 0,0 0,0 0, 55px 85px,95px 35px, 0 0;}
}
@keyframes vhsScan{ 0%{filter:hue-rotate(0) brightness(1)} 33%{filter:hue-rotate(10deg) brightness(1.1)} 66%{filter:hue-rotate(-5deg) brightness(.9)} 100%{filter:hue-rotate(0) brightness(1)} }
@keyframes trackingDrift{ 0%,100%{--vhs-tracking:0px} 25%{--vhs-tracking:-3px} 75%{--vhs-tracking:2px} }
@keyframes colorBleed{ 0%,100%{transform:translateX(0) scaleX(1)} 50%{transform:translateX(-4px) scaleX(1.02)} }
@keyframes staticBars{ 0%{opacity:0;transform:translateY(0)} 10%{opacity:.6} 30%{opacity:.3;transform:translateY(-2px)} 60%{opacity:.8;transform:translateY(1px)} 100%{opacity:0;transform:translateY(0)} }
@keyframes vignettePulse{ 0%,100%{box-shadow:inset 0 0 220px rgba(0,0,0,.85)} 50%{box-shadow:inset 0 0 260px rgba(0,0,0,.92)} }
@keyframes scan{ 0%{transform:translateY(-2%);opacity:.4} 50%{opacity:.15} 100%{transform:translateY(2%);opacity:.4} }
@keyframes drift{ 0%{transform:translate3d(0,0,0) scale(1.1)} 100%{transform:translate3d(-10%,-8%,0) scale(1.1)} }

/* ═══════════════════════════════════════════════════════════════════════ */
/* █                      FLOATING CHARACTERS                             █ */
/* ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────── letters rise like spirits ──────────────────────── */
.creepy-six{
    position:absolute;
    font-size:clamp(2rem,8vw,5rem);
    font-weight:700;
    color:rgba(255,255,255,.88);
    text-shadow:0 0 12px rgba(255,255,255,.45), 0 0 28px rgba(255,255,255,.25);
    pointer-events:none; z-index:900; user-select:none; letter-spacing:.04em;
    will-change:transform,opacity;
    animation: floatNoSpin 9s linear infinite;
}
@keyframes floatNoSpin{
    0%{   transform:translate(-1px,105vh); opacity:0; }
    8%{   opacity:.9; }
    20%{  transform:translate(1px,80vh); }
    40%{  transform:translate(-1px,55vh); }
    60%{  transform:translate(1px,30vh); }
    80%{  transform:translate(-1px,8vh); opacity:.88; }
    100%{ transform:translate(0,-10vh); opacity:0; }
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* █                      CENTER HEADLINE                                 █ */
/* ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────── the words that won't die ───────────────────────── */
.static-text{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    font-size:clamp(3rem,12vw,7rem);
    color:var(--red);
    text-shadow:0 0 16px var(--red), 2px 0 rgba(255,100,0,.7), -2px 0 rgba(0,100,255,.6);
    animation:flicker 2.3s steps(2,end) infinite, jitter 8s infinite;
    z-index:1100; user-select:none; white-space:nowrap; letter-spacing:.03em;
}
.static-text::after{
    content:attr(data-ghost);
    position:absolute; inset:0;
    transform:translate(2px,-2px);
    opacity:.12; filter:blur(2px); pointer-events:none;
}
@keyframes jitter{
    0%,100%{ transform:translate(-50%,-50%) skew(0deg); }
    20%{ transform:translate(calc(-50% + 1px), calc(-50% - 1px)) skew(.3deg); }
    40%{ transform:translate(calc(-50% - 1px), calc(-50% + 1px)) skew(-.4deg); }
    60%{ transform:translate(calc(-50% + 1px), calc(-50% + 0px)) skew(.2deg); }
    80%{ transform:translate(calc(-50% - 1px), calc(-50% - 1px)) skew(-.2deg); }
}
@keyframes flicker{
    0%,52%,100%{opacity:1}
    8%,12%,38%,76%{opacity:.15}
    10%,40%,78%{opacity:.5}
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* █                      LOGO THAT BITES BACK                            █ */
/* ═══════════════════════════════════════════════════════════════════════ */

.weird-logo{
    position:fixed; top:20px; left:20px; width:80px; height:80px;
    z-index:1200; cursor:none;
    transition: transform .08s ease, filter .08s ease;
    filter: brightness(.9) saturate(1.6) contrast(1.2);
}
.weird-logo:hover{
    animation: logoGlitch .6s infinite;
    filter: brightness(1.6) saturate(3) hue-rotate(180deg) contrast(1.5);
}
@keyframes logoGlitch{
    0%{ transform:translate(0,0) rotate(0) scale(1); }
    10%{ transform:translate(-5px,2px) rotate(-2deg) scale(1.12); }
    20%{ transform:translate(3px,-4px) rotate(1deg) scale(.94); }
    35%{ transform:translate(-2px,3px) rotate(-3deg) scale(1.18); filter:invert(1); }
    50%{ transform:translate(4px,1px) rotate(2deg) scale(.86); }
    70%{ transform:translate(-4px,0) rotate(-2deg) scale(1.08); }
    90%{ transform:translate(-1px,2px) rotate(-3deg) scale(1.16); }
    100%{transform:translate(0,0) rotate(0) scale(1); filter:invert(0); }
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* █                      WHISPERED MESSAGES                              █ */
/* ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────── voices from the margins ────────────────────────── */
.whisper{
    position:fixed; max-width:30ch; font-size:clamp(.8rem,2.2vw,1.1rem);
    opacity:0; color:#d11; text-shadow:0 0 6px #400; filter:blur(.7px);
    pointer-events:none; z-index:1050; animation: whisperFade 5.8s ease forwards;
}
@keyframes whisperFade{
    0%{opacity:0; transform:translateY(8px)}
    10%{opacity:.35}
    80%{opacity:.22}
    100%{opacity:0; transform:translateY(-4px)}
}

/* ─────────────────── clickable code fragments ───────────────────────── */
.whisper-extra{
    position:fixed; max-width:25ch; font-size:clamp(.7rem,1.6vw,.9rem);
    opacity:0; color:#ff1a1a; background:rgba(0,0,0,.85);
    padding:3px 8px; border-radius:3px; letter-spacing:.5px; font-weight:400;
    border:1px solid rgba(255,26,26,.3); text-shadow:0 0 6px #ff1a1a, 0 0 12px rgba(255,26,26,.6);
    font-family:"Courier New", monospace; cursor:pointer; transition:transform .1s ease;
    z-index:1040; animation: whisperExtraFlicker 4.5s ease forwards;
}
.whisper-extra:hover,
.whisper-extra:active{
    transform:scale(1.05);
    box-shadow:0 0 15px rgba(255,26,26,.5);
}
.whisper-extra.clicked{
    animation: whisperGrowDie 1.2s ease-out forwards !important;
    z-index:2500; pointer-events:none;
}
@keyframes whisperExtraFlicker{
    0%{opacity:0; transform:scale(.9)}
    5%{opacity:.9; transform:scale(1)}
    10%{opacity:.3}
    15%{opacity:.95}
    20%{opacity:.4}
    25%{opacity:.9}
    30%{opacity:.2}
    35%{opacity:.85}
    40%{opacity:.6}
    50%{opacity:.9}
    60%{opacity:.75}
    70%{opacity:.85}
    80%{opacity:.6}
    90%{opacity:.4}
    95%{opacity:.2}
    100%{opacity:0; transform:scale(.8)}
}
@keyframes whisperGrowDie{
    0%{opacity:.9; transform:scale(1) rotate(0); filter:blur(0)}
    15%{opacity:1; transform:scale(2) rotate(1deg); text-shadow:0 0 20px #ff1a1a, 0 0 40px rgba(255,26,26,.8)}
    30%{opacity:1; transform:scale(4) rotate(-.5deg)}
    50%{opacity:1; transform:scale(8) rotate(.5deg)}
    70%{opacity:.95; transform:scale(12) rotate(-.2deg); filter:blur(1px)}
    85%{opacity:.8; transform:scale(16) rotate(.3deg); filter:blur(2px)}
    95%{opacity:.3; transform:scale(20) rotate(-.1deg); filter:blur(4px)}
    100%{opacity:0; transform:scale(25) rotate(0); filter:blur(8px)}
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* █                      MATHEMATICAL GHOSTS                             █ */
/* ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────── equations flicker briefly ──────────────────────── */
.formula-flicker{
    position:fixed; z-index:9998; pointer-events:none; opacity:0;
    font-family:"Courier New", ui-monospace, monospace;
    color:rgba(255,255,255,.85);
    text-shadow:0 0 12px rgba(255,0,0,.25), 0 0 24px rgba(255,0,0,.18);
    filter:url(#noiseFilter);
    animation: formulaFlash 1.4s ease-out forwards;
}
@keyframes formulaFlash{
    0%{opacity:0; transform:translateY(2px) scale(.95)}
    15%{opacity:.9; transform:translateY(0) scale(1)}
    85%{opacity:.85; transform:translateY(0) scale(1)}
    100%{opacity:0; transform:translateY(-2px) scale(.9)}
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* █                      HIDDEN REVELATION                               █ */
/* ═══════════════════════════════════════════════════════════════════════ */

.hidden-message{
    position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
    font-size:clamp(1.5rem,6vw,3rem); font-weight:bold; text-align:center;
    color:#b1a292; text-shadow:0 0 20px rgba(122,85,60,.8), 0 0 40px rgba(117,154,213,.6);
    z-index:2000; opacity:0; pointer-events:none;
    backdrop-filter: blur(10px);
    background:rgba(0,0,0,.7); padding:20px; border-radius:10px; border:2px solid rgba(126,106,92,.5);
    animation: hiddenReveal 3s ease-in-out;
}
@keyframes hiddenReveal{
    0%{opacity:0; transform:translate(-50%,-50%) scale(.5)}
    20%{opacity:1; transform:translate(-50%,-50%) scale(1.1)}
    80%{opacity:1; transform:translate(-50%,-50%) scale(1)}
    100%{opacity:0; transform:translate(-50%,-50%) scale(.8)}
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* █                      CODE REVELATIONS                                █ */
/* ═══════════════════════════════════════════════════════════════════════ */

.code-snippet-flicker{
    position:fixed; z-index:9999; pointer-events:none; opacity:0;
    font-family:Consolas, Monaco, monospace; font-size:14px; color:#00ff00;
    background:rgba(0,0,0,.5); padding:5px 10px;
    text-shadow:0 0 5px #00ff00, 0 0 10px #00ff00; filter:url(#distort);
    animation: flicker-in-out .25s forwards;
}
@keyframes flicker-in-out{ 0%{opacity:0; transform:scale(.8)} 50%{opacity:.7; transform:scale(1.05)} 100%{opacity:0; transform:scale(.9)} }

.command-hint-flicker{
    position:fixed; z-index:9998; pointer-events:none; opacity:0;
    font-family:"Courier New", monospace; font-size:18px; font-weight:bold; color:#b1a292;
    text-shadow:0 0 8px #b1a292; animation: command-fade .8s forwards;
}
@keyframes command-fade{ 0%{opacity:0} 20%{opacity:1} 80%{opacity:1} 100%{opacity:0} }

/* ═══════════════════════════════════════════════════════════════════════ */
/* █                      INTERFACE ELEMENTS                              █ */
/* ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────── the eye that blinks ────────────────────────────── */
.blink{
    position:fixed; inset:0; pointer-events:none; z-index:1500;
    background:#000; opacity:0; transition:opacity .12s ease;
}

/* ─────────────────── light that follows late ────────────────────────── */
.spotlight{
    position:fixed; inset:0; pointer-events:none; z-index:200;
    background: radial-gradient(200px 200px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.03), rgba(255,255,255,0) 60%);
    mix-blend-mode: overlay;
}

/* ─────────────────── cursor possessed ───────────────────────────────── */
.cursor-dot,.cursor-ring{
    position:fixed; pointer-events:none; z-index:1400; border-radius:50%;
    transform:translate(-50%,-50%); will-change:transform,opacity;
}
.cursor-dot{ width:6px; height:6px; background:#af0000; box-shadow:0 0 12px #af0000; }
.cursor-ring{ width:24px; height:24px; border:1px solid rgba(255,0,0,.5); box-shadow:0 0 24px rgba(255,0,0,.35) inset; }

/* ═══════════════════════════════════════════════════════════════════════ */
/* █                      SCROLLING TRANSMISSIONS                         █ */
/* ═══════════════════════════════════════════════════════════════════════ */

.marquee{
    height:30px; line-height:30px;
    font-size:14px; letter-spacing:.18em;
    color:rgba(255,255,255,.92);
    text-shadow:0 0 6px rgba(255,255,255,.35), 0 0 14px red;
    -webkit-text-stroke:.4px rgba(0,0,0,.45);
    background: linear-gradient(to right, rgba(0,0,0,.65), rgba(0,0,0,.4));
    border-bottom:1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(3px) saturate(1.1);
    position:fixed; top:0; left:0; right:0; z-index:600; overflow:hidden; white-space:nowrap;
}
.marquee span{ display:inline-block; padding-left:100%; animation: marquee 22s linear infinite; }
@keyframes marquee{ from{transform:translateX(0)} to{transform:translateX(-100%)} }

.marquee-bottom{
    position:fixed; left:0; right:0; bottom:0; z-index:600;
    height:28px; line-height:28px; font-size:13px;
    color:red; letter-spacing:.15em; overflow:hidden; white-space:nowrap;
    background:rgba(0,0,0,.9); border-top:1px solid red; font-family:"Courier New", monospace; display:flex; align-items:center;
}
.marquee-bottom span{ display:inline-block; padding-left:100%; animation: marqueeBottom 25s linear infinite; text-shadow:0 0 8px rgba(255,0,0,.6); }
@keyframes marqueeBottom{ from{transform:translateX(0)} to{transform:translateX(-100%)} }

/* ═══════════════════════════════════════════════════════════════════════ */
/* █                      GLITCH ARTIFACTS                                █ */
/* ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────── scan line tears ────────────────────────────────── */
.tear{
    position:fixed; left:-20%; width:140%; height:8px; z-index:1300; opacity:0;
    background:linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,100,0,.1), rgba(0,100,255,.08), rgba(255,255,255,.06));
    mix-blend-mode:screen; transform:translateX(-100%) skewX(12deg);
}
.tear.run{ animation: tearMove .35s cubic-bezier(.21,.9,.34,1.4); }
@keyframes tearMove{
    0%{ opacity:0; transform:translateX(-110%) skewX(12deg) }
    15%{ opacity:.6 }
    100%{ opacity:0; transform:translateX(110%) skewX(-6deg) }
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* █                      VOLUME CONTROL                                  █ */
/* ═══════════════════════════════════════════════════════════════════════ */

#volume-control{
    position:fixed; right:18px; bottom:18px; z-index:10000;
    display:inline-flex; align-items:center; gap:.6rem;
    padding:.85rem 1.1rem; border-radius:999px; border:1px solid rgba(255,255,255,.25);
    background:rgba(0,0,0,.55); color:#fff; letter-spacing:.08em; font-family:"Courier New", monospace; font-size:14px;
    cursor:pointer; backdrop-filter: blur(4px);
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
#volume-control:hover{ transform:translateY(-1px); box-shadow:0 6px 20px rgba(0,0,0,.35); }
#volume-control.attention{ animation: vc-pulse 1.2s ease-in-out infinite; box-shadow:0 0 0 0 rgba(255,165,0,.45); }
#volume-control.muted{ opacity:.85; color:rgba(255,26,26,.5); }
#volume-control svg{ width:22px; height:22px; }
#volume-control span{ user-select:none; font-weight:700; }
#volume-control .slash{ display:none; }
#volume-control.muted .slash{ display:block; }
#volume-control:hover:not(.muted){ background:#ff1f1f; color:#000; text-shadow:0 0 8px #000; box-shadow:0 0 15px #ff1f1f; }
#volume-control.muted:hover{ color:#00ff00; background:rgba(0,255,0,.15); border-color:#00ff00; box-shadow:0 0 15px #00ff00; }
@keyframes vc-pulse{ 0%{box-shadow:0 0 0 0 rgba(255,165,0,.45)} 70%{box-shadow:0 0 0 16px rgba(255,165,0,0)} 100%{box-shadow:0 0 0 0 rgba(255,165,0,0)} }

/* ═══════════════════════════════════════════════════════════════════════ */
/* █                      PHOTO MEMORY LAYER                              █ */
/* ═══════════════════════════════════════════════════════════════════════ */

#bg-stack{
    position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden;
}
#bg-stack .bg-layer{
    position:absolute; inset:-2%; width:104%; height:104%; object-fit:cover;
    opacity:0; transform:scale(1.04);
    filter: blur(10px) contrast(1.15) saturate(.6) brightness(.6);
    transition: opacity 900ms ease, transform 9s ease;
    animation: bgDrift 28s linear infinite; mix-blend-mode:normal;
}
#bg-stack .bg-layer.is-active{ opacity:.85; transform:scale(1); }
#bg-stack .bg-layer.flick{ animation: bgFlick 180ms steps(2,end); }
#bg-stack .bg-static{
    position:absolute; inset:0; opacity:.08;
    background:
            repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 3px),
            repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 2px);
    mix-blend-mode: overlay; animation: bgStaticBars .25s steps(3,end) infinite;
}
@keyframes bgDrift{ 0%{transform:scale(1.04) translate3d(0,0,0)} 50%{transform:scale(1.06) translate3d(1.2%,-1.2%,0)} 100%{transform:scale(1.04) translate3d(0,0,0)} }
@keyframes bgFlick{ 0%{opacity:0; filter:blur(12px) contrast(1.4) brightness(.5)} }
@keyframes bgStaticBars{ 0%{opacity:.08} 50%{opacity:.14} 100%{opacity:.08} }

/* ═══════════════════════════════════════════════════════════════════════ */
/* █                      BLOOD DRIP SYSTEM                               █ */
/* ═══════════════════════════════════════════════════════════════════════ */

#blood-layer{
    position:fixed; inset:0; pointer-events:none; z-index:500; mix-blend-mode:normal;
}
.blood-drip{
    position:absolute; top:-4vh; width:2px; height:18vh; opacity:.12;
    background: linear-gradient(to bottom, rgba(180,10,14,.25) 0%, rgba(160,8,12,.35) 22%, rgba(130,6,10,.32) 55%, rgba(90,4,8,0) 100%);
    filter: blur(.6px) contrast(1.1) saturate(1.2);
    border-radius:2px; transform:translateY(-10vh) translateX(0);
    animation: dripDown var(--dripDur,11s) ease-in forwards;
}
.blood-drip::after{
    content:""; position:absolute; left:50%; bottom:-.9vh; width:8px; height:8px; transform:translateX(-50%);
    background: radial-gradient(circle, rgba(180,12,14,.35) 0%, rgba(120,6,10,.25) 60%, rgba(120,6,10,0) 70%);
    filter: blur(.4px); border-radius:50%;
}
.blood-drip::before{
    content:""; position:absolute; top:-6px; left:-5px; width:12px; height:10px;
    background: radial-gradient(10px 8px at 50% 70%, rgba(150,10,12,.28) 0%, rgba(150,10,12,0) 70%);
    transform: rotate(var(--smearRot,0deg)); opacity:.35; filter: blur(.6px);
}
@keyframes dripDown{
    0%{   transform:translateY(-10vh) translateX(0) }
    35%{  transform:translateY(15vh) translateX(var(--swing1,4px)) }
    70%{  transform:translateY(45vh) translateX(var(--swing2,-6px)) }
    100%{ transform:translateY(100vh) translateX(0); opacity:0 }
}

/* ═══════════════════════════════════════════════════════════════════════ */
/* █                      MOBILE ADAPTATIONS                              █ */
/* ═══════════════════════════════════════════════════════════════════════ */

@media (max-width:768px){
    .creepy-six{ font-size:clamp(1.5rem,9vw,3rem); }
    .static-text{ font-size:clamp(2.2rem,14vw,5rem); }
    .cursor-dot,.cursor-ring{ display:none; }
    .hidden-message{ font-size:clamp(1.2rem,5vw,2rem); }
    .whisper-extra{ font-size:clamp(.8rem,2.5vw,1.1rem); padding:6px 12px; min-height:32px; min-width:40px; display:flex; align-items:center; justify-content:center; border-radius:4px; touch-action:manipulation; }
    .fx-grain::before{ animation-duration:15s; }
    .fx-scan::before{ animation-duration:4s; }
    .weird-logo{ width:100px; height:100px; touch-action:manipulation; }
}
@media (max-width:480px){
    .whisper-extra{ font-size:clamp(.9rem,3vw,1.2rem); padding:8px 14px; min-height:40px; min-width:48px; }
    @keyframes whisperGrowDie{
        0%{opacity:.9; transform:scale(1)}
        25%{opacity:1; transform:scale(3)}
        50%{opacity:1; transform:scale(6)}
        75%{opacity:.8; transform:scale(10); filter:blur(1px)}
        100%{opacity:0; transform:scale(15); filter:blur(3px)}
    }
}

/* ─────────────────── respect the user's wishes ──────────────────────── */
@media (prefers-reduced-motion: reduce){
    .formula-flicker{ transition:none !important; }
    .blood-drip{ animation-duration:0s; opacity:0; }
}

/* ─────────────────── disable heavy fx on small screens ──────────────── */
@media (max-width:840px), (orientation:portrait){
    .fx-grain,.fx-scan,.fx-chroma,.fx-tracking,.fx-bleeding,.fx-static,.fx-vignette{ display:none !important; }
}