.glitch {
  position: relative;
}

@keyframes static-animation {
  0% {
    clip-path: inset(40% 0 15% 0);
  }
  5% {
    clip-path: inset(70% 0 5% 0);
  }
  10% {
    clip-path: inset(5% 0 20% 0);
  }
  15% {
    clip-path: inset(75% 0 5% 0);
  }
  20% {
    clip-path: inset(80% 0 15% 0);
  }
  25% {
    clip-path: inset(20% 0 25% 0);
  }
  30% {
    clip-path: inset(60% 0 30% 0);
  }
  35% {
    clip-path: inset(75% 0 20% 0);
  }
  40% {
    clip-path: inset(90% 0 5% 0);
  }
  45% {
    clip-path: inset(60% 0 20% 0);
  }
  50% {
    clip-path: inset(90% 0 15% 0);
  }
  55% {
    clip-path: inset(45% 0 50% 0);
  }
  60% {
    clip-path: inset(100% 0 5% 0);
  }
  65% {
    clip-path: inset(15% 0 0% 0);
  }
  70% {
    clip-path: inset(85% 0 5% 0);
  }
  75% {
    clip-path: inset(100% 0 0% 0);
  }
  80% {
    clip-path: inset(50% 0 50% 0);
  }
  85% {
    clip-path: inset(75% 0 10% 0);
  }
  90% {
    clip-path: inset(95% 0 0% 0);
  }
  95% {
    clip-path: inset(40% 0 15% 0);
  }
  100% {
    clip-path: inset(50% 0 25% 0);
  }
}
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateX(-1px) skew(10deg);
  text-shadow: -1px 0 #cc8084;
  animation: static-animation 2s infinite linear alternate-reverse;
}

@keyframes static-animation-2 {
  0% {
    clip-path: inset(15% 0 75% 0);
  }
  5% {
    clip-path: inset(80% 0 5% 0);
  }
  10% {
    clip-path: inset(10% 0 85% 0);
  }
  15% {
    clip-path: inset(15% 0 90% 0);
  }
  20% {
    clip-path: inset(30% 0 15% 0);
  }
  25% {
    clip-path: inset(25% 0 30% 0);
  }
  30% {
    clip-path: inset(95% 0 5% 0);
  }
  35% {
    clip-path: inset(5% 0 55% 0);
  }
  40% {
    clip-path: inset(45% 0 10% 0);
  }
  45% {
    clip-path: inset(40% 0 25% 0);
  }
  50% {
    clip-path: inset(30% 0 55% 0);
  }
  55% {
    clip-path: inset(65% 0 10% 0);
  }
  60% {
    clip-path: inset(70% 0 25% 0);
  }
  65% {
    clip-path: inset(95% 0 5% 0);
  }
  70% {
    clip-path: inset(15% 0 45% 0);
  }
  75% {
    clip-path: inset(85% 0 15% 0);
  }
  80% {
    clip-path: inset(30% 0 5% 0);
  }
  85% {
    clip-path: inset(25% 0 55% 0);
  }
  90% {
    clip-path: inset(45% 0 30% 0);
  }
  95% {
    clip-path: inset(40% 0 50% 0);
  }
  100% {
    clip-path: inset(95% 0 5% 0);
  }
}
.glitch::before {
  content: attr(data-text);
  text-align: center;
  position: absolute;
  transform: translateX(+1px) skew(-5deg);
  text-shadow: 1px 0 #6eacb7;
  top: 0;
  animation: static-animation-2 15s infinite linear alternate-reverse;
}
