/* ============================================================
   MEDART.CSS - six staged medical illustrations (domain lab prototype)
   Dr. Dmitry Yaranov site, Fable V3. Real, licensed medical art
   (assets/images/med/*.webp), staged and animated so the motion
   carries the meaning of each clinical domain. No icon glyphs in
   discs or tiles, no glossy rings, no lines connecting separate
   icons anywhere in this file.

   Reads tokens and fonts from assets/css/fable.css (navy ground,
   crimson/coral, type stack, easing curves). Everything else here
   is new and scoped under .mp- (medart panel) class names so it
   never touches a real page.

   Motion contract: every element that loops or plays once is
   driven from JS (assets/js/medart.js) which only starts motion
   when prefers-reduced-motion is not set and only after a panel
   is scrolled into view. The CSS below always renders a correct,
   finished, healthy looking state first; JS layers motion on top
   of that same markup. A visitor with JS off, or with reduced
   motion on, only ever sees the finished state defined here.

   Zero em or en dashes anywhere in this file, including comments.
   ============================================================ */

:root{
  --mp-white:#F4F7FB;
  --mp-ice:#9FD3FF;      /* transplant cold only */
  --mp-amy-gold:#F2C98A; /* amyloidosis deposits only */
  --mp-crimson:#E23A46;
  --mp-coral:#FF6B75;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body.medart-body{
  background:var(--navy-ground,#0C1833);
  color:var(--mp-white);
  font-family:var(--body,'Satoshi','Segoe UI',system-ui,sans-serif);
  -webkit-font-smoothing:antialiased;
}
main{display:block;}
img{max-width:none;}

/* ---------------------------------------------------------------
   LAB HEADER (scratch chrome only, not part of the real site)
   --------------------------------------------------------------- */
.mp-labhead{
  max-width:820px;margin:0 auto;padding:clamp(2.2rem,5vw,3.6rem) clamp(1.25rem,5vw,3rem) 1.4rem;
  text-align:center;
}
.mp-labhead__tag{
  display:inline-block;font-family:var(--label,'Space Grotesk',sans-serif);font-size:.72rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--mp-coral);margin:0 0 .9rem;
}
.mp-labhead__h{
  font-family:var(--display,'Cabinet Grotesk',sans-serif);font-weight:800;
  font-size:clamp(1.6rem,3.6vw,2.4rem);line-height:1.08;margin:0 0 .7rem;color:var(--mp-white);
}
.mp-labhead__p{
  font-size:.96rem;line-height:1.6;color:rgba(244,247,251,.62);margin:0;
}

/* ---------------------------------------------------------------
   PANEL SHELL (one per domain, one viewport tall, alternating art)
   --------------------------------------------------------------- */
.mp-panel{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  padding:clamp(2.4rem,6vw,4.5rem) clamp(1.25rem,5vw,4.5rem);
  background:var(--navy-ground,#0C1833);
  overflow:hidden;
  isolation:isolate;
}
.mp-panel__grain{
  position:absolute;inset:0;pointer-events:none;
  background-image:var(--grain);opacity:.035;mix-blend-mode:overlay;
}
.mp-inner{
  position:relative;z-index:1;width:100%;max-width:1360px;margin-inline:auto;
  display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(2.2rem,5vw,5rem);align-items:center;
}
.mp-panel--art-left .mp-inner{grid-template-columns:1.08fr .92fr;}
.mp-panel--art-left .mp-copy{order:2;}
.mp-panel--art-left .mp-stage{order:1;}

/* ---------------------------------------------------------------
   COPY BLOCK (title + the client's single line, nothing invented)
   --------------------------------------------------------------- */
.mp-copy{max-width:46ch;}
.mp-kicker{
  display:flex;align-items:center;gap:.6rem;font-family:var(--label,'Space Grotesk',sans-serif);
  font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mp-coral);
  margin:0 0 1.1rem;
}
/* the short dash after the kicker is a decorative line (box rule pass): never painted */
.mp-kicker i{display:none;}
.mp-title{
  font-family:var(--display,'Cabinet Grotesk',sans-serif);font-weight:800;
  font-size:clamp(1.9rem,3.2vw,2.8rem);line-height:1.04;letter-spacing:-.01em;
  margin:0 0 1.1rem;color:var(--mp-white);
}
.mp-line{
  font-family:var(--body,'Satoshi',sans-serif);font-size:clamp(1.05rem,1.3vw,1.28rem);
  line-height:1.6;color:rgba(244,247,251,.72);margin:0;
}

/* ---------------------------------------------------------------
   STAGE (shared by all six: bloom, floor shadow, pointer tilt)
   --------------------------------------------------------------- */
.mp-stage{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:clamp(380px,38vw,540px);
}
/* R10 restore (Dev Q8): the lit stage comes back. A soft crimson bloom stands behind the art and a floor shadow sits
   under it, so the plate reads as a lit object. medart.js adds both spans (and the ECG strip in the first panel)
   when the page markup does not carry them. */
.mp-stage__bloom{
  position:absolute;left:50%;top:50%;width:min(620px,78vw);height:min(620px,78vw);
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgb(226 58 70 / .40) 0%,rgb(226 58 70 / .16) 42%,transparent 72%);
  filter:blur(6px);
}
.mp-stage__bloom--ice{
  background:radial-gradient(circle,rgb(159 211 255 / .30) 0%,rgb(226 58 70 / .14) 48%,transparent 74%);
}
.mp-stage__floor{
  position:absolute;left:50%;bottom:4%;width:54%;height:34px;transform:translateX(-50%);
  background:radial-gradient(ellipse,rgba(2,6,16,.58) 0%,transparent 72%);
  filter:blur(5px);z-index:0;pointer-events:none;
}

/* ---------------------------------------------------------------
   ART BOX (sized to the image, pointer tilt applied here)
   --------------------------------------------------------------- */
.mp-art{
  position:relative;z-index:1;
  height:clamp(360px,30vw,460px);
  aspect-ratio:var(--ar);
  /* the art answers the pointer with a small tilt (medart.js writes --mp-rx / --mp-ry, at most 4deg) */
  transform:perspective(1300px) rotateX(var(--mp-ry,0deg)) rotateY(var(--mp-rx,0deg));
  transform-style:preserve-3d;
  transition:transform .5s var(--ease-soft,cubic-bezier(.4,0,.15,1));
  will-change:transform;
}
.mp-img{
  position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 18px 34px rgb(0 0 0 / .45));
}
.mp-overlay{
  position:absolute;inset:0;width:100%;height:100%;z-index:2;overflow:hidden;
  pointer-events:none;
}
/* OVERLAY FIX PASS: every drawn-on layer (vessel glow, deposit,
   pressure pulse, ischemia blob, timer) now lives inside this one
   SVG per panel, and this one mask call clips the WHOLE svg to the
   artwork's own alpha shape, same size and position as the <img> it
   sits over (mask-size:contain + the same centring the <img> itself
   uses). Nothing drawn inside can ever land outside the anatomy,
   no matter where it animates to, because the overlay itself, not
   each individual shape, is what gets clipped. */
.mp-art--mcs .mp-overlay{
  -webkit-mask-image:url('../images/med/mcs-lvad.webp');mask-image:url('../images/med/mcs-lvad.webp');
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
}
.mp-art--amy .mp-overlay{
  -webkit-mask-image:url('../images/med/amy-section.webp');mask-image:url('../images/med/amy-section.webp');
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
}
.mp-art--ph .mp-overlay{
  -webkit-mask-image:url('../images/med/ph-lungs.webp');mask-image:url('../images/med/ph-lungs.webp');
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
}
.mp-art--shock .mp-overlay{
  -webkit-mask-image:url('../images/med/shock-heart.webp');mask-image:url('../images/med/shock-heart.webp');
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
}
@media(max-width:900px){
  .mp-inner,.mp-panel--art-left .mp-inner{grid-template-columns:1fr;}
  .mp-panel--art-left .mp-copy,.mp-panel--art-left .mp-stage{order:initial;}
  .mp-copy{max-width:60ch;text-align:left;}
  .mp-stage{order:-1;min-height:clamp(320px,56vw,420px);}
  .mp-art{height:clamp(300px,52vw,420px);}
}
@media(max-width:520px){
  .mp-panel{padding:2rem 1.1rem;}
  .mp-art{height:clamp(240px,58vw,340px);}
  .mp-stage{min-height:clamp(260px,60vw,360px);}
}

/* =================================================================
   01 . ADVANCED HEART FAILURE . ahf-heart.webp
   A weak, dim beat strengthens into a healthy rhythm over ~3s, then
   settles into a steady loop. A short ECG strip sits BELOW the art, centred
   under the heart and faded at both ends so it never touches the panel edges
   (R10 restore); its amplitude grows with the beat.
   ================================================================= */
.mp-art--ahf .mp-img{
  transform-origin:46% 88%;
  filter:drop-shadow(0 18px 34px rgb(0 0 0 / .45)) brightness(1.08) saturate(1.08);
}
.mp-art--ahf .mp-glowmask{
  position:absolute;inset:0;z-index:0;opacity:.85;
  background:radial-gradient(ellipse 60% 50% at 48% 60%,rgb(226 58 70 / .95),rgb(255 107 117 / .4) 55%,transparent 78%);
  -webkit-mask-image:url('../images/med/ahf-heart.webp');mask-image:url('../images/med/ahf-heart.webp');
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  filter:blur(2px);
}
.mp-ecg{
  margin-top:1rem;width:min(250px,62%);position:relative;z-index:1;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%,#000 76%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 24%,#000 76%,transparent 100%);
}
.mp-ecg svg{width:100%;height:auto;display:block;overflow:visible;}
.mp-ecg__base{stroke:rgba(244,247,251,.16);stroke-width:1.5;fill:none;}
.mp-ecg__weak,.mp-ecg__strong{fill:none;stroke-linecap:round;stroke-linejoin:round;}
/* Finished state default: the strong, healthy trace is what shows without JS or under reduced motion;
   the weak trace only appears while the intro animation is actually running. */
.mp-ecg__weak{stroke:rgba(244,247,251,.5);stroke-width:1.6;opacity:0;}
.mp-ecg__strong{stroke:var(--mp-coral);stroke-width:2;opacity:1;filter:drop-shadow(0 0 5px rgb(255 107 117 / .65));}
html.medart-motion .mp-ecg__weak{opacity:1;}
html.medart-motion .mp-ecg__strong{opacity:0;}
html.medart-motion .mp-ecg__weak{animation:ahfEcgWeak 3s ease-out 1 forwards;}
html.medart-motion .mp-ecg__strong{animation:ahfEcgStrong 3s ease-out 1 forwards;}
@keyframes ahfEcgWeak{0%{opacity:1;}100%{opacity:0;}}
@keyframes ahfEcgStrong{0%{opacity:0;}100%{opacity:1;}}

html.medart-motion .mp-art--ahf .mp-img{
  animation:ahfIntro 3s var(--ease-soft,ease-out) 1 both,
            ahfSteady 1.15s ease-in-out infinite 3s;
}
html.medart-motion .mp-art--ahf .mp-glowmask{
  animation:ahfGlowIntro 3s var(--ease-soft,ease-out) 1 both,
            ahfGlowSteady 1.15s ease-in-out infinite 3s;
}

@keyframes ahfIntro{
  0%{transform:scale(.975);filter:drop-shadow(0 14px 26px rgb(0 0 0 / .4)) brightness(.72) saturate(.8);}
  100%{transform:scale(1.03);filter:drop-shadow(0 20px 38px rgb(0 0 0 / .48)) brightness(1.1) saturate(1.12);}
}
@keyframes ahfSteady{
  0%,100%{transform:scale(1.03);filter:drop-shadow(0 20px 38px rgb(0 0 0 / .48)) brightness(1.1) saturate(1.12);}
  38%{transform:scale(1.058);filter:drop-shadow(0 22px 40px rgb(0 0 0 / .5)) brightness(1.22) saturate(1.16);}
  60%{transform:scale(1.015);filter:drop-shadow(0 18px 34px rgb(0 0 0 / .46)) brightness(1.1) saturate(1.12);}
}
@keyframes ahfGlowIntro{0%{opacity:.25;transform:scale(.92);}100%{opacity:.85;transform:scale(1);}}
@keyframes ahfGlowSteady{0%,100%{opacity:.85;}38%{opacity:1;}60%{opacity:.82;}}

/* =================================================================
   02 . HEART TRANSPLANTATION . tx-heart.webp
   A glass transport canister (CSS/SVG), cold haze and drifting
   frost inside. On arrival the haze clears, the heart warms from
   ice blue to crimson and gives its first beats. Hover or focus gives it
   one more warm beat and sweeps a highlight across the glass (medart.js).
   ================================================================= */
.mp-canister{
  position:relative;z-index:1;height:clamp(400px,33vw,500px);
  aspect-ratio:.7;display:flex;align-items:center;justify-content:center;
  transform:perspective(1300px) rotateX(var(--mp-ry,0deg)) rotateY(var(--mp-rx,0deg));
  transform-style:preserve-3d;transition:transform .5s var(--ease-soft,cubic-bezier(.4,0,.15,1));
  will-change:transform;
}
/* OVERLAY FIX PASS: the glass used to be one flat gradient rectangle
   with rounded corners, which read as a grey card, not a cylinder.
   It is now several stacked cues that together sell "glass": a bright
   narrow specular strip left of centre, a wider softer one on the
   right, dark vignetting at both long edges (refraction), and a cool
   blue cast overall. The elliptical top and bottom rims that actually
   make it read as a cylinder, the cold vapour wisp and the
   condensation beads are injected by medart.js (buildTxCanister) as
   real SVG ellipses and small divs, since a flat CSS rectangle cannot
   draw a convincing foreshortened ellipse; this file only styles them
   once they exist. */
.mp-canister__glass{
  position:absolute;inset:0 6% 0 6%;border-radius:999px/60px;
  background:
    linear-gradient(90deg,transparent 16%,rgba(255,255,255,.55) 23%,rgba(255,255,255,.08) 29%,transparent 36%),
    linear-gradient(90deg,transparent 58%,rgba(255,255,255,.22) 74%,transparent 92%),
    linear-gradient(90deg,rgba(0,0,0,.4),transparent 13%,transparent 87%,rgba(0,0,0,.4)),
    linear-gradient(180deg,rgba(159,211,255,.14),rgba(12,24,51,.12) 55%,rgba(159,211,255,.1));
  border:1px solid rgba(244,247,251,.22);
  box-shadow:inset 0 0 50px rgba(159,211,255,.14),inset 0 -30px 60px rgba(0,0,0,.4),0 0 34px -6px rgba(159,211,255,.35),0 30px 60px -24px rgba(0,0,0,.6);
  z-index:0;
}
.mp-canister__rims{position:absolute;inset:0 6% 0 6%;width:88%;height:100%;z-index:2;pointer-events:none;overflow:visible;}
.mp-canister__rim{fill:none;stroke-width:1.1;}
.mp-canister__rim--top{stroke:url(#txRimTop);}
.mp-canister__rim--bot{stroke:url(#txRimBot);}
.mp-canister__lid{
  position:absolute;left:6%;right:6%;top:0;height:9%;border-radius:999px/16px;
  background:linear-gradient(180deg,#EDEFF2 0%,#C7CBD3 22%,#8E939D 50%,#AEB3BC 72%,#6B707A 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 3px rgba(0,0,0,.35);
  border:1px solid rgba(20,30,50,.3);z-index:3;
}
.mp-canister__lid::after{
  content:'';position:absolute;left:14%;right:14%;top:22%;height:14%;border-radius:3px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
}
.mp-canister__highlight{
  position:absolute;inset:0 6% 0 6%;border-radius:999px/60px;z-index:4;overflow:hidden;pointer-events:none;
}
.mp-canister__highlight-bar{
  position:absolute;top:-10%;bottom:-10%;left:-60%;width:36%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-40%) skewX(-14deg);opacity:0;
}
/* Finished state default: the haze has already cleared and no frost
   or vapour is moving. These only appear while the cold-arrival
   animation is actually running (html.medart-motion, below). */
.mp-canister__haze{
  position:absolute;inset:9% 8% 4% 8%;border-radius:999px/50px;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 80% 60% at 50% 30%,rgba(159,211,255,.5),transparent 70%);
  opacity:0;
}
.mp-canister__vapor{
  position:absolute;left:30%;top:10%;width:40%;height:16%;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(159,211,255,.5),rgba(244,247,251,.2) 55%,transparent 80%);
  filter:blur(7px);opacity:0;
}
.mp-canister__frost{
  position:absolute;width:5px;height:5px;border-radius:50%;background:rgba(244,247,251,.75);
  box-shadow:0 0 6px 1px rgba(159,211,255,.7);z-index:2;opacity:0;pointer-events:none;
}
.mp-canister__bead{
  position:absolute;width:3px;height:3px;border-radius:50%;z-index:2;pointer-events:none;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.9),rgba(159,211,255,.35) 60%,transparent 100%);
  opacity:.55;
}
.mp-canister__bead.b1,.mp-canister__bead.b3{width:2px;height:2px;}
html.medart-motion .mp-canister__haze{opacity:1;}
html.medart-motion .mp-canister__vapor{opacity:.8;}
.mp-canister__frost.f1{left:30%;top:28%;}
.mp-canister__frost.f2{left:62%;top:46%;}
.mp-canister__frost.f3{left:46%;top:66%;}
.mp-art--tx{position:relative;z-index:1;height:60%;aspect-ratio:var(--ar);}
/* Finished state default: the heart has already warmed to its
   natural graded crimson. The cold blue tint only appears while the
   arrival animation is actually running, below. */
.mp-art--tx .mp-img{
  filter:drop-shadow(0 18px 32px rgb(0 0 0 / .46)) saturate(1.05) brightness(1.06);
}
/* The cold state is a plain grayscale on the art itself (no hue left
   to fight with) plus a separate ice blue layer, masked to the same
   art, blended with mix-blend-mode:color so it reads as a monochrome
   cold cast rather than a flat colour wash. A bare hue-rotate on this
   red source sweeps through green and gold on the way to blue (tried
   first, looked wrong, replaced with this), so hue-rotate is not used
   here at all. */
.mp-canister__coldtint{
  position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:var(--mp-ice);mix-blend-mode:color;
  -webkit-mask-image:url('../images/med/tx-heart.webp');mask-image:url('../images/med/tx-heart.webp');
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
}
html.medart-motion .mp-art--tx .mp-img{
  filter:drop-shadow(0 14px 26px rgb(0 0 0 / .4)) grayscale(1) brightness(.78) contrast(1.05);
}

html.medart-motion .mp-art--tx .mp-img{animation:txWarm 2.6s var(--ease-soft,ease-out) 1 both;}
html.medart-motion .mp-canister__coldtint{animation:txTintFade 2.6s var(--ease-soft,ease-out) 1 both;}
html.medart-motion .mp-canister__haze{animation:txHazeClear 2.8s var(--ease-soft,ease-out) 1 both;}
html.medart-motion .mp-canister__frost{animation:txFrostDrift 6s ease-in-out infinite;}
html.medart-motion .mp-canister__vapor{animation:txVaporDrift 2.8s var(--ease-soft,ease-out) 1 both, txVaporSlow 7s ease-in-out infinite 2.8s;}
.mp-canister__frost.f2{animation-delay:-2s;}
.mp-canister__frost.f3{animation-delay:-4s;}

@keyframes txWarm{
  0%{filter:drop-shadow(0 14px 26px rgb(0 0 0 / .4)) grayscale(1) brightness(.78) contrast(1.05);transform:scale(1);}
  45%{filter:drop-shadow(0 14px 26px rgb(0 0 0 / .4)) grayscale(1) brightness(.78) contrast(1.05);transform:scale(1);}
  70%{transform:scale(1.05);}
  82%{transform:scale(.995);}
  90%{transform:scale(1.035);}
  100%{filter:drop-shadow(0 18px 32px rgb(0 0 0 / .46)) grayscale(0) brightness(1.06) contrast(1.03) saturate(1.05);transform:scale(1.01);}
}
@keyframes txTintFade{0%{opacity:.85;}45%{opacity:.85;}100%{opacity:0;}}
@keyframes txHazeClear{0%{opacity:1;}70%{opacity:.5;}100%{opacity:0;}}
@keyframes txFrostDrift{
  0%{transform:translate(0,0);opacity:.1;}
  12%{opacity:.85;}
  50%{transform:translate(6px,-22px);opacity:.5;}
  88%{opacity:.1;}
  100%{transform:translate(-4px,-40px);opacity:0;}
}
@keyframes txVaporDrift{0%{opacity:.8;}70%{opacity:.6;}100%{opacity:.18;}}
@keyframes txVaporSlow{0%,100%{transform:translate(0,0);}50%{transform:translate(4%,-6%);}}

/* =================================================================
   03 . MECHANICAL CIRCULATORY SUPPORT . mcs-lvad.webp
   Crimson to white flow pulses travel continuously along the
   outflow graft (traced to the pixel on the source art). The pump
   rotor carries a soft rotating specular glint. The heart beats
   only faintly. Hover speeds the flow up.
   ================================================================= */
.mp-art--mcs{--flow-dur:2.6s;}
.mp-art--mcs .mp-img{filter:drop-shadow(0 18px 34px rgb(0 0 0 / .45)) brightness(1.02);}
/* OVERLAY FIX PASS: the graft used to be a visible stroked tube with
   a dotted flow pattern on top, which read as stitching drawn onto
   the art. Both are gone. The "tube" itself is never drawn; only a
   soft, heavily blurred glow (the base) and a short luminous pulse
   with a bright core fading into its own tail (the flow) travel
   where the tube is, screen blended so they add light rather than
   paint a shape, and the whole svg is already clipped to the art's
   alpha above so neither can ever drift off the anatomy. */
.mcs-graft-base{
  fill:none;stroke:rgb(255 170 170 / .4);stroke-width:24;stroke-linecap:round;stroke-linejoin:round;
  filter:blur(5px);mix-blend-mode:plus-lighter;
}
.mcs-graft-flow{
  fill:none;stroke:url(#mcsFlowGrad);stroke-width:16;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:85 550;opacity:1;filter:blur(3px);mix-blend-mode:plus-lighter;
}
.mp-rotor-glint{
  position:absolute;left:81.5%;top:82%;width:19%;height:12%;transform:translate(-50%,-50%);
  border-radius:50%;z-index:2;pointer-events:none;mix-blend-mode:screen;opacity:.85;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(255,255,255,.85) 30deg,transparent 80deg,transparent 180deg,rgba(255,255,255,.4) 220deg,transparent 280deg,transparent 360deg);
}

html.medart-motion .mp-art--mcs .mp-img{animation:mcsFaintBeat 1.9s ease-in-out infinite;}
html.medart-motion .mcs-graft-flow{animation:mcsFlow var(--flow-dur) linear infinite;}
html.medart-motion .mp-rotor-glint{animation:mcsRotorSpin 5.5s linear infinite;}
@media(hover:hover) and (pointer:fine){
  .mp-stage:hover .mp-art--mcs,.mp-stage:focus-within .mp-art--mcs{--flow-dur:1s;}
}

@keyframes mcsFlow{to{stroke-dashoffset:-760;}}
@keyframes mcsRotorSpin{to{transform:translate(-50%,-50%) rotate(360deg);}}
@keyframes mcsFaintBeat{0%,100%{transform:scale(1);}45%{transform:scale(1.012);}}

/* =================================================================
   04 . CARDIAC AMYLOIDOSIS . amy-section.webp
   Eight irregular soft patches (white into coral, never gold) appear
   one after another on the walls and the septum and stay, while the
   heart's own beat eases from about 4 percent to about 1 percent: the
   muscle stiffens. Hold, fade, a 3s pause, repeat. The patches are
   drawn by assets/js/medart.js inside the overlay svg, which is
   clipped to the art's own alpha (.mp-art--amy .mp-overlay above), so
   none can land outside the heart. Reduced motion and no animation
   show the finished patches, still.
   ================================================================= */
.mp-art--amy .mp-img{filter:drop-shadow(0 18px 34px rgb(0 0 0 / .45));}
/* markup that still carries the old fixed dots: hidden once the patches exist */
.amy-built .amy-dots,.amy-built .amy-dot{display:none;}
.amy-patch{opacity:1;}

/* =================================================================
   05 . PULMONARY HYPERTENSION . ph-lungs.webp
   Pressure pulses travel outward from the right ventricle along
   the pulmonary artery branches (traced left and right), the RV
   glowing softly on each pulse. The plate is whole: complete lung
   bases and a clean one pixel edge, no mask and no fade. The source
   is 699 by 622 pixels, so the art is shown at 440 css px at most
   (sharp at 2x) and never stretched past it.
   ================================================================= */
.mp-art--ph{width:min(440px,86%);height:auto;aspect-ratio:var(--ar);}
/* no static vessel track at all (the artwork already draws the
   branches; a line on top of them is what read as drawn-on). Only
   short, soft, screen-blended light segments travel where the
   vessels are, blurred enough that they read as pressure moving
   through the lung rather than a dashed or dotted stroke. */
.ph-branch-base{opacity:0;}
.ph-branch-left,.ph-branch-right{
  fill:none;stroke:url(#mcsFlowGrad);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:20 150;opacity:1;filter:blur(1.5px);mix-blend-mode:screen;
}
.ph-rv-glow{opacity:.55;filter:blur(1px);mix-blend-mode:screen;}

html.medart-motion .ph-branch-left,html.medart-motion .ph-branch-right{animation:phFlow 2.3s linear infinite;}
html.medart-motion .ph-rv-glow{animation:phRvPulse 2.3s ease-in-out infinite;}
@keyframes phFlow{to{stroke-dashoffset:-580;}}
@keyframes phRvPulse{0%,100%{opacity:.42;transform:scale(1);}35%{opacity:.85;transform:scale(1.08);}}

/* =================================================================
   06 . CARDIOGENIC SHOCK . shock-heart.webp
   The left anterior descending artery on the plate starts dim and
   stalled and the muscle below it is dark. A bright crimson to white
   pulse (2.6s) runs down the artery, a lit trail stays behind it, and
   the muscle lifts from dark to full crimson by brightness (a dark
   crimson layer over the art fades out, never a grey).
   Hold 3s, dim again, repeat. Driven from assets/js/medart.js; the
   overlay svg is clipped to the art's alpha (.mp-art--shock .mp-overlay
   above). The finished, reduced motion and no animation state is the
   clean plate, nothing drawn on top.
   ================================================================= */
.mp-art--shock .mp-img{filter:drop-shadow(0 18px 34px rgb(0 0 0 / .45));}
.shock-dark{opacity:0;}
.shock-lad-dim{
  fill:none;stroke:#2A0710;stroke-width:9;stroke-linecap:round;stroke-linejoin:round;
  opacity:0;filter:blur(3px);
}
.shock-lad-base{
  fill:none;stroke:url(#shockFlowGrad);stroke-width:26;stroke-linecap:round;stroke-linejoin:round;
  opacity:0;filter:blur(6px);mix-blend-mode:plus-lighter;
}
.shock-lad-flow{
  fill:none;stroke:url(#shockFlowGrad);stroke-width:18;stroke-linecap:round;stroke-linejoin:round;
  opacity:0;filter:blur(3px);mix-blend-mode:plus-lighter;
}
/* the old amber occlusion point is not part of the sequence any more */
.shock-occlusion,.shock-occlusion-halo{display:none;}