/* ============================================================
   TAILWIND CSS CUSTOM CONFIG - Injected via <style> tag in HTML
   This file provides supplementary chart & animation styles
   ============================================================ */

/* SVG Circle progress animation */
@keyframes svg-progress {
  from { stroke-dashoffset: 251; }
}

/* Floating animation for AI badge */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
}

.animate-float { animation: float 3s ease-in-out infinite; }

/* Glowing border animation */
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(99,102,241,0.3), 0 0 30px rgba(99,102,241,0.1); }
  50% { box-shadow: 0 0 20px rgba(99,102,241,0.6), 0 0 60px rgba(99,102,241,0.2); }
}

.animate-glow { animation: glow-pulse 3s ease-in-out infinite; }

/* Gradient animated background */
@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.animate-gradient {
  background-size: 200% 200%;
  animation: gradient-shift 4s ease infinite;
}

/* Waveform animation */
@keyframes wave {
  0%, 100% { transform: scaleY(0.5); }
  50% { transform: scaleY(1); }
}

.wave-bar { animation: wave 1.2s ease-in-out infinite; }
.wave-bar:nth-child(2) { animation-delay: 0.15s; }
.wave-bar:nth-child(3) { animation-delay: 0.3s; }
.wave-bar:nth-child(4) { animation-delay: 0.45s; }
.wave-bar:nth-child(5) { animation-delay: 0.6s; }

/* Shimmer effect for loading states */
@keyframes shimmer {
  0% { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}

/* Number ticker animation */
@keyframes ticker {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0% 0 0); }
}

/* Radar/pulse animation for monitoring */
@keyframes radar-ping {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(2.5); opacity: 0; }
}

.radar-ping {
  position: relative;
}

.radar-ping::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  background: currentColor;
  animation: radar-ping 1.5s ease-out infinite;
  opacity: 0.3;
}

/* Chart tooltip custom style */
.chartjs-tooltip {
  background: rgba(17,24,39,0.95) !important;
  border: 1px solid rgba(99,102,241,0.3) !important;
  border-radius: 10px !important;
  backdrop-filter: blur(10px) !important;
  padding: 10px 14px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
}

/* Server card micro-animations */
@keyframes server-pulse {
  0%, 100% { background-size: 200% 200%; background-position: 0% 50%; }
  50% { background-size: 200% 200%; background-position: 100% 50%; }
}

/* Icon bounce on hover */
@keyframes icon-bounce {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-4px); }
  60% { transform: translateY(-2px); }
}

.hover-bounce:hover i { animation: icon-bounce 0.5s ease; }

/* Page transition */
.page-transition {
  animation: page-enter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes page-enter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Live status text blink */
@keyframes text-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.blink-text { animation: text-blink 2s ease-in-out infinite; }

/* Traffic spike animation for charts */
@keyframes spike {
  0% { transform: scaleY(0.3); }
  50% { transform: scaleY(1); }
  100% { transform: scaleY(0.5); }
}

/* Fade in animation for dropdown menus */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fadeIn {
  animation: fadeIn 0.15s ease-out forwards;
}