/* ── Interactive body map ─────────────────────────────────────────── */
.body-svg { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; overflow: visible; }

.body-svg .aura { pointer-events: none; }
.body-svg .floor-shadow { fill: var(--accent); opacity: .12; filter: blur(3px); }
.body-svg .silhouette {
  fill: color-mix(in srgb, var(--accent) 5%, transparent);
  stroke: color-mix(in srgb, var(--accent) 45%, transparent);
  stroke-width: .8;
  pointer-events: none;
}
.body-svg .scan-wrap { pointer-events: none; }
.body-svg .scan { animation: body-scan 7s linear infinite; }
@keyframes body-scan { from { transform: translateY(0); } to { transform: translateY(1100px); } }

/* System colours */
.body-svg .sys { transition: opacity .45s var(--ease); }
.body-svg .sys.off { opacity: 0; pointer-events: none; }
.body-svg [data-system="integumentary"] { color: var(--c-skin); }
.body-svg [data-system="skeletal"] { color: var(--c-bone); }
.body-svg [data-system="muscular"] { color: var(--c-muscle); }
.body-svg [data-system="nervous"] { color: var(--c-nerve); }
.body-svg [data-system="cardiovascular"] { color: var(--c-artery); }
.body-svg [data-system="respiratory"] { color: var(--sys-respiratory); }
.body-svg [data-system="digestive"] { color: var(--sys-digestive); }
.body-svg [data-system="urinary"] { color: var(--sys-urinary); }
.body-svg [data-system="reproductive"] { color: var(--sys-reproductive); }
.body-svg [data-system="endocrine"] { color: var(--sys-endocrine); }
.body-svg [data-system="lymphatic"] { color: var(--c-lymph); }
.body-svg [data-system="senses"] { color: var(--sys-senses); }

/* Base shape styling: translucent fill + crisp outline in the part's colour */
.body-svg .part { cursor: pointer; transition: opacity .35s var(--ease), filter .25s var(--ease); }
.body-svg .part :is(path, rect, circle, ellipse) {
  fill: currentColor; fill-opacity: .16;
  stroke: currentColor; stroke-opacity: .85;
  stroke-linejoin: round;
  transition: fill-opacity .25s var(--ease), stroke-opacity .25s var(--ease);
}
.body-svg .part :is(path, rect, circle, ellipse):not([stroke-width]) { stroke-width: .6; }
.body-svg .part .ln { fill: none; stroke-opacity: .85; stroke-linecap: round; }
.body-svg .part .cap { stroke-linecap: round; }
.body-svg .part .thin { stroke-opacity: .55; }
.body-svg .part .dt { fill: none; stroke-opacity: .42; stroke-width: .45; pointer-events: none; }
.body-svg .part .fiber { fill: none; stroke-opacity: .3; stroke-width: .45; pointer-events: none; }
.body-svg .part .fiber.strong { stroke-opacity: .6; }
.body-svg .part .tendon { fill: none; stroke: var(--c-tendon); stroke-opacity: .55; stroke-width: .6; }
.body-svg .part .hole { fill: var(--bg); fill-opacity: .55; }
.body-svg .part .evenodd { fill-rule: evenodd; }
.body-svg .part .faint { fill-opacity: .05; stroke-opacity: .35; }
.body-svg .part .solid { fill-opacity: .85; }
.body-svg .part .post { stroke-opacity: .28; }
.body-svg .part .cart { fill: none; stroke: var(--c-cartilage); stroke-opacity: .55; stroke-linecap: round; }
.body-svg .part .teeth { fill: var(--c-enamel); fill-opacity: .35; stroke-width: .4; }
.body-svg .part .deepline { fill: none; stroke-dasharray: 2.4 1.8; stroke-opacity: .65; }
.body-svg .part .hit { fill: none; stroke: transparent; stroke-width: 7; stroke-linecap: round; pointer-events: stroke; }
.body-svg .part .skin-fill { fill-opacity: .07; stroke-opacity: .5; stroke-width: .8; }
.body-svg .part .silhouette { display: none; }
.body-svg .deep { opacity: .7; }
.body-svg .part .lung { fill-opacity: .14; }
.body-svg .part .organ-strong { fill-opacity: .3; }
.body-svg .part .heart-shape { fill-opacity: .35; stroke-width: .9; }
.body-svg .part .coronary { stroke: var(--c-artery); stroke-opacity: .8; }
.body-svg .part .brain-shape { fill-opacity: .2; }
.body-svg .part .node { fill-opacity: .55; }
.body-svg .part .ganglion { fill: currentColor; fill-opacity: .9; stroke: none; }
.body-svg .part .joint { fill: none; stroke: var(--c-cartilage); stroke-opacity: .55; stroke-width: .8; stroke-dasharray: 2 2.2; }
.body-svg .part .eyeball { fill: var(--ink); fill-opacity: .25; }
.body-svg .part .iris { fill: var(--sys-respiratory); fill-opacity: .7; stroke: none; }
.body-svg .part .pupil { fill: var(--bg); fill-opacity: 1; stroke: none; }
.body-svg .part .gut { fill: none; stroke-opacity: .9; stroke-linecap: round; }
.body-svg .part .gut-in { fill: none; stroke: var(--bg); stroke-opacity: .82; stroke-linecap: round; }
.body-svg .part .gut-tint { fill: none; stroke-opacity: .2; stroke-linecap: round; }

/* Sex-specific structures */
.body-svg.sex-m .sex-f, .body-svg.sex-f .sex-m { display: none; }

/* Hover + selection */
.body-svg .part.hl :is(path, rect, circle, ellipse):not(.dt, .fiber, .hit, .flow, .impulse) { fill-opacity: .42; stroke-opacity: 1; }
.body-svg .part.hl { filter: drop-shadow(0 0 2.5px currentColor); }
.body-svg.has-sel .part:not(.sel) { opacity: .16; }
.body-svg.has-sel .part.sel { opacity: 1; filter: drop-shadow(0 0 3px currentColor); }
.body-svg.has-sel .part.sel :is(path, rect, circle, ellipse):not(.dt, .fiber, .hit, .flow, .impulse) { fill-opacity: .5; stroke-opacity: 1; }
.body-svg.has-sel .part.sel.hl, .body-svg.has-sel .part.hl { opacity: 1; }

/* ── Animations ─────────────────────────────────────────── */
.body-svg .flow, .body-svg .impulse { fill: none; pointer-events: none; stroke-linecap: round; }
.body-svg .flow { stroke: #fff; stroke-opacity: .55; stroke-dasharray: 1.6 7; animation: body-flow 1.4s linear infinite; }
.body-svg .vein .flow { stroke-opacity: .45; animation-duration: 2.4s; }
.body-svg .rev .flow { animation-direction: reverse; }
.body-svg .flow.peri { stroke: currentColor; stroke-opacity: .6; stroke-dasharray: 4 14; animation-duration: 5s; }
.body-svg .flow.urine { stroke: var(--c-urine); stroke-opacity: .9; stroke-dasharray: 1.4 9; animation-duration: 3s; }
.body-svg .flow.lymph { stroke: var(--c-lymph); stroke-opacity: .9; stroke-dasharray: 1.4 10; animation-duration: 4s; }
.body-svg .flow.sperm { stroke: #fff; stroke-dasharray: 1 6; animation-duration: 3s; }
.body-svg .impulse { stroke: #fffbe0; stroke-opacity: .95; stroke-dasharray: 1.2 22; animation: body-flow-imp 1.1s linear infinite; }
@keyframes body-flow { to { stroke-dashoffset: -8.6; } }
@keyframes body-flow-imp { to { stroke-dashoffset: -23.2; } }

.body-svg .beat { transform-box: fill-box; transform-origin: 45% 55%; animation: body-beat 1s var(--ease-in-out) infinite; }
@keyframes body-beat {
  0%, 100% { transform: scale(1); }
  12% { transform: scale(1.06); }
  24% { transform: scale(.99); }
  36% { transform: scale(1.035); }
  55% { transform: scale(1); }
}
.body-svg .breathe { transform-box: fill-box; transform-origin: 50% 20%; animation: body-breathe 4.6s ease-in-out infinite; }
.body-svg .diaphragm { animation: body-diaphragm 4.6s ease-in-out infinite; }
@keyframes body-breathe { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.035, 1.045); } }
@keyframes body-diaphragm { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(4px); } }

/* Layer draw-in when a system is switched on */
.body-svg .sys.entering .draw { stroke-dasharray: 1; animation: body-draw 1.3s var(--ease) both; }
@keyframes body-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.body-svg .sys.entering .part:not(:has(.draw)) { animation: body-materialize .7s var(--ease) both; }
@keyframes body-materialize { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Static mode (animations off or reduced motion) */
.no-anim .body-svg *, .no-anim .dg * { animation: none !important; }
.no-anim .body-svg .flow, .no-anim .body-svg .impulse, .no-anim .body-svg .scan { display: none; }
@media (prefers-reduced-motion: reduce) {
  .body-svg *, .dg * { animation: none !important; }
  .body-svg .flow, .body-svg .impulse, .body-svg .scan { display: none; }
}

:root[data-theme="light"] .body-svg .flow { stroke: #fff; stroke-opacity: .9; }
:root[data-theme="light"] .body-svg .impulse { stroke: #7a5a00; }
:root[data-theme="light"] .body-svg .part .gut-in { stroke: var(--surface); }
.body-svg .part.liver path:not(.dt) { fill-opacity: .32; }
.body-svg .part .behind { opacity: .38; }
.body-svg .part.stomach path:not(.dt) { fill-opacity: .3; }
.body-svg .part .tendon-fill { fill-opacity: .35; }