.logo{
  position:relative;
  font-family:'Permanent Marker', cursive;
  font-size:28px;
  color:#fff;
  letter-spacing:3px;
  display:inline-block;
}

.logo::before,
.logo::after{
  content:attr(data-text);
  position:absolute;
  inset:0;
  pointer-events:none;
}

.logo::before{
  color:#ff0040;
  transform:translate(0);
  mix-blend-mode:screen;
  animation:glitchR 2.5s infinite steps(1,end);
}

.logo::after{
  color:#00eaff;
  transform:translate(0);
  mix-blend-mode:screen;
  animation:glitchB 2.5s infinite steps(1,end);
}

.logo{
  animation:glitchMain 2.5s infinite steps(1,end);
}

@keyframes glitchMain{
  0%, 90%, 100%{transform:translate(0)}
  
  91%{transform:translate(-2px,1px)}
  92%{transform:translate(3px,-1px)}
  93%{transform:translate(-1px,2px)}
  94%{transform:translate(2px,-2px)}
  95%{transform:translate(-3px,0)}
  96%{transform:translate(3px,1px)}
  97%{transform:translate(-1px,-1px)}
  98%{transform:translate(2px,0)}
  99%{transform:translate(0)}
}

@keyframes glitchR{
  0%, 90%, 100%{transform:translate(0); clip-path:inset(0 0 0 0)}

  91%{
    transform:translate(-4px,0);
    clip-path:inset(10% 0 60% 0);
  }
  93%{
    transform:translate(4px,0);
    clip-path:inset(40% 0 20% 0);
  }
  95%{
    transform:translate(-3px,0);
    clip-path:inset(70% 0 5% 0);
  }
  97%{
    transform:translate(2px,0);
    clip-path:inset(30% 0 40% 0);
  }
}

@keyframes glitchB{
  0%, 90%, 100%{transform:translate(0); clip-path:inset(0 0 0 0)}

  92%{
    transform:translate(4px,0);
    clip-path:inset(60% 0 10% 0);
  }
  94%{
    transform:translate(-4px,0);
    clip-path:inset(20% 0 50% 0);
  }
  96%{
    transform:translate(3px,0);
    clip-path:inset(50% 0 30% 0);
  }
  98%{
    transform:translate(-2px,0);
    clip-path:inset(15% 0 70% 0);
  }
}

.logo:hover{
  animation:glitchMain 0.4s infinite steps(1,end);
}

.logo:hover::before{
  animation:glitchR 0.4s infinite steps(1,end);
}

.logo:hover::after{
  animation:glitchB 0.4s infinite steps(1,end);
}