/* ==========================================================================================
   PHYSIOTHERAPIST INDIA 2.0 — art.css (Phase C, original illustration and motion set)
   NOT DEPLOYED. Loads after ../phase-b/pti2.css and uses its tokens (--pti-*).

   Motion rules (Plan Part 8, Rule G7):
   - Interactions 150–350 ms. Every hover/focus movement below is ≤ 350 ms per movement.
   - Plays once: the hero light (≈ 3.75 s total, then rests) and the guided-path draw (on first view).
   - At most two things move at once. Nothing moves behind reading text. No loops, parallax,
     scroll-jacking, flashing, preloaders or count-up numbers.
   - Every SVG's static style IS its final state. Animations only run FROM a start state TO that
     state, so with `prefers-reduced-motion: reduce` (animation:none) everything is simply still
     and complete. The same holds if this file fails to load.
   ========================================================================================== */


/* ------------------------------------------------------------------------------------------
   1. HERO FIGURE — a line of light travels once along the spine and limbs, then rests
   ------------------------------------------------------------------------------------------ */
.pa-hero{ display:block; width:100%; height:auto; max-width:560px; }

/* pathway A: skull base → spine → hip → knee → ankle; pathway B: T1 → shoulder → elbow → wrist */
.pa-hero .pah-tr--a{ animation:pa-trace 2.8s cubic-bezier(.45,.05,.35,1) .3s both; }
.pa-hero .pah-tr--b{ animation:pa-trace 1.9s cubic-bezier(.45,.05,.35,1) 1s both; }
.pa-hero .pah-co--a{ animation:pa-comet 2.8s cubic-bezier(.45,.05,.35,1) .3s both; }
.pa-hero .pah-co--b{ animation:pa-comet 1.9s cubic-bezier(.45,.05,.35,1) 1s both; }

/* annotations fade in one after another once the light has passed (nothing else is moving then) */
.pa-hero .pah-ann{ animation:pa-fade-up var(--pti-dur-slow,350ms) var(--pti-ease,ease) both; }
.pa-hero .pah-ann--1{ animation-delay:3.05s; }
.pa-hero .pah-ann--2{ animation-delay:3.25s; }
.pa-hero .pah-ann--3{ animation-delay:3.45s; }

@keyframes pa-trace{ from{ stroke-dashoffset:1000; } to{ stroke-dashoffset:0; } }
@keyframes pa-comet{
  0%  { stroke-dashoffset:80; opacity:1; }
  88% { opacity:1; }
  100%{ stroke-dashoffset:-1000; opacity:0; }
}
@keyframes pa-fade-up{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }

/* Phones: the hero art is about 340 px wide, so the 11.5 px labels would fall to about 7 px.
   They are dropped there (the same words are in the figure's description). */
@media (max-width:599px){ .pa-hero .pah-ann{ display:none; } }


/* ------------------------------------------------------------------------------------------
   2. AUDIENCE ILLUSTRATIONS — static. The card lift comes from pti2.css (.pti-card--link).
   ------------------------------------------------------------------------------------------ */
.pa-aud{ display:block; width:100%; height:auto; }


/* ------------------------------------------------------------------------------------------
   3. SPECIALTY TILES — move only on :hover or :focus-visible of the tile. Nothing self-starts.
   The tile is the card (.pa-tile); its title link stretches over it, so keyboard focus lands on
   the link and :has(:focus-visible) carries it to the art.
   ------------------------------------------------------------------------------------------ */
.pa-tile-art{ display:block; width:96px; height:96px; flex:none; }
@media (max-width:599px){ .pa-tile-art{ width:72px; height:72px; } }

/* default for every tile: a quiet highlight of the teal accent (no movement) */
.pa-tile .pa-acc{ opacity:.72; transition:opacity var(--pti-dur,200ms) var(--pti-ease,ease); }
.pa-tile:hover .pa-acc,
.pa-tile:has(:focus-visible) .pa-acc{ opacity:1; }

/* Neurological — a signal runs once along the axon (350 ms), then the terminals light */
.pa-tile .pa-signal{ stroke-dashoffset:14; }
.pa-tile:hover .pa-signal,
.pa-tile:has(:focus-visible) .pa-signal{ animation:pa-signal var(--pti-dur-slow,350ms) cubic-bezier(.4,0,.2,1) 1 both; }
@keyframes pa-signal{ from{ stroke-dashoffset:14; } to{ stroke-dashoffset:-100; } }
.pa-tile .pa-tile-art--neuro .pa-acc circle{ transition:fill var(--pti-dur-fast,150ms) ease; }
.pa-tile:hover .pa-tile-art--neuro .pa-acc circle,
.pa-tile:has(:focus-visible) .pa-tile-art--neuro .pa-acc circle{ fill:var(--pti-tint-teal,#EAF8F8); transition-delay:300ms; }

/* Cardiopulmonary — two gentle breaths and stop: lungs widen, diaphragm descends.
   Each rise and each fall is 350 ms (2 cycles = 1.4 s), then still. */
.pa-tile .pa-lungs{ transform-box:fill-box; transform-origin:50% 100%; }
.pa-tile .pa-diaphragm{ transform-box:fill-box; transform-origin:50% 50%; }
.pa-tile:hover .pa-lungs,
.pa-tile:has(:focus-visible) .pa-lungs{ animation:pa-breathe 700ms ease-in-out 2; }
.pa-tile:hover .pa-diaphragm,
.pa-tile:has(:focus-visible) .pa-diaphragm{ animation:pa-diaphragm 700ms ease-in-out 2; }
@keyframes pa-breathe{ 0%,100%{ transform:none; } 50%{ transform:scale(1.04,1.035); } }
@keyframes pa-diaphragm{ 0%,100%{ transform:none; } 50%{ transform:translateY(2.5px); } }

/* Biomechanics — the shank swings about the knee through 40° of extension (350 ms), and back */
.pa-tile .pa-shank{ transform-box:view-box; transform-origin:64px 46px;
  transition:transform var(--pti-dur-slow,350ms) cubic-bezier(.4,0,.2,1); }
.pa-tile:hover .pa-shank,
.pa-tile:has(:focus-visible) .pa-shank{ transform:rotate(-40deg); }

/* Women's and pelvic health — the pelvic-floor sling lifts slightly (a contraction), 300 ms */
.pa-tile .pa-floor{ transition:transform 300ms var(--pti-ease,ease),opacity var(--pti-dur,200ms) ease; }
.pa-tile:hover .pa-floor,
.pa-tile:has(:focus-visible) .pa-floor{ transform:translateY(-3px); }

/* Electrotherapy — the pulse trace redraws once, left to right (350 ms) */
.pa-tile:hover .pa-wave,
.pa-tile:has(:focus-visible) .pa-wave{ stroke-dasharray:100; animation:pa-draw var(--pti-dur-slow,350ms) linear 1 both; }
@keyframes pa-draw{ from{ stroke-dashoffset:100; } to{ stroke-dashoffset:0; } }

/* Research and evidence — the pooled estimate fills */
.pa-tile .pa-diamond{ transition:fill var(--pti-dur,200ms) ease,opacity var(--pti-dur,200ms) ease; }
.pa-tile:hover .pa-diamond,
.pa-tile:has(:focus-visible) .pa-diamond{ fill:var(--pti-teal,#0EAEAB); }


/* ------------------------------------------------------------------------------------------
   4. BODY EXPLORER — regions highlight on hover, focus and selection (no movement)
   ------------------------------------------------------------------------------------------ */
.pa-explorer{ display:block; width:100%; height:auto; max-width:420px; margin-inline:auto; }
.pa-explorer .pab-hit{ transition:fill-opacity var(--pti-dur-fast,150ms) ease,stroke-opacity var(--pti-dur-fast,150ms) ease; }
.pa-explorer .pab-region:hover .pab-hit{ fill-opacity:.12; stroke-opacity:.9; }
.pa-explorer .pab-region[aria-pressed="true"] .pab-hit{ fill-opacity:.22; stroke:var(--pti-teal-text,#086A68); stroke-opacity:1; stroke-width:2; }
/* pti2.css draws a box outline on any [tabindex]:focus-visible; the region's own outline replaces it here */
.pti .pa-explorer .pab-region:focus-visible{ outline:none; }
/* focus: the link-blue ring (5.2:1 on white), drawn on the region's own outline */
.pa-explorer .pab-region:focus-visible .pab-hit{ fill-opacity:.12; stroke:var(--pti-blue,#2563EB); stroke-opacity:1; stroke-width:2.5; }
.pa-explorer .pab-region:focus-visible[aria-pressed="true"] .pab-hit{ fill-opacity:.22; }

.pa-explorer-wrap{ display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:var(--pti-s7,48px); align-items:start; }
@media (max-width:767px){ .pa-explorer-wrap{ grid-template-columns:1fr; gap:var(--pti-s5,24px); } .pa-explorer{ max-width:300px; } }
.pa-panel{ background:var(--pti-white,#fff); border:1px solid var(--pti-line,#E2E8F0); border-radius:var(--pti-r-card,12px);
  box-shadow:var(--pti-shadow-1); padding:var(--pti-s5,24px); }
.pa-panel__hint{ margin:0; color:var(--pti-muted,#64748B); font-size:var(--pti-fs-ui,1rem); }
.pa-panel__name{ font:700 var(--pti-fs-h3) / 1.3 var(--pti-font-ui); color:var(--pti-navy,#013584); margin:0 0 var(--pti-s4,16px); }
.pa-panel__slots{ list-style:none; margin:0; padding:0; border-top:1px solid var(--pti-line,#E2E8F0); }
.pa-panel__slots li{ display:flex; flex-wrap:wrap; gap:4px 12px; align-items:baseline; justify-content:space-between;
  padding:12px 0; border-bottom:1px solid var(--pti-line,#E2E8F0); }
.pa-panel__slots b{ font-weight:700; color:var(--pti-ink,#1E293B); }
.pa-slot{ font-size:var(--pti-fs-small,.875rem); color:var(--pti-muted-strong,#475569); background:var(--pti-bg,#F7FAFC);
  border:1px dashed var(--pti-line-strong,#94A3B8); border-radius:6px; padding:2px 8px; }
.pa-region-list{ columns:2 220px; column-gap:var(--pti-s6,32px); margin:var(--pti-s5,24px) 0 0; padding:0; list-style:none; }
.pa-region-list li{ break-inside:avoid; padding:10px 0; border-bottom:1px solid var(--pti-line,#E2E8F0); }
.pa-region-list li > span:first-child{ display:block; font-weight:700; color:var(--pti-ink,#1E293B); }


/* ------------------------------------------------------------------------------------------
   5. GUIDED-COLLECTION PATH — draws once when it first scrolls into view.
   Static (fully drawn) unless guided-path.js arms it, so no script = no hidden content.
   ------------------------------------------------------------------------------------------ */
.pa-gpath-art{ display:block; width:100%; height:auto; }
.pa-gpath .pa-gp-node{ transform-box:fill-box; transform-origin:50% 50%; }
.pa-gpath.is-armed .pa-gp-line{ stroke-dashoffset:1000; }
.pa-gpath.is-armed .pa-gp-node{ opacity:0; transform:scale(.6); }
.pa-gpath.is-armed.is-drawn .pa-gp-line{ stroke-dashoffset:0; transition:stroke-dashoffset 1400ms cubic-bezier(.45,.05,.35,1); }
.pa-gpath.is-armed.is-drawn .pa-gp-node{ opacity:1; transform:none;
  transition:opacity 250ms var(--pti-ease,ease),transform 250ms var(--pti-ease,ease); transition-delay:calc(var(--i) * 290ms); }

.pa-gpath__steps{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--pti-s4,16px);
  list-style:none; margin:var(--pti-s3,12px) 0 0; padding:0; counter-reset:pa-step; text-align:center; }
.pa-gpath__steps li{ counter-increment:pa-step; font-size:var(--pti-fs-ui-sm,.9375rem); color:var(--pti-ink,#1E293B); }
.pa-gpath__steps li::before{ content:"Step " counter(pa-step); display:block; margin-bottom:4px;
  font:700 var(--pti-fs-eyebrow,.8125rem)/1.3 var(--pti-font-ui); letter-spacing:.1em; text-transform:uppercase; color:var(--pti-teal-text,#086A68); }

/* Below 768 px the path turns vertical: the SVG is hidden and the list carries its own line */
@media (max-width:767px){
  .pa-gpath-art{ display:none; }
  .pa-gpath__steps{ position:relative; grid-template-columns:1fr; gap:0; text-align:left; padding-left:40px; }
  .pa-gpath__steps::before{ content:""; position:absolute; left:13px; top:14px; bottom:14px; width:2.5px; border-radius:2px;
    background:var(--pti-teal,#0EAEAB); transform-origin:50% 0; }
  .pa-gpath__steps li{ position:relative; padding:10px 0 18px; }
  .pa-gpath__steps li::after{ content:""; position:absolute; left:-36px; top:10px; width:20px; height:20px; border-radius:50%; box-sizing:border-box;
    background:radial-gradient(circle,var(--pti-teal,#0EAEAB) 0 3.5px,#fff 4px); border:2px solid var(--pti-navy,#013584); }
  .pa-gpath.is-armed .pa-gpath__steps::before{ transform:scaleY(0); }
  .pa-gpath.is-armed.is-drawn .pa-gpath__steps::before{ transform:none; transition:transform 1400ms cubic-bezier(.45,.05,.35,1); }
}


/* ------------------------------------------------------------------------------------------
   6. EMPTY SEARCH / 404 and 7. SECTION DIVIDER — static
   ------------------------------------------------------------------------------------------ */
.pa-404{ display:block; width:100%; max-width:280px; height:auto; }
.pa-divider{ display:block; width:100%; height:40px; }


/* ------------------------------------------------------------------------------------------
   REDUCED MOTION — everything still and complete. (pti2.css also stops all SVG animation.)
   ------------------------------------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .pa-hero *, .pa-tile-art *, .pa-explorer *, .pa-gpath *{ animation:none!important; transition:none!important; }
  .pa-tile .pa-shank, .pa-tile .pa-floor{ transform:none!important; }
  .pa-gpath.is-armed .pa-gp-line{ stroke-dashoffset:0!important; }
  .pa-gpath.is-armed .pa-gp-node{ opacity:1!important; transform:none!important; }
  .pa-gpath.is-armed .pa-gpath__steps::before{ transform:none!important; }
}