.distortion {
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9990;
}

/* WAVE */
.wave {
  background: transparent;
}

.wave::before {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  animation: wave-distort var(--duration, 3s) ease-in-out infinite;
}

@keyframes wave-distort {
  0%, 100% { transform: scaleY(1) skewX(0); }
  25% { transform: scaleY(1.002) skewX(0.5deg); }
  50% { transform: scaleY(0.998) skewX(0); }
  75% { transform: scaleY(1.001) skewX(-0.5deg); }
}

/* GLITCH */
.glitch::before,
.glitch::after {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  opacity: 0;
}

.glitch::before {
  animation: glitch-distort-1 var(--duration, 4s) infinite;
}

.glitch::after {
  animation: glitch-distort-2 var(--duration, 4s) infinite;
}

@keyframes glitch-distort-1 {
  0%, 85%, 100% { opacity: 0; clip-path: inset(0 0 100% 0); }
  86% { opacity: 1; clip-path: inset(20% 0 60% 0); transform: translateX(var(--shift, -5px)); background: hsl(var(--primary, 347 100% 50%) / 0.1); }
  88% { opacity: 1; clip-path: inset(50% 0 30% 0); transform: translateX(var(--shift, 5px)); }
  90% { opacity: 0; }
}

@keyframes glitch-distort-2 {
  0%, 85%, 100% { opacity: 0; clip-path: inset(0 0 100% 0); }
  87% { opacity: 1; clip-path: inset(40% 0 40% 0); transform: translateX(var(--shift, 3px)); background: hsl(var(--secondary, 180 100% 50%) / 0.1); }
  89% { opacity: 1; clip-path: inset(70% 0 10% 0); transform: translateX(var(--shift, -3px)); }
  91% { opacity: 0; }
}

/* CHROMATIC */
.chromatic::before,
.chromatic::after {
  content: '';
  position: absolute;
  inset: 0;
  mix-blend-mode: screen;
}

.chromatic::before {
  background: rgba(255, 0, 0, var(--opacity, 0.02));
  animation: chromatic-r var(--duration, 5s) ease-in-out infinite;
}

.chromatic::after {
  background: rgba(0, 255, 255, var(--opacity, 0.02));
  animation: chromatic-c var(--duration, 5s) ease-in-out infinite reverse;
}

@keyframes chromatic-r {
  0%, 100% { transform: translate(0); }
  50% { transform: translate(var(--shift, 2px), var(--shift, -1px)); }
}

@keyframes chromatic-c {
  0%, 100% { transform: translate(0); }
  50% { transform: translate(calc(var(--shift, 2px) * -1), var(--shift, 1px)); }
}

/* NOISE */
.noise {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  opacity: var(--opacity, 0.02);
  animation: noise-animate var(--duration, 0.2s) steps(5) infinite;
}

@keyframes noise-animate {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-1px, 1px); }
  50% { transform: translate(1px, -1px); }
  75% { transform: translate(-1px, -1px); }
  100% { transform: translate(0, 0); }
}

/* INTENSITY */
.subtle { --shift: 2px; --opacity: 0.01; }
.medium { --shift: 5px; --opacity: 0.02; }
.intense { --shift: 10px; --opacity: 0.04; }

/* SPEED */
.slow { --duration: 6s; }
.normal { --duration: 4s; }
.fast { --duration: 2s; }

.noise.slow { --duration: 0.3s; }
.noise.normal { --duration: 0.2s; }
.noise.fast { --duration: 0.1s; }

/* HOVER ONLY */
.hoverOnly {
  opacity: 0;
}

.hoverOnly:hover,
*:hover > .hoverOnly {
  opacity: 1;
}