/* =====================================================================
   Medicare Clinic — motion layer (Baseline-style animation)
   Loaded on every page after the page's own <style>. Adds motion only:
   no layout, colour or content changes. Driven by assets/motion.js.
   ===================================================================== */

:root {
  --mo-ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --mo-ease-out-quart: cubic-bezier(.25, 1, .5, 1);
  --mo-ease-in-out-cubic: cubic-bezier(.65, 0, .35, 1);
}

/* ----- Lenis smooth scroll (recommended base CSS) ----- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ----- Hold above-the-fold hero content until motion.js has prepared it.
         If the script never boots, the head failsafe adds .mo-off after 3s. ----- */
.mo-js:not(.mo-off):not(.mo-booted) :is(
  .hero h1, .hero__eyebrow, .hero__sub, .hero__ctas,
  .page-hero h1, .page-hero__eyebrow, .page-hero__sub, .page-hero__badge,
  .doctor-profile__eyebrow, .doctor-profile__name, .doctor-profile__focus,
  .doctor-profile__fields, .doctor-profile__ctas, .doctor-profile__photo, .back-link
) { visibility: hidden; }

/* ----- Split-text reveals ----- */
.mo-c {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: .14em;
  margin-bottom: -.14em;
}
.mo-i {
  display: inline-block;
  transform: translateY(115%);
  opacity: 0;
  transition:
    transform var(--dur, 950ms) var(--ease, var(--mo-ease-out-expo)),
    opacity var(--dur, 950ms) var(--ease, var(--mo-ease-out-expo));
  transition-delay: calc(var(--base, 0ms) + var(--i, 0) * var(--stagger, 120ms));
}
.mo-split--fade .mo-c { overflow: visible; }
.mo-split--fade .mo-i { transform: translateY(18px); --ease: var(--mo-ease-out-quart); }
.mo-split.is-in .mo-i { transform: none; opacity: 1; }
.mo-split.mo-reset .mo-i { transition: none !important; }

/* ----- Spring-driven elements: the spring owns transform + opacity, so stop
         the page's own CSS transitions from fighting it frame by frame. ----- */
.mo-spring { transition-property: background-color, border-color, box-shadow, color, filter !important; }

/* ----- Scroll parallax on cropped photos (oversized so edges never show) ----- */
.mo-parallax { scale: 1.12; will-change: transform; }

/* ----- FAQ answers ease in when a question opens ----- */
@keyframes mo-rise-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.mo-booted details[open] > .faq-item__answer { animation: mo-rise-in .6s var(--mo-ease-out-expo); }

/* ----- Intro loader (index.html only, once per browser session) ----- */
.mo-loader {
  position: fixed; inset: 0; z-index: 400;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px;
  background: var(--brand-sage-dark, #5F8174);
  transition: transform 850ms var(--mo-ease-in-out-cubic);
}
.mo-no-loader .mo-loader, .mo-off .mo-loader { display: none; }
.mo-loader.is-leaving { transform: translateY(-105%); }
.mo-loader__mark { background: #fff; border-radius: 14px; padding: 10px 16px; opacity: 0; }
.mo-loader__mark img { height: 64px; width: auto; display: block; }
.mo-loader__track { width: 160px; height: 1px; border-radius: 999px; background: rgba(255,255,255,.25); overflow: hidden; }
.mo-loader__fill {
  height: 100%; background: #fff;
  transform: scaleX(0); transform-origin: left;
  transition: transform 1280ms var(--mo-ease-in-out-cubic) 120ms;
}
.mo-loader.is-running .mo-loader__fill { transform: scaleX(1); }
html.mo-loading { overflow: hidden; }

/* ----- Reduced motion: show everything, move nothing ----- */
@media (prefers-reduced-motion: reduce) {
  .mo-i { transition: none !important; transform: none !important; opacity: 1 !important; }
  .mo-loader { display: none; }
  .mo-parallax { scale: none; }
  .mo-booted details[open] > .faq-item__answer { animation: none; }
}