/* Load critical CSS first - this should be minimal and above-the-fold only */
@import './critical.css';
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom font: WILLIWAW (headings) */
@font-face {
  font-family: 'Williwaw';
  src: url('/fonts/williwaw/Williwaw-Book.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Apply to headings by default */
h1, h2 {
  font-family: 'Williwaw', 'Playfair Display', Georgia, 'Times New Roman', serif;
}

/* Non-critical styles - loaded after initial render */
@layer base {
  :root {
    /* Modern vibrant base - accessibility compliant with 7:1 ratio */
    --background: 0 0% 99%;
    --foreground: 220 26% 14%;
    --primary: 220 100% 25%;              /* Very dark blue - excellent contrast */
    --primary-foreground: 0 0% 98%;
    --card: 0 0% 100%;
    --card-foreground: 220 26% 14%;
    --popover: 0 0% 100%;
    --popover-foreground: 220 26% 14%;
    --secondary: 210 40% 98%;
    --secondary-foreground: 220 26% 14%;
    --muted: 210 40% 96%;
    --muted-foreground: 215 16% 45%;
    --accent: 210 40% 96%;
    --accent-foreground: 220 26% 14%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 210 40% 98%;
    --border: 214 32% 91%;
    --input: 214 32% 91%;
    --ring: 270 91% 65%;
    --radius: 1rem;
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5% 26%;
    --sidebar-primary: 240 6% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 5% 96%;
    --sidebar-accent-foreground: 240 6% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217 91% 60%;
    
    /* Dynamic vibrant palette */
    --tudor-blue: 220 85% 30%;           /* Accessible dark blue */
    --tudor-blue-light: 220 75% 45%;     /* Medium blue */
    --tudor-blue-dark: 220 90% 20%;      /* Very dark blue */
    --tudor-gray: 220 26% 25%;           /* Modern charcoal */
    --tudor-gray-light: 220 13% 45%;     /* Steel gray */
    --tudor-gray-dark: 220 26% 15%;      /* Dark charcoal */
    
    /* Dynamic accent palette */
    --palette-mint: 165 100% 65%;        /* Electric mint */
    --palette-cyan: 185 100% 55%;        /* Vibrant cyan */
    --palette-ice-blue: 200 100% 65%;    /* Electric blue */
    --palette-coral: 15 100% 65%;        /* Vibrant coral */
    --palette-gold: 45 100% 55%;         /* Rich gold */
    --palette-pink: 320 100% 70%;        /* Electric pink */
    --palette-lime: 85 100% 60%;         /* Electric lime */
    
    /* Additional vibrant colors */
    --palace-green: 150 80% 45%;         /* Emerald green */
    --palace-green-dark: 150 80% 35%;    /* Deep emerald */
    
    /* Dynamic gradients */
    --gradient-primary: linear-gradient(135deg, hsl(270 91% 65%) 0%, hsl(200 100% 65%) 50%, hsl(320 100% 70%) 100%);
    --gradient-secondary: linear-gradient(135deg, hsl(165 100% 65%) 0%, hsl(185 100% 55%) 50%, hsl(85 100% 60%) 100%);
    --gradient-warm: linear-gradient(135deg, hsl(15 100% 65%) 0%, hsl(45 100% 55%) 50%, hsl(320 100% 70%) 100%);
    --gradient-electric: linear-gradient(45deg, hsl(270 91% 65%), hsl(320 100% 70%), hsl(200 100% 65%), hsl(165 100% 65%));
  }

  .dark {
    --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: 212.7 26.8% 83.9%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer utilities {
  .text-gradient {
    @apply bg-gradient-to-r from-primary to-tudor-blue-light bg-clip-text text-transparent;
  }
  
  .text-gradient-electric {
    background: var(--gradient-electric);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 6s ease-in-out infinite;
  }
  
  .text-shadow-lg {
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
  }

  /* Enhanced modern animations */
  .animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
  }

  .animate-fade-in-scale {
    animation: fadeInScale 0.9s ease-out forwards;
  }

  .animate-slide-in-left {
    animation: slideInLeft 0.8s ease-out forwards;
  }

  .animate-slide-in-right {
    animation: slideInRight 0.8s ease-out forwards;
  }

  .animate-float {
    animation: float 8s ease-in-out infinite;
  }

  .animate-pulse-slow {
    animation: pulseGlow 5s ease-in-out infinite;
  }

  .animate-rotate-slow {
    animation: rotateSlow 20s linear infinite;
  }

  .animate-bounce-slow {
    animation: bounceSlow 4s ease-in-out infinite;
  }

  .animate-electric {
    animation: electricPulse 3s ease-in-out infinite;
  }

  /* Advanced glass morphism */
  .glass {
    backdrop-filter: blur(20px) saturate(200%);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  }

  .glass-dark {
    backdrop-filter: blur(20px) saturate(200%);
    background: linear-gradient(135deg, rgba(17, 25, 40, 0.8), rgba(17, 25, 40, 0.4));
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  }

  /* Interactive hover effects */
  .hover-lift {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .hover-lift:hover {
    transform: translateY(-12px) scale(1.03);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
  }

  .hover-glow:hover {
    box-shadow: 0 0 40px rgba(var(--primary), 0.4);
  }

  .hover-electric:hover {
    box-shadow: 
      0 0 20px hsl(var(--primary)),
      0 0 40px hsl(var(--palette-pink)),
      0 0 60px hsl(var(--palette-cyan));
  }

  /* Dynamic gradient mesh */
  .gradient-mesh {
    background: 
      radial-gradient(at 20% 30%, hsl(var(--palette-mint)) 0px, transparent 50%),
      radial-gradient(at 80% 0%, hsl(var(--palette-coral)) 0px, transparent 50%),
      radial-gradient(at 40% 50%, hsl(var(--palette-ice-blue)) 0px, transparent 50%),
      radial-gradient(at 80% 50%, hsl(var(--palette-gold)) 0px, transparent 50%),
      radial-gradient(at 40% 80%, hsl(var(--primary)) 0px, transparent 50%),
      radial-gradient(at 80% 80%, hsl(var(--palette-pink)) 0px, transparent 50%),
      radial-gradient(at 0% 90%, hsl(var(--palette-lime)) 0px, transparent 50%);
    background-size: 400% 400%;
    animation: gradientShift 12s ease-in-out infinite;
  }

  .gradient-mesh-static {
    background: 
      radial-gradient(circle at 25% 25%, hsl(var(--primary)) 0%, transparent 50%),
      radial-gradient(circle at 75% 25%, hsl(var(--palette-pink)) 0%, transparent 50%),
      radial-gradient(circle at 25% 75%, hsl(var(--palette-cyan)) 0%, transparent 50%),
      radial-gradient(circle at 75% 75%, hsl(var(--palette-mint)) 0%, transparent 50%);
  }

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(40px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes fadeInScale {
    from {
      opacity: 0;
      transform: scale(0.8);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  @keyframes slideInLeft {
    from {
      opacity: 0;
      transform: translateX(-60px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes slideInRight {
    from {
      opacity: 0;
      transform: translateX(60px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes float {
    0%, 100% {
      transform: translateY(0px) rotate(0deg);
    }
    33% {
      transform: translateY(-30px) rotate(120deg);
    }
    66% {
      transform: translateY(-15px) rotate(240deg);
    }
  }

  @keyframes pulseGlow {
    0%, 100% {
      opacity: 0.8;
      transform: scale(1);
    }
    50% {
      opacity: 0.4;
      transform: scale(1.1);
    }
  }

  @keyframes electricPulse {
    0%, 100% {
      box-shadow: 0 0 20px hsl(var(--primary));
    }
    25% {
      box-shadow: 0 0 30px hsl(var(--palette-pink));
    }
    50% {
      box-shadow: 0 0 25px hsl(var(--palette-cyan));
    }
    75% {
      box-shadow: 0 0 35px hsl(var(--palette-mint));
    }
  }

  /* Smooth scrolling */
  html {
    scroll-behavior: smooth;
  }
  
  /* CRITICAL: Force navbar to stay ABSOLUTELY FIXED at top */
  .navbar-fixed {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 999999 !important;
    width: 100% !important;
    min-height: 80px !important; /* allow extra top bar height */
    display: block !important;
    transform: none !important;
    will-change: top, transform !important;
    transition: top 0.3s ease-in-out;
  }

  .navbar-fixed.nav-hidden {
    top: -100px !important; /* hide when scrolling down */
  }

  .navbar-fixed.nav-visible {
    top: 0 !important; /* show when scrolling up */
  }
  
  /* Override any CSS that might interfere with navbar positioning */
  .navbar-fixed * {
    box-sizing: border-box;
  }
  
  /* Ensure smooth scrolling */
  html {
    scroll-behavior: smooth;
  }
  
  /* Reset body margins/padding */
  body {
    margin: 0 !important;
    padding: 0 !important;
  }
  ::-webkit-scrollbar {
    width: 12px;
  }

  ::-webkit-scrollbar-track {
    background: linear-gradient(to bottom, hsl(var(--muted)), hsl(var(--background)));
    border-radius: 6px;
  }

  ::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, hsl(var(--primary)), hsl(var(--tudor-blue)));
    border-radius: 6px;
    border: 2px solid hsl(var(--background));
  }

  ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, hsl(var(--palette-pink)), hsl(var(--primary)));
  }

  /* Particle effects */
  .particles {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: hsl(var(--primary));
    border-radius: 50%;
    animation: particleFloat 8s linear infinite;
  }

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