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

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

.glitch::before {
  color: var(--accent-cyan);
  clip-path: inset(0 0 65% 0);
  animation: glitch-top 1.5s infinite linear alternate-reverse;
}

.glitch::after {
  color: var(--accent-orange);
  clip-path: inset(60% 0 0 0);
  animation: glitch-bottom 1.2s infinite linear alternate-reverse;
}

@keyframes glitch-top {
  0%, 20% { transform: translate(0); }
  22% { transform: translate(-3px, -1px); }
  24% { transform: translate(3px, 1px); }
  26%, 50% { transform: translate(0); }
  52% { transform: translate(-2px, 0); }
  54% { transform: translate(2px, -1px); }
  56%, 78% { transform: translate(0); }
  80% { transform: translate(-4px, 1px); }
  82% { transform: translate(3px, -1px); }
  84% { transform: translate(-1px, 0); }
  86%, 100% { transform: translate(0); }
}

@keyframes glitch-bottom {
  0%, 15% { transform: translate(0); }
  17% { transform: translate(2px, 1px); }
  19% { transform: translate(-3px, 0); }
  21%, 42% { transform: translate(0); }
  44% { transform: translate(1px, -1px); }
  46% { transform: translate(-2px, 1px); }
  48%, 70% { transform: translate(0); }
  72% { transform: translate(3px, 0); }
  74% { transform: translate(-4px, -1px); }
  76% { transform: translate(2px, 1px); }
  78%, 100% { transform: translate(0); }
}

@media (prefers-reduced-motion: reduce) {
  .glitch::before,
  .glitch::after {
    display: none;
  }
}