Emoji Burst

<button type="button" class="nuda-emoji-burst" aria-label="Send love">
  <span class="nuda-emoji-burst__core" aria-hidden="true">❤️</span>
  <span class="nuda-emoji-burst__p" style="--tx:40px;--ty:0px;animation-delay:0ms">❤️</span>
  <span class="nuda-emoji-burst__p" style="--tx:20px;--ty:34px;animation-delay:30ms">✨</span>
  <span class="nuda-emoji-burst__p" style="--tx:-20px;--ty:34px;animation-delay:60ms">💖</span>
  <span class="nuda-emoji-burst__p" style="--tx:-40px;--ty:0px;animation-delay:90ms">⭐</span>
  <span class="nuda-emoji-burst__p" style="--tx:-20px;--ty:-34px;animation-delay:120ms">💫</span>
  <span class="nuda-emoji-burst__p" style="--tx:20px;--ty:-34px;animation-delay:150ms">🌟</span>
</button>

/* Emoji Burst
   Particle explosion of small emoji radiating outward.
   Customize: --eb-bg, --tx/--ty per particle for direction */

.nuda-emoji-burst {
  position: relative;
  width: 60px;
  height: 60px;
  background: #0c0c10;
  border: 1px solid #1c1c22;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}

.nuda-emoji-burst__core {
  font-size: 24px;
  animation: nuda-eb-pulse 2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.nuda-emoji-burst__p {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 14px;
  pointer-events: none;
  animation: nuda-eb-fly 1.6s cubic-bezier(0.16, 1, 0.3, 1) infinite;
  opacity: 0;
}

@keyframes nuda-eb-pulse {
  0%, 60%, 100% { transform: scale(1); }
  30% { transform: scale(1.25); }
}

@keyframes nuda-eb-fly {
  0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% {
    transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(1);
    opacity: 0;
  }
}

.nuda-emoji-burst:focus-visible {
  outline: 2px solid #e4ff54;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .nuda-emoji-burst__core,
  .nuda-emoji-burst__p { animation: none; }
  .nuda-emoji-burst__p { display: none; }
}