/* Camada decorativa substituta do flashdrips.swf: gotas sobre a foto existente. */
.water-drops {
  position: relative;
  width: 450px;
  height: 138px;
  overflow: hidden;
  pointer-events: none;
}

.water-drops span {
  position: absolute;
  top: -42px;
  left: var(--left);
  width: var(--size);
  height: calc(var(--size) * 1.58);
  border: 1px solid rgba(255, 255, 255, .82);
  /* Ponta central acima e corpo arredondado abaixo, sem inclinação lateral. */
  border-radius: 50%;
  clip-path: polygon(50% 0%, 70% 27%, 88% 54%, 92% 72%, 84% 90%, 68% 100%, 32% 100%, 16% 90%, 8% 72%, 12% 54%, 30% 27%);
  background:
    radial-gradient(ellipse at 30% 23%, rgba(255,255,255,.98) 0 7%, rgba(255,255,255,.35) 14%, transparent 29%),
    radial-gradient(ellipse at 66% 72%, rgba(55,68,51,.35), transparent 56%),
    rgba(244, 250, 247, .18);
  box-shadow:
    inset 3px 3px 4px rgba(255,255,255,.65),
    inset -3px -4px 6px rgba(69,79,66,.28),
    1px 2px 3px rgba(51,60,47,.32);
  opacity: 0;
  transform: translate3d(0, -40px, 0);
  animation: water-drop var(--duration) cubic-bezier(.25,.65,.5,1) var(--delay) infinite;
}

@keyframes water-drop {
  0% { opacity: 0; transform: translate3d(0, -48px, 0) scale(.72); }
  8% { opacity: .92; }
  75% { opacity: .86; }
  100% { opacity: 0; transform: translate3d(var(--drift), 195px, 0) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .water-drops span { animation: none; opacity: .55; transform: translate3d(0, 60px, 0); }
}