@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import './styles/mobile.css';

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

@layer base {
  :root {
    --background: 240 5% 5%;
    --foreground: 0 0% 98%;

    --card: 240 10% 10%;
    --card-foreground: 0 0% 98%;

    --popover: 240 10% 8%;
    --popover-foreground: 0 0% 98%;

    --primary: 180 100% 50%;
    --primary-foreground: 240 10% 3.9%;

    --secondary: 275 100% 50%;
    --secondary-foreground: 0 0% 98%;

    --muted: 240 10% 15%;
    --muted-foreground: 240 5% 65%;

    --accent: 325 100% 50%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;

    --border: 240 10% 15%;
    --input: 240 10% 15%;
    --ring: 180 100% 50%;

    --radius: 0.75rem;
  }

  * {
    @apply border-border selection:bg-nova-purple/30 selection:text-nova-cyan;
  }

  html {
    @apply scroll-smooth;
  }
  
  body {
    @apply bg-nova-black text-nova-white font-inter antialiased overflow-x-hidden;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-orbitron tracking-wider;
  }
}

@layer components {
  .text-glow {
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.7), 
                 0 0 20px rgba(0, 255, 255, 0.5), 
                 0 0 30px rgba(0, 255, 255, 0.3);
  }
  
  .text-glow-purple {
    text-shadow: 0 0 10px rgba(128, 0, 255, 0.7), 
                 0 0 20px rgba(128, 0, 255, 0.5), 
                 0 0 30px rgba(128, 0, 255, 0.3);
  }
  
  .text-glow-magenta {
    text-shadow: 0 0 10px rgba(255, 0, 127, 0.8), 
                 0 0 20px rgba(255, 0, 127, 0.6), 
                 0 0 30px rgba(255, 0, 127, 0.4);
  }
  
  .text-glow-cyan {
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.8), 
                 0 0 20px rgba(0, 255, 255, 0.6), 
                 0 0 30px rgba(0, 255, 255, 0.4);
  }
  
  .neo-blur {
    @apply backdrop-blur-xl bg-white/5 border border-white/10;
  }
  
  .glass-card {
    @apply backdrop-blur-md bg-white/5 border border-white/10 rounded-2xl shadow-[0_4px_15px_-3px_rgba(0,255,255,0.15)];
  }
  
  .nova-btn {
    @apply relative inline-flex items-center justify-center px-6 py-3 font-orbitron 
           font-medium tracking-wider text-nova-black bg-nova-cyan rounded-lg 
           transition-all duration-300 overflow-hidden shadow-[0_0_15px_rgba(0,255,255,0.4)] 
           hover:shadow-[0_0_25px_rgba(0,255,255,0.6)] focus:outline-none;
  }
  
  .nova-btn::before {
    @apply content-[''] absolute top-0 left-0 w-full h-full opacity-0
           bg-gradient-to-r from-nova-cyan/80 via-nova-purple/50 to-nova-magenta/80
           transition-opacity duration-300;
  }
  
  .nova-btn:hover::before {
    @apply opacity-100;
  }
  
  .nova-btn-content {
    @apply relative z-10;
  }
  
  .nova-btn-secondary {
    @apply relative inline-flex items-center justify-center px-6 py-3 font-orbitron 
           font-medium tracking-wider text-nova-cyan bg-transparent rounded-lg 
           transition-all duration-300 overflow-hidden border border-nova-cyan/50
           shadow-[0_0_15px_rgba(0,255,255,0.1)] 
           hover:shadow-[0_0_25px_rgba(0,255,255,0.3)] focus:outline-none;
  }

  .section-padding {
    @apply py-16 md:py-20 px-4 md:px-8 lg:px-12;
  }

  /* Custom scrollbar */
  ::-webkit-scrollbar {
    @apply w-1.5;
  }
  
  ::-webkit-scrollbar-track {
    @apply bg-nova-black;
  }
  
  ::-webkit-scrollbar-thumb {
    @apply bg-gradient-to-b from-nova-cyan via-nova-purple to-nova-magenta rounded-full;
  }
}

.timeline-item {
  @apply relative pb-16 pl-10;
}

.timeline-item::before {
  @apply content-[''] absolute top-0 left-0 w-px h-full bg-gradient-to-b from-nova-cyan via-nova-purple to-nova-magenta;
}

.timeline-item::after {
  @apply content-[''] absolute top-0 left-0 w-4 h-4 rounded-full -translate-x-1.5 bg-nova-black border-2 border-nova-cyan;
}

.timeline-item:last-child {
  @apply pb-0;
}

.timeline-item:last-child::before {
  @apply h-1/3;
}

.social-icon {
  @apply relative flex items-center justify-center w-12 h-12 md:w-14 md:h-14 rounded-full 
         overflow-hidden transition-all duration-300 
         hover:scale-110 hover:shadow-[0_0_15px_rgba(0,255,255,0.4)];
}

.social-icon::before {
  @apply content-[''] absolute inset-0 bg-gradient-to-br opacity-0
         from-nova-cyan via-nova-purple to-nova-magenta transition-opacity 
         duration-300 ease-in-out;
}

.social-icon:hover::before {
  @apply opacity-100;
}

.social-icon svg {
  @apply relative z-10 w-5 h-5 md:w-6 md:h-6 text-nova-white transition-transform duration-300;
}

.social-icon:hover svg {
  @apply scale-110;
}