.glitch {
  position: relative;
  display: inline-block;
  --glitch-color: hsl(var(--primary, 347 100% 50%));
  --glitch-color-alt: hsl(var(--secondary, 180 100% 50%));
}

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

.glitch::before {
  color: var(--glitch-color);
  z-index: -1;
}

.glitch::after {
  color: var(--glitch-color-alt);
  z-index: -2;
}

/* SUBTLE */
.subtle::before {
  animation: glitch-subtle-1 3s infinite linear alternate-reverse;
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
}

.subtle::after {
  animation: glitch-subtle-2 3s infinite linear alternate-reverse;
  clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
  opacity: 0.8;
}

@keyframes glitch-subtle-1 {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(-1px, 1px); }
  40% { transform: translate(-1px, -1px); }
  60% { transform: translate(1px, 1px); }
  80% { transform: translate(1px, -1px); }
}

@keyframes glitch-subtle-2 {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(1px, -1px); }
  40% { transform: translate(1px, 1px); }
  60% { transform: translate(-1px, -1px); }
  80% { transform: translate(-1px, 1px); }
}

/* MEDIUM */
.medium::before {
  animation: glitch-medium-1 0.3s infinite linear alternate-reverse;
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
}

.medium::after {
  animation: glitch-medium-2 0.3s infinite linear alternate-reverse;
  clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
  opacity: 0.8;
}

@keyframes glitch-medium-1 {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(2px, -2px); }
}

@keyframes glitch-medium-2 {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(2px, -2px); }
  40% { transform: translate(2px, 2px); }
  60% { transform: translate(-2px, -2px); }
  80% { transform: translate(-2px, 2px); }
}

/* INTENSE */
.intense::before {
  animation: glitch-intense-1 0.15s infinite linear alternate-reverse;
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
}

.intense::after {
  animation: glitch-intense-2 0.15s infinite linear alternate-reverse;
  clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
  opacity: 0.8;
}

@keyframes glitch-intense-1 {
  0% { transform: translate(0); }
  10% { transform: translate(-3px, 3px); }
  20% { transform: translate(3px, -3px); }
  30% { transform: translate(-3px, -3px); }
  40% { transform: translate(3px, 3px); }
  50% { transform: translate(-3px, 0); }
  60% { transform: translate(3px, 0); }
  70% { transform: translate(0, 3px); }
  80% { transform: translate(0, -3px); }
  90% { transform: translate(-3px, 3px); }
  100% { transform: translate(0); }
}

@keyframes glitch-intense-2 {
  0% { transform: translate(0); }
  10% { transform: translate(3px, -3px); }
  20% { transform: translate(-3px, 3px); }
  30% { transform: translate(3px, 3px); }
  40% { transform: translate(-3px, -3px); }
  50% { transform: translate(3px, 0); }
  60% { transform: translate(-3px, 0); }
  70% { transform: translate(0, -3px); }
  80% { transform: translate(0, 3px); }
  90% { transform: translate(3px, -3px); }
  100% { transform: translate(0); }
}

/* STATIC (no animation) */
.static::before {
  animation: none;
  transform: translate(-2px, 2px);
}

.static::after {
  animation: none;
  transform: translate(2px, -2px);
}

.static:hover::before {
  animation: glitch-medium-1 0.2s infinite linear alternate-reverse;
}

.static:hover::after {
  animation: glitch-medium-2 0.2s infinite linear alternate-reverse;
}