/* AgroTurf Custom Design System & CSS 3D Engine */
@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Manrope:wght@300..800&display=swap');

:root {
  --background: 0 0% 100%;
  --foreground: 222 47% 11%;
  
  /* Brand Palettes */
  --brand-green: #15803d;
  --brand-green-dark: #0f5127;
  --brand-construction: #b45309;
  --brand-interior: #0284c7;

  /* shadcn/ui Design Tokens */
  --card: 0 0% 100%;
  --card-foreground: 222 47% 11%;
  --popover: 0 0% 100%;
  --popover-foreground: 222 47% 11%;
  --primary: 142 72% 29%;
  --primary-foreground: 0 0% 100%;
  --secondary: 210 40% 96%;
  --secondary-foreground: 222 47% 11%;
  --muted: 210 40% 96%;
  --muted-foreground: 215 16% 47%;
  --accent: 210 40% 96%;
  --accent-foreground: 222 47% 11%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 210 40% 98%;
  --border: 214 32% 91%;
  --input: 214 32% 91%;
  --ring: 142 72% 29%;
  --radius: 0.75rem;
}

body {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #0f172a;
  background-color: #ffffff;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: 'Figtree', sans-serif;
  letter-spacing: -0.015em;
}

/* 3D Transform Utilities */
.perspective-1000 {
  perspective: 1000px;
}

.perspective-2000 {
  perspective: 2000px;
}

.transform-style-3d {
  transform-style: preserve-3d;
}

.backface-hidden {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.rotate-y-180 {
  transform: rotateY(180deg);
}

/* Division 3D Flip Card */
.flip-card {
  perspective: 1200px;
  height: 440px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: var(--radius);
  overflow: hidden;
}

.flip-card-back {
  transform: rotateY(180deg);
}

/* 3D Tilt Card */
.tilt-card {
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
  transform-style: preserve-3d;
  will-change: transform;
}

/* 3D Hero Parallax Stage */
.hero-stage {
  perspective: 1200px;
}

.hero-layer-bg {
  transform: translateZ(-120px) scale(1.15);
}

.hero-layer-mid {
  transform: translateZ(0);
}

.hero-layer-front {
  transform: translateZ(60px);
}

/* Glassmorphism */
.glass-header {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.top-bar-glass {
  background: rgba(2, 6, 23, 0.72) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* ==========================================================================
   Main Sticky Header: Transparent Hero & Scrolled Glass Transitions
   ========================================================================== */
#main-header {
  transition: background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              backdrop-filter 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              -webkit-backdrop-filter 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 1. Transparent State on Homepage Hero Section */
#main-header.header-transparent {
  background: transparent !important;
  background: linear-gradient(180deg, rgba(2, 6, 23, 0.45) 0%, rgba(2, 6, 23, 0) 100%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
}

#main-header.header-transparent .header-logo-light {
  display: block !important;
}

#main-header.header-transparent .header-logo-dark {
  display: none !important;
}

#main-header.header-transparent .nav-link {
  color: #f8fafc !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: color 0.2s ease;
}

#main-header.header-transparent .nav-link:hover,
#main-header.header-transparent .nav-link-landscaping:hover {
  color: #34d399 !important; /* emerald-400 */
}

#main-header.header-transparent .nav-link-construction:hover {
  color: #fbbf24 !important; /* amber-400 */
}

#main-header.header-transparent .nav-link-interior:hover {
  color: #38bdf8 !important; /* sky-400 */
}

#main-header.header-transparent .nav-link-icon {
  color: rgba(255, 255, 255, 0.75) !important;
  transition: color 0.2s ease, transform 0.2s ease;
}

#main-header.header-transparent .group:hover .nav-link-icon {
  color: #34d399 !important;
}

#main-header.header-transparent .header-action-whatsapp {
  color: #34d399 !important;
  background-color: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#main-header.header-transparent .header-action-whatsapp:hover {
  color: #ffffff !important;
  background-color: rgba(16, 185, 129, 0.3) !important;
  border-color: rgba(52, 211, 153, 0.5) !important;
}

#main-header.header-transparent .mobile-menu-btn {
  color: #ffffff !important;
}

#main-header.header-transparent .mobile-menu-btn:hover {
  color: #34d399 !important;
}

/* 2. Scrolled State (Frosted Glass) */
#main-header.header-scrolled {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.06) !important;
}

#main-header.header-scrolled .header-logo-light {
  display: none !important;
}

#main-header.header-scrolled .header-logo-dark {
  display: block !important;
}

#main-header.header-scrolled .nav-link {
  color: #334155 !important; /* slate-700 */
  text-shadow: none !important;
  transition: color 0.2s ease;
}

#main-header.header-scrolled .nav-link:hover,
#main-header.header-scrolled .nav-link-landscaping:hover {
  color: #047857 !important; /* emerald-700 */
}

#main-header.header-scrolled .nav-link-construction:hover {
  color: #b45309 !important; /* amber-700 */
}

#main-header.header-scrolled .nav-link-interior:hover {
  color: #0284c7 !important; /* sky-700 */
}

#main-header.header-scrolled .nav-link-icon {
  color: #94a3b8 !important; /* slate-400 */
  transition: color 0.2s ease, transform 0.2s ease;
}

#main-header.header-scrolled .header-action-whatsapp {
  color: #059669 !important;
  background-color: transparent !important;
  border: 1px solid transparent !important;
}

#main-header.header-scrolled .header-action-whatsapp:hover {
  color: #047857 !important;
  background-color: #ecfdf5 !important;
}

#main-header.header-scrolled .mobile-menu-btn {
  color: #334155 !important;
}

#main-header.header-scrolled .mobile-menu-btn:hover {
  color: #0f172a !important;
}

.glass-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(226, 232, 240, 0.8);
}

/* Carousel Utilities */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.carousel-track {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.carousel-track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none !important;
}
.carousel-track.is-dragging .tilt-card {
  pointer-events: none;
  transform: none !important;
}

/* Micro-animations */
@keyframes floatSlow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

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

/* Respect user's reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
  .flip-card:hover .flip-card-inner {
    transform: none !important;
  }
}