@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --aqua: #61dafb;
  --violet: #7b61ff;
}

body {
  background-color: #050505;
  color: #e2e8f0;
}

.bg-panel {
  background-color: #121214;
}

.card-hover:hover {
  box-shadow: 0 0 25px rgba(97, 218, 251, 0.15);
  border-color: rgba(97, 218, 251, 0.5);
}

.text-gradient-aqua {
  background: linear-gradient(90deg, var(--aqua), var(--violet));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes aquaPulse {
  0%, 100% { text-shadow: 0 0 8px rgba(97, 218, 251, 0.6); }
  50% { text-shadow: 0 0 18px rgba(97, 218, 251, 1); }
}
.animate-aquaPulse {
  animation: aquaPulse 3s ease-in-out infinite;
}


/* === Smooth entrance === */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fadeIn {
  animation: fadeIn 0.5s ease forwards;
}

/* === Aqua-Violet gradient sweep for titles === */
@keyframes aquaSweep {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.text-gradient-aqua {
  background: linear-gradient(90deg,
    #61dafb 0%, #7b61ff 50%, #61dafb 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: aquaSweep 5s linear infinite;
}

/* === Subtle glowing pulse (cyan→violet) === */
@keyframes aquaPulse {
  0%, 100% {
    text-shadow: 0 0 8px rgba(97, 218, 251, 0.6),
                 0 0 15px rgba(123, 97, 255, 0.3);
  }
  50% {
    text-shadow: 0 0 18px rgba(97, 218, 251, 1),
                 0 0 30px rgba(123, 97, 255, 0.6);
  }
}
.animate-aquaPulse {
  animation: aquaPulse 3s ease-in-out infinite;
}

/* === Moving gradient backgrounds === */
@keyframes gradientMove {
  0% { background-position: -200px 0; }
  100% { background-position: 200px 0; }
}
.animate-gradientMove {
  background-size: 200% auto;
  animation: gradientMove 3s linear infinite;
}

/* === Dropdown open animation === */
@keyframes dropdownOpen {
  0% { opacity: 0; transform: scale(0.95) translateY(-4px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.animate-dropdownOpen {
  animation: dropdownOpen 0.25s ease-out forwards;
}

/* === Radar / Pulse circles for charts or sentiment === */
@keyframes radarPulse1 {
  0% { transform: scale(0.8); opacity: 0.4; }
  50% { transform: scale(1.1); opacity: 0.15; }
  100% { transform: scale(1.4); opacity: 0; }
}
@keyframes radarPulse2 {
  0% { transform: scale(0.7); opacity: 0.3; }
  50% { transform: scale(1.2); opacity: 0.1; }
  100% { transform: scale(1.5); opacity: 0; }
}
@keyframes radarPulse3 {
  0% { transform: scale(0.6); opacity: 0.2; }
  50% { transform: scale(1.3); opacity: 0.05; }
  100% { transform: scale(1.6); opacity: 0; }
}
.animate-radarPulse1 { animation: radarPulse1 3s ease-in-out infinite; }
.animate-radarPulse2 { animation: radarPulse2 4s ease-in-out infinite; }
.animate-radarPulse3 { animation: radarPulse3 5s ease-in-out infinite; }

/* === Cards / hover effects === */
.card-hover {
  @apply transition-all duration-300 border border-[#1a1a1a] rounded-xl;
}
.card-hover:hover {
  border-color: rgba(97, 218, 251, 0.6);
  box-shadow: 0 0 25px rgba(97, 218, 251, 0.15);
}

/* === Background gradients === */
.bg-gradient-aqua {
  background: linear-gradient(135deg, #101622 0%, #0c0f14 100%);
}
.bg-panel {
  background: rgba(18,18,20,0.9);
  backdrop-filter: blur(6px);
  border: 1px solid #1b1f29;
}

/* === Scrollbar styling === */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #61dafb, #7b61ff);
  border-radius: 10px;
}
::-webkit-scrollbar-track { background: #0a0a0a; }