/* ================================================
   SCROLL-REVEAL SYSTEM (transition-based)
   Elements start hidden via .reveal-init.
   IntersectionObserver adds .in-view → transition fires.
   No @keyframes animations — avoids double-fire.
   ================================================ */

[class*="reveal-"].reveal-init {
  opacity: 0;
  will-change: opacity, transform, filter;
}
 
/* Default fade-up reveal */
[class].reveal-init {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

[class].reveal-init.in-view {
  opacity: 1;
  transform: none;
}

/* Zoom reveal */
[class].reveal-init.reveal-zoom,
[class].reveal-init.reveal-scale {
  transform: scale(0.9);
}

[class].reveal-init.reveal-zoom.in-view,
[class].reveal-init.reveal-scale.in-view {
  transform: scale(1);
}

/* Blur reveal */
[class].reveal-init.reveal-blur {
  transform: translateY(18px);
  filter: blur(16px);
}

[class].reveal-init.reveal-blur.in-view {
  transform: none;
  filter: blur(0);
}

/* Slide left reveal */
[class].reveal-init.reveal-slide-left {
  transform: translateX(-40px);
}

[class].reveal-init.reveal-slide-left.in-view {
  transform: none;
}

/* Slide right reveal */
[class].reveal-init.reveal-slide-right {
  transform: translateX(40px);
}

[class].reveal-init.reveal-slide-right.in-view {
  transform: none;
}

/* ================================================
   STAGGER DELAYS — applied by JS via inline style,
   but CSS classes provide a fallback set.
   ================================================ */

.reveal-stagger-1 { transition-delay: 0ms !important; }
.reveal-stagger-2 { transition-delay: 70ms !important; }
.reveal-stagger-3 { transition-delay: 140ms !important; }
.reveal-stagger-4 { transition-delay: 210ms !important; }
.reveal-stagger-5 { transition-delay: 280ms !important; }
.reveal-stagger-6 { transition-delay: 350ms !important; }
.reveal-stagger-7 { transition-delay: 420ms !important; }
.reveal-stagger-8 { transition-delay: 490ms !important; }

/* ================================================
   WORD REVEAL — split headings animate word-by-word
   ================================================ */

.split-heading {
  line-height: 1.3;
}

.split-heading .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.split-heading .word-inner {
  display: inline-block;
  transform: translateY(112%);
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

.split-heading.in-view .word-inner {
  transform: translateY(0);
}

/* ================================================
   HERO — immediate entrance (not scroll-triggered)
   ================================================ */

.hero {
  opacity: 1;
}

/* ================================================
   REDUCED MOTION
   ================================================ */

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

/* ================================================
   PARALLAX
   ================================================ */

[data-parallax] {
  will-change: transform;
}

body {
  scroll-behavior: smooth;
}

html {
  scroll-behavior: auto;
}

/* ================================================
   NATIVE SCROLL MODE (mobile / Safari)
   When Lenis is disabled, ensure smooth native scroll.
   ================================================ */

html.kpg-native-scroll {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

html.kpg-native-scroll body {
  overflow-y: auto;
}