/* ==========================================================================
   MIGOMBANI — PRO MOTION LAYER
   --------------------------------------------------------------------------
   Loaded on pages that run assets/js/motion.js (GSAP + ScrollTrigger + Lenis).

   motion.js adds `pro-motion` to <html> synchronously, before first paint,
   but ONLY once it has confirmed gsap/ScrollTrigger/Lenis are all present and
   the visitor has not asked for reduced motion. If any of that is false the
   class never lands, every rule below is inert, and the original
   IntersectionObserver engine in app.js stays in charge.

   The contract: in pro mode CSS owns the HIDDEN state only. GSAP owns every
   transition. So each rule here strips the CSS transition and the CSS
   start-transform, leaving a plain opacity:0 for GSAP to animate off.
   ========================================================================== */

/* ── Reveal: hand the transition to GSAP ───────────────────────────────── */
.pro-motion [data-reveal] {
  opacity: 0;
  transform: none;
  filter: none;
  clip-path: none;
  transition: none;
}
.pro-motion [data-reveal='mask'] { opacity: 0; }

/* Already released — covers the failsafe path and anything GSAP has finished */
.pro-motion [data-reveal].is-in {
  opacity: 1;
  transform: none;
  filter: none;
  clip-path: none;
}

/* ── Split headlines: GSAP drives the words out of the line mask ───────── */
.pro-motion .split-word {
  opacity: 1;              /* GSAP sets its own from-state on init */
  transform: none;
  transition: none;
}
/* The mask the words slide out of. Slightly deeper than the base rule so a
   descender (g, y, j) cannot peek above the line while it is still down. */
.pro-motion .split-line { padding-bottom: .14em; margin-bottom: -.14em; }

/* ── Lenis ─────────────────────────────────────────────────────────────── */
.pro-motion.lenis-smooth { scroll-behavior: auto !important; }
.pro-motion.lenis-stopped { overflow: hidden; }
/* Lenis must not fight a native anchor jump or the drawer's scroll lock. */
.pro-motion.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

/* ── Hero: GSAP scrubs these, so the CSS animation has to stand down ───── */
.pro-motion .hero-media { will-change: transform; }
.pro-motion .hero-body  { will-change: transform, opacity; }
/* Ken Burns is replaced by a scroll-linked scale — running both double-scales
   the image and fights the scrub. */
.pro-motion .ken-burns { animation: none; }

/* A second scrim that deepens as the hero scrolls away, so the headline keeps
   its contrast against a bright sky right up to the moment it leaves.
   motion.js scrubs --veil from 0 to 1 across the hero's scroll range. */
.pro-motion .hero::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgb(4 20 14 / .55), rgb(4 20 14 / .2));
  opacity: var(--veil, 0);
}

/* ── Parallax: GSAP writes the transform, drop the rAF class' will-change ─ */
.pro-motion .parallax { will-change: transform; }

/* ── Marquee: speed and skew come from scroll velocity ─────────────────── */
.pro-motion .marquee-track {
  animation: none;             /* GSAP's infinite loop replaces the keyframes */
  will-change: transform;
}

/* ── Magnetic buttons (fine pointer only — never on touch) ─────────────── */
@media (hover: hover) and (pointer: fine) {
  .pro-motion .is-magnetic { will-change: transform; }
  .pro-motion .is-magnetic > span,
  .pro-motion .is-magnetic > i { display: inline-block; will-change: transform; }
}

/* ── Safety nets ───────────────────────────────────────────────────────── */

/* If motion.js throws after the class lands, this is what stops the page
   being permanently blank: app.js adds `motion-failed` in its catch. */
.pro-motion.motion-failed [data-reveal],
.pro-motion.motion-failed .split-word {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
}

/* Reduced motion wins over everything above. motion.js will not have added
   the class at all, but a visitor can flip the OS setting mid-session. */
@media (prefers-reduced-motion: reduce) {
  .pro-motion [data-reveal],
  .pro-motion .split-word {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
  .pro-motion .hero::after { display: none; }
  .pro-motion .marquee-track { animation: none !important; }
}