/* NovaMed illustrations. Each SVG is drawn in its finished state by the markup alone; the loops run only on
   html.motion while the SVG is on screen (.is-playing, set by site.js), so reduced-motion visitors see the finished
   picture. Every loop fades the scene out 90 to 95% and resets unseen, so each take starts clean. Staggers are written
   as their own keyframes, never animation-delay, so all parts stay on one clock. */
.anim { display: block; width: 100%; height: auto; overflow: visible; }
.anim * { transform-box: fill-box; transform-origin: center; }
.anim [transform] { transform-box: view-box; transform-origin: 0 0; }

/* Shared strokes and fills, all from the page tokens so both themes read. */
.anim .a-disc { fill: var(--anim-disc); stroke: none; }
.anim .a-seat, .anim .a-body, .anim .a-fig, .anim .a-state, .anim .a-track { stroke: var(--ink); stroke-width: 2; }
.anim .a-state { fill: var(--panel); }
.anim .a-track { stroke: var(--line-strong); stroke-width: 10; }
.anim .a-head { fill: var(--panel); stroke: var(--ink); stroke-width: 2; }
.anim .a-ink { stroke: var(--ink); stroke-width: 2; }
.anim .a-w3 { stroke-width: 3; }
.anim .a-dot { fill: var(--ink); stroke: none; }
.anim .a-bone { fill: var(--panel); stroke: var(--ink); stroke-width: 2; }
.anim .a-hot, .anim .mp-hot, .anim .sp-hot { fill: var(--brake); stroke: none; }
.anim .a-paper { fill: var(--panel); stroke: var(--ink); stroke-width: 2; }
.anim .a-cobalt-fill { fill: var(--cobalt); stroke: none; }
.anim .a-cobalt-soft { fill: var(--cobalt-soft); stroke: none; }
.anim .a-cobalt-line { stroke: var(--cobalt); stroke-width: 2; }
.anim .a-on-cobalt { stroke: var(--on-cobalt); stroke-width: 3; }
.anim .a-badge { fill: var(--cobalt); stroke: none; }
.anim .a-tick { stroke: var(--on-cobalt); stroke-width: 3; }
.anim .a-guide { stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: .03 .03; }
.anim .a-guide-solid { stroke: var(--line-strong); stroke-width: 3; }
.anim .a-folder-back { fill: var(--amber-soft); stroke: var(--ink); stroke-width: 2; }
.anim .a-folder-front { fill: var(--amber); stroke: var(--ink); stroke-width: 2; }
.anim .a-on-folder { stroke: var(--ink); stroke-width: 3; opacity: .45; }
.anim .a-arm { stroke: var(--ink); stroke-width: 7; }
.anim .a-spark { fill: var(--amber); stroke: none; }
.anim .a-label { font: 600 11px/1 var(--mono); fill: var(--mute); stroke: none; text-anchor: middle; letter-spacing: .06em; }
.anim .a-label--strong { font-size: 15px; fill: var(--ink); text-anchor: start; font-weight: 700; }
.anim .a-label--on { fill: var(--on-cobalt); }
.anim .mp-ring { stroke: var(--line-strong); stroke-width: 1.5; }
.anim .mp-ok, .anim .sp-ok { fill: var(--cobalt); stroke: none; }
.anim .mp-hot, .anim .nk-hurt, .anim .sp-hot, .anim .nk-scan, .anim .nk-motion, .anim .sp-ring, .anim .sp-ache, .anim .pp-ripple { opacity: 0; }
.anim .nk-scan { stroke: var(--cobalt); stroke-width: 3; }
.anim .nk-motion, .anim .sp-ache { stroke: var(--brake); stroke-width: 2.5; }
.anim .sp-ring { stroke: var(--cobalt); stroke-width: 2; }
.anim .dc-ln { stroke: var(--line-strong); stroke-width: 4; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.anim .dc-sig { stroke: var(--cobalt); stroke-width: 2.5; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.anim .pp-tk { stroke: var(--cobalt); stroke-width: 3; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.anim .rm-fill { stroke: var(--cobalt); stroke-width: 10; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.anim .mp-cross { transform-box: view-box; transform-origin: 0 0; transform: translate(132px, 188px); }
.anim .nk-head { transform-box: view-box; transform-origin: 120px 142px; }
.anim .rm-arm { transform-box: view-box; transform-origin: 120px 160px; transform: rotate(135deg); }

html.motion .anim.is-playing .anim__scene { animation: a-scene var(--d) linear infinite both; }
@keyframes a-scene { 0% { opacity: 0; } 4%, 90% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes a-spark { 0%, 70% { opacity: 0; transform: scale(.3) rotate(-40deg); } 76% { opacity: 1; transform: scale(1.2) rotate(0); } 80%, 90% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(.3); } }
html.motion .anim.is-playing .a-spark { animation: a-spark var(--d) cubic-bezier(.22,1,.36,1) infinite both; }

/* ---------- Whiplash: back, forward, scanned, settled. 7 s ----------
   Head snaps back 6 to 12%, forward 12 to 20%, rebounds to rest by 30%; the neck glows red 12 to 44%; the scan
   line passes down it 44 to 58%; the badge lands 62%. */
.anim--neck { --d: 7s; }
html.motion .anim--neck.is-playing .nk-head { animation: nk-head var(--d) cubic-bezier(.3,0,.2,1) infinite both; }
html.motion .anim--neck.is-playing .nk-hurt { animation: nk-hurt var(--d) ease-in-out infinite both; }
html.motion .anim--neck.is-playing .nk-motion--b { animation: nk-mb var(--d) ease-out infinite both; }
html.motion .anim--neck.is-playing .nk-motion--f { animation: nk-mf var(--d) ease-out infinite both; }
html.motion .anim--neck.is-playing .nk-scan { animation: nk-scan var(--d) cubic-bezier(.65,0,.35,1) infinite both; }
html.motion .anim--neck.is-playing .nk-badge { animation: nk-badge var(--d) cubic-bezier(.22,1,.36,1) infinite both; }
@keyframes nk-head { 0%, 6% { transform: rotate(0); } 11% { transform: rotate(-17deg); } 19% { transform: rotate(13deg); } 25% { transform: rotate(-3deg); } 30%, 100% { transform: rotate(0); } }
@keyframes nk-hurt { 0%, 11% { opacity: 0; } 15%, 22% { opacity: 1; } 28% { opacity: .55; } 34% { opacity: .9; } 44%, 100% { opacity: 0; } }
@keyframes nk-mb { 0%, 7% { opacity: 0; transform: translateX(6px); } 11% { opacity: 1; transform: translateX(0); } 17%, 100% { opacity: 0; transform: translateX(-6px); } }
@keyframes nk-mf { 0%, 13% { opacity: 0; transform: translateX(-6px); } 18% { opacity: 1; transform: translateX(0); } 25%, 100% { opacity: 0; transform: translateX(6px); } }
@keyframes nk-scan { 0%, 42% { opacity: 0; transform: translateY(0); } 44% { opacity: 1; transform: translateY(0); } 56% { opacity: 1; transform: translateY(30px); } 60%, 100% { opacity: 0; transform: translateY(30px); } }
@keyframes nk-badge { 0%, 58% { opacity: 0; transform: scale(.4); } 64% { opacity: 1; transform: scale(1.15); } 68%, 100% { opacity: 1; transform: scale(1); } }

/* ---------- Body map: the exam visits four points. 8 s ----------
   The crosshair lands on neck 12%, shoulder 28%, low back 44%, knee 60%; each point flares red as it lands and turns
   cobalt 6% later; the 4 / 4 tag lands 70%. */
.anim--map { --d: 8s; }
html.motion .anim--map.is-playing .mp-cross { animation: mp-cross var(--d) cubic-bezier(.65,0,.35,1) infinite both; }
html.motion .anim--map.is-playing .mp-tag { animation: nk-badge var(--d) cubic-bezier(.22,1,.36,1) infinite both; }
@keyframes mp-cross { 0%, 4% { transform: translate(120px, 74px) scale(1.6); opacity: 0; } 9% { opacity: 1; } 12%, 18% { transform: translate(120px, 74px) scale(1); opacity: 1; }
  28%, 34% { transform: translate(148px, 92px); } 44%, 50% { transform: translate(120px, 132px); } 60%, 66% { transform: translate(132px, 188px); opacity: 1; } 74%, 100% { transform: translate(132px, 188px); opacity: 0; } }
html.motion .anim--map.is-playing .mp-pt--1 .mp-hot { animation: mp-hot1 var(--d) ease-out infinite both; }
html.motion .anim--map.is-playing .mp-pt--2 .mp-hot { animation: mp-hot2 var(--d) ease-out infinite both; }
html.motion .anim--map.is-playing .mp-pt--3 .mp-hot { animation: mp-hot3 var(--d) ease-out infinite both; }
html.motion .anim--map.is-playing .mp-pt--4 .mp-hot { animation: mp-hot4 var(--d) ease-out infinite both; }
html.motion .anim--map.is-playing .mp-pt--1 .mp-ok { animation: mp-ok1 var(--d) cubic-bezier(.22,1,.36,1) infinite both; }
html.motion .anim--map.is-playing .mp-pt--2 .mp-ok { animation: mp-ok2 var(--d) cubic-bezier(.22,1,.36,1) infinite both; }
html.motion .anim--map.is-playing .mp-pt--3 .mp-ok { animation: mp-ok3 var(--d) cubic-bezier(.22,1,.36,1) infinite both; }
html.motion .anim--map.is-playing .mp-pt--4 .mp-ok { animation: mp-ok4 var(--d) cubic-bezier(.22,1,.36,1) infinite both; }
@keyframes mp-hot1 { 0%, 11% { opacity: 0; transform: scale(.4); } 13% { opacity: 1; transform: scale(1.5); } 18%, 100% { opacity: 0; transform: scale(1); } }
@keyframes mp-hot2 { 0%, 27% { opacity: 0; transform: scale(.4); } 29% { opacity: 1; transform: scale(1.5); } 34%, 100% { opacity: 0; transform: scale(1); } }
@keyframes mp-hot3 { 0%, 43% { opacity: 0; transform: scale(.4); } 45% { opacity: 1; transform: scale(1.5); } 50%, 100% { opacity: 0; transform: scale(1); } }
@keyframes mp-hot4 { 0%, 59% { opacity: 0; transform: scale(.4); } 61% { opacity: 1; transform: scale(1.5); } 66%, 100% { opacity: 0; transform: scale(1); } }
@keyframes mp-ok1 { 0%, 17% { opacity: 0; transform: scale(.3); } 20%, 100% { opacity: 1; transform: scale(1); } }
@keyframes mp-ok2 { 0%, 33% { opacity: 0; transform: scale(.3); } 36%, 100% { opacity: 1; transform: scale(1); } }
@keyframes mp-ok3 { 0%, 49% { opacity: 0; transform: scale(.3); } 52%, 100% { opacity: 1; transform: scale(1); } }
@keyframes mp-ok4 { 0%, 65% { opacity: 0; transform: scale(.3); } 68%, 100% { opacity: 1; transform: scale(1); } }

/* ---------- Records: the report writes itself and files away. 8 s ----------
   Five lines write 6 to 40%, the signature 44 to 56%, the page drops into the folder 60 to 72%. */
.anim--doc { --d: 8s; }
html.motion .anim--doc.is-playing .dc-ln--1 { animation: dc-l1 var(--d) linear infinite both; }
html.motion .anim--doc.is-playing .dc-ln--2 { animation: dc-l2 var(--d) linear infinite both; }
html.motion .anim--doc.is-playing .dc-ln--3 { animation: dc-l3 var(--d) linear infinite both; }
html.motion .anim--doc.is-playing .dc-ln--4 { animation: dc-l4 var(--d) linear infinite both; }
html.motion .anim--doc.is-playing .dc-ln--5 { animation: dc-l5 var(--d) linear infinite both; }
html.motion .anim--doc.is-playing .dc-sig { animation: dc-sig var(--d) ease-in-out infinite both; }
html.motion .anim--doc.is-playing .dc-page { animation: dc-page var(--d) cubic-bezier(.55,0,.3,1) infinite both; }
@keyframes dc-l1 { 0%, 6% { stroke-dashoffset: 1; } 12%, 100% { stroke-dashoffset: 0; } }
@keyframes dc-l2 { 0%, 13% { stroke-dashoffset: 1; } 19%, 100% { stroke-dashoffset: 0; } }
@keyframes dc-l3 { 0%, 20% { stroke-dashoffset: 1; } 26%, 100% { stroke-dashoffset: 0; } }
@keyframes dc-l4 { 0%, 27% { stroke-dashoffset: 1; } 33%, 100% { stroke-dashoffset: 0; } }
@keyframes dc-l5 { 0%, 34% { stroke-dashoffset: 1; } 40%, 100% { stroke-dashoffset: 0; } }
@keyframes dc-sig { 0%, 44% { stroke-dashoffset: 1; } 56%, 100% { stroke-dashoffset: 0; } }
@keyframes dc-page { 0% { transform: translateY(-46px); } 60% { transform: translateY(-46px); } 70% { transform: translateY(4px); } 74%, 100% { transform: translateY(0); } }

/* ---------- Michigan No-Fault: pin, card, three ticks. 7 s ----------
   The pin drops 6 to 14% with a ripple, the card rises 20 to 32%, rows tick 38, 46, 54%. */
.anim--pip { --d: 7s; }
html.motion .anim--pip.is-playing .pp-pin { animation: pp-pin var(--d) cubic-bezier(.3,1.4,.5,1) infinite both; }
html.motion .anim--pip.is-playing .pp-ripple { animation: pp-ripple var(--d) ease-out infinite both; }
html.motion .anim--pip.is-playing .pp-card { animation: pp-card var(--d) cubic-bezier(.22,1,.36,1) infinite both; }
html.motion .anim--pip.is-playing .pp-tk--1 { animation: pp-t1 var(--d) ease-out infinite both; }
html.motion .anim--pip.is-playing .pp-tk--2 { animation: pp-t2 var(--d) ease-out infinite both; }
html.motion .anim--pip.is-playing .pp-tk--3 { animation: pp-t3 var(--d) ease-out infinite both; }
@keyframes pp-pin { 0%, 6% { opacity: 0; transform: translateY(-40px); } 14%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes pp-ripple { 0%, 13% { opacity: 0; transform: scale(.4); } 15% { opacity: 1; } 26%, 100% { opacity: 0; transform: scale(2.4); } }
@keyframes pp-card { 0%, 20% { opacity: 0; transform: translateY(40px); } 32%, 100% { opacity: 1; transform: translateY(0); } }
@keyframes pp-t1 { 0%, 38% { stroke-dashoffset: 1; } 42%, 100% { stroke-dashoffset: 0; } }
@keyframes pp-t2 { 0%, 46% { stroke-dashoffset: 1; } 50%, 100% { stroke-dashoffset: 0; } }
@keyframes pp-t3 { 0%, 54% { stroke-dashoffset: 1; } 58%, 100% { stroke-dashoffset: 0; } }

/* ---------- Range of motion: three visits, the arm lifts higher each time. 8 s ----------
   45° at 10 to 22%, 90° at 30 to 42%, 135° at 50 to 62%; the arm dips a little between visits; the reading lands 66%. */
.anim--rom { --d: 8s; }
html.motion .anim--rom.is-playing .rm-arm { animation: rm-arm var(--d) cubic-bezier(.45,0,.3,1) infinite both; }
html.motion .anim--rom.is-playing .rm-fill { animation: rm-fill var(--d) cubic-bezier(.45,0,.3,1) infinite both; }
html.motion .anim--rom.is-playing .rm-read { animation: nk-badge var(--d) cubic-bezier(.22,1,.36,1) infinite both; }
@keyframes rm-arm { 0%, 4% { transform: rotate(0); } 12%, 20% { transform: rotate(45deg); } 25% { transform: rotate(30deg); } 32%, 40% { transform: rotate(90deg); } 45% { transform: rotate(75deg); } 54%, 100% { transform: rotate(135deg); } }
@keyframes rm-fill { 0%, 4% { stroke-dashoffset: 1; } 12%, 25% { stroke-dashoffset: .667; } 32%, 45% { stroke-dashoffset: .333; } 54%, 100% { stroke-dashoffset: 0; } }

/* ---------- Low back: the L4-L5 disc flares, cools, settles. 7 s ----------
   Ache marks and the red disc throb 6 to 36%; two cooling rings pass 36 to 60%; the disc turns cobalt 48%. */
.anim--spine { --d: 7s; }
html.motion .anim--spine.is-playing .sp-hot { animation: sp-hot var(--d) ease-in-out infinite both; }
html.motion .anim--spine.is-playing .sp-ok { animation: sp-ok var(--d) ease-out infinite both; }
html.motion .anim--spine.is-playing .sp-ache { animation: sp-ache var(--d) ease-in-out infinite both; }
html.motion .anim--spine.is-playing .sp-ring--1 { animation: sp-r1 var(--d) ease-out infinite both; }
html.motion .anim--spine.is-playing .sp-ring--2 { animation: sp-r2 var(--d) ease-out infinite both; }
@keyframes sp-hot { 0%, 4% { opacity: 0; } 10% { opacity: 1; } 16% { opacity: .5; } 22% { opacity: 1; } 28% { opacity: .5; } 34% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes sp-ok { 0%, 44% { opacity: 0; } 52%, 100% { opacity: 1; } }
@keyframes sp-ache { 0%, 6% { opacity: 0; } 12%, 30% { opacity: 1; } 38%, 100% { opacity: 0; } }
@keyframes sp-r1 { 0%, 36% { opacity: 0; transform: scale(.3); } 38% { opacity: 1; } 52%, 100% { opacity: 0; transform: scale(1.4); } }
@keyframes sp-r2 { 0%, 44% { opacity: 0; transform: scale(.3); } 46% { opacity: 1; } 60%, 100% { opacity: 0; transform: scale(1.4); } }