Bubbles

<!-- Bubbles -->
<div class="nuda-bubbles" role="img" aria-label="Bubbles rising">
  <span class="nuda-bubbles__bubble" style="left:8%;  --s:8px;  --d:0s;   --dur:4s"></span>
  <span class="nuda-bubbles__bubble" style="left:22%; --s:12px; --d:.4s;  --dur:5s"></span>
  <span class="nuda-bubbles__bubble" style="left:36%; --s:6px;  --d:.8s;  --dur:3s"></span>
  <span class="nuda-bubbles__bubble" style="left:50%; --s:10px; --d:1.2s; --dur:5s"></span>
  <span class="nuda-bubbles__bubble" style="left:64%; --s:8px;  --d:1.6s; --dur:4s"></span>
  <span class="nuda-bubbles__bubble" style="left:78%; --s:14px; --d:2s;   --dur:6s"></span>
  <span class="nuda-bubbles__bubble" style="left:92%; --s:6px;  --d:2.4s; --dur:3s"></span>
</div>

/* Bubbles
   Translucent bubbles rising from the bottom.
   Customize: --bubble-color, container size. */

.nuda-bubbles {
  --bubble-color: #e4ff54;
  position: relative;
  width: 100%;
  max-width: 240px;
  aspect-ratio: 1;
  background: radial-gradient(
    circle at center 100%,
    rgba(228, 255, 84, 0.12),
    transparent 60%
  );
  overflow: hidden;
  border-radius: 8px;
}

.nuda-bubbles__bubble {
  position: absolute;
  bottom: -12px;
  width: var(--s, 10px);
  height: var(--s, 10px);
  border: 1.5px solid rgba(228, 255, 84, 0.6);
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 35%,
    rgba(228, 255, 84, 0.3),
    transparent 60%
  );
  animation: nuda-bubble-rise var(--dur, 4s) ease-in var(--d, 0s) infinite;
}

@keyframes nuda-bubble-rise {
  0%   { transform: translateY(0) scale(0.6); opacity: 0; }
  15%  { opacity: 1; }
  80%  { opacity: 0.8; }
  100% { transform: translateY(calc(-100% - 24px)) scale(1); opacity: 0; }
}

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