/* =================================================================
   Homepage scroll-reveal animations.

   JS-gated (the marker class .kw-rev-armed is added by scroll-reveal.js
   ONLY after it's confirmed the IntersectionObserver is hooked up).
   If JS fails, no class is added, base CSS leaves content visible.
   ================================================================= */

/* ── Section headlines: clip-path wipe + tiny rise ─────────────── */
.kw-rev-armed.kw-rev-h {
  clip-path: inset(-0.25em 100% -0.25em -0.1em);
  transform: translateY(6px);
  transition:
    clip-path 1200ms cubic-bezier(.2,.7,.18,1),
    transform 1200ms cubic-bezier(.2,.7,.18,1);
  will-change: clip-path, transform;
}
.kw-rev-armed.kw-rev-h.is-in {
  clip-path: inset(-0.25em -0.1em -0.25em -0.1em);
  transform: translateY(0);
}

/* "considered." / "questions" / "trust" italic-serif words inside a revealed
   headline get a blue underline drawing after the wipe lands. */
.kw-rev-armed.kw-rev-h .italic-serif,
.kw-rev-armed.kw-rev-h .accent,
.kw-rev-armed.kw-rev-h .em,
.kw-rev-armed.kw-rev-h .accent-light {
  position: relative;
  display: inline-block;
}
.kw-rev-armed.kw-rev-h .italic-serif::after,
.kw-rev-armed.kw-rev-h .accent::after,
.kw-rev-armed.kw-rev-h .em::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0.04em;
  bottom: -0.04em;
  height: 0.04em;
  background: currentColor;
  border-radius: 999px;
  opacity: .8;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1000ms cubic-bezier(.2,.7,.18,1) 350ms;
}
.kw-rev-armed.kw-rev-h.is-in .italic-serif::after,
.kw-rev-armed.kw-rev-h.is-in .accent::after,
.kw-rev-armed.kw-rev-h.is-in .em::after {
  transform: scaleX(1);
}

/* ── Eyebrows: dash draws across, then text fades in ───────────── */
.kw-rev-armed.kw-rev-eye {
  opacity: 0;
  transition: opacity 600ms cubic-bezier(.2,.7,.18,1) 80ms;
}
.kw-rev-armed.kw-rev-eye.is-in {
  opacity: 1;
}
.kw-rev-armed.kw-rev-eye::before {
  width: 0 !important;
  transition: width 700ms cubic-bezier(.6,.2,.2,1) 220ms;
}
.kw-rev-armed.kw-rev-eye.is-in::before {
  width: 28px !important;
}

/* ── Lead paragraphs / supporting copy: rise + fade ────────────── */
.kw-rev-armed.kw-rev-lead {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 800ms cubic-bezier(.2,.7,.18,1) 240ms,
    transform 800ms cubic-bezier(.2,.7,.18,1) 240ms;
}
.kw-rev-armed.kw-rev-lead.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* ── Cards / list items: gentle stagger via per-item delay ─────── */
.kw-rev-armed.kw-rev-stagger {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 700ms cubic-bezier(.2,.7,.18,1),
    transform 700ms cubic-bezier(.2,.7,.18,1);
  transition-delay: calc(var(--kw-rev-i, 0) * 90ms);
}
.kw-rev-armed.kw-rev-stagger.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* Honor reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .kw-rev-armed.kw-rev-h,
  .kw-rev-armed.kw-rev-eye,
  .kw-rev-armed.kw-rev-eye::before,
  .kw-rev-armed.kw-rev-lead,
  .kw-rev-armed.kw-rev-stagger,
  .kw-rev-armed.kw-rev-h .italic-serif::after,
  .kw-rev-armed.kw-rev-h .accent::after,
  .kw-rev-armed.kw-rev-h .em::after {
    transition: none;
    opacity: 1;
    transform: none;
    clip-path: none;
    width: 28px !important;
  }
}