/* Font is loaded async in index.html - no @import needed */

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

@layer base {
  :root {
    /* Light Mode - Warm cream, premium feel */
    --background: 40 30% 97%;
    --foreground: 30 15% 12%;
    --muted: 35 15% 92%;
    --muted-foreground: 30 15% 32%;
    --card: 40 20% 99%;
    --card-foreground: 30 15% 12%;
    --popover: 40 20% 99%;
    --popover-foreground: 30 15% 12%;
    --border: 30 10% 88%;
    --input: 30 10% 88%;
    --ring: 240 60% 50%;
    --primary: 240 60% 50%;
    --primary-foreground: 0 0% 100%;
    --secondary: 35 12% 96%;
    --secondary-foreground: 30 15% 12%;
    --accent: 250 60% 55%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --radius: 0.75rem;
  }

  .dark {
    /* Dark Mode - Deep premium with enhanced glow */
    --background: 240 15% 4%;
    --foreground: 0 0% 98%;
    --muted: 240 10% 10%;
    --muted-foreground: 240 5% 72%;
    --card: 240 12% 7%;
    --card-foreground: 0 0% 98%;
    --popover: 240 12% 7%;
    --popover-foreground: 0 0% 98%;
    --border: 240 10% 16%;
    --input: 240 10% 16%;
    --ring: 250 70% 58%;
    --primary: 250 70% 58%;
    --primary-foreground: 0 0% 100%;
    --secondary: 240 10% 12%;
    --secondary-foreground: 0 0% 98%;
    --accent: 220 75% 60%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 98%;
  }

  * {
    @apply border-border;
  }

  /* Smooth scroll on desktop only - mobile uses native momentum */
  /* Loaded after first paint to avoid blocking FCP */
  @media (pointer: fine) {
    html {
      scroll-behavior: smooth;
    }
  }
  
  /* Non-pointer devices also get smooth scroll if preferred */
  @media (prefers-reduced-motion: no-preference) and (pointer: coarse) {
    html {
      scroll-behavior: auto; /* Native momentum on touch */
    }
  }

  body {
    @apply bg-background text-foreground font-inter antialiased;
    overflow-x: hidden;
    letter-spacing: -0.01em;
  }

  /* Theme transition - only applied during toggle */
  html.theme-transitioning,
  html.theme-transitioning *,
  html.theme-transitioning *::before,
  html.theme-transitioning *::after {
    transition: background-color 0.3s ease-out, 
                border-color 0.3s ease-out, 
                color 0.2s ease-out,
                box-shadow 0.3s ease-out !important;
  }

  .font-inter {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-feature-settings: 'cv11', 'ss01';
  }

  /* Focus styles for accessibility */
  :focus-visible {
    @apply outline-none ring-2 ring-ring ring-offset-2 ring-offset-background;
  }

  a:focus-visible,
  button:focus-visible,
  [role="button"]:focus-visible {
    @apply outline-none ring-2 ring-ring ring-offset-2 ring-offset-background rounded-sm;
  }

  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible {
    @apply outline-none ring-2 ring-ring ring-offset-0 border-ring;
  }
}

@layer components {
  /* Primary CTA glow with pulse */
  .btn-glow {
    transition: box-shadow 0.3s ease-out, transform 0.2s ease-out;
    position: relative;
    overflow: hidden;
  }

  .btn-glow::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent,
      hsl(var(--primary-foreground) / 0.15),
      transparent
    );
    transition: left 0.5s ease-out;
  }

  .btn-glow:hover::before {
    left: 100%;
  }

  .dark .btn-glow {
    box-shadow: 0 0 20px hsl(var(--primary) / 0.2);
  }

  .dark .btn-glow:hover {
    box-shadow: 0 0 35px hsl(var(--primary) / 0.4);
  }

  /* Fade-in animation - uses Tailwind's fade-in keyframe */
  .animate-fade-in {
    animation: fade-in 0.25s ease-out forwards;
  }

  /* Interactive card with lift effect */
  .card-lift {
    transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
  }

  .card-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px -12px hsl(var(--foreground) / 0.15);
  }

  .dark .card-lift:hover {
    box-shadow: 0 12px 40px -12px hsl(var(--primary) / 0.2);
  }

  /* Shimmer loading skeleton */
  .shimmer {
    background: linear-gradient(
      90deg,
      hsl(var(--muted)) 0%,
      hsl(var(--muted-foreground) / 0.1) 50%,
      hsl(var(--muted)) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
  }

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

  /* Icon hover spin */
  .icon-hover-spin {
    transition: transform 0.3s ease-out;
  }

  .group:hover .icon-hover-spin {
    transform: rotate(12deg) scale(1.1);
  }

  /* Staggered children animation - desktop only via sm:stagger-children */
  .sm\:stagger-children > * {
    opacity: 1; /* Mobile: instant visibility for LCP */
  }

  @media (min-width: 640px) {
    .sm\:stagger-children > * {
      opacity: 0;
      animation: fade-in 0.4s ease-out forwards;
    }

    .sm\:stagger-children > *:nth-child(1) { animation-delay: 0ms; }
    .sm\:stagger-children > *:nth-child(2) { animation-delay: 50ms; }
    .sm\:stagger-children > *:nth-child(3) { animation-delay: 100ms; }
    .sm\:stagger-children > *:nth-child(4) { animation-delay: 150ms; }
    .sm\:stagger-children > *:nth-child(5) { animation-delay: 200ms; }
    .sm\:stagger-children > *:nth-child(6) { animation-delay: 250ms; }
  }

  /* Focus ring animation */
  .focus-ring-animated:focus-visible {
    animation: ringPulse 1s ease-out;
  }

  @keyframes ringPulse {
    0% { box-shadow: 0 0 0 0 hsl(var(--ring) / 0.5); }
    100% { box-shadow: 0 0 0 4px hsl(var(--ring) / 0); }
  }
}

/* Global keyframes */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* Custom scrollbar - subtle */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: hsl(var(--muted));
}

::-webkit-scrollbar-thumb {
  background: hsl(var(--muted-foreground) / 0.3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground) / 0.5);
}

/* Reduced motion - accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* CSS Containment + Content-visibility for major sections - maximizes rendering perf */
/* contain: layout style paint - isolates layout/style/paint to subtree, skips off-screen work */
.cv-industries { 
  content-visibility: auto; 
  contain-intrinsic-size: auto 600px;
  contain: layout style paint;
}
.cv-showcase { 
  content-visibility: auto; 
  contain-intrinsic-size: auto 700px;
  contain: layout style paint;
}
.cv-integrations { 
  content-visibility: auto; 
  contain-intrinsic-size: auto 200px;
  contain: layout style paint;
}
.cv-faq { 
  content-visibility: auto; 
  contain-intrinsic-size: auto 400px;
  contain: layout style paint;
}
.cv-contact { 
  content-visibility: auto; 
  contain-intrinsic-size: auto 500px;
  contain: layout style paint;
}
.cv-footer { 
  content-visibility: auto; 
  contain-intrinsic-size: auto 300px;
  contain: layout style paint;
}

/* Hero section - visible on load, still benefits from containment */
.contain-hero {
  contain: layout style;
}

/* Work carousel - no content-visibility (visible early), but contained */
.contain-work {
  contain: layout style paint;
}

@media (max-width: 768px) {
  .cv-industries { contain-intrinsic-size: auto 800px; }
  .cv-showcase { contain-intrinsic-size: auto 900px; }
  .cv-faq { contain-intrinsic-size: auto 500px; }
  .cv-contact { contain-intrinsic-size: auto 600px; }
}

/* Touch device fixes - disable sticky hover states */
@media (hover: none), (pointer: coarse) {
  button, a, [role="button"] {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  }
}

/* Safe area padding for notched devices (iPhone X+) */
.safe-padding-x {
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
}

@supports (padding: max(0px)) {
  .container {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
}