/* ============================================================
   Owed — motion layer
   Everything here is decorative and degrades to static under
   prefers-reduced-motion (see the guard at the bottom).
   ============================================================ */

/* ---------- scroll progress ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: 60; pointer-events: none;
  background: var(--accent);
  transform: scaleX(0); transform-origin: 0 50%;
  will-change: transform;
}

/* ---------- generic entrance ----------
   The hide rule is gated on .js-enter, which motion.js adds only once it is
   actually running. Without it nothing is hidden, so a failed script leaves a
   plain readable page rather than an invisible-but-clickable hero form. */
.js-enter [data-enter] { opacity: 0; transform: translateY(16px); }
.js-enter.enter-ready [data-enter] {
  animation: enterUp .8s var(--ease-out) forwards;
  animation-delay: calc(var(--d, 0) * 1ms);
}
@keyframes enterUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- headline: word by word ----------
   Words are inline-block spans, never masked — a mask over a display
   serif shaves the italic descenders in "claim it." */
.split-w {
  display: inline-block;
  opacity: 0;
  transform: translateY(.36em);
  filter: blur(7px);
  will-change: opacity, transform, filter;
}
.enter-ready .split-w {
  animation: wordIn .95s var(--ease-out) forwards;
  animation-delay: calc(var(--wd, 0) * 1ms);
}
@keyframes wordIn {
  to { opacity: 1; transform: none; filter: blur(0); }
}

/* ---------- scroll reveals ---------- */
.reveal { opacity: 0; transform: translateY(22px); }
.reveal.in {
  opacity: 1; transform: none;
  transition: opacity .75s var(--ease-out), transform .75s var(--ease-out);
}

/* ---------- magnetic buttons ---------- */
/* only promote the buttons that actually move — a blanket rule on .btn
   creates a compositor layer for every button on every page */
.magnetic { transition: transform .35s var(--ease); will-change: transform; }

/* ---------- FAQ smooth ---------- */
.faq-item .faq-body { overflow: hidden; }
.faq-item[open] .faq-body { animation: openDown .35s var(--ease); }
@keyframes openDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* The pulsing glow that lived here is gone. This sheet loads after
   landing.css, so its .cta::before was overriding the closing band's top
   ground-fade and turning that seam back into a hard switch - a 174-step
   jump in one pixel row. The reference set was also unanimous that a closing
   field is flat: none of them put motion behind the last sentence.
   `overflow: hidden` stays, since the fade bands are clipped to the band. */
.cta { position: relative; overflow: hidden; isolation: isolate; }

/* ============================================================
   Reduced motion: strip every decorative animation. The finder
   stops cycling in motion.js and simply rests on its first example.
   ============================================================ */
/* the lit step and the faq marker are decorative movement */
@media (prefers-reduced-motion: reduce) {
  .faq-item::after { transition: none !important; }
  .faq-item summary span { transition: none !important; transform: none !important; }
  .js-enter [data-enter] { opacity: 1 !important; transform: none !important; animation: none !important; }
  .split-w { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .finder-wall p[data-hit] { transition: none !important; }
  .faq-item[open] .faq-body { animation: none !important; }
  .try-result { animation: none !important; }
  .scroll-progress { display: none; }
}