/* ============================================================
   Mantle home page — Oliver-Wyman-style entrance choreography
   Self-contained. Layers on top of the existing .reveal system.
   Only loaded on the home page (index-full.html).
   ============================================================ */

/* Respects reduced motion: skip everything */
@media (prefers-reduced-motion: reduce) {
  .anim-fade-up,
  .anim-stat-pop,
  .anim-card-stagger > *,
  .anim-hero-orbit { transition: none !important; transform: none !important; opacity: 1 !important; }
}

/* ----- 1. Hero entrance staggers ------------------------------------------------
   Headline / lead / CTAs already have .reveal data-delay; we just give the hero
   a softer easing + slightly bigger initial offset to feel cinematic. */
html.js-reveal-ready .hero .reveal:not(.is-visible) {
  transform: translateY(28px);
  transition-timing-function: cubic-bezier(.22, .61, .36, 1);
  transition-duration: 900ms;
}

/* Hero orbit (the mantle mark) eases in subtly with the headline, behind it.
   IMPORTANT: it remains at opacity .12 light / .16 dark so it stays in the background. */
html.js-reveal-ready .anim-hero-orbit {
  opacity: 0;
  transform: translateY(-50%) scale(.92);
  transition: opacity 1200ms cubic-bezier(.22, .61, .36, 1) 300ms,
              transform 1200ms cubic-bezier(.22, .61, .36, 1) 300ms;
  will-change: opacity, transform;
}
html.js-reveal-ready .anim-hero-orbit.is-in {
  opacity: .12;
  transform: translateY(-50%) scale(1);
}
html.js-reveal-ready .section-dark .anim-hero-orbit.is-in { opacity: .16; }

/* ----- 2. Logo marquee fades in last ------------------------------------------- */
html.js-reveal-ready .anim-fade-up {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 900ms cubic-bezier(.22, .61, .36, 1),
              transform 900ms cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}
html.js-reveal-ready .anim-fade-up.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* ----- 3. Card stagger (catalog cards, outcome cards, industry cards) ---------- */
html.js-reveal-ready .anim-card-stagger > * {
  opacity: 0;
  transform: translateY(40px) scale(.97);
  transition: opacity 800ms cubic-bezier(.22, .61, .36, 1),
              transform 900ms cubic-bezier(.34, 1.36, .64, 1);
  will-change: opacity, transform;
}
html.js-reveal-ready .anim-card-stagger.is-in > *:nth-child(1) { transition-delay: 0ms; }
html.js-reveal-ready .anim-card-stagger.is-in > *:nth-child(2) { transition-delay: 100ms; }
html.js-reveal-ready .anim-card-stagger.is-in > *:nth-child(3) { transition-delay: 200ms; }
html.js-reveal-ready .anim-card-stagger.is-in > *:nth-child(4) { transition-delay: 300ms; }
html.js-reveal-ready .anim-card-stagger.is-in > *:nth-child(5) { transition-delay: 400ms; }
html.js-reveal-ready .anim-card-stagger.is-in > *:nth-child(6) { transition-delay: 500ms; }
html.js-reveal-ready .anim-card-stagger.is-in > * {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ----- 4. Stat numbers pop in (counter-friendly) ------------------------------- */
html.js-reveal-ready .anim-stat-pop {
  opacity: 0;
  transform: scale(.86);
  transform-origin: left center;
  transition: opacity 750ms cubic-bezier(.22, .61, .36, 1) 100ms,
              transform 850ms cubic-bezier(.34, 1.56, .64, 1) 100ms;
  will-change: opacity, transform;
}
html.js-reveal-ready .anim-stat-pop.is-in {
  opacity: 1;
  transform: scale(1);
}

/* ----- 5. Nav scrim once scrolled past the hero -------------------------------- */
.nav.is-past-hero {
  background: rgba(255, 255, 255, .85);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 4px 24px rgba(11, 18, 32, .06);
  transition: background var(--duration-base) var(--ease-out-soft),
              box-shadow var(--duration-base) var(--ease-out-soft);
}