/* ============================================
   LANDING PAGE - BASE STYLES & VARIABLES
   Full Dark Mode - Cohesive & Professional
   ============================================ */

/* CSS Variables - Sophisticated Dark Palette */
:root {
  /* ========== PRIMARY COLORS ========== */
  /* Rich Black - Primary */
  --color-primary: #0A0A0A;
  --color-primary-light: #141414;
  --color-primary-medium: #1A1A1A;
  --color-primary-elevated: #222222;

  /* Warm Terracotta - Accent */
  --color-accent: #C17A5C;
  --color-accent-light: #D4967A;
  --color-accent-dark: #A86544;
  --color-accent-glow: rgba(193, 122, 92, 0.25);
  --color-accent-subtle: rgba(193, 122, 92, 0.08);

  /* ========== BACKGROUND COLORS ========== */
  --color-bg: #0A0A0A;
  --color-bg-elevated: #111111;
  --color-bg-card: #161616;
  --color-bg-hover: #1C1C1C;

  /* ========== NEUTRAL COLORS ========== */
  --color-white: #FFFFFF;
  --color-cream: #F5F1E8;
  --color-gray-100: #E8E4DD;
  --color-gray-200: #C4C0B8;
  --color-gray-300: #9A9590;
  --color-gray-400: #6B6560;
  --color-gray-500: #4A4540;
  --color-gray-600: #333333;
  --color-gray-700: #252525;
  --color-gray-800: #1A1A1A;
  --color-gray-900: #0F0F0F;

  /* ========== TEXT COLORS ========== */
  --color-text: #F5F1E8;
  --color-text-muted: #9A9590;
  --color-text-subtle: #6B6560;

  /* ========== BORDERS ========== */
  --color-border: #2A2A2A;
  --color-border-light: #333333;
  --color-border-accent: var(--color-accent);

  /* ========== TYPOGRAPHY ========== */
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ========== SPACING ========== */
  --section-padding: clamp(5rem, 12vh, 8rem);
  --section-padding-sm: clamp(3rem, 8vh, 5rem);
  --container-max: 1400px;
  --content-max: 1100px;

  /* ========== TRANSITIONS ========== */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-expo: cubic-bezier(0.87, 0, 0.13, 1);
  --transition-fast: 0.2s var(--ease-smooth);
  --transition-base: 0.3s var(--ease-smooth);
  --transition-slow: 0.5s var(--ease-smooth);

  /* ========== SHADOWS ========== */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 16px 60px rgba(0, 0, 0, 0.6);
  --shadow-accent: 0 8px 30px var(--color-accent-glow);
  --shadow-glow: 0 0 40px var(--color-accent-glow);

  /* ========== BORDER RADIUS ========== */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --radius-full: 9999px;
}

/* ========== RESET & BASE ========== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ========== LENIS SMOOTH SCROLL ========== */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

html {
  overflow-x: hidden;
  font-size: 16px;
}

body {
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ========== 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;
  }
}

*:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

/* ========== SELECTION ========== */
::selection {
  background: var(--color-accent);
  color: var(--color-white);
}

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

::-webkit-scrollbar-track {
  background: var(--color-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--color-gray-600);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-accent);
}

/* ========== GPU ACCELERATION FOR ANIMATED ELEMENTS ========== */
/* Only apply will-change to actively animating elements during scroll */
/* Removed static will-change to reduce GPU memory usage */

.hero-col-image {
  /* Only hero images need permanent GPU layer for parallax */
  will-change: transform;
  backface-visibility: hidden;
}

/* Optimize images for smooth scrolling */
img {
  content-visibility: auto;
}

/* Reduce paint areas - use content-visibility for off-screen optimization */
.hero-section,
.about-section,
.lab-section,
.fieldwork-section,
.cta-section {
  contain: layout style;
}

/* Add will-change only when elements are being animated (via JS class toggle) */
.is-animating {
  will-change: transform, opacity;
}

/* ========== INITIAL HIDDEN STATES FOR SCROLL ANIMATIONS ========== */
/* These elements start hidden and are revealed by GSAP on scroll */
/* Using data attribute to scope these styles to the landing page with scroll controller */

[data-controller~="landing-scroll"] .about-section .section-title,
[data-controller~="landing-scroll"] .about-text p,
[data-controller~="landing-scroll"] .about-stats,
[data-controller~="landing-scroll"] .feature-card {
  opacity: 0;
  transform: translateY(60px);
}

[data-controller~="landing-scroll"] .fieldwork-section .section-title {
  opacity: 0;
  transform: translateY(60px);
}

[data-controller~="landing-scroll"] .lab-image-wrapper {
  opacity: 0;
  transform: translateY(80px) scale(0.95);
}

[data-controller~="landing-scroll"] .isotope-section .section-title,
[data-controller~="landing-scroll"] .lab-section .section-title {
  opacity: 0;
  transform: translateY(60px);
}

[data-controller~="landing-scroll"] .isotope-section .section-subtitle {
  opacity: 0;
  transform: translateY(40px);
}

[data-controller~="landing-scroll"] .isotope-card {
  opacity: 0;
  transform: translateY(80px) rotateX(-15deg);
  transform-style: preserve-3d;
}

[data-controller~="landing-scroll"] .process-flow {
  opacity: 0;
  transform: translateY(60px);
}

[data-controller~="landing-scroll"] .process-step .process-icon {
  opacity: 0;
  transform: scale(0.3) rotate(-30deg);
}

[data-controller~="landing-scroll"] .process-step .process-content {
  opacity: 0;
  transform: translateY(40px);
}

[data-controller~="landing-scroll"] .process-connector .connector-line {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}

[data-controller~="landing-scroll"] .process-connector .connector-dot {
  opacity: 0;
  transform: scale(0);
}

[data-controller~="landing-scroll"] .cta-section .cta-title {
  opacity: 0;
  transform: translateY(60px);
}

[data-controller~="landing-scroll"] .cta-section .cta-subtitle {
  opacity: 0;
  transform: translateY(50px);
}

[data-controller~="landing-scroll"] .cta-section .cta-buttons {
  opacity: 0;
  transform: translateY(40px) scale(0.9);
}

/* Ensure elements are visible when reduced motion is preferred */
@media (prefers-reduced-motion: reduce) {

  [data-controller~="landing-scroll"] .about-section .section-title,
  [data-controller~="landing-scroll"] .about-text p,
  [data-controller~="landing-scroll"] .about-stats,
  [data-controller~="landing-scroll"] .feature-card,
  [data-controller~="landing-scroll"] .fieldwork-section .section-title,
  [data-controller~="landing-scroll"] .lab-image-wrapper,
  [data-controller~="landing-scroll"] .lab-section .section-title,
  [data-controller~="landing-scroll"] .isotope-card,
  [data-controller~="landing-scroll"] .process-flow,
  [data-controller~="landing-scroll"] .process-step .process-icon,
  [data-controller~="landing-scroll"] .process-step .process-content,
  [data-controller~="landing-scroll"] .process-connector .connector-dot,
  [data-controller~="landing-scroll"] .cta-section .cta-title,
  [data-controller~="landing-scroll"] .cta-section .cta-subtitle,
  [data-controller~="landing-scroll"] .cta-section .cta-buttons {
    opacity: 1 !important;
    transform: none !important;
  }

  [data-controller~="landing-scroll"] .process-connector .connector-line {
    stroke-dashoffset: 0 !important;
  }
}

/* Fallback for no-JS - add class to html element */
html.no-js [data-controller~="landing-scroll"] .about-section .section-title,
html.no-js [data-controller~="landing-scroll"] .about-text p,
html.no-js [data-controller~="landing-scroll"] .about-stats,
html.no-js [data-controller~="landing-scroll"] .feature-card,
html.no-js [data-controller~="landing-scroll"] .fieldwork-section .section-title,
html.no-js [data-controller~="landing-scroll"] .lab-image-wrapper,
html.no-js [data-controller~="landing-scroll"] .lab-section .section-title,
html.no-js [data-controller~="landing-scroll"] .isotope-card,
html.no-js [data-controller~="landing-scroll"] .process-flow,
html.no-js [data-controller~="landing-scroll"] .process-step .process-icon,
html.no-js [data-controller~="landing-scroll"] .process-step .process-content,
html.no-js [data-controller~="landing-scroll"] .process-connector .connector-dot,
html.no-js [data-controller~="landing-scroll"] .cta-section .cta-title,
html.no-js [data-controller~="landing-scroll"] .cta-section .cta-subtitle,
html.no-js [data-controller~="landing-scroll"] .cta-section .cta-buttons {
  opacity: 1 !important;
  transform: none !important;
}