.glitch {
  position: relative;
  color: white;
  display: inline-block;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.glitch::before {
  animation: glitch-1 0.3s infinite;
  color: #0ff;
  z-index: -1;
}

.glitch::after {
  animation: glitch-2 0.3s infinite;
  color: #f0f;
  z-index: -2;
}

.glitch.lowIntensity::before {
  animation-duration: 0.5s;
}

.glitch.lowIntensity::after {
  animation-duration: 0.5s;
}

.glitch.highIntensity::before {
  animation-duration: 0.2s;
}

.glitch.highIntensity::after {
  animation-duration: 0.2s;
}

@keyframes glitch-1 {
  0%,
  100% {
    clip-path: inset(0 0 95% 0);
    transform: translate(-2px, 2px);
  }
  20% {
    clip-path: inset(40% 0 20% 0);
    transform: translate(2px, -2px);
  }
  40% {
    clip-path: inset(80% 0 5% 0);
    transform: translate(-2px, 2px);
  }
  60% {
    clip-path: inset(10% 0 60% 0);
    transform: translate(2px, -2px);
  }
  80% {
    clip-path: inset(30% 0 50% 0);
    transform: translate(-2px, 2px);
  }
}

@keyframes glitch-2 {
  0%,
  100% {
    clip-path: inset(95% 0 0 0);
    transform: translate(2px, -2px);
  }
  20% {
    clip-path: inset(20% 0 40% 0);
    transform: translate(-2px, 2px);
  }
  40% {
    clip-path: inset(5% 0 80% 0);
    transform: translate(2px, -2px);
  }
  60% {
    clip-path: inset(60% 0 10% 0);
    transform: translate(-2px, 2px);
  }
  80% {
    clip-path: inset(50% 0 30% 0);
    transform: translate(2px, -2px);
  }
}

.active {
  animation: none;
}

.active::before {
  animation: glitch-1 0.1s infinite;
}

.active::after {
  animation: glitch-2 0.1s infinite;
}