.glitch{display:inline-block;position:relative}.glitch:before,.glitch:after{content:attr(data-text);pointer-events:none;opacity:0;background:var(--bg);clip-path:inset(0 0 100%);will-change:transform, clip-path, opacity;position:absolute;inset:0}.glitch:before{color:var(--red);text-shadow:-1px 0 var(--red)}.glitch:after{color:var(--blue);text-shadow:1px 0 var(--blue)}.glitch:hover:before,.glitch.is-on:before{animation:.5s steps(2,end) glitch-r}.glitch:hover:after,.glitch.is-on:after{animation:.5s steps(2,end) glitch-b}@keyframes glitch-r{0%{opacity:0;transform:translate(0)}10%{opacity:.9;clip-path:inset(8% 0 62%);transform:translate(-2px,-1px)}30%{clip-path:inset(48% 0 22%);transform:translate(2px,1px)}50%{opacity:.9;clip-path:inset(28% 0 44%);transform:translate(-1px)}70%{clip-path:inset(70% 0 8%);transform:translate(2px,-1px)}85%{opacity:.7;clip-path:inset(15% 0 70%);transform:translate(-1px,1px)}to{opacity:0;clip-path:inset(0 0 100%);transform:translate(0)}}@keyframes glitch-b{0%{opacity:0;transform:translate(0)}10%{opacity:.9;clip-path:inset(55% 0 12%);transform:translate(2px,1px)}30%{clip-path:inset(18% 0 55%);transform:translate(-2px,-1px)}50%{opacity:.9;clip-path:inset(40% 0 30%);transform:translate(1px)}70%{clip-path:inset(8% 0 72%);transform:translate(-2px,1px)}85%{opacity:.7;clip-path:inset(66% 0 14%);transform:translate(1px,-1px)}to{opacity:0;clip-path:inset(0 0 100%);transform:translate(0)}}.glitch--beacon:before{animation:2.6s steps(2,end) 1.2s infinite glitch-r}.glitch--beacon:after{animation:2.2s steps(2,end) 1.2s infinite glitch-b}@media (prefers-reduced-motion:reduce){.glitch:before,.glitch:after,.glitch:hover:before,.glitch:hover:after,.glitch.is-on:before,.glitch.is-on:after,.glitch--beacon:before,.glitch--beacon:after{opacity:0!important;animation:none!important}}