@keyframes rotateSlow {
  to {
    transform: rotate(360deg);
  }
}

@keyframes waveSoftFloat {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(10px);
  }
}

@keyframes painRipple {
  0% {
    opacity: 0.75;
    transform: scale(0.78);
  }

  70% {
    opacity: 0.08;
    transform: scale(1.9);
  }

  100% {
    opacity: 0;
    transform: scale(2.2);
  }
}

@keyframes softPainGlow {
  0%,
  100% {
    opacity: 0.72;
    transform: translate(-50%, -50%) scale(0.96);
    box-shadow: 0 0 0 7px rgba(217, 38, 49, 0.06), 0 0 18px rgba(217, 38, 49, 0.26);
  }

  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08);
    box-shadow: 0 0 0 11px rgba(217, 38, 49, 0.1), 0 0 34px rgba(217, 38, 49, 0.42);
  }
}

@keyframes softPainRipple {
  0% {
    opacity: 0.46;
    transform: scale(0.72);
  }

  72% {
    opacity: 0;
    transform: scale(1.7);
  }

  100% {
    opacity: 0;
    transform: scale(1.9);
  }
}

@keyframes heartbeat {
  0%,
  100% {
    transform: scale(1);
  }

  16% {
    transform: scale(1.34);
  }

  32% {
    transform: scale(0.92);
  }

  48% {
    transform: scale(1.22);
  }

  64% {
    transform: scale(1);
  }
}

@keyframes warningBlink {
  from {
    opacity: 0.78;
  }

  to {
    opacity: 1;
  }
}

@keyframes iconFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

@keyframes rippleClick {
  to {
    opacity: 0;
    transform: scale(4);
  }
}

.animated-icon {
  animation: iconFloat 3.2s ease-in-out infinite;
}

.ripple-dot {
  position: absolute;
  width: 18px;
  height: 18px;
  pointer-events: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  transform: translate(-50%, -50%) scale(0);
  animation: rippleClick 0.6s ease-out;
}