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

@layer base {
  :root {
    /* Dark Mode Base */
    --background: 240 10% 3.9%; /* #0A0A0F - Dark Charcoal */
    --foreground: 0 0% 98%; /* White text */
    
    --card: 240 10% 6%; /* Slightly lighter dark for cards */
    --card-foreground: 0 0% 98%;
    
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    
    /* Primary: Electric Blue #00A8FF */
    --primary: 199 100% 50%;
    /* Primary foreground dark for better contrast on bright blue (WCAG AA) */
    --primary-foreground: 222.2 47.4% 11.2%; /* #0f172a - Very Dark Slate */
    
    /* Secondary: Dark Gray #1E1E24 */
    --secondary: 240 5% 15%; 
    --secondary-foreground: 0 0% 98%;
    
    --muted: 240 5% 15%;
    --muted-foreground: 240 5% 65%; /* Light Gray #A0A0A0 */
    
    --accent: 191 100% 50%; /* Cyan #00C8FF */
    --accent-foreground: 222.2 47.4% 11.2%; /* Dark text for accent too */
    
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 98%;
    
    --border: 240 5% 20%; /* Dark border */
    --input: 240 5% 20%;
    --ring: 199 100% 50%;
    
    --radius: 0.5rem;

    --header-offset-mobile: 80px;
    --header-offset-desktop: 100px; 
  }

  html {
    font-size: 16px;
    scroll-behavior: smooth; /* Smooth scroll behavior */
  }

  /* Tablet: Reduce global scale by ~15% */
  @media (min-width: 768px) and (max-width: 1024px) {
    html {
      font-size: 14px;
    }
  }

  /* Mobile: Reduce global scale by ~25-30% */
  @media (max-width: 767px) {
    html {
      font-size: 12px;
    }
    body {
      text-align: center; /* Helper for center-align all text requirement */
    }
  }

  /* Cursor pointer for interactive elements */
  button, 
  a, 
  input[type="submit"], 
  input[type="button"],
  [role="button"] {
    cursor: pointer;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground antialiased;
    font-family: 'Inter', sans-serif;
  }
  h1, h2, h3, h4, h5, h6 {
    @apply font-bold tracking-tight text-white;
  }
  section[id] {
    scroll-margin-top: var(--header-offset-mobile);
  }
  @media (min-width: 1024px) {
    section[id] {
      scroll-margin-top: var(--header-offset-desktop);
    }
  }
  #client-results {
    scroll-margin-top: 100px;
  }

  /* Accessibility: Visible Focus States */
  :focus-visible {
    outline: 3px solid #00b4d8;
    outline-offset: 2px;
  }
}

@layer utilities {
  .gradient-text {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-[hsl(199,100%,50%)] to-[hsl(191,100%,50%)];
  }
  
  .glass-effect {
    @apply bg-[#0A0A0F]/80 backdrop-blur-md border border-white/10 shadow-lg;
  }
  
  /* Standard square grid */
  .tech-grid {
    background-color: transparent;
    background-image: linear-gradient(rgba(0, 168, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 168, 255, 0.03) 1px, transparent 1px);
    background-size: 30px 30px;
  }
  
  /* REMOVED: .hex-pattern and .circuit-pattern moved to component inline styles to reduce CSS size */

  .subtle-glow-border {
    @apply border border-primary/30 shadow-[0_0_15px_-3px_rgba(0,168,255,0.2)];
  }

  .glow-text {
    text-shadow: 0 0 10px rgba(0, 168, 255, 0.5);
  }

  .glow-box {
    box-shadow: 0 0 20px -5px rgba(0, 168, 255, 0.3);
  }
  
  .bg-size-200 {
    background-size: 200% 200%;
  }
}

/* Animations */
.floating-animation {
  animation: float 8s ease-in-out infinite;
}

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

/* 
  Updated Animation Strategy:
  Replaced non-composited 'background-position' animation with composited 'transform' animation.
  This improves performance by avoiding layout/paint recalculations on every frame.
*/
@keyframes gradient-slide {
  0%, 100% {
    transform: translateX(0%);
  }
  50% {
    transform: translateX(-50%);
  }
}

.animate-gradient-slide {
  animation: gradient-slide 15s ease infinite;
  will-change: transform;
}

.scroll-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Prefers Reduced Motion Media Query */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .scroll-reveal {
    transition: none;
    opacity: 1;
    transform: none;
  }
  
  .animate-gradient-slide,
  .floating-animation {
    animation: none;
  }
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #0A0A0F;
}
::-webkit-scrollbar-thumb {
  background: #1E1E24;
  border-radius: var(--radius);
  border: 1px solid #2A2A35;
}
::-webkit-scrollbar-thumb:hover {
  background: #00A8FF;
}