/* WONDA CRT text effect. No scanline bars: just a soft glow, a red/cyan edge fringe and a faint flicker.
   ONE intensity variable: --crt (0 to 1), default .55.
   Per element:  class="crt".   Sitewide:  class="crt-site" on <body> (text-shadow inherits). */
:root{--crt:.55}
.crt,.crt-site{
  --o:calc(var(--crt)*1.6px);
  text-shadow:
    calc(var(--o)*-1) 0 0 rgba(255,40,90,calc(.6*var(--crt) + .22)),
    var(--o) 0 0 rgba(30,210,255,calc(.6*var(--crt) + .22)),
    0 0 calc(var(--crt)*8px) rgba(190,225,255,calc(var(--crt)*.4));
}
.crt,.crt-site :is(h1,h2,.display){animation:crt-flick 6s steps(1,end) infinite}
.crt-hot:hover{animation:crt-tear .38s steps(2,end) 1}
@keyframes crt-flick{0%,100%{opacity:1}7%{opacity:.94}7.6%{opacity:1}43%{opacity:.965}43.5%{opacity:1}81%{opacity:.95}81.7%{opacity:1}}
@keyframes crt-tear{0%{transform:none}25%{transform:translateX(calc(var(--crt)*-3px)) skewX(calc(var(--crt)*-3deg))}50%{transform:translateX(calc(var(--crt)*3px))}75%{transform:translateX(calc(var(--crt)*-1px)) skewX(calc(var(--crt)*1.5deg))}100%{transform:none}}
/* optional: one soft light sweep across the page, add <div class="crt-sweep"></div> once */
.crt-sweep{position:fixed;left:0;right:0;top:0;height:22vh;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(255,255,255,calc(var(--crt)*.04)) 50%,transparent);animation:crt-sweep 7s linear infinite;mix-blend-mode:overlay;z-index:50}
@keyframes crt-sweep{from{transform:translateY(-30vh)}to{transform:translateY(130vh)}}
@media (prefers-reduced-motion:reduce){.crt,.crt-site :is(h1,h2,.display),.crt-sweep,.crt-hot:hover{animation:none}}

/* CRT for images (logos): same red/cyan fringe and glow as the text version, via drop-shadow. class="crt-img". Uses --crt. */
.crt-img{
  --o:calc(var(--crt)*1.4px);
  filter:
    drop-shadow(calc(var(--o)*-1) 0 0 rgba(255,40,90,calc(.5*var(--crt) + .2)))
    drop-shadow(var(--o) 0 0 rgba(30,210,255,calc(.5*var(--crt) + .2)))
    drop-shadow(0 0 calc(var(--crt)*5px) rgba(190,225,255,calc(var(--crt)*.3)));
  animation:crt-flick 6s steps(1,end) infinite}
@media (prefers-reduced-motion:reduce){.crt-img{animation:none}}