/* Tailwind CSS base styles */

@custom-variant dark (&:is(.dark *));

:root {
  --background: #fafbfc;
  --foreground: #1e293b;
  --card: #ffffff;
  --card-foreground: #334155;
  --popover: #ffffff;
  --popover-foreground: #1e293b;
  --primary: #00d4ff;
  --primary-foreground: #ffffff;
  --secondary: #7c3aed;
  --secondary-foreground: #ffffff;
  --muted: #f1f5f9;
  --muted-foreground: #64748b;
  --accent: #06ffa5;
  --accent-foreground: #ffffff;
  --destructive: #ff4757;
  --destructive-foreground: #ffffff;
  --border: #e2e8f0;
  --input: #f8fafc;
  --ring: rgba(0, 212, 255, 0.5);
  --chart-1: #00d4ff;
  --chart-2: #06ffa5;
  --chart-3: #7c3aed;
  --chart-4: #ff6b6b;
  --chart-5: #feca57;
  --radius: 0.75rem;
  --sidebar: #ffffff;
  --sidebar-foreground: #334155;
  --sidebar-primary: #00d4ff;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #06ffa5;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #e2e8f0;
  --sidebar-ring: rgba(0, 212, 255, 0.5);
}

.dark {
  --background: #0f172a;
  --foreground: #f1f5f9;
  --card: #1e293b;
  --card-foreground: #f1f5f9;
  --popover: #1e293b;
  --popover-foreground: #f1f5f9;
  --primary: #00d4ff;
  --primary-foreground: #0f172a;
  --secondary: #7c3aed;
  --secondary-foreground: #ffffff;
  --muted: #334155;
  --muted-foreground: #94a3b8;
  --accent: #06ffa5;
  --accent-foreground: #0f172a;
  --destructive: #ff4757;
  --destructive-foreground: #ffffff;
  --border: #334155;
  --input: #1e293b;
  --ring: rgba(0, 212, 255, 0.5);
  --chart-1: #00d4ff;
  --chart-2: #06ffa5;
  --chart-3: #7c3aed;
  --chart-4: #ff6b6b;
  --chart-5: #feca57;
  --sidebar: #1e293b;
  --sidebar-foreground: #f1f5f9;
  --sidebar-primary: #00d4ff;
  --sidebar-primary-foreground: #0f172a;
  --sidebar-accent: #06ffa5;
  --sidebar-accent-foreground: #0f172a;
  --sidebar-border: #334155;
  --sidebar-ring: rgba(0, 212, 255, 0.5);
}

@theme inline {
  --font-sans: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", monospace;
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground font-sans;
  }
}

/* Futuristic AI Animations 2025 */
@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(2deg); }
}

@keyframes pulse-glow {
  0%, 100% { 
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.3), 0 0 40px rgba(6, 255, 165, 0.2);
  }
  50% { 
    box-shadow: 0 0 40px rgba(0, 212, 255, 0.6), 0 0 80px rgba(6, 255, 165, 0.4);
  }
}

@keyframes data-flow {
  0% { transform: translateX(-100%) rotate(0deg); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateX(100vw) rotate(360deg); opacity: 0; }
}

@keyframes neural-pulse {
  0%, 100% { 
    transform: scale(1);
    filter: brightness(1) drop-shadow(0 0 10px rgba(0, 212, 255, 0.5));
  }
  50% { 
    transform: scale(1.05);
    filter: brightness(1.2) drop-shadow(0 0 20px rgba(6, 255, 165, 0.8));
  }
}

@keyframes matrix-rain {
  0% { transform: translateY(-100vh); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(100vh); opacity: 0; }
}

@keyframes hologram-flicker {
  0%, 100% { opacity: 1; transform: skew(0deg); }
  25% { opacity: 0.8; transform: skew(0.5deg); }
  50% { opacity: 0.9; transform: skew(-0.3deg); }
  75% { opacity: 0.85; transform: skew(0.2deg); }
}

@keyframes cyber-grid {
  0% { background-position: 0 0; }
  100% { background-position: 50px 50px; }
}

@keyframes ai-scan {
  0% { transform: translateX(-100%); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}

@keyframes quantum-float {
  0%, 100% { 
    transform: translateY(0px) translateX(0px) rotate(0deg);
    filter: hue-rotate(0deg);
  }
  25% { 
    transform: translateY(-10px) translateX(5px) rotate(1deg);
    filter: hue-rotate(90deg);
  }
  50% { 
    transform: translateY(-20px) translateX(0px) rotate(0deg);
    filter: hue-rotate(180deg);
  }
  75% { 
    transform: translateY(-10px) translateX(-5px) rotate(-1deg);
    filter: hue-rotate(270deg);
  }
}

/* Animation Classes - Simplified */
.float-animation {
  animation: float 6s ease-in-out infinite;
}

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

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

/* Removed excessive animations: quantum-float, hologram-flicker, data-flow, ai-scan */

/* Futuristic Gradients */
.gradient-text {
  background: linear-gradient(135deg, #00d4ff, #06ffa5, #7c3aed);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-shift 4s ease-in-out infinite;
}

@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.cyber-gradient {
  background: linear-gradient(135deg, #00d4ff, #06ffa5, #7c3aed, #ff6b6b);
  background-size: 400% 400%;
  animation: gradient-shift 6s ease-in-out infinite;
}

.neural-gradient {
  background: radial-gradient(circle at 30% 20%, rgba(0, 212, 255, 0.3) 0%, transparent 50%),
              radial-gradient(circle at 70% 80%, rgba(6, 255, 165, 0.3) 0%, transparent 50%),
              radial-gradient(circle at 50% 50%, rgba(124, 58, 237, 0.2) 0%, transparent 50%);
}

/* AI Visual Effects */
.ai-particles {
  position: relative;
  overflow: hidden;
}

.ai-particles::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(2px 2px at 20px 30px, #00d4ff, transparent),
    radial-gradient(2px 2px at 40px 70px, #06ffa5, transparent),
    radial-gradient(1px 1px at 90px 40px, #7c3aed, transparent),
    radial-gradient(1px 1px at 130px 80px, #ff6b6b, transparent);
  background-repeat: repeat;
  background-size: 150px 100px;
  animation: matrix-rain 20s linear infinite;
  opacity: 0.3;
  pointer-events: none;
}

.cyber-grid-bg {
  background-image: 
    linear-gradient(rgba(0, 212, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 212, 255, 0.1) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: cyber-grid 20s linear infinite;
}

.hologram-effect {
  position: relative;
  background: linear-gradient(45deg, transparent 30%, rgba(0, 212, 255, 0.1) 50%, transparent 70%);
  background-size: 200% 200%;
  animation: ai-scan 4s ease-in-out infinite;
}

/* Glassmorphism Effects - Removed to avoid dark backgrounds */

/* Interactive Elements - Simplified */