.stain {
  position: absolute;
  pointer-events: none;
  user-select: none;
  transform: rotate(var(--rotation, 0deg));
}

/* SIZE */
.small {
  width: 40px;
  height: 40px;
}

.medium {
  width: 60px;
  height: 60px;
}

.large {
  width: 80px;
  height: 80px;
}

.stain[style*='--stain-size'] {
  width: var(--stain-size);
  height: var(--stain-size);
}

/* STAIN BODY */
.stainBody {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, transparent 30%, var(--stain-color) 70%, transparent 100%);
}

/* INTENSITY - Light */
.light .stainBody {
  --stain-color: rgba(101, 67, 33, 0.05);
}

/* INTENSITY - Medium */
.medium .stainBody {
  --stain-color: rgba(101, 67, 33, 0.12);
}

/* INTENSITY - Dark */
.dark .stainBody {
  --stain-color: rgba(101, 67, 33, 0.2);
}

/* VARIANT - Classic */
.classic .stainBody {
  background: radial-gradient(
    ellipse at 40% 40%,
    transparent 20%,
    var(--stain-color) 40%,
    var(--stain-color) 60%,
    transparent 70%
  );
}

/* VARIANT - Ring */
.ring .stainRing {
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    transparent 80%,
    var(--stain-color) 90%,
    transparent 100%
  );
}

/* VARIANT - Splash */
.splashes {
  position: absolute;
  inset: -20px;
}

.splash {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  background: var(--stain-color);
  transform: rotate(var(--angle, 0deg)) translateY(calc(var(--distance, 30px) * -1));
}

/* VARIANT - Drip */
.drips {
  position: absolute;
  inset: 0;
}

.drip {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  background: var(--stain-color);
  transform-origin: top center;
  transform: rotate(var(--angle, 0deg));
  animation: drip-fall 4s ease-in-out var(--delay, 0s) infinite;
}

@keyframes drip-fall {
  0%, 100% {
    height: 0;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    height: var(--length, 20px);
    opacity: 1;
  }
  90% {
    height: var(--length, 20px);
    opacity: 0.5;
  }
}

/* ANIMATED */
.animated .stainBody {
  animation: stain-pulse 6s ease-in-out infinite;
}

@keyframes stain-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.02);
  }
}

/* PAPER TEXTURE OVERLAY */
.stain::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noise)" opacity="0.3"/></svg>');
  opacity: 0.3;
  pointer-events: none;
}

/* IRREGULAR SHAPE VARIANTS */
.stain.irregular .stainBody {
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}

.stain.irregular2 .stainBody {
  border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
}

/* BLOODY VARIANT (for horror themes) */
.stain.bloody .stainBody {
  --stain-color: rgba(139, 0, 0, 0.4);
  background: radial-gradient(
    ellipse at center,
    rgba(139, 0, 0, 0.6) 0%,
    rgba(139, 0, 0, 0.4) 50%,
    rgba(139, 0, 0, 0.2) 70%,
    transparent 100%
  );
}

.stain.bloody.drip .drip {
  background: rgba(139, 0, 0, 0.6);
}

/* FADED/AGED VARIANT */
.stain.aged .stainBody {
  --stain-color: rgba(101, 67, 33, 0.08);
  filter: sepia(0.5);
}