@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 url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&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;

    /* Nova Rai · cinematic palette (HSL) */
    --ink: 222 36% 7%;            /* #0A0E1A */
    --ink-soft: 224 26% 12%;      /* #141824 */
    --ink-softer: 226 21% 16%;    /* #1E2230 */
    --paper: 38 38% 86%;          /* #E8DFD0 */
    --paper-dim: 38 20% 70%;
    --copper: 32 32% 55%;         /* #B8925F */
    --rose: 351 30% 42%;          /* #8A4A55 */
  }

  * {
    @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;
  }
}

/* Site-wide grain overlay — fixed, very quiet */
.grain-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Cinematic typography helpers */
.font-display { font-family: 'Cormorant Garamond', Georgia, serif; }
.font-body    { font-family: 'EB Garamond', Georgia, serif; }

.text-paper       { color: hsl(var(--paper)); }
.text-paper-dim   { color: hsl(var(--paper-dim)); }
.text-copper      { color: hsl(var(--copper)); }
.bg-ink           { background-color: hsl(var(--ink)); }
.bg-ink-soft      { background-color: hsl(var(--ink-soft)); }
.bg-ink-softer    { background-color: hsl(var(--ink-softer)); }
.border-copper    { border-color: hsl(var(--copper)); }
.border-paper-10  { border-color: hsl(var(--paper) / 0.1); }
.border-paper-20  { border-color: hsl(var(--paper) / 0.2); }

/* Quiet underline link, copper on hover */
.quiet-link {
  @apply relative inline-block transition-colors duration-300;
  color: hsl(var(--paper) / 0.85);
}
.quiet-link:hover { color: hsl(var(--copper)); }

@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;
}