.glitch {
    position: relative;
    display: inline-block;
}
.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    pointer-events: none;
}
.glitch::before { color: #ff2a6d; }
.glitch::after  { color: #05d9e8; }
 
.glitch.active::before,
.nickname:hover .glitch::before {
    opacity: 0.8;
    animation: glitch-a 0.35s steps(2) infinite;
}
.glitch.active::after,
.nickname:hover .glitch::after {
    opacity: 0.8;
    animation: glitch-b 0.35s steps(2) infinite reverse;
}
@keyframes glitch-a {
    0%   { transform: translate(-3px, 1px); clip-path: inset(10% 0 60% 0); }
    50%  { transform: translate(3px, -1px); clip-path: inset(55% 0 15% 0); }
    100% { transform: translate(-2px, 0);   clip-path: inset(30% 0 40% 0); }
}
@keyframes glitch-b {
    0%   { transform: translate(3px, -1px); clip-path: inset(65% 0 5% 0); }
    50%  { transform: translate(-3px, 1px); clip-path: inset(5% 0 70% 0); }
    100% { transform: translate(2px, 0);    clip-path: inset(40% 0 30% 0); }
}
 
/* No glitch for people who prefer less motion */
@media (prefers-reduced-motion: reduce) {
    .glitch.active::before,
    .glitch.active::after,
    .nickname:hover .glitch::before,
    .nickname:hover .glitch::after { animation: none; opacity: 0; }
}