Glitch Hover Text

<!-- Glitch Hover Text — subtle RGB glitch on hover/focus (seizure-safe) -->
<span class="nuda-glitch-hover-text" tabindex="0">
  GLITCH
  <span class="nuda-glitch-hover-text__layer nuda-glitch-hover-text__layer--a" aria-hidden="true">GLITCH</span>
  <span class="nuda-glitch-hover-text__layer nuda-glitch-hover-text__layer--b" aria-hidden="true">GLITCH</span>
</span>

/* ── Glitch Hover Text ───────────────────────────────────────
   Two offset color layers flicker briefly on hover/focus.
   Capped at two short cycles (≤3 flashes/sec) — seizure-safe.
   Customize:
     --nuda-gh-clr-a / --nuda-gh-clr-b : the two channel colors
   ──────────────────────────────────────────────────────────── */
.nuda-glitch-hover-text {
  --nuda-gh-clr-a: #e4ff54;
  --nuda-gh-clr-b: #ff6dd4;

  position: relative;
  display: inline-block;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fafafa;
  cursor: pointer;
}

.nuda-glitch-hover-text:focus-visible {
  outline: 2px solid var(--nuda-gh-clr-a);
  outline-offset: 4px;
}

.nuda-glitch-hover-text__layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.nuda-glitch-hover-text__layer--a { color: var(--nuda-gh-clr-a); }
.nuda-glitch-hover-text__layer--b { color: var(--nuda-gh-clr-b); }

.nuda-glitch-hover-text:hover .nuda-glitch-hover-text__layer,
.nuda-glitch-hover-text:focus-visible .nuda-glitch-hover-text__layer {
  opacity: 0.85;
}

.nuda-glitch-hover-text:hover .nuda-glitch-hover-text__layer--a,
.nuda-glitch-hover-text:focus-visible .nuda-glitch-hover-text__layer--a {
  animation: nuda-glitch-hover-text-a 0.4s steps(2) 2;
}

.nuda-glitch-hover-text:hover .nuda-glitch-hover-text__layer--b,
.nuda-glitch-hover-text:focus-visible .nuda-glitch-hover-text__layer--b {
  animation: nuda-glitch-hover-text-b 0.4s steps(2) 2;
}

@keyframes nuda-glitch-hover-text-a {
  0%   { transform: translate(0); }
  50%  { transform: translate(-2px, 1px); }
  100% { transform: translate(2px, -1px); }
}

@keyframes nuda-glitch-hover-text-b {
  0%   { transform: translate(0); }
  50%  { transform: translate(2px, -1px); }
  100% { transform: translate(-2px, 1px); }
}

/* ── Accessibility ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nuda-glitch-hover-text__layer { display: none; }
}