:root { --nav-bg: #3f3f46; }
.dark { --nav-bg: #1f2937; }

.drip-wrap {
  position: absolute;
  left: 0; right: 0;
  bottom: -28px;
  height: 92px;
  filter: drop-shadow(0 6px 6px rgba(0,0,0,.45)) url(#goo);
  z-index: 1;
}
.drip-top {
  position: absolute; left:0; right:0; top:0;
  height: 18px; background: var(--nav-bg);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.drip-bottom {
  position: absolute; left:0; right:0; bottom:0;
  height: 3px; background: rgba(0,0,0,.35);
  filter: blur(1px); opacity:.5;
}
.drip {
  position: absolute; top:6px;
  width:22px; height:22px; background:var(--nav-bg);
  border-radius:50%; transform-origin:50% 0%;
  animation: dripBob 4.2s ease-in-out infinite;
}
.drip::after {
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  top:16px; width:20px; height:20px;
  background:var(--nav-bg); border-radius:50%;
}
@keyframes dripBob {
  0% {transform:translateY(0) scaleY(1);}
  40%{transform:translateY(42px) scaleY(1.15);}
  60%{transform:translateY(48px) scaleY(1.05);}
  100%{transform:translateY(0) scaleY(1);}
}
.drip:nth-of-type(2){ left:4%;  animation-delay:.0s;}
.drip:nth-of-type(3){ left:10%; animation-delay:.6s; transform:scale(.95);}
.drip:nth-of-type(4){ left:18%; animation-delay:.2s; transform:scale(1.1);}
.drip:nth-of-type(5){ left:27%; animation-delay:1s;}
.drip:nth-of-type(6){ left:39%; animation-delay:.35s;}
.drip:nth-of-type(7){ left:51%; animation-delay:.85s;}
.drip:nth-of-type(8){ left:64%; animation-delay:.25s; transform:scale(.9);}
.drip:nth-of-type(9){ left:78%; animation-delay:.7s; transform:scale(1.1);}
.drip:nth-of-type(10){left:89%; animation-delay:.15s;}
.drip:nth-of-type(11){left:96%; animation-delay:.95s;}
@media (prefers-reduced-motion: reduce){
  .drip, .drip::after { animation:none!important; }
}