Champagne Bubbles

<div class="nuda-cc2-champagne-bubbles" role="img" aria-label="Champagne bubbles rising in a flute">
  <span class="nuda-cc2-champagne-bubbles__bowl" aria-hidden="true">
    <span class="nuda-cc2-champagne-bubbles__liquid" aria-hidden="true">
      <span class="nuda-cc2-champagne-bubbles__bubble" aria-hidden="true" style="left:20%; --dur:2.2s; --d:0s"></span>
      <span class="nuda-cc2-champagne-bubbles__bubble" aria-hidden="true" style="left:35%; --dur:2.8s; --d:.4s"></span>
      <span class="nuda-cc2-champagne-bubbles__bubble" aria-hidden="true" style="left:50%; --dur:2.4s; --d:.9s"></span>
      <span class="nuda-cc2-champagne-bubbles__bubble" aria-hidden="true" style="left:65%; --dur:3.2s; --d:1.4s"></span>
      <span class="nuda-cc2-champagne-bubbles__bubble" aria-hidden="true" style="left:45%; --dur:2.6s; --d:1.9s"></span>
      <span class="nuda-cc2-champagne-bubbles__bubble" aria-hidden="true" style="left:60%; --dur:3s;   --d:2.3s"></span>
    </span>
  </span>
  <span class="nuda-cc2-champagne-bubbles__stem" aria-hidden="true"></span>
  <span class="nuda-cc2-champagne-bubbles__base" aria-hidden="true"></span>
</div>

.nuda-cc2-champagne-bubbles {
  position: relative;
  width: 120px;
  height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  background: #09090b;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding-bottom: 10px;
  overflow: hidden;
}

.nuda-cc2-champagne-bubbles__bowl {
  position: relative;
  width: 64px;
  height: 80px;
  clip-path: polygon(12% 0%,88% 0%,64% 100%,36% 100%);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.22);
  border-top: none;
  overflow: hidden;
}

.nuda-cc2-champagne-bubbles__liquid {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  background: linear-gradient(180deg,rgba(228,255,84,.55),rgba(185,201,63,.85));
}

.nuda-cc2-champagne-bubbles__bubble {
  position: absolute;
  bottom: 2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,.85);
  opacity: 0;
  will-change: transform,opacity;
  animation: _nuda-cc2champagnerise var(--dur) linear var(--d) infinite;
}

.nuda-cc2-champagne-bubbles__stem {
  width: 6px;
  height: 26px;
  background: rgba(255,255,255,.22);
}

.nuda-cc2-champagne-bubbles__base {
  width: 38px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
}

@keyframes _nuda-cc2champagnerise {
  0% {
    opacity: 0;
    transform: translateY(0) scale(.6);
  }
  12% {
    opacity: .9;
  }
  85% {
    opacity: .7;
  }
  100% {
    opacity: 0;
    transform: translateY(-64px) scale(1);
  }
}

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