/* =========================================================
   Alphabet Edd - Motion System v2 (GSAP + Lenis)
   ========================================================= */

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

/* ------------------------------------------------------
   REVEAL SYSTEM
   The .reveal class sets initial state.
   GSAP animates TO the visible state.
   ------------------------------------------------------ */
[data-reveal] {
  opacity: 0;
  will-change: opacity, transform;
}

/* Variants - direction */
[data-reveal="up"]    { transform: translateY(32px); }
[data-reveal="down"]  { transform: translateY(-32px); }
[data-reveal="left"]  { transform: translateX(-40px); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="fade"]  { transform: none; }
[data-reveal="scale"] { transform: scale(.94); }

/* Stagger containers - children start hidden, GSAP reveals them in sequence */
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(28px);
  will-change: opacity, transform;
}

/* ------------------------------------------------------
   HERO - parallax target
   ------------------------------------------------------ */
.hero__media {
  will-change: transform;
}
.hero__media img {
  /* Remove the old CSS animation - GSAP handles it now */
  animation: none !important;
  transform: scale(1.08);
  will-change: transform;
}
.hero__inner {
  will-change: transform;
}

/* Hero inner stagger on load */
.hero__inner .hero__eyebrow,
.hero__inner h1,
.hero__inner .lede,
.hero__inner .hero__ctas,
.hero__inner .hero__proof {
  opacity: 0;
  will-change: opacity, transform;
}

/* ------------------------------------------------------
   COUNTERS - stat numbers
   ------------------------------------------------------ */
.stat__num {
  font-variant-numeric: tabular-nums;
  will-change: contents;
}

/* ------------------------------------------------------
   PROCESS LINE - keep gold draw for scroll-in
   ------------------------------------------------------ */
.process__line-fill {
  will-change: width;
}

/* ------------------------------------------------------
   IMAGE CLIP REVEAL - optional, for photos
   ------------------------------------------------------ */
[data-clip-reveal] {
  clip-path: inset(0 0 100% 0);
  will-change: clip-path;
}

/* ------------------------------------------------------
   REDUCED MOTION - the honest fallback
   ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal-stagger] > *,
  .hero__inner .hero__eyebrow,
  .hero__inner h1,
  .hero__inner .lede,
  .hero__inner .hero__ctas,
  .hero__inner .hero__proof {
    opacity: 1 !important;
    transform: none !important;
  }
  [data-clip-reveal] {
    clip-path: none !important;
  }
  .hero__media img {
    transform: scale(1.02) !important;
  }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* =========================================================
   GENTLE MOTION (v3) - subtle, editorial reveals
   ========================================================= */

/* Reduce initial offset on non-hero elements */
[data-reveal="up"] {
  transform: translateY(22px);
}
[data-reveal="left"] {
  transform: translateX(-24px);
}
[data-reveal="right"] {
  transform: translateX(24px);
}
[data-reveal="scale"] {
  transform: scale(.97);
}

[data-reveal-stagger] > * {
  transform: translateY(20px);
}

/* Reveal transitions are longer + softer */
[data-reveal],
[data-reveal-stagger] > * {
  transition-timing-function: cubic-bezier(.22, 1, .36, 1);
}

/* Section headings get a slightly different feel - reveal from 12px, faster */
.sec-head[data-reveal] {
  transform: translateY(14px);
}

/* Process steps reveal one by one - tighter stagger */
.process[data-reveal] .process__step {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s cubic-bezier(.22, 1, .36, 1),
              transform .8s cubic-bezier(.22, 1, .36, 1);
}
.process.is-visible .process__step,
.process[data-reveal].is-visible .process__step {
  opacity: 1;
  transform: none;
}
.process[data-reveal].is-visible .process__step:nth-child(2) { transition-delay: 0ms; }
.process[data-reveal].is-visible .process__step:nth-child(3) { transition-delay: 90ms; }
.process[data-reveal].is-visible .process__step:nth-child(4) { transition-delay: 180ms; }
.process[data-reveal].is-visible .process__step:nth-child(5) { transition-delay: 270ms; }
.process[data-reveal].is-visible .process__step:nth-child(6) { transition-delay: 360ms; }

/* Photos reveal with a very slight scale-up */
.process__photo[data-reveal] {
  transform: scale(.97);
}
.process__photo[data-reveal].is-visible {
  transform: scale(1);
}

/* Reduced-motion safety net */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal-stagger] > *,
  .process[data-reveal] .process__step {
    opacity: 1 !important;
    transform: none !important;
  }
}