/* ---- Glitch TV "true RGB channel split" overlay for the sliders ----
   Exactly one burst per page visit, the instant the slider shows its first
   slide -- then it stays quiet for good. glitch-tv.js adds "g81-burst-play"
   to trigger the burst; the animation is not attached at all until that
   class is present, so nothing can play before the image is really on
   screen. The R/G/B channels of the slide image are isolated with SVG
   feColorMatrix filters (injected once by glitch-tv.js), then each channel
   is nudged independently -- where they overlap they recombine additively
   (screen blend) into cyan / magenta / yellow, exactly like a mis-tracked
   RGB signal. Always-on: fine horizontal scanline texture (g81-scan). */
.glitch81-overlay{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none;}

/* Always-on scanline texture -- kept from the previous version, darkened per request */
.glitch81-overlay .g81-scan{position:absolute;inset:0;background:repeating-linear-gradient(to bottom,rgba(0,0,0,0.20) 0px,rgba(0,0,0,0.20) 1px,transparent 1px,transparent 3px);mix-blend-mode:overlay;}

/* ---- The star effect: 3 full-frame copies of the slide, each isolated to
   one color channel via an SVG filter, independently offset. Fully opaque
   (screen blend on black contributes nothing, so this reads as clean color,
   not a wash) but only visible while the burst plays -- opacity returns to
   0 at the end so the real image underneath is never doubled at rest. ---- */
.glitch81-overlay .g81-chan{position:absolute;inset:0;background-size:cover;background-position:center;mix-blend-mode:screen;opacity:0;}
.glitch81-overlay .g81-chan-r{filter:url(#g81filterR);}
.glitch81-overlay .g81-chan-g{filter:url(#g81filterG);}
.glitch81-overlay .g81-chan-b{filter:url(#g81filterB);}
.glitch81-overlay.g81-burst-play .g81-chan-r{animation:g81chanR 1.2s steps(7) 1;animation-fill-mode:forwards;}
.glitch81-overlay.g81-burst-play .g81-chan-g{animation:g81chanG 1.2s steps(7) 1;animation-fill-mode:forwards;}
.glitch81-overlay.g81-burst-play .g81-chan-b{animation:g81chanB 1.2s steps(7) 1;animation-fill-mode:forwards;}
@keyframes g81chanR{
0%{opacity:0;transform:translate(0,0);}
8%{opacity:0.95;transform:translate(-9%,-6%);}
28%{opacity:0.95;transform:translate(6%,4%);}
48%{opacity:0.8;transform:translate(-4%,3%);}
68%{opacity:0.5;transform:translate(2%,-2%);}
85%{opacity:0.15;transform:translate(1%,0);}
100%{opacity:0;transform:translate(0,0);}
}
@keyframes g81chanG{
0%{opacity:0;transform:translate(0,0);}
8%{opacity:0.95;transform:translate(7%,-4%);}
28%{opacity:0.95;transform:translate(-5%,5%);}
48%{opacity:0.8;transform:translate(3%,-3%);}
68%{opacity:0.5;transform:translate(-2%,1%);}
85%{opacity:0.15;transform:translate(-1%,0);}
100%{opacity:0;transform:translate(0,0);}
}
@keyframes g81chanB{
0%{opacity:0;transform:translate(0,0);}
8%{opacity:0.95;transform:translate(-2%,8%);}
28%{opacity:0.95;transform:translate(4%,-7%);}
48%{opacity:0.8;transform:translate(-3%,-2%);}
68%{opacity:0.5;transform:translate(1%,2%);}
85%{opacity:0.15;transform:translate(0,1%);}
100%{opacity:0;transform:translate(0,0);}
}

/* ---- Colored streak burst: a tight cluster of thin horizontal bars in the
   reference palette, flashing in quick sequence like a mistracked signal ---- */
.glitch81-overlay .g81-streak{position:absolute;left:0;width:100%;height:2px;opacity:0;mix-blend-mode:screen;}
.glitch81-overlay .g81-streak.s1{top:12%;background:#37f0d8;}
.glitch81-overlay .g81-streak.s2{top:13.4%;background:#ff33c9;}
.glitch81-overlay .g81-streak.s3{top:15%;background:#ffffff;}
.glitch81-overlay .g81-streak.s4{top:63%;background:#ff8a2b;}
.glitch81-overlay .g81-streak.s5{top:64.6%;background:#37f0d8;}
.glitch81-overlay.g81-burst-play .g81-streak.s1{animation:g81streakFlash 1.2s steps(1) 1;animation-fill-mode:forwards;animation-delay:0.02s;}
.glitch81-overlay.g81-burst-play .g81-streak.s2{animation:g81streakFlash 1.2s steps(1) 1;animation-fill-mode:forwards;animation-delay:0.06s;}
.glitch81-overlay.g81-burst-play .g81-streak.s3{animation:g81streakFlash 1.2s steps(1) 1;animation-fill-mode:forwards;animation-delay:0.10s;}
.glitch81-overlay.g81-burst-play .g81-streak.s4{animation:g81streakFlash 1.2s steps(1) 1;animation-fill-mode:forwards;animation-delay:0.30s;}
.glitch81-overlay.g81-burst-play .g81-streak.s5{animation:g81streakFlash 1.2s steps(1) 1;animation-fill-mode:forwards;animation-delay:0.34s;}
@keyframes g81streakFlash{0%{opacity:0;}5%{opacity:0.85;}12%{opacity:0;}100%{opacity:0;}}

/* ---- Colored speckle noise: red/green corrupted-pixel grain instead of
   plain gray static, matching the fleck pattern in the reference ---- */
.glitch81-overlay .g81-noise{position:absolute;left:-10%;width:120%;height:32%;top:-36%;opacity:0;mix-blend-mode:screen;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='4 0 0 0 0  0 3 0 0 0  0 0 0 0 0  0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");}
.glitch81-overlay.g81-burst-play .g81-noise{animation:g81noise 1.2s steps(8) 1;animation-fill-mode:forwards;}
@keyframes g81noise{0%{top:-14%;opacity:0.5;}30%{top:34%;opacity:0.6;}55%{top:80%;opacity:0.4;}75%,100%{top:120%;opacity:0;}}

.glitch81-overlay .g81-vign{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 45%,rgba(4,4,10,0.28) 100%);}