.paint-droplet {
  position: fixed;
  top: -20px;
  opacity: var(--epp-droplet-opacity, 0.7);
  z-index: 9999;
  pointer-events: none;
  animation: droplet-fall 2.5s ease-in forwards;
}

.paint-droplet.large {
  width: 12px;
  height: 18px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

.paint-droplet.medium {
  width: 8px;
  height: 12px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

.paint-droplet.small {
  width: 4px;
  height: 6px;
  border-radius: 50%;
}

.paint-droplet.splatter {
  width: 15px;
  height: 15px;
  border-radius: 50% 30% 70% 40% / 60% 40% 60% 40%;
}

@keyframes droplet-fall {
  0% {
    transform: translateY(0) scale(0.5) rotate(0deg);
    opacity: var(--epp-droplet-opacity, 0.7);
  }
  50% {
    transform: translateY(50vh) scale(1.2) rotate(180deg);
    opacity: calc(var(--epp-droplet-opacity, 0.7) + 0.2);
  }
  100% {
    transform: translateY(100vh) scale(0.8) rotate(360deg);
    opacity: 0;
  }
}