Confetti Burst

<!-- Confetti Burst (radial spread of pieces from center) -->
<div class="nuda-confetti" role="img" aria-label="Confetti burst">
  <span class="nuda-confetti__piece" style="--a:0deg;   --c:#e4ff54;        --d:0s"></span>
  <span class="nuda-confetti__piece" style="--a:25deg;  --c:#fafafa;        --d:.05s"></span>
  <span class="nuda-confetti__piece" style="--a:51deg;  --c:rgba(228,255,84,.5); --d:.1s"></span>
  <span class="nuda-confetti__piece" style="--a:77deg;  --c:#e4ff54;        --d:.15s"></span>
  <span class="nuda-confetti__piece" style="--a:102deg; --c:#fafafa;        --d:.2s"></span>
  <span class="nuda-confetti__piece" style="--a:128deg; --c:rgba(228,255,84,.5); --d:0s"></span>
  <span class="nuda-confetti__piece" style="--a:154deg; --c:#e4ff54;        --d:.05s"></span>
  <span class="nuda-confetti__piece" style="--a:180deg; --c:#fafafa;        --d:.1s"></span>
  <span class="nuda-confetti__piece" style="--a:205deg; --c:rgba(228,255,84,.5); --d:.15s"></span>
  <span class="nuda-confetti__piece" style="--a:231deg; --c:#e4ff54;        --d:.2s"></span>
  <span class="nuda-confetti__piece" style="--a:257deg; --c:#fafafa;        --d:0s"></span>
  <span class="nuda-confetti__piece" style="--a:282deg; --c:rgba(228,255,84,.5); --d:.05s"></span>
  <span class="nuda-confetti__piece" style="--a:308deg; --c:#e4ff54;        --d:.1s"></span>
  <span class="nuda-confetti__piece" style="--a:334deg; --c:#fafafa;        --d:.15s"></span>
</div>

/* Confetti Burst
   Radial confetti from a central pulsing core.
   Customize: --conf-distance, piece colors via inline --c. */

.nuda-confetti {
  --conf-distance: 50px;
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nuda-confetti::before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e4ff54;
  box-shadow: 0 0 12px rgba(228, 255, 84, 0.6);
  animation: nuda-conf-core 2s ease-in-out infinite;
}

.nuda-confetti__piece {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--c, #e4ff54);
  transform: rotate(var(--a, 0deg)) translateY(0);
  transform-origin: center;
  border-radius: 1px;
  animation: nuda-conf-burst 2s cubic-bezier(0.2, 0.6, 0.4, 1) var(--d, 0s) infinite;
}

.nuda-confetti__piece:nth-child(2n) { width: 4px; height: 8px; }
.nuda-confetti__piece:nth-child(3n) { border-radius: 50%; }

@keyframes nuda-conf-burst {
  0%        { transform: rotate(var(--a)) translateY(0) scale(0.4); opacity: 0; }
  15%       { opacity: 1; }
  80%, 100% { transform: rotate(var(--a)) translateY(calc(var(--conf-distance) * -1)) scale(1); opacity: 0; }
}

@keyframes nuda-conf-core {
  0%, 100% { transform: scale(0.6); opacity: 0.4; }
  50%      { transform: scale(1.2); opacity: 1;   }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-confetti__piece,
  .nuda-confetti::before { animation: none; }
}