/* ─── Soul AI motion layer ────────────────────────────────────────────
   One place for every page-level motion rule on the modern (Split Studio)
   pages. Pairs with js/motion.js, which only adds classes and custom
   properties. Loads after site.css, so it may use the tokens.css scale.
   With JS off, or on any error in motion.js, `.mo-ready` is absent and
   nothing here hides content.

   Spec (frontend-motion skill, four layers):
   - hero       · page load    · staggered fade-up 12px  · --dur-xl --stagger · RM: static
   - blocks     · in view once · fade-up 12px, staggered · --dur-xl           · RM: static
   - buttons    · press        · scale .97               · --dur-xs
   - buttons    · hover/focus  · rise 1px + shadow       · --dur-sm  (hover gated)
   - list rows  · hover        · rise 2px                · --dur-sm  (hover gated)
   - form status· state change · fade + rise 4px         · --dur-md           · RM: instant
   - doc pages  · scroll-linked· 3px reading progress bar (CSS scroll timeline) */

/* ─── Press feedback ──────────────────────────────────────────────── */
.btn, .nav .nav-cta { -webkit-tap-highlight-color: transparent; }
.btn, .nav .nav-cta {
  transition:
    background-color var(--dur-sm) var(--ease-out),
    color var(--dur-sm) var(--ease-out),
    transform var(--dur-sm) var(--ease-out),
    box-shadow var(--dur-sm) var(--ease-out);
}
.btn:active, .nav .nav-cta:active, button[type="submit"]:active {
  transform: scale(0.97);
  transition-duration: var(--dur-xs);
}

/* ─── Hover lift, with a keyboard twin ────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover, .btn-quiet:hover, .nav .nav-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -10px var(--color-ink);
  }
  .offers > li:hover, .steps > li:hover { transform: translateY(-2px); }
}
.btn-primary:focus-visible, .btn-quiet:focus-visible, .nav .nav-cta:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -10px var(--color-ink);
}
.offers > li, .steps > li { transition: transform var(--dur-sm) var(--ease-out); }

/* ─── Reveal on scroll (only once motion.js marks the page ready) ─── */
.mo-ready .mo-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--dur-xl) var(--ease-out-strong),
    transform var(--dur-xl) var(--ease-out-strong);
  transition-delay: calc(var(--mo-i, 0) * var(--stagger));
}
.mo-ready .mo-reveal.mo-in { opacity: 1; transform: none; }

/* ─── Hero entrance (same shape, driven by load instead of scroll) ── */
.mo-ready .mo-hero-step {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--dur-xl) var(--ease-out-strong),
    transform var(--dur-xl) var(--ease-out-strong);
  transition-delay: calc(var(--mo-i, 0) * var(--stagger));
}
.mo-ready .mo-hero-in .mo-hero-step { opacity: 1; transform: none; }

/* ─── Contact / login status line ─────────────────────────────────── */
/* Two identical keyframes on purpose: a browser only restarts an animation when
   animation-name changes, so loading → success needs a second name to replay. */
.form-status[data-state="loading"] { animation: moStatusIn var(--dur-md) var(--ease-out); }
.form-status[data-state="success"],
.form-status[data-state="error"] { animation: moStatusSwap var(--dur-md) var(--ease-out); }
@keyframes moStatusIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes moStatusSwap { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ─── Reading progress (scroll-linked, progressive enhancement) ───── */
.mo-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 30;
  background: var(--color-accent); transform-origin: 0 50%;
  transform: scaleX(0); pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  .mo-progress { animation: moGrow linear both; animation-timeline: scroll(root); }
}
@keyframes moGrow { to { transform: scaleX(1); } }

/* ─── Reduced motion: keep state changes, drop travel and loops ───── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .mo-ready .mo-reveal, .mo-ready .mo-hero-step { opacity: 1; transform: none; }
  .mo-progress { display: none; }
}