/* =========================================================
   Ayursiha — scroll motion scenes
   Base layout works without JS. html.motion / html.hs-on are
   added by motion.js when GSAP is loaded and motion is allowed.
   ========================================================= */

/* ---------- Lenis smooth scroll (required base styles) ----------
   Native smooth-scroll fights Lenis (each frame's scrollTo gets re-animated),
   which made scrolling feel sticky. */
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; }

/* ---------- top scroll progress ---------- */
.scroll-progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 100; pointer-events: none; }
.scroll-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--brand-500), #7fe0e4); transform: scaleX(0); transform-origin: 0 50%; }

/* ---------- header hides on scroll down ---------- */
.header { transition: box-shadow .3s, border-color .3s, transform .45s var(--ease); }
.header.is-hidden { transform: translateY(-100%); }

/* ---------- split text ---------- */
.sw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.sw > span { display: inline-block; }

/* ---------- hero scroll cue ---------- */
.hero__scroll { display: inline-flex; align-items: center; gap: 12px; margin-top: 40px; font: 600 .78rem/1 var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: #9fc9cb; }
.hero__scroll:hover { color: #fff; }
.hero__mouse { width: 22px; height: 34px; border: 1.5px solid rgba(255,255,255,.45); border-radius: 12px; display: grid; justify-items: center; align-content: start; padding-top: 6px; }
.hero__mouse i { width: 3px; height: 7px; border-radius: 2px; background: #fff; animation: mouse 1.8s var(--ease) infinite; }
@keyframes mouse { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(10px); opacity: 0; } 100% { opacity: 0; } }

/* ---------- manifesto (word highlight) ---------- */
.manifesto { padding: clamp(96px, 14vw, 180px) 0 clamp(48px, 7vw, 90px); }
.manifesto .container { max-width: 1100px; }
.manifesto__text { font: 700 clamp(1.7rem, 3.9vw, 3.3rem)/1.28 var(--font-head); letter-spacing: -.02em; color: var(--ink); margin: 0; }
.manifesto__text em { font-style: normal; color: var(--brand-600); }
html.motion .manifesto__text .mw { opacity: .14; }

/* ---------- stats giant outline word ---------- */
.stats__word {
  position: absolute; top: 50%; left: 0; transform: translateY(-50%); white-space: nowrap; pointer-events: none;
  font: 800 clamp(6rem, 17vw, 16rem)/1 var(--font-head); letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.09);
}
.stats__grid { position: relative; z-index: 1; }

/* ---------- marquee ---------- */
.marquee { padding: clamp(40px, 6vw, 72px) 0; overflow: hidden; border-block: 1px solid var(--line); background: #fff; }
.marquee__row { display: flex; align-items: center; gap: .45em; width: max-content; white-space: nowrap; font: 800 clamp(2.6rem, 7vw, 6.4rem)/1.1 var(--font-head); letter-spacing: -.03em; text-transform: uppercase; color: var(--ink); will-change: transform; }
.marquee__row + .marquee__row { margin-top: .12em; }
.marquee__row[data-marquee="1"] { transform: translateX(-25%); }
.marquee__row .o { color: transparent; -webkit-text-stroke: 1.5px var(--brand-600); }
.marquee__row i { font-style: normal; font-size: .4em; color: var(--brand-500); }

/* ---------- orbit — one team around one patient ---------- */
.orbit { background: radial-gradient(ellipse at 50% 45%, #0b4b54 0%, var(--brand-900) 62%); color: #a9c9cb; overflow: hidden; }
.orbit__pin { position: relative; height: 100vh; min-height: 560px; display: grid; place-items: center; padding: 24px 16px 150px; }
.orbit__stage { --R: min(29vmin, 300px); position: relative; width: calc(var(--R) * 2.3); aspect-ratio: 1; }
.orbit__ring { position: absolute; border-radius: 50%; border: 1px solid rgba(127,224,228,.22); }
.orbit__ring--1 { inset: 6.5%; box-shadow: 0 0 80px -10px rgba(20,149,163,.35), inset 0 0 60px -20px rgba(20,149,163,.35); }
.orbit__ring--1::after { content: ""; position: absolute; top: 50%; left: -5px; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #7fe0e4; box-shadow: 0 0 16px #7fe0e4; }
.orbit__ring--2 { inset: 24%; border-style: dashed; border-color: rgba(127,224,228,.18); }
.orbit__ring--3 { inset: 36%; border-color: rgba(127,224,228,.3); background: radial-gradient(circle, rgba(20,149,163,.2), transparent 70%); }
.orbit__core { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; z-index: 2; }
.orbit__word { grid-area: 1 / 1; }
.orbit__word--a { display: none; font: 800 clamp(2rem, 7vmin, 5rem)/1 var(--font-head); letter-spacing: .06em; background: linear-gradient(180deg, #fff, #7fe0e4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.orbit__word--b { font: 600 clamp(1.2rem, 3.6vmin, 2.3rem)/1.2 var(--font-head); color: #fff; }
.orbit__word--b strong { color: #7fe0e4; font-weight: 800; }
html.motion .orbit__word--a { display: block; }
.orbit__chips { position: absolute; inset: 0; z-index: 3; --spin: 0deg; }
.orbit__chips li {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(calc(var(--a) + var(--spin))) translateX(var(--r, var(--R))) rotate(calc(-1 * (var(--a) + var(--spin))));
}
.orbit__chips span {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; border-radius: 999px; white-space: nowrap;
  font: 600 .86rem/1 var(--font-head); color: #fff; background: #0a4851; border: 1px solid rgba(127,224,228,.28);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.5);
}
.orbit__chips .ico { width: 16px; height: 16px; color: #7fe0e4; }
.orbit__caption { position: absolute; left: 0; right: 0; bottom: 48px; margin: 0 auto; width: min(560px, calc(100% - 32px)); text-align: center; }
.orbit__caption .eyebrow { justify-content: center; }
.orbit__caption p { margin: 0; font-size: 1.05rem; }

/* ---------- programs — horizontal scroll ---------- */
.hs { background: var(--brand-900); color: #c8dfe0; position: relative; overflow: hidden; }
.hs__pin { padding: clamp(64px, 9vw, 112px) 0; }
.hs__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 40px; }
.hs__head h2 { color: #fff; margin: 0; max-width: 680px; }
.hs__count { font: 600 1rem/1 var(--font-head); color: #6f9a9d; white-space: nowrap; }
.hs__count strong { font-size: 2.4rem; color: #fff; }
.hs__track { display: grid; gap: 24px; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.panel { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-lg); overflow: hidden; isolation: isolate; }
.panel__bg-word { position: absolute; right: -1%; bottom: -6%; z-index: -1; pointer-events: none; font: 800 clamp(5rem, 13vw, 13rem)/1 var(--font-head); letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1px rgba(127,224,228,.16); }
.panel__media { overflow: hidden; }
.panel__media img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
.panel__body { padding: clamp(28px, 4vw, 52px); align-self: center; }
.panel__num { display: block; font: 800 1rem/1 var(--font-head); color: var(--brand-500); letter-spacing: .1em; margin-bottom: 18px; }
.panel h3 { color: #fff; font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 14px; }
.panel p { font-size: 1.02rem; }
.panel .checklist { margin-bottom: 0; }
.hs__progress { display: none; margin-top: 36px; }
.hs__progress span { display: block; height: 2px; background: rgba(255,255,255,.1); position: relative; overflow: hidden; }
.hs__progress span::after { content: ""; position: absolute; inset: 0; background: #7fe0e4; transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }

html.hs-on .hs__pin { height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 96px 0 40px; }
html.hs-on .hs__head { margin-bottom: 28px; }
html.hs-on .hs__head h2 { font-size: clamp(1.6rem, 2.6vw, 2.4rem); }
html.hs-on .hs__track { display: flex; gap: 32px; width: max-content; max-width: none; margin: 0; padding: 0 max(24px, calc((100vw - var(--container)) / 2 + 24px)); will-change: transform; }
html.hs-on .panel { width: min(1040px, 76vw); height: min(60vh, 540px); flex-shrink: 0; }
html.hs-on .panel__media img { width: 124%; max-width: none; margin-left: -12%; min-height: 0; }
html.hs-on .hs__progress { display: block; }

/* ---------- journey line with travelling dot ---------- */
.journey { position: relative; }
.journey__line { position: absolute; top: 68px; left: 12.5%; right: 12.5%; height: 2px; background: var(--brand-100); z-index: 0; }
.journey__fill { position: absolute; inset: 0; background: linear-gradient(90deg, var(--brand-500), var(--brand-700)); transform: scaleX(0); transform-origin: 0 50%; }
.journey__dot { position: absolute; top: 50%; left: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--brand-600); box-shadow: 0 0 0 6px rgba(20,149,163,.18), 0 0 20px rgba(20,149,163,.6); }
.steps { position: relative; z-index: 1; }
.step .step__icon { transition: transform .4s var(--ease), background .4s, color .4s, border-color .4s; }
.step.is-active .step__icon { background: var(--brand-700); color: #fff; border-color: var(--brand-700); transform: translateY(-4px); }
.step.is-active .step__num { color: var(--brand-700); }
html:not(.motion) .journey__line { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .journey__line { display: none; }
}
@media (max-width: 720px) {
  .panel { grid-template-columns: 1fr; }
  .panel__media img { min-height: 220px; max-height: 260px; }
  .hs__head { flex-direction: column; align-items: flex-start; }
  .hs__count { display: none; }
  .orbit__stage { --R: 32vw; width: 92vw; }
  .orbit__chips span { flex-direction: column; gap: 4px; padding: 7px 8px; font-size: .62rem; white-space: normal; text-align: center; max-width: 86px; border-radius: 14px; line-height: 1.15; }
  .orbit__chips .ico { width: 14px; height: 14px; }
  .orbit__caption p { font-size: .95rem; }
  .marquee__row .o { -webkit-text-stroke-width: 1px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__mouse i { animation: none; }
}

/* ---------- performance: give every scroll-driven element its own GPU layer
   so it is moved by the compositor instead of being repainted each frame ---------- */
html.motion .stats__word,
html.motion .panel__bg-word,
html.motion .orbit__ring,
html.motion .orbit__chips li,
html.motion .orbit__word,
html.motion .orbit__caption,
html.motion .arch img,
html.motion [data-parallax-group] img,
html.hs-on .panel__media img { will-change: transform, opacity; backface-visibility: hidden; }
/* paint containment keeps repaints inside each scene */
.orbit__pin, .hs__pin, .marquee, .stats, .manifesto { contain: paint; }