Condensation On Glass

<!-- Condensation On Glass (droplets bead up, then drip and leave a trail) -->
<div class="nuda-wa2-condensation" role="img" aria-label="Condensation forming and sliding down a glass pane">
  <span class="nuda-wa2-condensation__ambient"></span>
  <span class="nuda-wa2-condensation__glass"></span>
  <span class="nuda-wa2-condensation__drop" style="left:10%; --cd-d:0s;   --cd-dur:3.4s">
    <span class="nuda-wa2-condensation__trail"></span>
  </span>
  <span class="nuda-wa2-condensation__drop" style="left:24%; --cd-d:.6s;  --cd-dur:3.9s">
    <span class="nuda-wa2-condensation__trail"></span>
  </span>
  <span class="nuda-wa2-condensation__drop" style="left:38%; --cd-d:1.2s; --cd-dur:4.4s">
    <span class="nuda-wa2-condensation__trail"></span>
  </span>
  <span class="nuda-wa2-condensation__drop" style="left:52%; --cd-d:1.8s; --cd-dur:3.4s">
    <span class="nuda-wa2-condensation__trail"></span>
  </span>
  <span class="nuda-wa2-condensation__drop" style="left:66%; --cd-d:2.4s; --cd-dur:3.9s">
    <span class="nuda-wa2-condensation__trail"></span>
  </span>
  <span class="nuda-wa2-condensation__drop" style="left:80%; --cd-d:3s;   --cd-dur:4.4s">
    <span class="nuda-wa2-condensation__trail"></span>
  </span>
</div>

.nuda-wa2-condensation {
  position: relative;
  width: 100%;
  max-width: 200px;
  height: 130px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(160deg,#0d1a12,#09090b 70%);
}

.nuda-wa2-condensation__ambient {
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle at 30% 30%,rgba(228,255,84,.12),transparent 55%),radial-gradient(circle at 75% 60%,rgba(34,197,94,.10),transparent 55%);
  filter: blur(10px);
}

.nuda-wa2-condensation__glass {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
}

.nuda-wa2-condensation__drop {
  position: absolute;
  top: -6px;
  width: 5px;
  height: 6px;
  border-radius: 50% 50% 50% 0;
  background: radial-gradient(circle at 35% 30%,rgba(255,255,255,.95),rgba(228,255,84,.35));
  opacity: 0;
  will-change: transform,opacity;
  animation: _nuda-wa2condensationDrip var(--cd-dur,4s) ease-in var(--cd-d,0s) infinite;
}

.nuda-wa2-condensation__trail {
  position: absolute;
  top: -14px;
  left: 2px;
  width: 1px;
  height: 14px;
  background: linear-gradient(180deg,transparent,rgba(228,255,84,.35));
  transform-origin: top;
  opacity: 0;
  will-change: transform,opacity;
  animation: _nuda-wa2condensationTrail var(--cd-dur,4s) ease-in var(--cd-d,0s) infinite;
}

@keyframes _nuda-wa2condensationDrip {
  0% {
    transform: rotate(45deg) scale(0);
    opacity: 0;
  }
  8% {
    transform: rotate(45deg) scale(1);
    opacity: .9;
  }
  70% {
    transform: translateY(70px) rotate(45deg) scale(1);
    opacity: .9;
  }
  100% {
    transform: translateY(90px) rotate(45deg) scale(.8);
    opacity: 0;
  }
}

@keyframes _nuda-wa2condensationTrail {
  0%,8% {
    opacity: 0;
    transform: scaleY(0) translateY(0);
  }
  20% {
    opacity: .5;
  }
  70% {
    transform: scaleY(1) translateY(56px);
    opacity: .35;
  }
  100% {
    opacity: 0;
    transform: scaleY(1) translateY(76px);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-wa2-condensation__drop {
    animation: none;
    opacity: .5;
    transform: rotate(45deg) scale(1);
  }
  .nuda-wa2-condensation__trail {
    animation: none;
    opacity: .2;
    transform: scaleY(1) translateY(0);
  }
}