Sparkles

<!-- Sparkles -->
<div class="nuda-sparkles" role="img" aria-label="Sparkles">
  <span class="nuda-sparkles__star" style="left:12%; top:18%; --s:10px; --d:0s"></span>
  <span class="nuda-sparkles__star" style="left:70%; top:12%; --s:8px;  --d:.4s"></span>
  <span class="nuda-sparkles__star" style="left:36%; top:54%; --s:12px; --d:.8s"></span>
  <span class="nuda-sparkles__star" style="left:82%; top:60%; --s:9px;  --d:1.2s"></span>
  <span class="nuda-sparkles__star" style="left:56%; top:28%; --s:7px;  --d:1.6s"></span>
  <span class="nuda-sparkles__star" style="left:22%; top:72%; --s:8px;  --d:.2s"></span>
</div>

/* Sparkles
   Twinkling 4-point stars with staggered delays.
   Customize: --sparkles-color, sizes & positions via inline --s/--d. */

.nuda-sparkles {
  --sparkles-color: #e4ff54;
  position: relative;
  width: 100%;
  max-width: 220px;
  aspect-ratio: 1;
}

.nuda-sparkles__star {
  position: absolute;
  width: var(--s, 10px);
  height: var(--s, 10px);
  transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(
    circle,
    #fff 0 20%,
    var(--sparkles-color) 25% 50%,
    transparent 55%
  );
  clip-path: polygon(
    50% 0%, 55% 45%, 100% 50%, 55% 55%,
    50% 100%, 45% 55%, 0% 50%, 45% 45%
  );
  filter: drop-shadow(0 0 4px rgba(228, 255, 84, 0.5));
  animation: nuda-sparkles-twinkle 2.4s ease-in-out var(--d, 0s) infinite;
}

@keyframes nuda-sparkles-twinkle {
  0%, 80%, 100% { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0; }
  15%           { transform: translate(-50%, -50%) scale(1) rotate(45deg); opacity: 1; }
  30%           { transform: translate(-50%, -50%) scale(0.8) rotate(90deg); opacity: 0.6; }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-sparkles__star { animation: none; transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
}