/* ==========================================================================
   SATTVARIG V4 EXPERIENTIAL LAYER, take 2 (DP's call 2026-08-21).
   The v3 reskin is gone: fonts, colors, sizes and layout are the ORIGINAL
   live sattvarig.com design system (ui.css v19), untouched. This file adds
   exactly two things on top:
   1. The photo slots the v4 markup carries (real clinic photography in the
      hero, service cards and first-visit section), styled with ui.css's own
      tokens so they inherit the original look in both themes.
   2. A quiet motion layer: scroll progress line, gentle reveals, card lifts,
      photo zooms. Motion only, zero re-theming.
   The sr-legacy layer (body scanner, reels, ice bath) is not touched.
   ========================================================================== */

/* ---------- 1. PHOTO SLOTS (structure only, tokens from ui.css) ---------- */

/* hero photo + snapshot card overlap */
.hero-visual{position:relative;min-width:0}
.hero-visual .hv-photo{display:block;width:100%;aspect-ratio:4/3.2;object-fit:cover;
  border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow-lg)}
.hero-visual .est-card{margin:-64px 12px 0;position:relative;z-index:2}
@media (min-width:961px){.hero-visual .est-card{margin:-78px 20px 0}}

/* image tops on service cards */
.gcard{position:relative}
.gcard .gc-img{display:block;margin:-22px -22px 16px;aspect-ratio:16/10;overflow:hidden;
  border-radius:var(--radius) var(--radius) 0 0;background:var(--glass)}
.gcard .gc-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s cubic-bezier(.16,1,.3,1)}
.gcard:hover .gc-img img{transform:scale(1.05)}

/* service page hero photo */
.page-hero-photo{display:block;width:100%;max-height:440px;object-fit:cover;
  border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow-lg);margin-top:30px}
@media (max-width:720px){.page-hero-photo{border-radius:var(--radius-sm);margin-top:22px;max-height:300px}}

/* the first-visit photo */
.visit-photo{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-sm);
  border:1px solid var(--line);box-shadow:var(--shadow-soft);margin-top:24px}

/* the footer credit */
.dp-credit a{color:var(--accent);font-weight:600}
.dp-credit a:hover{text-decoration:underline}

/* ---------- 2. MOTION LAYER (no colors changed, accent comes from ui.css) ---------- */

/* the scroll pulse up top */
.v4-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:200;
  background:var(--accent);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}

/* the top bar tightens once you are reading */
.topbar{transition:box-shadow .3s ease}
.topbar.v4-scrolled{box-shadow:0 8px 30px -14px rgba(0,0,0,.25)}

/* reveals ride the original .reveal transition, just a touch deeper */
.reveal{transform:translateY(22px)}
.reveal.in{transform:none}

/* cards feel alive under the hand */
.gcard,.quote,.stat,.npcard{transition:transform .35s cubic-bezier(.16,1,.3,1),
  box-shadow .35s ease,border-color .35s ease}
.gcard:hover,.npcard:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.quote:hover,.stat:hover{transform:translateY(-4px)}

/* marquee: soft edges, pauses to be read */
.marquee{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee:hover .marquee-track{animation-play-state:paused}

/* photos get a gentle life on hover */
.visit-photo,.page-hero-photo{transition:transform .5s cubic-bezier(.16,1,.3,1)}
.visit-photo:hover,.page-hero-photo:hover{transform:scale(1.01)}

/* ---------- phone: hovers off, thinner progress line ---------- */
@media (max-width:720px){
  .v4-progress{height:2.5px}
  .gcard:hover,.npcard:hover,.quote:hover,.stat:hover{transform:none}
  .hero-visual .est-card{margin:-52px 10px 0}
}

/* reduced motion: everything decorative sits still */
@media (prefers-reduced-motion: reduce){
  .v4-progress{display:none}
  .gcard .gc-img img,.visit-photo,.page-hero-photo{transition:none}
}

/* ============================================================
   ARTICLE DIAGRAMS (.prose-dia)
   Hand-authored SVG, not generated art. Anatomy and clinical
   mechanism have to be RIGHT on a physio site, and a diagram
   drawn by hand can be checked; a generated one cannot. Uses
   the site's own tokens so it follows light and dark for free
   and costs nothing to load.
   ============================================================ */
.prose-dia svg{display:block;width:100%;height:auto;background:var(--glass-hi);padding:10px 6px}
.prose-dia .dia-body{color:var(--text-3);opacity:.85}
.prose-dia .dia-pt circle{fill:var(--accent);stroke:var(--paper);stroke-width:3}
.prose-dia .dia-lead{color:var(--line-strong);opacity:.9}
.prose-dia .dia-lbl text{font-family:"JetBrains Mono",monospace;font-size:14px;
  letter-spacing:.04em;fill:var(--text-2)}
.prose-dia .dia-axis{color:var(--line-strong)}
.prose-dia .dia-axis-t text{font-family:"JetBrains Mono",monospace;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;fill:var(--text-3)}
.prose-dia .dia-cap{stroke:var(--text-3);opacity:.75;stroke-dasharray:7 7}
.prose-dia .dia-load{stroke:var(--accent)}
.prose-dia .dia-risk ellipse{fill:none;stroke:var(--danger);stroke-width:2.2;
  stroke-dasharray:5 7;opacity:.9}
.prose-dia .dia-cap-t{fill:var(--text-3)}
.prose-dia .dia-load-t{fill:var(--accent)}
.prose-dia .dia-risk-t{fill:var(--danger);font-family:"Caveat",cursive;font-size:21px;letter-spacing:0}
@media (max-width:720px){
  .prose-dia .dia-lbl text{font-size:17px}
  .prose-dia .dia-axis-t text{font-size:15px}
  .prose-dia .dia-risk-t{font-size:26px}
}
/* diagram parts used by the generated article figures */
.prose-dia .dia-bar rect{fill:var(--accent);opacity:.16;stroke:var(--accent);stroke-width:1.5}
.prose-dia .dia-bar rect:last-child{opacity:.34}
.prose-dia .dia-track rect{fill:var(--line);opacity:.5}
.prose-dia .dia-cap-bar{fill:var(--text-3);opacity:.55}
.prose-dia .dia-load-bar{fill:var(--accent)}
.prose-dia .dia-gap{color:var(--danger);opacity:.75}
.prose-dia .dia-pt circle.dia-final{fill:var(--accent);stroke:var(--accent);stroke-width:5;
  stroke-opacity:.28;paint-order:stroke}
.prose-dia .dia-fit text{font-size:var(--dia-fs,14px)}
.prose-dia .dia-sub text{font-size:11px;letter-spacing:.07em}
/* comparison columns */
.prose-dia .dia-col{fill:var(--accent-soft);stroke:var(--line);stroke-width:1.2}
.prose-dia .dia-col.tone-warn{fill:var(--warn-soft);stroke:var(--gold-line)}
.prose-dia .dia-col.tone-plain{fill:var(--line-soft);stroke:var(--line)}
.prose-dia .dia-col-h{font-family:"Plus Jakarta Sans",sans-serif;font-size:17px;font-weight:700;
  letter-spacing:-.01em;fill:var(--text-1)}
.prose-dia .dia-col-h.tone-warn{fill:var(--warn)}
.prose-dia .dia-col-t{font-family:"Plus Jakarta Sans",sans-serif;font-size:14px;fill:var(--text-2)}
.prose-dia .dia-tick.yes{fill:var(--accent)}
.prose-dia .dia-tick.no{fill:none;stroke:var(--text-3);stroke-width:2}
/* bars */
.prose-dia .dia-track-bar{fill:var(--line);opacity:.45}
.prose-dia .dia-warn-bar{fill:var(--warn)}
.prose-dia .dia-val{font-family:"JetBrains Mono",monospace;font-size:13px;font-weight:600;fill:var(--text-1)}
/* layered system */
.prose-dia .dia-layer{fill:var(--accent);stroke:var(--accent);stroke-width:1.2;
  opacity:calc(0.10 + var(--l) * 0.07)}
.prose-dia .dia-layer-n{font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;fill:var(--accent)}
.prose-dia .dia-layer-t{font-family:"Plus Jakarta Sans",sans-serif;font-size:15px;font-weight:600;fill:var(--text-1)}
/* loop */
.prose-dia .dia-node{fill:var(--glass-hi);stroke:var(--line);stroke-width:1.4}
.prose-dia .dia-arrow{color:var(--accent)}
/* desk setup */
.prose-dia .dia-cp{fill:var(--accent);stroke:var(--paper);stroke-width:2.5}
.prose-dia .dia-axis-sm{font-family:"JetBrains Mono",monospace;font-size:11px;
  letter-spacing:.08em;fill:var(--text-3)}
.prose-dia .dia-leadp{color:var(--line-strong);opacity:.9}
.prose-dia .dia-zone{font-family:"JetBrains Mono",monospace;font-size:13px;fill:var(--text-2)}
.prose-dia .dia-val.on-bar{fill:#fff}