/* ==========================================================================
   CYBERPUNK GLITCH & CHROMATIC ABERRATION ENGINE
   ========================================================================== */

/* Text Glitch Layering for "Miscreant" */
.glitch-text {
  position: relative;
  display: inline-block;
}

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

.glitch-text::before {
  left: -3px;
  text-shadow: 3px 0 #06b6d4;
  animation: glitch-anim-1 3s infinite linear alternate-reverse;
  opacity: 0.85;
}

.glitch-text::after {
  left: 3px;
  text-shadow: -3px 0 #ec4899;
  animation: glitch-anim-2 2.5s infinite linear alternate-reverse;
  opacity: 0.85;
}

@keyframes glitch-anim-1 {
  0% { clip-path: inset(20% 0 60% 0); transform: translate(-3px, 1px); }
  20% { clip-path: inset(80% 0 5% 0); transform: translate(3px, -1px); }
  40% { clip-path: inset(40% 0 45% 0); transform: translate(-2px, 2px); }
  60% { clip-path: inset(10% 0 75% 0); transform: translate(2px, -2px); }
  80% { clip-path: inset(65% 0 20% 0); transform: translate(-3px, 0); }
  100% { clip-path: inset(25% 0 55% 0); transform: translate(0, 0); }
}

@keyframes glitch-anim-2 {
  0% { clip-path: inset(10% 0 80% 0); transform: translate(3px, -1px); }
  25% { clip-path: inset(60% 0 15% 0); transform: translate(-3px, 1px); }
  50% { clip-path: inset(30% 0 50% 0); transform: translate(2px, 2px); }
  75% { clip-path: inset(70% 0 10% 0); transform: translate(-2px, -2px); }
  100% { clip-path: inset(40% 0 40% 0); transform: translate(0, 0); }
}