/* ============================================================
   Sunrise Care — motion layer
   Calm by design: soft blur-ins, a living heartbeat line,
   and one pinned "your visit" sequence. Progressive — the
   static site in style.css works without any of this.
   ============================================================ */

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* GSAP replaces the CSS entrance classes */
.has-motion .up { opacity: 1; transform: none; transition: none; }
.has-motion .doc { animation: none; }
.has-motion .blob { animation: none; }
.has-motion .float-card { animation: none; }

/* GSAP drives transform/opacity on these; a CSS transition on the same
   properties fights it, so keep only the non-animated ones */
.has-motion .svc, .has-motion .doc { transition: box-shadow .35s; }
.has-motion .svc .ic, .has-motion .filters button { transition: background .25s, border-color .25s, color .25s; }

/* ---------- heartbeat line ---------- */
.ecg { position: absolute; left: 0; right: 0; bottom: 4%; width: 100%; height: 90px; z-index: -1; pointer-events: none; overflow: visible; }
.ecg path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ecg-base { stroke: var(--mint-2); stroke-width: 2; }
.ecg-pulse { stroke: var(--teal); stroke-width: 3; opacity: 0; filter: drop-shadow(0 0 6px rgba(15,143,134,.5)); }
.has-motion .ecg-pulse { opacity: 1; }

/* ---------- connecting line for the 3 steps ---------- */
.how { position: relative; }
.steps-line { display: none; }
@media (min-width: 901px) {
  .steps-line { display: block; position: relative; z-index: 0; width: min(700px, 66.6%); height: 3px; margin: 0 auto; transform: translateY(49px); background: var(--line); border-radius: 3px; }
  .steps-line i { display: block; height: 100%; width: 100%; background: var(--teal); border-radius: 3px; transform-origin: left; transform: scaleX(0); }
  .steps { margin-top: -3px; }
  .steps span { position: relative; z-index: 1; transition: background .5s, color .5s, box-shadow .5s, transform .5s var(--ease); }
  .has-motion .steps li:not(.lit) span { background: #fff; color: var(--muted); box-shadow: 0 0 0 10px var(--mint), inset 0 0 0 2px var(--line); }
  .has-motion .steps li.lit span { transform: scale(1.08); }
  .has-motion .steps li { transition: opacity .5s; }
  .has-motion .steps li:not(.lit) { opacity: .45; }
}

/* ---------- doctor card tilt ---------- */
@media (hover: hover) and (pointer: fine) {
  .has-motion .doc-grid { perspective: 1000px; }
  .has-motion .doc { transform-style: preserve-3d; will-change: transform; }
  .has-motion .doc:hover { transform: none; }
  .has-motion .svc:hover { transform: none; }
  .has-motion .doc-ava { transform: translateZ(30px); }
}

/* ---------- click ripple on buttons ---------- */
.btn { position: relative; overflow: hidden; }
.ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,.45); pointer-events: none; transform: translate(-50%, -50%) scale(0); }
.btn-ghost .ripple, .filters .ripple { background: rgba(15,143,134,.2); }

.split-word { will-change: filter, opacity, transform; }