.glitch{color:inherit;font-size:inherit;font-weight:inherit;-webkit-user-select:none;user-select:none;cursor:pointer;--glitch-intensity:1;position:relative}.glitch:after,.glitch:before{content:"";width:100%;height:100%;color:inherit;clip-path:inset(0);opacity:0;background-color:#0000;animation:none;position:absolute;top:0;left:0;overflow:hidden}.glitch.enable-on-hover:hover:after{content:attr(data-text);opacity:var(--glitch-intensity);left:calc(10px*var(--glitch-intensity));text-shadow:var(--after-shadow,-10px 0 red);animation:animate-glitch var(--after-duration,3s)infinite linear alternate-reverse}.glitch.enable-on-hover:hover:before{content:attr(data-text);opacity:var(--glitch-intensity);left:calc(-10px*var(--glitch-intensity));text-shadow:var(--before-shadow,10px 0 cyan);animation:animate-glitch var(--before-duration,2s)infinite linear alternate-reverse}.glitch.glitching:after{content:attr(data-text);opacity:var(--glitch-intensity);left:calc(10px*var(--glitch-intensity));text-shadow:var(--after-shadow,-10px 0 red);animation:animate-glitch var(--after-duration,3s)infinite linear alternate-reverse}.glitch.glitching:before{content:attr(data-text);opacity:var(--glitch-intensity);left:calc(-10px*var(--glitch-intensity));text-shadow:var(--before-shadow,10px 0 cyan);animation:animate-glitch var(--before-duration,2s)infinite linear alternate-reverse}@property --glitch-intensity{syntax:"<number>";inherits:false;initial-value:1}@keyframes glitch-fade{0%{--glitch-intensity:1}to{--glitch-intensity:0}}.glitch-focus{animation:2.5s ease-out forwards glitch-fade}@keyframes animate-glitch{0%{clip-path:inset(20% 0 50%)}5%{clip-path:inset(10% 0 60%)}10%{clip-path:inset(15% 0 55%)}15%{clip-path:inset(25% 0 35%)}20%{clip-path:inset(30% 0 40%)}25%{clip-path:inset(40% 0 20%)}30%{clip-path:inset(10% 0 60%)}35%{clip-path:inset(15% 0 55%)}40%{clip-path:inset(25% 0 35%)}45%{clip-path:inset(30% 0 40%)}50%{clip-path:inset(20% 0 50%)}55%{clip-path:inset(10% 0 60%)}60%{clip-path:inset(15% 0 55%)}65%{clip-path:inset(25% 0 35%)}70%{clip-path:inset(30% 0 40%)}75%{clip-path:inset(40% 0 20%)}80%{clip-path:inset(20% 0 50%)}85%{clip-path:inset(10% 0 60%)}90%{clip-path:inset(15% 0 55%)}95%{clip-path:inset(25% 0 35%)}to{clip-path:inset(30% 0 40%)}}.glitch.glitching-lr:after{content:attr(data-text);opacity:var(--glitch-intensity);left:calc(10px*var(--glitch-intensity));text-shadow:var(--after-shadow,-10px 0 red);animation:animate-glitch-lr var(--after-duration,3s)infinite linear alternate-reverse;clip-path:inset(0 max(0%,calc(100% - min(100%,var(--glitch-progress,0%))))0 min(100%,max(0%,calc(var(--glitch-progress,0%) - 100%))))}.glitch.glitching-lr:before{content:attr(data-text);opacity:var(--glitch-intensity);left:calc(-10px*var(--glitch-intensity));text-shadow:var(--before-shadow,10px 0 cyan);animation:animate-glitch-lr var(--before-duration,2s)infinite linear alternate-reverse;clip-path:inset(0 max(0%,calc(100% - min(100%,var(--glitch-progress,0%))))0 min(100%,max(0%,calc(var(--glitch-progress,0%) - 100%))))}@keyframes animate-glitch-lr{0%{clip-path:inset(20% max(0%,calc(100% - min(100%,var(--glitch-progress,0%))))50% min(100%,max(0%,calc(var(--glitch-progress,0%) - 100%))))}5%{clip-path:inset(10% max(0%,calc(100% - min(100%,var(--glitch-progress,0%))))60% min(100%,max(0%,calc(var(--glitch-progress,0%) - 100%))))}10%{clip-path:inset(15% max(0%,calc(100% - min(100%,var(--glitch-progress,0%))))55% min(100%,max(0%,calc(var(--glitch-progress,0%) - 100%))))}15%{clip-path:inset(25% max(0%,calc(100% - min(100%,var(--glitch-progress,0%))))35% min(100%,max(0%,calc(var(--glitch-progress,0%) - 100%))))}20%{clip-path:inset(30% max(0%,calc(100% - min(100%,var(--glitch-progress,0%))))40% min(100%,max(0%,calc(var(--glitch-progress,0%) - 100%))))}25%{clip-path:inset(40% max(0%,calc(100% - min(100%,var(--glitch-progress,0%))))20% min(100%,max(0%,calc(var(--glitch-progress,0%) - 100%))))}30%{clip-path:inset(10% max(0%,calc(100% - min(100%,var(--glitch-progress,0%))))60% min(100%,max(0%,calc(var(--glitch-progress,0%) - 100%))))}35%{clip-path:inset(15% max(0%,calc(100% - min(100%,var(--glitch-progress,0%))))55% min(100%,max(0%,calc(var(--glitch-progress,0%) - 100%))))}40%{clip-path:inset(25% max(0%,calc(100% - min(100%,var(--glitch-progress,0%))))35% min(100%,max(0%,calc(var(--glitch-progress,0%) - 100%))))}45%{clip-path:inset(30% max(0%,calc(100% - min(100%,var(--glitch-progress,0%))))40% min(100%,max(0%,calc(var(--glitch-progress,0%) - 100%))))}50%{clip-path:inset(20% max(0%,calc(100% - min(100%,var(--glitch-progress,0%))))50% min(100%,max(0%,calc(var(--glitch-progress,0%) - 100%))))}55%{clip-path:inset(10% max(0%,calc(100% - min(100%,var(--glitch-progress,0%))))60% min(100%,max(0%,calc(var(--glitch-progress,0%) - 100%))))}60%{clip-path:inset(15% max(0%,calc(100% - min(100%,var(--glitch-progress,0%))))55% min(100%,max(0%,calc(var(--glitch-progress,0%) - 100%))))}65%{clip-path:inset(25% max(0%,calc(100% - min(100%,var(--glitch-progress,0%))))35% min(100%,max(0%,calc(var(--glitch-progress,0%) - 100%))))}70%{clip-path:inset(30% max(0%,calc(100% - min(100%,var(--glitch-progress,0%))))40% min(100%,max(0%,calc(var(--glitch-progress,0%) - 100%))))}75%{clip-path:inset(40% max(0%,calc(100% - min(100%,var(--glitch-progress,0%))))20% min(100%,max(0%,calc(var(--glitch-progress,0%) - 100%))))}80%{clip-path:inset(20% max(0%,calc(100% - min(100%,var(--glitch-progress,0%))))50% min(100%,max(0%,calc(var(--glitch-progress,0%) - 100%))))}85%{clip-path:inset(10% max(0%,calc(100% - min(100%,var(--glitch-progress,0%))))60% min(100%,max(0%,calc(var(--glitch-progress,0%) - 100%))))}90%{clip-path:inset(15% max(0%,calc(100% - min(100%,var(--glitch-progress,0%))))55% min(100%,max(0%,calc(var(--glitch-progress,0%) - 100%))))}95%{clip-path:inset(25% max(0%,calc(100% - min(100%,var(--glitch-progress,0%))))35% min(100%,max(0%,calc(var(--glitch-progress,0%) - 100%))))}to{clip-path:inset(30% max(0%,calc(100% - min(100%,var(--glitch-progress,0%))))40% min(100%,max(0%,calc(var(--glitch-progress,0%) - 100%))))}}
