/* === KEYFRAME ANIMATIONS === */

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes spin-slow-reverse {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

@keyframes ring-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(123, 209, 250, 0.1), inset 0 0 20px rgba(123, 209, 250, 0.03); }
  50% { box-shadow: 0 0 35px rgba(123, 209, 250, 0.2), inset 0 0 35px rgba(123, 209, 250, 0.06); }
}

@keyframes ring-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes pulse-glow {
  0%, 100% { opacity: 0.5; filter: drop-shadow(0 0 15px rgba(0, 219, 233, 0.3)); }
  50% { opacity: 1; filter: drop-shadow(0 0 30px rgba(0, 219, 233, 0.6)); }
}

@keyframes btn-breathe {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInBubble {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes glowPulse {
  0%, 100% { filter: drop-shadow(0 0 15px rgba(123, 209, 250, 0.2)); }
  50% { filter: drop-shadow(0 0 25px rgba(123, 209, 250, 0.4)); }
}

@keyframes particle-float {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
}

/* Character ring animations */
.ring-spin-slow { animation: spin-slow 60s linear infinite; }
.ring-spin-slower-reverse { animation: spin-slow-reverse 90s linear infinite; }

@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.05); opacity: 1; }
}
.breathing-pulse { animation: breathe 8s ease-in-out infinite; }

@keyframes steady-stroke-glow {
  0% { border-color: rgba(0, 219, 233, 0.2); box-shadow: 0 4px 20px rgba(0,0,0,0.2), 0 0 8px rgba(0,219,233,0.1); }
  50% { border-color: rgba(0, 219, 233, 0.5); box-shadow: 0 4px 20px rgba(0,0,0,0.2), 0 0 16px rgba(0,219,233,0.3); }
  100% { border-color: rgba(0, 219, 233, 0.2); box-shadow: 0 4px 20px rgba(0,0,0,0.2), 0 0 8px rgba(0,219,233,0.1); }
}

@keyframes celestial-glow-pulse {
  0% { border-color: rgba(0, 219, 233, 0.25); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 14px rgba(0,219,233,0.12), 0 6px 24px rgba(0,0,0,0.3); }
  50% { border-color: rgba(0, 219, 233, 0.55); box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 0 28px rgba(0,219,233,0.28), 0 6px 24px rgba(0,0,0,0.3); }
  100% { border-color: rgba(0, 219, 233, 0.25); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 14px rgba(0,219,233,0.12), 0 6px 24px rgba(0,0,0,0.3); }
}

@keyframes btn-shimmer-sweep {
  0%, 70% { left: -100%; opacity: 0; }
  80% { opacity: 1; }
  100% { left: 200%; opacity: 0; }
}

@keyframes plaque-sway {
  0%, 100% { transform: rotate(-1.2deg) translateX(-3px); }
  20% { transform: rotate(0.6deg) translateX(2px); }
  45% { transform: rotate(1.4deg) translateX(4px); }
  70% { transform: rotate(-0.4deg) translateX(-1px); }
  85% { transform: rotate(-1deg) translateX(-2px); }
}

@keyframes wire-sway {
  0%, 100% { transform: rotate(-0.8deg); }
  50% { transform: rotate(0.8deg); }
}

@keyframes orbital-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes flow-pulse {
  0%, 100% { opacity: 0.55; transform: translateX(0); }
  50% { opacity: 1; transform: translateX(3px); }
}

@keyframes btn-click-flash {
  0% { box-shadow: 0 0 0 0 rgba(0, 219, 233, 0.45); }
  100% { box-shadow: 0 0 0 12px rgba(0, 219, 233, 0); }
}
.btn-click-flash {
  animation: btn-click-flash 0.45s ease-out;
}