/* ============================================================ Optional CRT overlay. Toggle with . Two fixed, pointer-events:none layers, both composited — no filters, no backdrop-filter, no per-frame repaint. Costs one extra composited quad; drag stays at 60fps. ============================================================ */ .crt::before, .crt::after{ content:""; position:fixed; inset:0; pointer-events:none; z-index:var(--z-crt); will-change:transform; /* promote once, never animate layout */ } /* scanlines: 1px dark every 3px, aligned to the pixel unit */ .crt::before{ background:repeating-linear-gradient( to bottom, rgba(0,0,0,.28) 0 1px, rgba(0,0,0,0) 1px 3px); mix-blend-mode:multiply; opacity:.9; } /* vignette + faint aperture tint */ .crt::after{ background: radial-gradient(120% 100% at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,.28) 82%, rgba(0,0,0,.62) 100%), linear-gradient(90deg, rgba(255,0,80,.03), rgba(0,255,200,.03)); } /* very slow roll bar — transform only */ .crt.crt-roll::after{ animation:crt-roll 9s linear infinite; } @keyframes crt-roll{ from{ transform:translate3d(0,-2px,0); } to { transform:translate3d(0, 2px,0); } } /* kill it while dragging if you want absolute headroom */ .dragging .crt::before{ opacity:.5; } @media (prefers-reduced-motion:reduce){ .crt.crt-roll::after{ animation:none; } }