#damage-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  box-shadow: inset 0 0 50px rgba(255, 0, 0, 0);
  transition: box-shadow 1s ease-out;
  z-index: 9999;
}
#damage-overlay.damage-hit {
  background: rgba(255, 0, 0, 0.4);
  box-shadow:
    inset 0 0 100px rgba(0, 0, 0, 0.8),
    0 0 50px red;
  backdrop-filter: saturate(2) brightness(1.5) blur(2px);
  animation: 0.4s;
}
.heartbeat {
  animation: heart-logic 3s ease-in-out infinite;
}
@keyframes heart-logic {
  0% {
    box-shadow: inset 0 0 0px rgba(255, 0, 150, 0);
    backdrop-filter: blur(0px) brightness(1);
    transform: scale(1);
  }
  10% {
    box-shadow: inset 0 0 100px rgba(255, 0, 150, 0.7);
    backdrop-filter: blur(0px) brightness(0.8);
    transform: scale(1.01);
  }
  15% {
    box-shadow: inset 0 0 40px rgba(255, 0, 150, 0.3);
  }
  25% {
    box-shadow: inset 0 0 250px rgba(255, 0, 150, 0.9);
    backdrop-filter: blur(0px) brightness(0.6);
    transform: scale(1.03);
  }
  50% {
    box-shadow: inset 0 0 0px rgba(255, 0, 150, 0);
    backdrop-filter: blur(0px) brightness(1);
    transform: scale(1);
  }
  100% {
    box-shadow: inset 0 0 0px rgba(255, 0, 150, 0);
  }
}
#damage-overlay.heal-flash {
  box-shadow:
    inset 0 0 150px rgba(0, 255, 100, 0.8),
    0 0 50px rgba(0, 255, 100, 0.5);
  backdrop-filter: brightness(1.3) saturate(2) blur(1px);
  animation: heal-impact 0.5s ease-out forwards;
}
@keyframes heal-impact {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
#damage-overlay.cum {
  background: white;
  opacity: 0;
  pointer-events: none;
  z-index: 10000;
  box-shadow: inset 0 0 0vw 0vw rgba(255, 255, 255, 0.649);
  animation: climax 3s;
}
@keyframes climax {
  0% {
    opacity: 0;
    backdrop-filter: saturate(1) brightness(1) blur(0px);
  }
  15% {
    opacity: 0.7;
    backdrop-filter: saturate(3) brightness(1.5) blur(2px);
  }
  25% {
    opacity: 0.1;
  }
  40% {
    opacity: 0.9;
    backdrop-filter: saturate(5) brightness(2) blur(5px);
  }
  55% {
    opacity: 0.2;
  }
  75% {
    opacity: 1;
    backdrop-filter: saturate(10) brightness(5) blur(10px);
    box-shadow: inset 0 0 100vw 50vw rgba(255, 255, 255, 0.649);
  }
  88% {
    opacity: 1;
    background: rgba(255, 255, 255, 0.649);
  }
  100% {
    opacity: 0.2;
  }
}
#damage-overlay.scent {
  animation: scent-effect 2.5s ease-in-out forwards;

  backdrop-filter: blur(0px) saturate(2.5) brightness(1.15) hue-rotate(35deg);

  background: radial-gradient(
    circle at center,
    rgba(255, 140, 220, 0.18),
    rgba(180, 0, 255, 0.12),
    rgba(255, 255, 255, 0.04),
    transparent 75%
  );

  box-shadow:
    inset 0 0 300px rgba(255, 100, 220, 0.45),
    inset 0 0 120px rgba(255, 255, 255, 0.08),
    0 0 40px rgba(255, 0, 200, 0.3);

  opacity: 1;
  transform-origin: center;
}
@keyframes scent-effect {
  0% {
    transform: scale(1) translate(0px, 0px) rotate(0deg);

    filter: brightness(1) contrast(1);

    opacity: 0.35;
  }

  15% {
    transform: scale(1.02) translate(4px, -2px) rotate(0.3deg);

    filter: brightness(1.15) contrast(0.9);

    opacity: 0.65;
  }

  35% {
    transform: scale(1.04) translate(-5px, 3px) rotate(-0.5deg);

    filter: brightness(1.3) contrast(0.82);

    opacity: 0.9;
  }

  55% {
    transform: scale(1.03) translate(3px, -4px) rotate(0.4deg);

    filter: brightness(1.2) contrast(0.88);

    opacity: 0.65;
  }

  75% {
    transform: scale(1.02) translate(-3px, 2px) rotate(-0.2deg);

    filter: brightness(1.1) contrast(0.94);

    opacity: 0.3;
  }
  87% {
    transform: scale(1) translate(0px, 0px) rotate(0deg);

    filter: brightness(1) contrast(1);

    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 0;

    filter: brightness(1) contrast(1);

    backdrop-filter: blur(0px) saturate(1) brightness(1) hue-rotate(0deg);

    box-shadow:
      inset 0 0 0px rgba(255, 100, 220, 0),
      0 0 0px rgba(255, 0, 200, 0);

    background: transparent;
  }
}