Badge Unlock

<button class="nuda-confetti-badge" aria-label="Unlock badge">
  <span class="nuda-confetti-badge__medal" aria-hidden="true">
    <svg viewBox="0 0 24 24" fill="none" stroke="#09090b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <circle cx="12" cy="9" r="6"/>
      <path d="M9 14l-2 7 5-3 5 3-2-7"/>
    </svg>
    <span class="nuda-confetti-badge__shine"></span>
  </span>
  <span class="nuda-confetti-badge__pieces" aria-hidden="true">
    <span class="nuda-confetti-badge__piece" style="--a:0deg;   --c:#e4ff54"></span>
    <span class="nuda-confetti-badge__piece" style="--a:36deg;  --c:#ff5db1"></span>
    <span class="nuda-confetti-badge__piece" style="--a:72deg;  --c:#5dd0ff"></span>
    <span class="nuda-confetti-badge__piece" style="--a:108deg; --c:#e4ff54"></span>
    <span class="nuda-confetti-badge__piece" style="--a:144deg; --c:#ff5db1"></span>
    <span class="nuda-confetti-badge__piece" style="--a:180deg; --c:#5dd0ff"></span>
    <span class="nuda-confetti-badge__piece" style="--a:216deg; --c:#e4ff54"></span>
    <span class="nuda-confetti-badge__piece" style="--a:252deg; --c:#ff5db1"></span>
    <span class="nuda-confetti-badge__piece" style="--a:288deg; --c:#5dd0ff"></span>
    <span class="nuda-confetti-badge__piece" style="--a:324deg; --c:#e4ff54"></span>
  </span>
</button>

/* Badge Unlock
   Medal pops in with a sweeping shine and a confetti burst.
   Customize: medal gradient, piece colors via inline --c. */

.nuda-confetti-badge {
  position: relative;
  width: 72px;
  height: 72px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nuda-confetti-badge:focus-visible {
  box-shadow: 0 0 0 3px rgba(228, 255, 84, 0.4);
  border-radius: 50%;
}

.nuda-confetti-badge__medal {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f4ffb0, #e4ff54 55%, #b9c93f);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transform: scale(0.6);
  opacity: 0.4;
}

.nuda-confetti-badge__medal svg { width: 30px; height: 30px; }

.nuda-confetti-badge__shine {
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.85), transparent);
  transform: skewX(-18deg);
}

.nuda-confetti-badge--go .nuda-confetti-badge__medal {
  animation: nuda-confetti-badge-pop 0.6s cubic-bezier(0.18, 0.9, 0.32, 1.4) forwards;
}

.nuda-confetti-badge--go .nuda-confetti-badge__shine {
  animation: nuda-confetti-badge-shine 0.7s 0.35s ease-in forwards;
}

.nuda-confetti-badge__pieces {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.nuda-confetti-badge__piece {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--c, #e4ff54);
  opacity: 0;
  transform: rotate(var(--a, 0deg)) translateY(0) scale(0.4);
  will-change: transform, opacity;
}

.nuda-confetti-badge--go .nuda-confetti-badge__piece {
  animation: nuda-confetti-badge-fly 0.8s 0.25s cubic-bezier(0.2, 0.6, 0.4, 1) forwards;
}

@keyframes nuda-confetti-badge-pop {
  0%   { transform: scale(0.6); opacity: 0.4; }
  60%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes nuda-confetti-badge-shine {
  0%   { transform: translateX(0) skewX(-18deg); }
  100% { transform: translateX(450%) skewX(-18deg); }
}

@keyframes nuda-confetti-badge-fly {
  0%   { opacity: 0; transform: rotate(var(--a)) translateY(0) scale(0.4); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(-44px) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-confetti-badge__medal { transform: scale(1); opacity: 1; }
  .nuda-confetti-badge--go .nuda-confetti-badge__medal,
  .nuda-confetti-badge--go .nuda-confetti-badge__shine,
  .nuda-confetti-badge--go .nuda-confetti-badge__piece { animation: none; }
  .nuda-confetti-badge__shine { opacity: 0; }
  .nuda-confetti-badge__piece { opacity: 0; }
}

/* Badge Unlock — vanilla JS
   Re-runs the medal pop + shine + burst on each click. */

(function () {
  document.querySelectorAll(".nuda-confetti-badge").forEach(function (btn) {
    btn.addEventListener("click", function () {
      btn.classList.remove("nuda-confetti-badge--go");
      void btn.offsetWidth;
      btn.classList.add("nuda-confetti-badge--go");
      setTimeout(function () {
        btn.classList.remove("nuda-confetti-badge--go");
      }, 1300);
    });
  });
})();