/* =====================================================================
   Motion layer
   Scroll reveals, count-up numbers, the self-drawing roadmap and hover
   feedback. Every hidden "before" state is scoped under html.motion,
   which motion.js adds only when the visitor has not asked for reduced
   motion — without it (or without JS) the page renders fully static.
   ===================================================================== */

:root {
  --motion-rise: 26px;
  --motion-dur: 700ms;
  --motion-step: 90ms;
}

/* --------------------------- reveal ---------------------------------- */

.motion [data-reveal] {
  opacity: 0;
  transform: translateY(var(--motion-rise));
}

/* Reveal timing wins over component transitions until the reveal ends. */
.motion [data-reveal]:not(.is-done) {
  transition: opacity var(--motion-dur) var(--ease),
              transform var(--motion-dur) var(--ease);
  transition-delay: var(--d, 0ms);
}

.motion [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ---------------------------- hero ----------------------------------- */

@keyframes motion-rise-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.motion .hero-copy > * {
  animation: motion-rise-in 800ms var(--ease) both;
}
.motion .hero-copy > :nth-child(2) { animation-delay: 120ms; }
.motion .hero-copy > :nth-child(3) { animation-delay: 240ms; }
.motion .hero-copy > :nth-child(4) { animation-delay: 340ms; }
.motion .hero-copy > :nth-child(5) { animation-delay: 440ms; }
.motion .hero-copy > :nth-child(6) { animation-delay: 520ms; }

/* ------------------------ scroll progress ---------------------------- */

.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  height: 3px;
  background: linear-gradient(90deg, var(--sage), var(--teal));
  transform: scaleX(var(--progress, 0));
  transform-origin: left center;
  pointer-events: none;
}

/* --------------------------- trust bar ------------------------------- */

.trust strong { font-variant-numeric: tabular-nums; }

.trust div { transition: background var(--base) var(--ease); }
.trust div:hover { background: rgba(255, 255, 255, 0.06); }

/* ---------------------------- roadmap -------------------------------- */

/* The road draws itself left to right (top to bottom on narrow screens). */
.motion .roadmap::before {
  transform: translateY(-50%) scaleX(0);
  transform-origin: left center;
  transition: transform 1400ms var(--ease);
}
.motion .roadmap.is-in::before { transform: translateY(-50%) scaleX(1); }

.motion .roadmap-node {
  transform: scale(0.3);
  opacity: 0;
  transition: transform 520ms cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 300ms var(--ease);
  transition-delay: calc(var(--d, 0ms) + 200ms);
}
.motion .roadmap-step.is-in .roadmap-node { transform: none; opacity: 1; }

@media (max-width: 1080px) {
  .motion .roadmap::before { transform: scaleY(0); transform-origin: center top; }
  .motion .roadmap.is-in::before { transform: scaleY(1); }
}

.roadmap-body {
  transition: transform var(--base) var(--ease),
              box-shadow var(--base) var(--ease),
              border-color var(--base) var(--ease);
}
.roadmap-step:hover .roadmap-body {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift);
  border-color: var(--sage);
}
.roadmap-node { transition: background var(--base) var(--ease); }
.roadmap-step:hover .roadmap-node { background: var(--teal-2); }

/* ------------------------ numbered sequences ------------------------- */

.motion .process-line li[data-reveal] { transform: translateX(-10px); }
.motion .process-line li[data-reveal].is-in { transform: none; }

.motion .journey-list > div[data-reveal] { transform: translateX(22px); }
.motion .journey-list > div[data-reveal].is-in { transform: none; }

.journey-list > div { transition: padding-left var(--base) var(--ease), color var(--base) var(--ease); }
.journey-list > div:hover { padding-left: 0.5rem; color: var(--teal); }

/* ----------------------------- cards --------------------------------- */

.grid > .card,
.grid > .doctor-card {
  position: relative;
  overflow: hidden;
  transition: transform var(--base) var(--ease),
              box-shadow var(--base) var(--ease),
              border-color var(--base) var(--ease);
}

/* A thin accent line that grows along the top edge on hover. */
.grid > .card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--sage), var(--teal));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--base) var(--ease);
}
.section--dark .grid > .card--dark::before { background: var(--sage); }

@media (hover: hover) {
  .grid > .card:hover,
  .motion .grid > .card.is-done:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lift);
  }
  .grid > .card:hover::before { transform: scaleX(1); }
}

.doctor-portrait { transition: filter var(--base) var(--ease); }
@media (hover: hover) {
  .card:hover .doctor-portrait { filter: saturate(1.08) contrast(1.03); }
}

/* ------------------------------ CTA ---------------------------------- */

@keyframes motion-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(121, 183, 189, 0); }
  50%      { box-shadow: 0 0 0 8px rgba(121, 183, 189, 0.22); }
}

.motion .cta-band.is-in .btn:first-child {
  animation: motion-glow 2.6s var(--ease) 900ms 2;
}