:root{--crt-flicker:0.02} @keyframes crt-flicker{0%{opacity:.98} 50%{opacity:1} 100%{opacity:.97}} .crt{animation:crt-flicker 1.8s infinite steps(60);} .crt::before{content:"";position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.08) 0px,rgba(0,0,0,.08) 1px,transparent 2px,transparent 4px);mix-blend-mode:multiply} .crt::after{content:"";position:fixed;inset:-12vh -12vw -12vh -12vw;pointer-events:none;background:radial-gradient(ellipse at center, rgba(0,255,0,0.05) 0%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0.85) 100%)} .aperture{position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,rgba(0,255,0,.05) 0 1px,rgba(0,0,0,0) 1px 2px,rgba(0,255,0,.05) 2px 3px);mix-blend-mode:screen;opacity:.25} .crt > *{position:relative;} .crt > *::before{content:"";position:fixed;inset:0;pointer-events:none;backdrop-filter:none;} .crt .curved{position:relative;} .crt .curved::before{content:"";position:absolute;inset:-2vh -2vw;pointer-events:none;background:radial-gradient(120% 100% at 50% 50%, rgba(255,255,255,.02) 0%, rgba(0,0,0,0) 60%), radial-gradient(140% 120% at 50% 50%, rgba(0,0,0,.25) 60%, rgba(0,0,0,.45) 100%);border-radius:12px} @keyframes scan-shift{from{transform:translateY(-2%)} to{transform:translateY(2%)}} .crt .scanlines{position:fixed;inset:0;pointer-events:none;background:linear-gradient(rgba(0,0,0,.08) 50%, rgba(0,0,0,0) 50%);background-size:100% 3px;mix-blend-mode:multiply;animation:scan-shift 6s infinite alternate ease-in-out}