Glitch on Hover

<!-- Glitch on Hover — clip-path slice glitch.
     The glitch only fires while hovering (runs 2 short bursts). -->
<span class="nuda-glitch-hover" data-text="HOVER ME">HOVER ME</span>

/* ── Glitch on Hover ─────────────────────────────────────────
   Two clip-path "slices" (cyan + magenta) shear the text on hover
   for a couple of quick passes, then settle. No idle motion.
   Customize:
     --nuda-gh-cyan / --nuda-gh-mag : slice colors
   ──────────────────────────────────────────────────────────── */
.nuda-glitch-hover {
  --nuda-gh-cyan: #00e5ff;
  --nuda-gh-mag: #ff00d4;

  position: relative;
  display: inline-block;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 2.1rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  color: #e4ff54;
  cursor: pointer;
  background: #09090b;
  padding: 0.3rem 0.5rem;
}

.nuda-glitch-hover::before,
.nuda-glitch-hover::after {
  content: attr(data-text);
  position: absolute;
  inset: 0.3rem 0.5rem;
  background: #09090b;
  opacity: 0;
}

.nuda-glitch-hover:hover::before {
  color: var(--nuda-gh-cyan);
  opacity: 0.9;
  animation: glitch-hover-slice-a 0.45s steps(2) 2;
}

.nuda-glitch-hover:hover::after {
  color: var(--nuda-gh-mag);
  opacity: 0.85;
  animation: glitch-hover-slice-b 0.45s steps(2) 2;
}

@keyframes glitch-hover-slice-a {
  0%   { clip-path: inset(10% 0 75% 0); transform: translate(-3px, 0); }
  50%  { clip-path: inset(60% 0 12% 0); transform: translate(3px, 0); }
  100% { clip-path: inset(30% 0 45% 0); transform: translate(-2px, 0); }
}

@keyframes glitch-hover-slice-b {
  0%   { clip-path: inset(70% 0 8% 0);  transform: translate(3px, 0); }
  50%  { clip-path: inset(20% 0 60% 0); transform: translate(-3px, 0); }
  100% { clip-path: inset(45% 0 30% 0); transform: translate(2px, 0); }
}

/* ── Accessibility ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nuda-glitch-hover:hover::before,
  .nuda-glitch-hover:hover::after { animation: none; opacity: 0; }
}