/* Main stylesheet - loaded asynchronously for performance */

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

@layer base {
  :root {
    /* Sonoran Machinery Brand Colors */
    --background: 0 0% 100%;
    --foreground: 210 15% 15%;
    --card: 0 0% 100%;
    --card-foreground: 210 15% 15%;
    --popover: 0 0% 100%;
    --popover-foreground: 210 15% 15%;
    
    /* Teal primary color from Sonoran Machinery brand */
    --primary: 180 100% 25%;
    --primary-foreground: 0 0% 100%;
    --primary-light: 180 80% 45%;
    --primary-dark: 180 100% 20%;
    
    /* Desert/warm secondary colors */
    --secondary: 35 45% 85%;
    --secondary-foreground: 210 15% 15%;
    --secondary-warm: 30 60% 75%;
    
    /* Neutral grays */
    --muted: 210 40% 96%;
    --muted-foreground: 215 16% 46%;
    --accent: 210 40% 96%;
    --accent-foreground: 210 15% 15%;
    
    /* System colors */
    --destructive: 0 84% 60%;
    --destructive-foreground: 210 40% 98%;
    --border: 214 32% 91%;
    --input: 214 32% 91%;
    --ring: 180 100% 25%;
    --radius: 0.75rem;
    
    /* Custom brand gradients */
    --gradient-desert: linear-gradient(135deg, hsl(35, 60%, 75%), hsl(25, 80%, 65%));
    --gradient-teal: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary-light)));
    --gradient-hero: linear-gradient(135deg, hsl(35, 60%, 85%) 0%, hsl(185, 85%, 55%) 100%);
    
    /* Animated gradient mesh background */
    --gradient-mesh-1: 200 40% 45%;
    --gradient-mesh-2: 210 35% 35%;  
    --gradient-mesh-3: 195 45% 50%;
    --gradient-mesh-4: 205 30% 40%;
    
    /* Shadows with brand color */
    --shadow-brand: 0 10px 30px -10px hsl(var(--primary) / 0.3);
    --shadow-warm: 0 10px 30px -10px hsl(35, 60%, 75% / 0.4);
    
    /* Sidebar colors */
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5% 26%;
    --sidebar-primary: 180 100% 25%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 5% 96%;
    --sidebar-accent-foreground: 240 6% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 180 100% 25%;
  }

  .dark {
    --background: 210 15% 8%;
    --foreground: 210 40% 98%;
    --card: 210 15% 10%;
    --card-foreground: 210 40% 98%;
    --popover: 210 15% 10%;
    --popover-foreground: 210 40% 98%;
    --primary: 180 80% 40%;
    --primary-foreground: 210 15% 8%;
    --secondary: 210 15% 15%;
    --secondary-foreground: 210 40% 98%;
    --muted: 210 15% 15%;
    --muted-foreground: 215 20% 65%;
    --accent: 210 15% 15%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 63% 31%;
    --destructive-foreground: 210 40% 98%;
    --border: 210 15% 15%;
    --input: 210 15% 15%;
    --ring: 180 80% 40%;
    --sidebar-background: 240 6% 10%;
    --sidebar-foreground: 240 5% 96%;
    --sidebar-primary: 180 80% 40%;
    --sidebar-primary-foreground: 240 6% 10%;
    --sidebar-accent: 240 4% 16%;
    --sidebar-accent-foreground: 240 5% 96%;
    --sidebar-border: 240 4% 16%;
    --sidebar-ring: 180 80% 40%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-white text-black font-sans antialiased;
  }

  /* Smooth scrolling with performance considerations */
  html {
    scroll-behavior: smooth;
  }
  
  /* Reduce motion for users who prefer it */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
    
    html {
      scroll-behavior: auto;
    }
  }

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

  ::-webkit-scrollbar-track {
    background: #f1f1f1;
  }

  ::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #555;
  }
}

@layer components {
  .text-mask-image {
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-size: cover;
    background-position: center;
  }

  .pulse-chip {
    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-primary/10 text-primary border border-primary/20;
  }
  
  .section-container {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 md:py-12;
  }

  .section-title {
    @apply text-3xl md:text-4xl lg:text-5xl font-display font-bold tracking-tight;
  }

  .section-subtitle {
    @apply text-lg md:text-xl text-muted-foreground mt-4 max-w-3xl;
  }

  .glass-card {
    @apply bg-white/70 backdrop-blur-sm border border-white/20 rounded-2xl shadow-elegant transition-all duration-300 hover:shadow-elegant-hover;
  }

  .feature-card {
    @apply p-6 rounded-2xl transition-all duration-500 hover:translate-y-[-5px];
  }
  
  .button-primary {
    @apply inline-flex items-center justify-center gap-2 h-auto min-h-[44px] px-4 py-2 sm:px-6 sm:py-3 text-base sm:text-lg bg-gradient-to-r from-primary to-blue-600 hover:from-primary/90 hover:to-blue-600/90 text-primary-foreground font-medium rounded-full transition-all duration-300 shadow-lg hover:shadow-xl active:shadow-md;
  }

  .button-secondary {
    @apply inline-flex items-center justify-center gap-2 h-auto min-h-[44px] px-4 py-2 sm:px-6 sm:py-3 text-base sm:text-lg bg-transparent border-2 border-primary hover:bg-gradient-to-r hover:from-primary hover:to-blue-600 text-primary hover:text-primary-foreground font-medium rounded-full transition-all duration-300 shadow-md hover:shadow-lg;
  }
  
  .nav-link {
    @apply relative text-foreground hover:text-primary py-2 transition-colors duration-300 after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-0 after:bg-primary after:transition-all hover:after:w-full;
  }
}

.image-scale-in {
  animation: scaleIn 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes scaleIn {
  0% {
    transform: scale(0.95);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.fadeIn {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeIn 0.8s ease forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }

.hover-lift {
  transition: transform 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-5px);
}

/* Animated gradient mesh background - optimized for performance */
.gradient-mesh-bg {
  background: linear-gradient(
    45deg,
    hsl(var(--gradient-mesh-1) / 0.35) 0%,
    hsl(var(--gradient-mesh-2) / 0.45) 25%,
    hsl(var(--gradient-mesh-3) / 0.30) 50%,
    hsl(var(--gradient-mesh-4) / 0.40) 75%,
    hsl(var(--gradient-mesh-1) / 0.35) 100%
  );
  background-size: 300% 300%;
  animation: gradient-mesh 8s ease infinite;
  will-change: background-position;
  transform: translateZ(0); /* Force hardware acceleration */
}

@keyframes gradient-mesh {
  0% { background-position: 0% 50%; }
  25% { background-position: 100% 25%; }
  50% { background-position: 100% 75%; }
  75% { background-position: 25% 100%; }
  100% { background-position: 0% 50%; }
}

/* Hexagonal pattern overlay - performance optimized */
.hexagon-pattern {
  background-image: 
    radial-gradient(circle at 50% 50%, hsl(var(--primary) / 0.08) 1px, transparent 1px),
    radial-gradient(circle at 25% 75%, hsl(var(--primary) / 0.06) 1px, transparent 1px),
    radial-gradient(circle at 75% 25%, hsl(var(--primary) / 0.05) 1px, transparent 1px);
  background-size: 50px 50px, 70px 70px, 90px 90px;
  background-position: 0 0, 15px 15px, 30px 30px;
  animation: hexagon-float 15s ease-in-out infinite;
  will-change: transform;
  transform: translateZ(0); /* Force hardware acceleration */
}

@keyframes hexagon-float {
  0%, 100% { transform: translateX(0) translateY(0); }
  25% { transform: translateX(10px) translateY(-5px); }
  50% { transform: translateX(-5px) translateY(10px); }
  75% { transform: translateX(-10px) translateY(-5px); }
}

/* Parallax effect */
.parallax {
  transform: translateY(var(--parallax-y, 0));
  transition: transform 0.1s ease-out;
}

/* Scrollbar hiding for gallery */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Hero CTA mobile fixes (custom CSS) */
@media (max-width: 640px) {
  /* 1) Let the CTA row wrap and allow children to shrink */
  :is(.hero, .Hero, [data-section*="hero"]) :is(.ctaRow, [class*="cta"]) {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    min-width: 0 !important;
  }
  :is(.hero, .Hero, [data-section*="hero"]) :is(.ctaRow, [class*="cta"]) > * {
    min-width: 0 !important;   /* critical for shrink on flex items */
  }

  /* 2) All button styles in hero */
  :is(.hero, .Hero, [data-section*="hero"]) :is(.btn, .button, [class*="Button"], .pill, .chip, .badge, a[role="button"], button) {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* size by content */
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;                   /* overrides theme min-width like 200px */
    inline-size: auto !important;              /* neutralize inline-size rules */
    height: auto !important;
    min-height: 44px !important;               /* tap target */
    padding: 10px 16px !important;

    /* text that actually shows up */
    font-size: clamp(14px, 3.8vw, 16px) !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
    white-space: normal !important;            /* allow wrap */
    overflow-wrap: anywhere !important;
    text-align: center !important;

    /* allow gradient text effects */
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
    mix-blend-mode: inherit !important;
    -webkit-background-clip: inherit !important;
    background-clip: inherit !important;

    /* remove anything that forces a rigid box */
    transform: none !important;                /* stops scaled buttons from breaking layout */
    overflow: visible !important;
    border-radius: 9999px;                      /* keep pill look */
  }

  /* 3) Icons should not force button height */
  :is(.hero, .Hero, [data-section*="hero"]) :is(.btn, .button, [class*="Button"], .pill) svg {
    width: 1em !important;
    height: 1em !important;
    flex: none !important;
    margin-right: 8px !important;
  }

  /* 4) Some themes use variables for min widths - neutralize them inside hero */
  :is(.hero, .Hero, [data-section*="hero"]) {
    --button-min-width: 0px !important;
    --btn-min-width: 0px !important;
    --cta-min-width: 0px !important;
  }

  /* Re-enable gradient text when using gradient classes on buttons */
  :is(.hero, .Hero, [data-section*="hero"]) :is(.btn, .button, [class*="Button"], .pill, .chip, .badge, a[role="button"], button).bg-clip-text,
  :is(.hero, .Hero, [data-section*="hero"]) :is(.btn, .button, [class*="Button"], .pill, .chip, .badge, a[role="button"], button) .bg-clip-text,
  :is(.hero, .Hero, [data-section*="hero"]) :is(.btn, .button, [class*="Button"], .pill, .chip, .badge, a[role="button"], button).text-mask-image,
  :is(.hero, .Hero, [data-section*="hero"]) :is(.btn, .button, [class*="Button"], .pill, .chip, .badge, a[role="button"], button) .text-mask-image,
  :is(.hero, .Hero, [data-section*="hero"]) :is(.btn, .button, [class*="Button"], .pill, .chip, .badge, a[role="button"], button)[data-gradient-text] {
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    mix-blend-mode: normal !important;
  }
}