@import "tailwindcss";

/* ─── Tokens ─────────────────────────────────────────────────────── */
:root {
  --bg-base:   #060910;
  --bg-panel:  #0b0f1a;
  --bg-card:   #0f1420;
  --border:    rgba(255,255,255,0.07);
  --border-hi: rgba(255,255,255,0.13);
  --indigo:    #6366f1;
  --violet:    #8b5cf6;
  --cyan:      #22d3ee;
  --glow-i:    rgba(99,102,241,0.25);
  --glow-v:    rgba(139,92,246,0.2);
}

/* ─── Base ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg-base);
  color: #e2e8f0;
  font-family: var(--font-inter), system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ─── Scrollbar ──────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.25); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(99,102,241,0.5); }

/* ─── Keyframes ──────────────────────────────────────────────────── */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%      { transform: translateY(-8px); }
}
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 20px var(--glow-i), 0 0 40px rgba(99,102,241,0.08); }
  50%      { box-shadow: 0 0 35px var(--glow-i), 0 0 70px rgba(99,102,241,0.15); }
}
@keyframes border-spin {
  to { --border-angle: 360deg; }
}
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes gradient-x {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}
@keyframes scan-line {
  0%   { transform: translateY(-100%); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(600%); opacity: 0; }
}
@keyframes orbit {
  from { transform: rotate(0deg) translateX(22px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(22px) rotate(-360deg); }
}
@keyframes count-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulse-ring {
  0%   { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.8); opacity: 0; }
}
@keyframes slide-in-left {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes blob {
  0%, 100% { border-radius: 60% 40% 30% 70%/60% 30% 70% 40%; }
  50%       { border-radius: 30% 60% 70% 40%/50% 60% 30% 60%; }
}
@keyframes ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes spin-slow {
  to { transform: rotate(360deg); }
}
@keyframes ripple {
  from { transform: scale(0); opacity: 0.5; }
  to   { transform: scale(4); opacity: 0; }
}

/* ─── Utility classes ────────────────────────────────────────────── */
.animate-fade-up    { animation: fade-up 0.5s ease-out both; }
.animate-fade-in    { animation: fade-in 0.4s ease-out both; }
.animate-float      { animation: float 4s ease-in-out infinite; }
.animate-glow       { animation: glow-pulse 3s ease-in-out infinite; }
.animate-shimmer    { animation: shimmer 2.5s linear infinite; }
.animate-gradient-x { animation: gradient-x 4s ease infinite; background-size: 200% 200%; }
.animate-slide-left { animation: slide-in-left 0.4s ease-out both; }
.animate-spin-slow  { animation: spin-slow 8s linear infinite; }
.animate-blob       { animation: blob 8s ease-in-out infinite; }

/* Staggered delays */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }
.delay-600 { animation-delay: 600ms; }

/* ─── Gradient border card ──────────────────────────────────────── */
.card-glow {
  position: relative;
  border-radius: 16px;
  background: var(--bg-card);
}
.card-glow::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(99,102,241,0.4), rgba(139,92,246,0.2), rgba(34,211,238,0.15), rgba(99,102,241,0.1));
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  padding: 1px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.card-glow:hover::before { opacity: 1; }

/* ─── Gradient text ─────────────────────────────────────────────── */
.text-gradient {
  background: linear-gradient(135deg, #818cf8, #a78bfa, #22d3ee);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-gradient-animate {
  background: linear-gradient(270deg, #6366f1, #8b5cf6, #22d3ee, #6366f1);
  background-size: 300% 300%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-x 4s ease infinite;
}

/* ─── Glass surface ─────────────────────────────────────────────── */
.glass {
  background: rgba(15,20,32,0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
}
.glass-light {
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
}

/* ─── Dot grid background ───────────────────────────────────────── */
.bg-grid {
  background-image: radial-gradient(rgba(99,102,241,0.12) 1px, transparent 1px);
  background-size: 28px 28px;
}
.bg-dots {
  background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* ─── Glow button ───────────────────────────────────────────────── */
.btn-glow {
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent 60%);
  opacity: 0;
  transition: opacity 0.2s;
}
.btn-glow:hover::after { opacity: 1; }
.btn-glow:hover { transform: translateY(-1px); box-shadow: 0 8px 30px rgba(99,102,241,0.35); }
.btn-glow:active { transform: translateY(0); }

/* ─── Scan line effect ──────────────────────────────────────────── */
.scan-container { position: relative; overflow: hidden; }
.scan-container::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99,102,241,0.4), rgba(139,92,246,0.4), transparent);
  animation: scan-line 5s ease-in-out infinite;
  pointer-events: none;
}

/* ─── Active pulse dot ──────────────────────────────────────────── */
.pulse-dot {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pulse-dot::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: #4ade80;
  animation: pulse-ring 1.5s ease-out infinite;
}

/* ─── Sidebar active indicator ──────────────────────────────────── */
.nav-active {
  position: relative;
}
.nav-active::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 70%;
  border-radius: 2px;
  background: linear-gradient(to bottom, var(--indigo), var(--violet));
  box-shadow: 0 0 8px var(--glow-i);
}

/* ─── Shimmer loader ─────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}

/* ─── Stats counter animation ───────────────────────────────────── */
.stat-value {
  animation: count-up 0.6s ease-out both;
}

/* ─── Ticker / scroll text ──────────────────────────────────────── */
.ticker-wrap { overflow: hidden; }
.ticker-content { display: inline-flex; white-space: nowrap; animation: ticker 20s linear infinite; }

/* ─── Input focus glow ──────────────────────────────────────────── */
input:focus, textarea:focus, select:focus {
  --tw-ring-color: rgba(99,102,241,0.4) !important;
}

/* ─── Custom range slider ───────────────────────────────────────── */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--indigo), var(--violet));
  cursor: pointer;
  box-shadow: 0 0 8px var(--glow-i);
  transition: transform 0.15s, box-shadow 0.15s;
}
input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 0 14px var(--glow-i);
}