Fireworks

<!-- Fireworks -->
<div class="nuda-firework" role="img" aria-label="Fireworks">
  <span class="nuda-firework__spark" style="--a:0deg;   --d:0s"></span>
  <span class="nuda-firework__spark" style="--a:30deg;  --d:.05s"></span>
  <span class="nuda-firework__spark" style="--a:60deg;  --d:.1s"></span>
  <span class="nuda-firework__spark" style="--a:90deg;  --d:.15s"></span>
  <span class="nuda-firework__spark" style="--a:120deg; --d:0s"></span>
  <span class="nuda-firework__spark" style="--a:150deg; --d:.05s"></span>
  <span class="nuda-firework__spark" style="--a:180deg; --d:.1s"></span>
  <span class="nuda-firework__spark" style="--a:210deg; --d:.15s"></span>
  <span class="nuda-firework__spark" style="--a:240deg; --d:0s"></span>
  <span class="nuda-firework__spark" style="--a:270deg; --d:.05s"></span>
  <span class="nuda-firework__spark" style="--a:300deg; --d:.1s"></span>
  <span class="nuda-firework__spark" style="--a:330deg; --d:.15s"></span>
</div>

/* Fireworks
   Sparks shooting outward and fading.
   Customize: --fw-color, container size. */

.nuda-firework {
  --fw-color: #e4ff54;
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nuda-firework__spark {
  position: absolute;
  width: 2px;
  height: 14px;
  background: linear-gradient(180deg, transparent, var(--fw-color));
  border-radius: 50%;
  filter: drop-shadow(0 0 3px var(--fw-color));
  transform-origin: center 50px;
  transform: rotate(var(--a)) translateY(-30px);
  opacity: 0;
  animation: nuda-fw-shoot 2.4s cubic-bezier(0.3, 0.6, 0.2, 1) var(--d, 0s) infinite;
}

@keyframes nuda-fw-shoot {
  0%, 30%   { transform: rotate(var(--a)) translateY(0) scaleY(0.3); opacity: 0; }
  40%       { opacity: 1; }
  60%, 80%  { transform: rotate(var(--a)) translateY(-32px) scaleY(1); opacity: 1; }
  100%      { transform: rotate(var(--a)) translateY(-46px) scaleY(0.4); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-firework__spark { animation: none; opacity: 0; }
}