Falling Petals

<!-- Falling Petals -->
<div class="nuda-petals" role="img" aria-label="Falling petals">
  <span class="nuda-petals__leaf" style="left:6%;  --d:0s;   --dur:5s; --r:0deg"></span>
  <span class="nuda-petals__leaf" style="left:20%; --d:.5s;  --dur:6s; --r:47deg"></span>
  <span class="nuda-petals__leaf" style="left:34%; --d:1s;   --dur:4s; --r:94deg"></span>
  <span class="nuda-petals__leaf" style="left:48%; --d:1.5s; --dur:5s; --r:141deg"></span>
  <span class="nuda-petals__leaf" style="left:62%; --d:2s;   --dur:6s; --r:188deg"></span>
  <span class="nuda-petals__leaf" style="left:76%; --d:2.5s; --dur:4s; --r:235deg"></span>
  <span class="nuda-petals__leaf" style="left:90%; --d:3s;   --dur:5s; --r:282deg"></span>
</div>

/* Falling Petals
   Petal-shaped pieces drifting and rotating as they fall.
   Customize: --petal-color, container size. */

.nuda-petals {
  --petal-color: #e4ff54;
  position: relative;
  width: 100%;
  max-width: 240px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(228, 255, 84, 0.04), transparent);
}

.nuda-petals__leaf {
  position: absolute;
  top: -14px;
  width: 10px;
  height: 14px;
  background: linear-gradient(135deg, var(--petal-color), rgba(228, 255, 84, 0.4));
  border-radius: 50% 0 50% 0;
  animation:
    nuda-petals-fall var(--dur, 5s) linear var(--d, 0s) infinite,
    nuda-petals-spin var(--dur, 5s) ease-in-out var(--d, 0s) infinite;
}

@keyframes nuda-petals-fall {
  0%   { transform: translateY(-14px) rotate(var(--r, 0deg)); }
  100% { transform: translateY(calc(100% + 14px)) rotate(calc(var(--r, 0deg) + 540deg)); }
}

@keyframes nuda-petals-spin {
  0%, 100% { margin-left: 0; }
  50%      { margin-left: 16px; }
}

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