Sparkle Trail

<div class="nuda-confetti-trail" role="img" aria-label="Sparkle trail">
  <span class="nuda-confetti-trail__star" aria-hidden="true"></span>
  <span class="nuda-confetti-trail__spark" style="--d:0s"></span>
  <span class="nuda-confetti-trail__spark" style="--d:.18s"></span>
  <span class="nuda-confetti-trail__spark" style="--d:.36s"></span>
  <span class="nuda-confetti-trail__spark" style="--d:.54s"></span>
  <span class="nuda-confetti-trail__spark" style="--d:.72s"></span>
  <span class="nuda-confetti-trail__spark" style="--d:.9s"></span>
  <span class="nuda-confetti-trail__spark" style="--d:1.08s"></span>
</div>

/* Sparkle Trail
   A star glides on a looping path leaving fading sparkles behind.
   Customize: container size, --d stagger per spark. */

.nuda-confetti-trail {
  position: relative;
  width: 160px;
  height: 90px;
  background: #09090b;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
}

.nuda-confetti-trail__star {
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  background: radial-gradient(circle, #fff 0 25%, #e4ff54 30% 55%, transparent 60%);
  clip-path: polygon(50% 0%, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0% 50%, 42% 42%);
  filter: drop-shadow(0 0 5px rgba(228, 255, 84, 0.7));
  animation: nuda-confetti-trail-glide 2.6s ease-in-out infinite;
}

.nuda-confetti-trail__spark {
  position: absolute;
  top: 50%;
  left: 0;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: #e4ff54;
  animation:
    nuda-confetti-trail-glide 2.6s ease-in-out var(--d, 0s) infinite,
    nuda-confetti-trail-fade 2.6s ease-in-out var(--d, 0s) infinite;
}

.nuda-confetti-trail__spark:nth-child(3n)   { background: #ff5db1; }
.nuda-confetti-trail__spark:nth-child(3n+1) { background: #5dd0ff; }

@keyframes nuda-confetti-trail-glide {
  0%   { transform: translate(10px, 0); }
  25%  { transform: translate(120px, -18px); }
  50%  { transform: translate(130px, 14px); }
  75%  { transform: translate(30px, 20px); }
  100% { transform: translate(10px, 0); }
}

@keyframes nuda-confetti-trail-fade {
  0%, 100% { opacity: 0; transform: translate(10px, 0) scale(0.3); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-confetti-trail__star,
  .nuda-confetti-trail__spark { animation: none; }
  .nuda-confetti-trail__spark { opacity: 0; }
  .nuda-confetti-trail__star { left: 50%; transform: translateX(-50%); }
}