/* ============================================
   LENIS SMOOTH SCROLL OVERRIDES
   ============================================ */
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

/* ============================================
   WORD-BY-WORD ANIMATION BASE
   ============================================ */
.word {
  display: inline-block;
  margin-right: 0.25em;
}
.word:last-child { margin-right: 0; }

/* Hero heading: visible by default, hidden once JS is ready (GSAP reveals) */
#overview h1 .word {
  opacity: 1;
  transform: translateY(0);
}
.js-ready #overview h1 .word {
  opacity: 0;
  transform: translateY(40px);
}

/* Hero subtitle: always starts hidden, GSAP reveals on scroll */
#hero-subtitle .word {
  opacity: 0;
  transform: translateY(20px);
}

/* Section headings: start hidden, GSAP reveals on scroll */
#parallax-section h2 .word,
#stats h2 .word,
#programs h2 .word {
  opacity: 0;
  transform: translateY(30px);
}

/* ============================================
   HERO IMAGE CONTAINER
   GPU-composited for clipPath + scale3d
   ============================================ */
#hero-image-container {
  will-change: transform, clip-path;
}

/* ============================================
   PARALLAX COLUMNS
   GPU-composited for translateY movement
   ============================================ */
.parallax-column {
  will-change: transform;
}

/* ============================================
   STAT CARDS (start hidden, GSAP reveals)
   ============================================ */
.stat-card {
  opacity: 0;
  transform: translateY(40px);
}

/* ============================================
   PROGRAM TABS
   Content area expands/collapses with transition
   ============================================ */
.program-tab .tab-content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.3s ease;
}
.program-tab.active .tab-content {
  max-height: 200px;
  opacity: 1;
}

/* ============================================
   SCROLL PROGRESS BAR
   ============================================ */
#scroll-progress {
  will-change: transform;
}

/* ============================================
   NAV HIDE/SHOW ON SCROLL
   ============================================ */
#site-header {
  transition: transform 0.4s ease, opacity 0.4s ease;
}
#site-header.hidden-up {
  transform: translate(-50%, -120%);
  opacity: 0;
}

/* ============================================
   FOOTER GLOW ANIMATION
   ============================================ */
@keyframes glow-pulse {
  0%, 100% { opacity: 0.2; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.35; transform: translate(-50%, -50%) scale(1.1); }
}

/* ============================================
   PLACEHOLDER IMAGES
   Provides visual fallback for SVG placeholders
   ============================================ */
img[src$=".svg"] {
  background: linear-gradient(135deg, #c5d1da 0%, #a8b8c5 100%);
  min-height: 80px;
}