Glitch Button

<!-- Glitch Button — lime CTA; hover fires two quick clip-path
     glitch passes in cyan/magenta, then settles to the clean lime. -->
<button class="nuda-glitch-btn" data-text="LAUNCH">LAUNCH</button>

/* ── Glitch Button ───────────────────────────────────────────
   A solid lime CTA (dark label, 4.5:1+ contrast). On hover it lifts
   slightly and runs two short cyan/magenta clip-path glitch bursts,
   then rests on the clean lime fill. No idle/looping flash.
   Customize:
     --nuda-gbtn-a / --nuda-gbtn-b : glitch pass colors
   ──────────────────────────────────────────────────────────── */
.nuda-glitch-btn {
  --nuda-gbtn-a: #00e5ff;
  --nuda-gbtn-b: #ff00d4;

  position: relative;
  display: inline-block;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #09090b;
  background: #e4ff54;
  border: none;
  border-radius: 8px;
  padding: 0.7rem 1.4rem;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}

.nuda-glitch-btn::before,
.nuda-glitch-btn::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 8px;
  opacity: 0;
}

.nuda-glitch-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -8px rgba(228, 255, 84, 0.6);
}

.nuda-glitch-btn:hover::before {
  background: var(--nuda-gbtn-a);
  color: #09090b;
  opacity: 0.9;
  animation: glitch-btn-a 0.4s steps(2) 2;
}

.nuda-glitch-btn:hover::after {
  background: var(--nuda-gbtn-b);
  color: #09090b;
  opacity: 0.85;
  animation: glitch-btn-b 0.4s steps(2) 2;
}

@keyframes glitch-btn-a {
  0%   { clip-path: inset(0 0 70% 0);  transform: translate(-3px, 0); }
  50%  { clip-path: inset(55% 0 0 0);  transform: translate(3px, 0); }
  100% { clip-path: inset(0 0 100% 0); transform: translate(0, 0); }
}

@keyframes glitch-btn-b {
  0%   { clip-path: inset(60% 0 0 0);  transform: translate(3px, 0); }
  50%  { clip-path: inset(0 0 60% 0);  transform: translate(-3px, 0); }
  100% { clip-path: inset(100% 0 0 0); transform: translate(0, 0); }
}

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