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

@layer base {
  :root {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 48%;
    --radius: 0.5rem;
    --bg-color: hsl(var(--background));
    --text-primary: hsl(var(--foreground));
    --text-secondary: hsl(var(--muted-foreground));
  }
}

@layer base {
  * {
    @apply border-border;
  }
  html {
    scroll-behavior: smooth;
    background-color: var(--bg-color);
  }
  body {
    @apply bg-background text-foreground font-sans antialiased selection:bg-primary/30 selection:text-white;
    min-height: 100vh;
    overflow-x: hidden;
  }
}

@layer utilities {
  .glass {
    @apply bg-white/5 backdrop-blur-md border border-white/10 shadow-xl;
  }
  
  .glass-card {
    @apply bg-surface/50 backdrop-blur-lg border border-white/5 rounded-2xl hover:border-white/10 transition-colors duration-300;
  }

  .text-gradient {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-blue-400 via-indigo-400 to-purple-400;
  }

  .text-shimmer {
    background: linear-gradient(90deg, #60a5fa 0%, #a78bfa 25%, #22d3ee 50%, #a78bfa 75%, #60a5fa 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: text-shimmer-move 4s linear infinite;
  }

  .bg-grid-pattern {
    background-image: 
      linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 50px 50px;
  }

  .glow-effect::before {
    content: '';
    @apply absolute inset-0 -z-10 bg-primary/20 blur-2xl rounded-full opacity-0 transition-opacity duration-300;
  }
  .glow-effect:hover::before { @apply opacity-100; }

  .text-glow {
    text-shadow:
      0 0 20px rgba(99, 130, 246, 0.5),
      0 0 60px rgba(99, 130, 246, 0.25),
      0 0 100px rgba(99, 130, 246, 0.1);
  }

  .pulse-ring { position: relative; }
  .pulse-ring::after {
    content: '';
    @apply absolute inset-0 rounded-full;
    border: 1px solid rgba(99, 130, 246, 0.5);
    animation: pulse-expand 2s ease-out infinite;
  }

  /* ── Premium Glassmorphism ── */
  .glass-premium {
    background: linear-gradient(135deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.03) 100%);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow:
      0 8px 32px 0 rgba(0,0,0,0.45),
      inset 0 1px 0 rgba(255,255,255,0.10),
      inset 0 -1px 0 rgba(0,0,0,0.20);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
  }
  .glass-premium:hover {
    border-color: rgba(255,255,255,0.14);
    box-shadow:
      0 16px 48px 0 rgba(0,0,0,0.5),
      inset 0 1px 0 rgba(255,255,255,0.15),
      inset 0 -1px 0 rgba(0,0,0,0.20),
      0 0 0 1px rgba(99,130,246,0.12);
  }

  /* Light refraction lines (top & left edge highlight) */
  .glass-refract {
    position: relative;
    overflow: hidden;
  }
  .glass-refract::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.45) 35%, rgba(255,255,255,0.12) 70%, transparent 100%);
    z-index: 2;
    pointer-events: none;
  }
  .glass-refract::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 1px;
    background: linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.05) 50%, transparent 100%);
    z-index: 2;
    pointer-events: none;
  }

  /* Spotlight radial glow above element */
  .spotlight {
    position: relative;
    isolation: isolate;
  }
  .spotlight::before {
    content: '';
    position: absolute;
    inset: -80px;
    background: radial-gradient(circle at 50% -10%, rgba(99,130,246,0.18) 0%, transparent 55%);
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
  }

  /* Shine sweep on hover */
  .glass-shine {
    position: relative;
    overflow: hidden;
  }
  .glass-shine::after {
    content: '';
    position: absolute;
    top: -50%; left: -75%;
    width: 50%; height: 200%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.07) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-20deg);
    transition: left 0.65s ease;
    pointer-events: none;
    z-index: 2;
  }
  .glass-shine:hover::after { left: 125%; }

  /* Section ambient orb helper */
  .ambient-glow {
    position: relative;
  }
  .ambient-glow::before {
    content: '';
    position: absolute;
    top: -200px; left: -150px;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(59,130,246,0.07) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    border-radius: 50%;
  }
}

/* ── Keyframes ── */

@keyframes text-shimmer-move {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

@keyframes shimmer-sweep {
  0%   { transform: translateX(-100%) skewX(-12deg); }
  100% { transform: translateX(200%) skewX(-12deg); }
}

@keyframes pulse-expand {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(2);   opacity: 0; }
}

@keyframes blob {
  0%   { transform: translate(0px, 0px) scale(1); }
  33%  { transform: translate(30px, -50px) scale(1.1); }
  66%  { transform: translate(-20px, 20px) scale(0.9); }
  100% { transform: translate(0px, 0px) scale(1); }
}

@keyframes fadeIn {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fadeUp {
  0%   { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

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

@keyframes scan-line {
  0%   { top: -2px; opacity: 0.8; }
  80%  { opacity: 0.6; }
  100% { top: 100%; opacity: 0; }
}