RGB Split Text

<!-- RGB Split Text — chromatic-aberration glitch.
     The text is duplicated via ::before/::after using data-text. -->
<span class="nuda-glitch-rgb" data-text="GLITCH">GLITCH</span>

/* ── RGB Split Text ──────────────────────────────────────────
   Cyan + magenta ghost layers jitter apart in a short, infrequent
   burst (~once every 2.4s) so it never strobes. Base text stays
   lime + fully legible.
   Customize:
     --nuda-grb-cyan   : cyan offset color
     --nuda-grb-mag    : magenta offset color
     --nuda-grb-base   : main text color
   ──────────────────────────────────────────────────────────── */
.nuda-glitch-rgb {
  --nuda-grb-cyan: #00e5ff;
  --nuda-grb-mag: #ff00d4;
  --nuda-grb-base: #e4ff54;

  position: relative;
  display: inline-block;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: var(--nuda-grb-base);
  text-shadow: 0 0 10px rgba(228, 255, 84, 0.3);
}

.nuda-glitch-rgb::before,
.nuda-glitch-rgb::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: #09090b;
  overflow: hidden;
}

.nuda-glitch-rgb::before {
  color: var(--nuda-grb-cyan);
  animation: glitch-rgb-cyan 2.4s steps(1) infinite;
}

.nuda-glitch-rgb::after {
  color: var(--nuda-grb-mag);
  animation: glitch-rgb-magenta 2.4s steps(1) infinite;
}

@keyframes glitch-rgb-cyan {
  0%, 86%, 100% { transform: translate(0, 0); opacity: 0; }
  88% { transform: translate(-2px, 1px);  opacity: 0.85; }
  92% { transform: translate(2px, -1px);  opacity: 0.85; }
  96% { transform: translate(-1px, 0);    opacity: 0.85; }
}

@keyframes glitch-rgb-magenta {
  0%, 86%, 100% { transform: translate(0, 0); opacity: 0; }
  88% { transform: translate(2px, -1px);  opacity: 0.8; }
  92% { transform: translate(-2px, 1px);  opacity: 0.8; }
  96% { transform: translate(1px, 0);     opacity: 0.8; }
}

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