.hero-droplets {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 96%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 96%);
}

.hero-droplets .droplet {
  --size: 12px;
  --drift: 7px;
  --travel: 270px;
  --duration: 8s;
  --delay: 0s;
  --peak-opacity: .34;
  position: absolute;
  top: var(--start-y);
  left: var(--start-x);
  width: var(--size);
  height: calc(var(--size) * 1.42);
  opacity: 0;
  border: 1px solid rgba(144, 250, 255, .72);
  border-radius: 58% 42% 58% 42% / 49% 48% 62% 51%;
  clip-path: polygon(50% 100%, 18% 61%, 12% 42%, 18% 23%, 33% 8%, 50% 0, 67% 8%, 82% 23%, 88% 42%, 82% 61%);
  background:
    radial-gradient(ellipse at 31% 20%, rgba(255,255,255,.92) 0 7%, transparent 18%),
    radial-gradient(ellipse at 68% 74%, rgba(111,242,255,.3) 0 18%, rgba(11,169,203,.12) 45%, transparent 72%);
  box-shadow: 0 0 4px rgba(222,255,255,.65), 0 0 12px rgba(25,218,242,.36);
  filter: blur(var(--blur, 0));
  transform: translate3d(0, -22px, 0) rotate(-8deg) scale(.82);
  animation: hero-droplet-slide var(--duration) cubic-bezier(.34,.02,.32,1) var(--delay) infinite;
  will-change: transform, opacity;
}

.hero-droplets .droplet::before {
  content: "";
  position: absolute;
  inset: 16% 23% 24% 20%;
  border-radius: 50%;
  border-left: 1px solid rgba(220,255,255,.64);
  border-top: 1px solid rgba(220,255,255,.34);
  opacity: .7;
}

.hero-droplets .droplet::after {
  content: "";
  position: absolute;
  left: 20%;
  top: 13%;
  width: 23%;
  height: 29%;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  filter: blur(.25px);
}

@keyframes hero-droplet-slide {
  0% { opacity: 0; transform: translate3d(0, -22px, 0) rotate(-8deg) scale(.82); }
  10% { opacity: var(--peak-opacity); }
  58% { opacity: calc(var(--peak-opacity) * .72); transform: translate3d(calc(var(--drift) * .36), calc(var(--travel) * .58), 0) rotate(3deg) scale(1); }
  82% { opacity: calc(var(--peak-opacity) * .34); }
  100% { opacity: 0; transform: translate3d(var(--drift), var(--travel), 0) rotate(9deg) scale(.94); }
}

/* Individual timing and placement keep the overlay sparse, irregular, and glass-like. */
.hero-droplets .droplet:nth-child(1) { --start-x: 10%; --start-y: 7%; --size: 14px; --travel: 220px; --drift: 5px; --duration: 7.4s; --delay: -1.2s; --peak-opacity: .62; }
.hero-droplets .droplet:nth-child(2) { --start-x: 20%; --start-y: 18%; --size: 22px; --travel: 300px; --drift: -7px; --duration: 10.6s; --delay: -5.8s; --peak-opacity: .55; --blur: .2px; }
.hero-droplets .droplet:nth-child(3) { --start-x: 32%; --start-y: 10%; --size: 10px; --travel: 185px; --drift: 9px; --duration: 6.1s; --delay: -2.6s; --peak-opacity: .68; }
.hero-droplets .droplet:nth-child(4) { --start-x: 43%; --start-y: 25%; --size: 18px; --travel: 245px; --drift: -5px; --duration: 8.8s; --delay: -7.1s; --peak-opacity: .58; --blur: .35px; }
.hero-droplets .droplet:nth-child(5) { --start-x: 15%; --start-y: 35%; --size: 30px; --travel: 205px; --drift: 8px; --duration: 10.1s; --delay: -3.5s; --peak-opacity: .44; --blur: .55px; }
.hero-droplets .droplet:nth-child(6) { --start-x: 27%; --start-y: 43%; --size: 14px; --travel: 170px; --drift: -6px; --duration: 6.8s; --delay: -4.7s; --peak-opacity: .64; }
.hero-droplets .droplet:nth-child(7) { --start-x: 47%; --start-y: 14%; --size: 18px; --travel: 260px; --drift: 6px; --duration: 9.3s; --delay: -6.2s; --peak-opacity: .5; }
.hero-droplets .droplet:nth-child(8) { --start-x: 38%; --start-y: 51%; --size: 22px; --travel: 180px; --drift: -8px; --duration: 7.9s; --delay: -1.8s; --peak-opacity: .46; --blur: .25px; }
.hero-droplets .droplet:nth-child(9) { --start-x: 7%; --start-y: 27%; --size: 10px; --travel: 235px; --drift: 7px; --duration: 8.5s; --delay: -3.1s; --peak-opacity: .7; }
.hero-droplets .droplet:nth-child(10) { --start-x: 53%; --start-y: 30%; --size: 14px; --travel: 190px; --drift: -5px; --duration: 6.6s; --delay: -5.1s; --peak-opacity: .52; }
.hero-droplets .droplet:nth-child(11) { --start-x: 23%; --start-y: 58%; --size: 18px; --travel: 150px; --drift: 6px; --duration: 9.8s; --delay: -8s; --peak-opacity: .48; --blur: .4px; }
.hero-droplets .droplet:nth-child(12) { --start-x: 44%; --start-y: 39%; --size: 26px; --travel: 155px; --drift: -7px; --duration: 10.9s; --delay: -2.1s; --peak-opacity: .4; --blur: .65px; }
.hero-droplets .droplet:nth-child(13) { --start-x: 12%; --start-y: 49%; --size: 14px; --travel: 190px; --drift: 5px; --duration: 7.1s; --delay: -6.8s; --peak-opacity: .58; }
.hero-droplets .droplet:nth-child(14) { --start-x: 30%; --start-y: 23%; --size: 10px; --travel: 210px; --drift: -6px; --duration: 8.2s; --delay: -4.1s; --peak-opacity: .66; }

@media (max-width: 520px) {
  .hero-droplets .droplet:nth-child(n+10) { display: none; }
  .hero-droplets .droplet:nth-child(1) { --start-x: 10%; }
  .hero-droplets .droplet:nth-child(2) { --start-x: 28%; }
  .hero-droplets .droplet:nth-child(3) { --start-x: 46%; }
  .hero-droplets .droplet:nth-child(4) { --start-x: 18%; }
  .hero-droplets .droplet:nth-child(5) { --start-x: 40%; }
  .hero-droplets .droplet:nth-child(6) { --start-x: 58%; }
  .hero-droplets .droplet:nth-child(7) { --start-x: 24%; }
  .hero-droplets .droplet:nth-child(8) { --start-x: 52%; }
  .hero-droplets .droplet:nth-child(9) { --start-x: 68%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-droplets .droplet { animation: none; opacity: 0; }
}

/* Disable the legacy Work particle layer; the dedicated overlay above is the only hero effect. */
.hero::before,
.hero::after {
  content: none !important;
  display: none !important;
  animation: none !important;
  background: none !important;
}