Scale Bounce

<!-- Scale Bounce — bouncy scale on hover / click -->
<button class="nuda-scale-bounce">Scale Bounce</button>

/* ── Scale Bounce ────────────────────────────────────────────
   Uses a spring-like cubic-bezier for the overshoot bounce.
   Customize:
     --nuda-sb-bg     : button background
     --nuda-sb-clr    : text color
     --nuda-sb-scale  : hover scale factor
     --nuda-sb-press  : active (click) scale
   ──────────────────────────────────────────────────────────── */
.nuda-scale-bounce {
  --nuda-sb-bg: #6366f1;
  --nuda-sb-clr: #fff;
  --nuda-sb-scale: 1.08;
  --nuda-sb-press: 0.95;

  padding: 12px 32px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--nuda-sb-clr);
  background: var(--nuda-sb-bg);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}

.nuda-scale-bounce:hover {
  transform: scale(var(--nuda-sb-scale));
}

.nuda-scale-bounce:active {
  transform: scale(var(--nuda-sb-press));
  transition-duration: 0.1s;
}

/* ── Accessibility ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .nuda-scale-bounce {
    transition: none;
  }
  .nuda-scale-bounce:hover,
  .nuda-scale-bounce:active {
    transform: none;
  }
}