/* A page for one illness: the same stone world as the home page, one idea per
   band, the organ lit on the painted body, and one moving picture that explains
   how the illness works. Loaded after site.css. */

.cond main { overflow-x: clip; }
.cond .bar .mark span { opacity: 1; transform: none; }
.pill--line { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); }
.pill--line:hover { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink), var(--shadow); }

.c-hero, .c-split, .c-explain, .c-now-in, .c-close { max-width: 1320px; margin-inline: auto; }

/* ——— Opening: the statement, and the organ in place ——— */
.c-hero {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: clamp(24px, 5vw, 80px); align-items: center;
  min-height: min(100svh, 940px); padding: calc(var(--bar-h) + 28px) var(--gutter) 56px;
}
.c-h1 { font-size: clamp(2.4rem, 5.4vw, 5.4rem); line-height: 1.06; letter-spacing: -0.032em; }
.c-lede { margin-top: 26px; max-width: 32em; font-size: clamp(1.1rem, 1.35vw, 1.3rem); line-height: 1.5; color: var(--ink-soft); }
.c-go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 30px; }

.plate {
  position: relative; justify-self: center; width: 100%; max-width: 400px; height: min(74svh, 700px);
  border-radius: 999px; overflow: hidden; container-type: size; isolation: isolate;
  background: radial-gradient(ellipse 70% 50% at 50% 40%, #fffdf9, var(--paper) 60%, #efe9e1);
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(11, 30, 35, 0.06);
}
.plate-body {
  position: absolute; aspect-ratio: 700 / 1663; height: calc(var(--z) * 100cqh);
  left: calc(50cqw - var(--fx) * var(--z) * 0.4209cqh);
  top: calc(50cqh - var(--fy) * var(--z) * 1cqh);
  transform-origin: calc(var(--fx) * 1%) calc(var(--fy) * 1%);
  transition: transform 2.6s var(--ease) 0.15s;
}
.js .plate:not(.in) .plate-body { transform: scale(calc(1 / var(--z))); }
.plate-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.plate-img--base { filter: saturate(0.16) brightness(1.07) contrast(0.86); opacity: 0.8; }
.plate-img--lit { transition: opacity 1.4s 1.2s; }
.js .plate:not(.in) .plate-img--lit { opacity: 0; }
/* skin pages: the outer body only, glowing teal at its outline */
.plate--skin .plate-img--lit { filter: drop-shadow(0 0 3px rgba(22, 115, 122, 0.8)) drop-shadow(0 0 14px rgba(22, 115, 122, 0.4)); }
.plate-ring {
  position: absolute; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--teal), 0 0 18px 2px rgba(22, 115, 122, 0.35);
  animation: ring 2.8s var(--ease) 2.4s infinite both;
}
@keyframes ring { 0% { opacity: 0; transform: scale(0.7); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.5); } }
.plate-tag {
  position: absolute; left: 50%; bottom: 8%; translate: -50% 0; display: inline-flex; align-items: center; gap: 8px;
  min-height: 34px; padding: 0 16px 0 12px; border-radius: 999px; background: var(--paper); box-shadow: var(--shadow);
  font-weight: 700; font-size: 0.92rem; white-space: nowrap;
}
.plate-tag span { width: 10px; height: 10px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(22, 115, 122, 0.18); }

/* ——— Bands of text beside a card ——— */
.c-split {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(28px, 6vw, 96px); align-items: start;
  padding: clamp(64px, 10vh, 120px) var(--gutter);
}
.c-prose { margin-top: 26px; }
.c-prose em { font-style: normal; font-weight: 700; }
.c-split .lede { max-width: 32em; }
.c-card { padding: 24px 26px 26px; border-radius: var(--r-card); background: var(--paper); box-shadow: var(--shadow); }
.c-card h3 { font-size: 0.82rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 12px; color: var(--teal); }
.c-card li { position: relative; padding: 7px 0 7px 24px; border-top: 1px solid var(--line); }
.c-card li:first-child { border-top: 0; }
.c-card ul li::before {
  content: ""; position: absolute; left: 2px; top: 1em; width: 11px; height: 11px;
  background: linear-gradient(currentColor, currentColor) center / 11px 2.4px no-repeat, linear-gradient(currentColor, currentColor) center / 2.4px 11px no-repeat;
  color: var(--teal);
}
.c-signs { margin-top: clamp(0px, 7vw, 96px); transform: rotate(-1.2deg); }

/* ——— The moving picture ——— */
.c-explain { padding: clamp(56px, 9vh, 110px) var(--gutter); }
.fig {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(250px, 0.75fr);
  grid-template-areas: "stage switch" "stage say"; grid-template-rows: auto 1fr; gap: 20px clamp(24px, 4vw, 56px);
  margin-top: 30px; align-items: start;
}
.fig-stage {
  grid-area: stage; overflow: hidden; perspective: 1600px; padding: clamp(12px, 2.4vw, 30px); border-radius: var(--r-card);
  background: radial-gradient(ellipse 80% 70% at 50% 30%, #fffdf9, var(--paper) 55%, #f0ebe4);
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(11, 30, 35, 0.05);
}
.fig-tilt { transform-origin: 50% 100%; transition: transform 2s var(--ease), opacity 1.2s; }
.js .fig:not(.in) .fig-tilt { transform: rotateX(32deg) translateY(36px) scale(0.93); opacity: 0; }
.art { display: block; width: 100%; height: auto; overflow: visible; }
.fig-switch { grid-area: switch; display: flex; flex-wrap: wrap; gap: 8px; padding-top: 8px; }
.fig-switch button {
  min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer; background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--ink); font-weight: 700; font-size: 0.95rem;
  transition: background-color 0.25s, color 0.25s, transform 0.35s var(--ease);
}
.fig-switch button:hover { transform: translateY(-2px); background: var(--paper); }
.fig-switch button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.fig-say { grid-area: say; font-size: 1.12rem; line-height: 1.5; }
.fig-say p { max-width: 28em; animation: rise 0.6s var(--ease); }
.fig-say p[hidden] { display: none; }
html:not(.js) .fig-switch { display: none; }
html:not(.js) .fig-say p[hidden] { display: block; margin-top: 10px; }

/* labels inside the pictures: paper pills, as on the anatomy plate */
.art text { font: 700 19px var(--font); fill: var(--ink); }
.art .tag rect { fill: var(--paper); stroke: rgba(11, 30, 35, 0.14); stroke-width: 1; }
.art .tag--warn rect { fill: var(--coral); stroke: none; }
.art .tag--ink rect { fill: var(--ink); stroke: none; }
.art .tag--ink text { fill: var(--paper); }
.art .only-a, .art .only-b, .art .only-c { opacity: 0; transition: opacity 0.7s; }
.fig[data-state="a"] .only-a, .fig[data-state="b"] .only-b, .fig[data-state="c"] .only-c { opacity: 1; }
.art .rbc { fill: url(#g-rbc); }
.art .bead { fill: url(#g-sugar); }
@keyframes flow-640 { to { transform: translateX(-640px); } }
@keyframes flow-490 { to { transform: translateX(-490px); } }
@keyframes throb { 50% { opacity: 0.45; } }
@keyframes draw { 0% { stroke-dashoffset: 1; } 72%, 100% { stroke-dashoffset: 0; } }

/* diabetes: the key, the lock, the door */
.art--insulin .flow { animation: flow-640 14s linear infinite; }
.art--insulin .extra { opacity: 0; transition: opacity 1.4s; }
.fig[data-state="b"] .art--insulin .extra { opacity: 1; }
.art--insulin .gate { transition: transform 0.9s var(--ease); }
.art--insulin .lock path:first-child { transition: filter 0.6s, opacity 0.6s; }
.art--insulin .key { transition: transform 2.2s var(--ease) 0.5s; }
.art--insulin .fuel { opacity: 0; transition: opacity 1.6s; }
.art--insulin .enter .bead { opacity: 0; }
.fig.in[data-state="a"] .art--insulin .key { transform: translate(-224px, 65px); }
.fig.in[data-state="a"] .art--insulin .lock path:first-child { filter: drop-shadow(0 0 6px rgba(237, 185, 64, 0.95)); transition-delay: 2.4s; }
.fig.in[data-state="a"] .art--insulin .gate--l { transform: translateX(-8px); transition-delay: 2.7s; }
.fig.in[data-state="a"] .art--insulin .gate--r { transform: translateX(8px); transition-delay: 2.7s; }
.fig.in[data-state="a"] .art--insulin .fuel { opacity: 1; transition-delay: 4.6s; }
.fig.in[data-state="a"] .art--insulin .enter .bead { animation: enter 4.2s var(--ease) 3s infinite; }
.fig.in[data-state="a"] .art--insulin .enter .bead:nth-child(2) { animation-delay: 4.4s; }
.fig.in[data-state="a"] .art--insulin .enter .bead:nth-child(3) { animation-delay: 5.8s; }
.fig.in[data-state="b"] .art--insulin .key { transform: translate(-212px, 28px) rotate(-18deg); }
.fig.in[data-state="b"] .art--insulin .key-shape { animation: jiggle 1.6s ease-in-out 2.6s infinite; }
.fig.in[data-state="b"] .art--insulin .lock path:first-child { filter: grayscale(0.85); opacity: 0.75; }
.fig.in[data-state="b"] .art--insulin .gate--l { transform: translateX(-2px); }
.fig.in[data-state="b"] .art--insulin .gate--r { transform: translateX(2px); }
.fig.in[data-state="b"] .art--insulin .fuel { opacity: 0.2; }
.fig.in[data-state="b"] .art--insulin .enter .bead { animation: stuck 3.2s ease-in-out 1.6s infinite; }
.fig.in[data-state="b"] .art--insulin .enter .bead:nth-child(2) { animation-delay: 2.6s; }
.fig.in[data-state="b"] .art--insulin .enter .bead:nth-child(3) { animation-delay: 3.6s; }
@keyframes enter {
  0% { opacity: 0; transform: none; } 12% { opacity: 1; }
  45% { transform: translate(var(--x1), var(--y1)); }
  80% { opacity: 1; transform: translate(var(--x2), var(--y2)); }
  100% { opacity: 0; transform: translate(var(--x2), var(--y2)); }
}
@keyframes stuck {
  0% { opacity: 0; transform: none; } 15% { opacity: 1; }
  55% { transform: translate(var(--x1), calc(var(--y1) - 12px)); }
  75% { opacity: 1; transform: translate(var(--x1), calc(var(--y1) - 30px)); }
  100% { opacity: 0; transform: translate(var(--x1), calc(var(--y1) - 30px)); }
}
@keyframes jiggle { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(9deg); } 60% { transform: rotate(-6deg); } }

/* high BP: the artery beats; the wave draws itself like a monitor */
.art--pressure .flow { animation: flow-490 3.4s linear infinite; }
.art--pressure .pulse { transform-origin: 320px 120px; }
.fig.in .art--pressure .pulse { animation: beat 1s var(--ease) infinite; }
.fig.in[data-state="b"] .art--pressure .pulse { animation-name: beat-stiff; }
@keyframes beat { 0%, 100% { transform: scaleY(1); } 16% { transform: scaleY(1.07); } }
@keyframes beat-stiff { 0%, 100% { transform: scaleY(1); } 16% { transform: scaleY(1.025); } }
.art--pressure .lumen, .art--pressure .lumen-clip { transform-origin: 320px 120px; transition: transform 1.2s var(--ease); }
.art--pressure .hole { transform-origin: 70px 120px; transition: transform 1.2s var(--ease); }
.fig[data-state="b"] .art--pressure .lumen, .fig[data-state="b"] .art--pressure .lumen-clip { transform: scaleY(0.64); }
.fig[data-state="b"] .art--pressure .hole { transform: scale(0.66); }
.art--pressure .push path { fill: none; stroke: var(--ink-soft); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.6s; }
.fig[data-state="b"] .art--pressure .push path { stroke: #c2412b; stroke-width: 5; }
.fig.in .art--pressure .push { animation: throb 1s ease-in-out infinite; }
.art--pressure .lvl line { stroke: var(--ink); stroke-opacity: 0.4; stroke-width: 1.5; stroke-dasharray: 5 7; }
.art--pressure .wave { fill: none; stroke: var(--teal); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.js .fig:not(.in) .art--pressure .wave { stroke-dashoffset: 1; }
.art--pressure .wave.only-b { stroke: #c2412b; }
.fig.in .art--pressure .wave { animation: draw 3.2s linear infinite; }

/* thyroid: messages travel down (TSH) and out (T4) */
.art--thyroid .route { fill: none; stroke-width: 2.5; stroke-dasharray: 2 8; stroke-linecap: round; }
.art--thyroid .route--tsh { stroke: var(--teal); }
.art--thyroid .route--t4 { stroke: #b88a12; }
.art--thyroid .route--back, .art--thyroid .arrowhead { stroke: var(--ink-soft); stroke-opacity: 0.55; fill: none; stroke-width: 2; }
.art--thyroid .dot { opacity: 0; }
.art--thyroid .dot--tsh { fill: url(#g-teal); }
.art--thyroid .dot--t4 { fill: url(#g-sugar); }
.fig.in .art--thyroid .dot--tsh { animation: tsh 2.6s linear infinite; }
.fig.in .art--thyroid .dot--t4 { animation: t4 2.6s linear infinite; }
.fig[data-state="a"] .art--thyroid .dot:nth-child(even) { visibility: hidden; }
.fig.in[data-state="b"] .art--thyroid .dot--tsh { animation-duration: 1.5s; }
.fig[data-state="b"] .art--thyroid .dot--t4:not(:first-child) { visibility: hidden; }
.fig.in[data-state="b"] .art--thyroid .dot--t4 { animation-duration: 3.6s; }
.fig[data-state="c"] .art--thyroid .dot--tsh:not(:first-child) { visibility: hidden; }
.fig.in[data-state="c"] .art--thyroid .dot--tsh { animation-duration: 3.6s; }
.fig.in[data-state="c"] .art--thyroid .dot--t4 { animation-duration: 1.5s; }
@keyframes tsh {
  0% { opacity: 0; transform: translate(170px, 158px); } 10% { opacity: 1; }
  25% { transform: translate(206px, 188px); } 50% { transform: translate(220px, 227px); } 75% { transform: translate(211px, 268px); }
  90% { opacity: 1; } 100% { opacity: 0; transform: translate(178px, 304px); }
}
@keyframes t4 {
  0% { opacity: 0; transform: translate(188px, 324px); } 10% { opacity: 1; }
  25% { transform: translate(249px, 335px); } 50% { transform: translate(308px, 331px); } 75% { transform: translate(366px, 314px); }
  90% { opacity: 1; } 100% { opacity: 0; transform: translate(420px, 286px); }
}
.art--thyroid .gland-glow, .art--thyroid .gland-hot, .art--thyroid .pit-glow { transition: opacity 1.2s; }
.art--thyroid .gland-hot { opacity: 0; }
.fig[data-state="a"] .art--thyroid .gland-glow { opacity: 0.8; }
.fig[data-state="b"] .art--thyroid .gland-glow { opacity: 0.2; }
.fig[data-state="c"] .art--thyroid .gland-glow { opacity: 0; }
.fig[data-state="c"] .art--thyroid .gland-hot { opacity: 0.9; }
.fig[data-state="a"] .art--thyroid .pit-glow { opacity: 0.55; }
.fig[data-state="b"] .art--thyroid .pit-glow { opacity: 1; }
.fig[data-state="c"] .art--thyroid .pit-glow { opacity: 0.1; }
.fig.in[data-state="b"] .art--thyroid .pit-glow, .fig.in[data-state="c"] .art--thyroid .gland-hot { animation: throb 0.9s ease-in-out infinite; }
.art--thyroid .zone { fill: none; stroke-width: 22; }
.art--thyroid .zone--slow { stroke: #a8d0cd; }
.art--thyroid .zone--usual { stroke: var(--stone-deep); }
.art--thyroid .zone--fast { stroke: #f2a291; }
.art--thyroid .dial text { font-size: 17px; fill: var(--ink-soft); }
.art--thyroid .needle { transition: transform 1.6s var(--ease) 0.4s; }
.fig[data-state="b"] .art--thyroid .needle { transform: rotate(-58deg); }
.fig[data-state="c"] .art--thyroid .needle { transform: rotate(58deg); }

/* acidity: the valve lets go; the lining gets sore */
.art--acid .valve .valve-ring { fill: none; stroke: url(#g-ring); stroke-width: 11; }
.art--acid .valve .shine { fill: none; stroke: #bfe6e3; stroke-opacity: 0.6; stroke-width: 2.5; stroke-dasharray: 0.45 0.55; }
.art--acid .valve { transform-origin: 300px 178px; transition: transform 1s var(--ease), opacity 1s; }
.fig[data-state="b"] .art--acid .valve { transform: scale(1.3, 1.45); opacity: 0.7; }
.art--acid .reflux { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s var(--ease); }
.fig.in[data-state="b"] .art--acid .reflux { stroke-dashoffset: 0.4; }
.art--acid .burn { opacity: 0; transition: opacity 1.2s 1.4s; }
.fig.in[data-state="b"] .art--acid .burn { opacity: 0.8; animation: throb 1.6s ease-in-out 2.6s infinite; }
.art--acid .sore ellipse { fill: #e2553c; filter: url(#f-blur); }
.art--acid .sore { opacity: 0; transition: opacity 1.4s; }
.fig.in[data-state="c"] .art--acid .sore { opacity: 0.9; animation: throb 1.8s ease-in-out 1.4s infinite; }
.art--acid .folds { transition: stroke 1s; }
.fig[data-state="c"] .art--acid .folds { stroke: #c9432c; }
.fig.in .art--acid .acid-top { animation: flow-80 3.2s linear infinite; }
@keyframes flow-80 { to { transform: translateX(-80px); } }
.art--acid .bubble { fill: #fff6c4; opacity: 0; }
.fig.in .art--acid .bubble { animation: bubble 3s ease-in infinite; }
.fig.in .art--acid .bubble:nth-child(3) { animation-delay: 1s; }
.fig.in .art--acid .bubble:nth-child(4) { animation-delay: 2s; }
@keyframes bubble { 0% { opacity: 0; transform: none; } 20% { opacity: 0.8; } 100% { opacity: 0; transform: translateY(-46px); } }

/* fatty liver: fat droplets swell inside the cells; scar threads between them */
.art--liver .hc polygon { fill: url(#g-hc); stroke: #f7e6da; stroke-width: 3; }
.art--liver .fat { fill: url(#g-fat); transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform 1.8s var(--ease) var(--d); }
.art--liver .nuc { fill: url(#g-nuc); transition: transform 1.8s var(--ease) var(--d); }
.fig.in:not([data-state="a"]) .art--liver .fat { transform: none; }
.fig.in:not([data-state="a"]) .art--liver .nuc--push { transform: translate(var(--nx), var(--ny)); }
.art--liver .organ { transition: filter 1.8s; }
.fig.in:not([data-state="a"]) .art--liver .organ { filter: sepia(0.5) saturate(0.85) brightness(1.1); }
.art--liver .scar { fill: none; stroke: #f8f3ea; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.6s var(--ease); filter: drop-shadow(0 1px 1.5px rgba(11, 30, 35, 0.35)); }
.fig.in[data-state="c"] .art--liver .scar { stroke-dashoffset: 0; }

/* fever: the thermostat is turned up first, then the temperature follows */
.art--thermostat .ticks line { stroke: var(--ink); stroke-opacity: 0.45; stroke-width: 2; }
.art--thermostat .ticks text, .art--thermostat .dial text { font-size: 16px; fill: var(--ink-soft); }
.art--thermostat .zone { fill: none; stroke-width: 22; }
.art--thermostat .zone--usual { stroke: #a8d0cd; }
.art--thermostat .zone--warm { stroke: #f6c9b8; }
.art--thermostat .zone--hot { stroke: #f2a291; }
.art--thermostat .needle { transform: rotate(-30deg); transition: transform 1.8s var(--ease) 0.3s; }
.fig[data-state="b"] .art--thermostat .needle { transform: rotate(30deg); }
.art--thermostat .merc { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0.402); transition: transform 3.4s var(--ease) 1.8s; }
.fig[data-state="b"] .art--thermostat .merc { transform: scaleY(0.7); }
.art--thermostat .heat { opacity: 0; transition: opacity 1.6s 3s; }
.fig.in[data-state="b"] .art--thermostat .heat { opacity: 0.8; animation: throb 2.4s ease-in-out 4.6s infinite; }
.art--thermostat .shiver { fill: none; stroke: var(--teal); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.art--thermostat .shivers { opacity: 0; }
.fig.in[data-state="b"] .art--thermostat .shivers { animation: shiv 5.4s ease 1.6s both; }
.fig.in[data-state="b"] .art--thermostat .shiver { animation: jig 0.14s linear infinite alternate; }
@keyframes shiv { 0% { opacity: 0; } 12%, 66% { opacity: 1; } 100% { opacity: 0; } }
@keyframes jig { to { transform: translateX(3px); } }
.art--thermostat .germs { opacity: 0; transition: opacity 0.8s; }
.fig[data-state="b"] .art--thermostat .germs { opacity: 1; }
.art--thermostat .route { fill: none; stroke: var(--ink-soft); stroke-opacity: 0.45; stroke-width: 2.5; stroke-dasharray: 2 8; stroke-linecap: round; }
.art--thermostat .msg { fill: url(#g-teal); opacity: 0; }
.fig.in[data-state="b"] .art--thermostat .msg { animation: msg 2.2s linear infinite; }
@keyframes msg { 0% { offset-distance: 0%; opacity: 0; } 15%, 85% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
.fig.in .art .virus-in { animation: bob 3.2s ease-in-out infinite; }
.fig.in .art .virus:nth-of-type(2n) .virus-in { animation-delay: -1.4s; }
@keyframes bob { 50% { transform: translateY(-4px) rotate(14deg); } }

/* cholesterol: LDL sinks into the wall, a plaque rises, a crack clots */
.art--plaque .ldl { fill: url(#g-ldl); }
.art--plaque .flow { animation: flow-640 12s linear infinite; }
.fig[data-state="c"] .art--plaque .flow { animation-play-state: paused; }
.art--plaque .sink { opacity: 0; }
.fig.in[data-state="b"] .art--plaque .sink { animation: sink 3.3s ease-in infinite; }
@keyframes sink { 0% { opacity: 0; transform: none; } 20%, 80% { opacity: 1; } 80% { transform: translateY(24px); } 100% { opacity: 0; transform: translateY(30px); } }
.art--plaque .plaque { transform-origin: 330px 220px; transform: scaleY(0.04); transition: transform 3s var(--ease) 0.6s; }
.fig.in:not([data-state="a"]) .art--plaque .plaque { transform: none; }
.art--plaque .xs-plaque { transform: translateY(42px); transition: transform 3s var(--ease) 0.6s; }
.fig.in:not([data-state="a"]) .art--plaque .xs-plaque { transform: none; }
.art--plaque .crack { opacity: 0; transition: opacity 0.6s; }
.art--plaque .clot { transform-origin: 330px 136px; transform: scale(0); transition: transform 2.2s var(--ease) 0.9s; }
.art--plaque .xs-clot { transform-origin: 112px 336px; transform: scale(0); transition: transform 2.2s var(--ease) 0.9s; }
.art--plaque .dim { opacity: 0; transition: opacity 1.6s 2s; }
.fig.in[data-state="c"] .art--plaque .crack, .fig.in[data-state="c"] .art--plaque .dim { opacity: 1; }
.fig.in[data-state="c"] .art--plaque .clot, .fig.in[data-state="c"] .art--plaque .xs-clot { transform: none; }

/* weight: the waist widens; fat swells among the organs */
.art--waist .outer { transition: transform 2.8s var(--ease) 0.4s; }
.fig.in[data-state="b"] .art--waist .outer { transform: scale(1.11, 1.12); }
.art--waist .vfat { fill: url(#g-vfat); transform-box: fill-box; transform-origin: center; transform: scale(0.3); transition: transform 2.4s var(--ease) calc(1s + var(--d)); }
.fig.in[data-state="b"] .art--waist .vfat { transform: none; }
.fig.in .art--waist .tape { animation: march 6s linear infinite; }
@keyframes march { to { stroke-dashoffset: -110; } }

/* anaemia: fewer, paler red cells; less oxygen handed over; the heart hurries */
.art--oxygen .o2 { fill: url(#g-o2); transition: opacity 1s; }
.art--oxygen .flow { animation: flow-640 13s linear infinite; }
.art--oxygen .rc-in { transition: transform 1.4s var(--ease), opacity 1.2s; }
.art--oxygen .rbc { transition: filter 1.4s; }
.fig[data-state="b"] .art--oxygen .rc-in { transform: scale(0.8); }
.fig[data-state="b"] .art--oxygen .rc--few .rc-in { opacity: 0; }
.fig[data-state="b"] .art--oxygen .rbc { filter: saturate(0.6) brightness(1.1); }
.fig[data-state="b"] .art--oxygen .o2:not(:nth-of-type(1)) { opacity: 0; }
.art--oxygen .tissue line { stroke: #f2b8a6; stroke-opacity: 0.5; stroke-width: 2; }
.art--oxygen .energy { opacity: 0.35; transition: opacity 1.6s; }
.fig.in[data-state="a"] .art--oxygen .energy { opacity: 1; animation: throb 2.6s ease-in-out infinite; }
.fig[data-state="b"] .art--oxygen .energy { opacity: 0.12; }
.art--oxygen .give { fill: url(#g-o2); opacity: 0; }
.fig.in .art--oxygen .give { animation: give 3.6s ease-in infinite; }
.fig.in[data-state="b"] .art--oxygen .give { animation-duration: 5.4s; }
.fig[data-state="b"] .art--oxygen .give--few { visibility: hidden; }
@keyframes give { 0% { opacity: 0; transform: none; } 15%, 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(96px); } }
.fig.in .art--oxygen .heart { animation: lub 1.1s var(--ease) infinite; }
.fig.in[data-state="b"] .art--oxygen .heart { animation-duration: 0.55s; }
@keyframes lub { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.09); } 28% { transform: scale(1); } 40% { transform: scale(1.05); } }

/* cough and cold: a sore nose and throat; sometimes a patch in the lung */
.art--airway .breath { transform-origin: 320px 300px; }
.fig.in .art--airway .breath { animation: breathe 4.2s ease-in-out infinite; }
.fig.in[data-state="c"] .art--airway .breath { animation-duration: 1.5s; }
@keyframes breathe { 50% { transform: scale(1.035); } }
.art--airway .air { opacity: 0; }
.fig.in .art--airway .air { animation: air 3.2s linear infinite; }
@keyframes air { 0% { opacity: 0; transform: none; } 15%, 85% { opacity: 0.9; } 100% { opacity: 0; transform: translateY(144px); } }
.art--airway .sore, .art--airway .germs-up { opacity: 0; transition: opacity 1.2s; }
.fig.in:not([data-state="a"]) .art--airway .sore { opacity: 0.95; animation: throb 2s ease-in-out 1.2s infinite; }
.fig.in:not([data-state="a"]) .art--airway .germs-up { opacity: 1; }
.art--airway .drip { opacity: 0; }
.fig.in[data-state="b"] .art--airway .drip { animation: drip 2.4s ease-in infinite; }
.fig.in[data-state="b"] .art--airway .drip + .drip { animation-delay: 1.2s; }
@keyframes drip { 0% { opacity: 0; transform: none; } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(40px); } }
.art--airway .germs-down { opacity: 0; transition: opacity 1s 1.2s; }
.art--airway .patch { opacity: 0; transition: opacity 2s 1.6s; }
.fig.in[data-state="c"] .art--airway .germs-down { opacity: 1; }
.fig.in[data-state="c"] .art--airway .patch { opacity: 1; }

/* joint pain: a knee, healthy, worn, inflamed */
.art--joint .cart { fill: none; stroke: #e4f1f1; stroke-width: 11; stroke-linecap: round; transition: stroke-width 2s var(--ease) 0.4s, stroke 2s 0.4s; }
.fig[data-state="b"] .art--joint .cart { stroke-width: 3.5; stroke: #d3c9ae; }
.art--joint .femur { transform-box: view-box; transform-origin: 320px 200px; transition: translate 2s var(--ease) 0.6s; }
.fig[data-state="b"] .art--joint .femur { translate: 0 9px; }
.fig.in .art--joint .femur { animation: j-glide 4.8s ease-in-out infinite; }
.fig.in[data-state="b"] .art--joint .femur { animation-name: j-grind; }
.fig.in[data-state="c"] .art--joint .femur { animation-duration: 8s; }
@keyframes j-glide { 0%, 100% { rotate: -1.5deg; } 50% { rotate: 1.5deg; } }
@keyframes j-grind { 0%, 100% { rotate: -1.2deg; } 45% { rotate: 0.5deg; } 48% { rotate: 0.2deg; } 51% { rotate: 0.8deg; } 54% { rotate: 0.4deg; } 62% { rotate: 1.2deg; } }
.art--joint .spur { transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform 1.6s var(--ease) 1.4s; }
.fig[data-state="b"] .art--joint .spur { transform: scale(1); }
.art--joint .creaks path { fill: none; stroke: var(--coral); stroke-width: 3; stroke-linecap: round; }
.art--joint .creaks { opacity: 0; }
.fig.in[data-state="b"] .art--joint .creaks { animation: j-creak 4.8s ease infinite 2s; }
@keyframes j-creak { 0%, 40%, 68%, 100% { opacity: 0; } 47%, 58% { opacity: 1; } }
.art--joint .sac { transform-box: fill-box; transform-origin: center; transition: transform 2s var(--ease) 0.4s; }
.fig[data-state="c"] .art--joint .sac { transform: scale(1.1); }
.art--joint .sac-hot { opacity: 0; transition: opacity 1.4s 0.4s; }
.fig[data-state="c"] .art--joint .sac-hot { opacity: 1; }
.art--joint .wbc-dot { fill: url(#g-wbc); opacity: 0; transition: opacity 1s 1.4s; }
.fig[data-state="c"] .art--joint .wbc-dot { opacity: 0.95; }
.fig.in[data-state="c"] .art--joint .wbc-dot { animation: j-drift 3s ease-in-out infinite alternate; }
@keyframes j-drift { to { transform: translate(6px, -5px); } }
.art--joint .heat { opacity: 0; transition: opacity 1.6s 1.2s; }
.fig.in[data-state="c"] .art--joint .heat { opacity: 0.8; animation: throb 2.4s ease-in-out 2.8s infinite; }

/* prediabetes: the HbA1c marker drifts up, or is walked back */
.art--gauge .ticks line { stroke: #fff; stroke-opacity: 0.75; stroke-width: 2; }
.art--gauge .ticks text { font-size: 16px; fill: var(--ink-soft); }
.art--gauge .pin { transform: translateX(297.7px); transition: transform 2.6s var(--ease) 0.3s; }
.fig[data-state="b"] .art--gauge .pin { transform: translateX(223.4px); }
.fig.in .art--gauge .pin-ball { animation: g-bob 2.8s ease-in-out infinite; }
@keyframes g-bob { 50% { transform: translateY(-6px); } }
.art--gauge .way { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s var(--ease) 1.2s; }
.art--gauge .drift .way { stroke: var(--coral); }
.art--gauge .drift .tip { fill: var(--coral); }
.art--gauge .back .way { stroke: var(--teal); }
.art--gauge .back .tip { fill: var(--teal); }
.fig.in[data-state="a"] .art--gauge .drift .way, .fig.in[data-state="b"] .art--gauge .back .way { stroke-dashoffset: 0; }

/* dengue: fever and platelets drawn day by day */
.art--dengue .grid line { stroke: var(--ink); stroke-opacity: 0.1; stroke-width: 1.5; }
.art--dengue .grid text, .art--dengue .days text, .art--dengue .daylab { font-size: 15px; fill: var(--ink-soft); }
.art--dengue .band--a { fill: rgba(237, 185, 64, 0.24); }
.art--dengue .band--b { fill: rgba(232, 103, 79, 0.18); }
.art--dengue .band--c { fill: rgba(22, 115, 122, 0.14); }
.art--dengue .line { fill: none; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 3s var(--ease) 0.3s; }
.art--dengue .line--fever { stroke: var(--coral); }
.art--dengue .line--plt { stroke: var(--teal); }
.fig.in .art--dengue .line { stroke-dashoffset: 0; }
.art--dengue .dot { opacity: 0; stroke: var(--paper); stroke-width: 2; transition: opacity 0.6s; }
.art--dengue .dot--fever { fill: url(#g-coral); }
.art--dengue .dot--plt { fill: url(#g-teal); }
.fig.in .art--dengue .dot { opacity: 1; }
.art--dengue .ping { fill: none; stroke: var(--coral); stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; }
.fig.in[data-state="b"] .art--dengue .ping { animation: ring 2.2s ease-out 1s infinite; }
.art .tag--teal rect { fill: var(--teal); stroke: none; }
.art .tag--teal text { fill: var(--paper); }
html:not(.js) .art--dengue .line { stroke-dashoffset: 0; }
html:not(.js) .art--dengue .dot { opacity: 1; }

/* germs that ride a path: typhoid and urine infections */
.art .ride { opacity: 0; offset-rotate: auto; }
@keyframes t-ride { 0% { offset-distance: 0%; opacity: 0; } 12%, 85% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
.fig.in .art--typhoid .rod--sit .rod-in, .fig.in .art--urinary .rod--sit .rod-in { animation: t-wiggle 1.6s ease-in-out infinite alternate; }
@keyframes t-wiggle { to { transform: rotate(9deg) translateX(2px); } }

/* typhoid: from the glass, into the gut, across into the blood */
.art--typhoid .route { fill: none; stroke: var(--ink-soft); stroke-opacity: 0.45; stroke-width: 2.5; stroke-dasharray: 2 8; stroke-linecap: round; }
.fig.in .art--typhoid .flow { animation: t-flow 9s linear infinite; }
@keyframes t-flow { to { transform: translateX(-392px); } }
.fig.in .art--typhoid .ride--sw { animation: t-ride 3.6s ease-in-out infinite; }
.art--typhoid .invade { opacity: 0; transition: opacity 0.8s; }
.fig[data-state="b"] .art--typhoid .invade { opacity: 1; }
.fig.in[data-state="b"] .art--typhoid .ride--in { animation: t-ride 4.2s ease-in infinite; }
.art--typhoid .heat { opacity: 0; transition: opacity 1.6s 1.4s; }
.fig.in[data-state="b"] .art--typhoid .heat { opacity: 0.9; animation: throb 2.4s ease-in-out 3s infinite; }

/* urine infection: up into the bladder, and on to a kidney */
.art--urinary .sore { opacity: 0.4; transition: opacity 1.4s 0.6s; }
.fig.in .art--urinary .sore { opacity: 1; animation: throb 2.2s ease-in-out 2s infinite; }
.fig.in .art--urinary .ride--up { animation: t-ride 3.6s ease-in-out infinite; }
.art--urinary .climb-k, .art--urinary .in-kidney { opacity: 0; transition: opacity 1s 0.8s; }
.fig[data-state="b"] .art--urinary .climb-k, .fig[data-state="b"] .art--urinary .in-kidney { opacity: 1; }
.fig.in[data-state="b"] .art--urinary .ride--k { animation: t-ride 4.2s ease-in-out infinite; }
.art--urinary .hot { opacity: 0; transition: opacity 1.8s 2s; }
.fig.in[data-state="b"] .art--urinary .hot { opacity: 1; animation: throb 2.4s ease-in-out 3.8s infinite; }

/* batch 4 pictures */
/* headache: a tight band, a migraine wave, a month of painkillers */
.art--head .ache { opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity 1.2s 0.6s; }
.fig.in[data-state="a"] .art--head .ache--band { opacity: 0.5; animation: b4-press 3.2s ease-in-out 1.8s infinite; }
.fig.in[data-state="b"] .art--head .ache--one { opacity: 0.9; animation: b4-throb 1.1s ease-in-out 1.2s infinite; }
.fig.in[data-state="c"] .art--head .ache--dull { opacity: 0.6; animation: throb 3s ease-in-out 1.4s infinite; }
@keyframes b4-press { 50% { opacity: 0.85; } }
@keyframes b4-throb { 0%, 100% { opacity: 0.35; transform: scale(0.92); } 18% { opacity: 1; transform: scale(1.05); } }
.art--head .neck { opacity: 0.3; transition: opacity 1s 0.4s; }
.fig[data-state="a"] .art--head .neck { opacity: 0.95; }
.fig.in[data-state="a"] .art--head .band-in { animation: b4-squeeze 3.2s ease-in-out 1.8s infinite; }
.fig.in[data-state="a"] .art--head .pinch--f { animation: b4-pinch-f 3.2s ease-in-out 1.8s infinite; }
.fig.in[data-state="a"] .art--head .pinch--b { animation: b4-pinch-b 3.2s ease-in-out 1.8s infinite; }
@keyframes b4-squeeze { 50% { stroke-width: 8px; } }
@keyframes b4-pinch-f { 50% { transform: translate(-7px, 4px); } }
@keyframes b4-pinch-b { 50% { transform: translate(7px, 2px); } }
.art--head .wave { transform-box: view-box; transform-origin: 222px 150px; }
.fig.in[data-state="b"] .art--head .wave { animation: b4-wave 4.6s ease-out infinite; }
@keyframes b4-wave { 0% { opacity: 0.9; transform: scale(0.05); } 100% { opacity: 0; transform: scale(1.9); } }
.art--head .aura { transform-box: view-box; transform-origin: 470px 168px; }
.fig.in[data-state="b"] .art--head .aura { animation: b4-grow 5s ease-out infinite; }
.fig.in[data-state="b"] .art--head .zig { animation: b4-flicker 0.45s steps(2) infinite; }
@keyframes b4-grow { 0% { transform: scale(0.6); } 100% { transform: scale(1.08); } }
@keyframes b4-flicker { 50% { opacity: 0.4; } }
.art--head .tab { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0.3); transition: opacity 0.4s, transform 0.5s var(--ease); }
.fig[data-state="c"] .art--head .tab { opacity: 1; transform: none; }

/* tiredness: the tank drains, tap by tap */
.art--tank .level { transition: transform 3s var(--ease) 0.6s; }
.fig.in[data-state="a"] .art--tank .level { transform: translateY(70px); }
.fig.in[data-state="b"] .art--tank .level { transform: translateY(140px); }
.art--tank .surface { transform-box: fill-box; transform-origin: center; }
.fig.in .art--tank .surface { animation: b4-slosh 3s ease-in-out infinite; }
@keyframes b4-slosh { 50% { transform: scaleY(0.7); } }
.art--tank .bub { fill: #fff4cf; opacity: 0; }
.fig.in .art--tank .bub { animation: b4-rise 3.4s ease-in infinite; }
@keyframes b4-rise { 0% { opacity: 0; transform: none; } 20% { opacity: 0.8; } 100% { opacity: 0; transform: translateY(-140px); } }
.art--tank .drip { fill: url(#g-drop); opacity: 0; }
.fig.in[data-state="a"] .art--tank .tap--l .drip, .fig.in[data-state="b"] .art--tank .tap--r .drip { animation: b4-drip 1.8s ease-in infinite; }
@keyframes b4-drip { 0% { opacity: 0; transform: none; } 15%, 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(46px); } }

/* asthma: the airway squeezes, swells and fills; the inhaler opens it */
.art--bronchus .muscle, .art--bronchus .lining, .art--bronchus .lumen, .art--bronchus .mucus, .art--bronchus .air { transform-box: view-box; transform-origin: 452px 210px; }
.art--bronchus .muscle, .art--bronchus .lining, .art--bronchus .lumen { transition: transform 2s var(--ease) 0.4s; }
.fig[data-state="b"] .art--bronchus .muscle, .fig[data-state="b"] .art--bronchus .lining { transform: scale(0.8); }
.fig[data-state="b"] .art--bronchus .lumen { transform: scale(0.42); }
.fig[data-state="c"] .art--bronchus .lining { transform: scale(0.98); }
.fig[data-state="c"] .art--bronchus .lumen { transform: scale(0.92); }
.art--bronchus .sore { opacity: 0; transition: opacity 1.4s 0.6s; }
.fig[data-state="b"] .art--bronchus .sore { opacity: 1; }
.art--bronchus .mucus { opacity: 0; transform: scale(0.4); transition: opacity 1s 1.6s, transform 1.6s var(--ease) 1.2s; }
.fig[data-state="b"] .art--bronchus .mucus { opacity: 1; transform: scale(0.6); }
.art--bronchus .air { fill: none; stroke: #fff; stroke-width: 3; opacity: 0; }
.fig.in .art--bronchus .air { animation: b4-breath 3.6s ease-in infinite; }
.fig.in[data-state="b"] .art--bronchus .air { animation-duration: 7s; }
@keyframes b4-breath { 0% { opacity: 0; transform: scale(1); } 20% { opacity: 0.8; } 100% { opacity: 0; transform: scale(0.1); } }
.art--bronchus .mist { opacity: 0; transition: opacity 1.4s 0.8s; }
.fig.in[data-state="c"] .art--bronchus .mist { opacity: 0.8; animation: throb 2.8s ease-in-out 2s infinite; }
.art--bronchus .puff circle { fill: #9fd8d5; opacity: 0; }
.fig.in[data-state="c"] .art--bronchus .puff circle { animation: b4-puff 1.6s ease-in infinite; }
@keyframes b4-puff { 0% { opacity: 0; transform: none; } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(110px); } }

/* allergies: pollen lands; with an allergy, the mast cell bursts */
.fig.in .art--mast .pollen-in { animation: b4-float 5s ease-in-out infinite alternate; }
.fig.in .art--mast .mite-in { animation: b4-float 7s ease-in-out infinite alternate-reverse; }
@keyframes b4-float { to { transform: translate(8px, -6px) rotate(20deg); } }
.art--mast .lander { transition: translate 2.6s var(--ease) 0.4s; }
.fig.in .art--mast .lander { translate: 0 150px; }
.fig.in .art--mast .lander .pollen-in { animation: none; }
.art--mast .abs { opacity: 0; transition: opacity 0.8s 0.4s; }
.fig[data-state="b"] .art--mast .abs { opacity: 1; }
.art--mast .grains { transition: opacity 1.2s 1.6s; }
.fig[data-state="b"] .art--mast .grains { opacity: 0.45; }
.art--mast .burst circle { opacity: 0; }
.fig.in[data-state="b"] .art--mast .burst circle { animation: b4-burst 2.6s ease-out 1.6s infinite; }
@keyframes b4-burst { 0% { opacity: 0; transform: none; } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)); } }
.art--mast .tissue { transform-box: view-box; transform-origin: 320px 420px; transition: transform 2s var(--ease) 1.8s; }
.fig[data-state="b"] .art--mast .tissue { transform: scaleY(1.06); }
.art--mast .swell { opacity: 0; transition: opacity 1.6s 1.8s; }
.fig.in[data-state="b"] .art--mast .swell { opacity: 0.9; animation: throb 2.4s ease-in-out 3.4s infinite; }
.art--mast .seep ellipse { opacity: 0; transform-box: fill-box; transform-origin: center; }
.fig.in[data-state="b"] .art--mast .seep ellipse { animation: b4-seep 2.2s ease-out 2.4s infinite; }
@keyframes b4-seep { 0% { opacity: 0; transform: translateY(8px) scale(0.4); } 40% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-26px); } }

/* vitamin B12: the red cells, the nerve coating and the signal */
.art--nerve .cells-ok, .art--nerve .cells-big { transition: opacity 1.4s 0.4s; }
.art--nerve .cells-big, .fig[data-state="b"] .art--nerve .cells-ok { opacity: 0; }
.fig[data-state="b"] .art--nerve .cells-big { opacity: 1; }
.fig.in .art--nerve .flow { animation: flow-640 14s linear infinite; }
.art--nerve .seg rect { transform-box: fill-box; transform-origin: center; }
.art--nerve .seg { transition: opacity 1.4s calc(0.6s + var(--i) * 0.15s); }
.art--nerve .seg rect { transition: transform 1.6s var(--ease) calc(0.4s + var(--i) * 0.15s); }
.fig[data-state="b"] .art--nerve .seg rect { transform: scaleY(0.55); }
.fig[data-state="b"] .art--nerve .seg:is([style*="--i:1"], [style*="--i:3"]) { opacity: 0.25; }
.art--nerve .signal { opacity: 0; }
.fig.in[data-state="a"] .art--nerve .signal { animation: b4-hop 1.8s infinite; }
.fig.in[data-state="b"] .art--nerve .signal { animation: b4-crawl 6s linear infinite; }
@keyframes b4-hop {
  0% { opacity: 0; transform: translateX(27px); animation-timing-function: ease-in-out; }
  5% { opacity: 1; }
  16% { transform: translateX(127px); animation-timing-function: ease-in-out; }
  33% { transform: translateX(227px); animation-timing-function: ease-in-out; }
  50% { transform: translateX(327px); animation-timing-function: ease-in-out; }
  66% { transform: translateX(427px); animation-timing-function: ease-in-out; }
  83%, 92% { opacity: 1; transform: translateX(527px); }
  100% { opacity: 0; transform: translateX(560px); }
}
@keyframes b4-crawl {
  0% { opacity: 0; transform: translateX(27px); }
  10%, 40% { opacity: 0.8; }
  50% { opacity: 0.15; transform: translateX(230px); }
  62% { opacity: 0.7; }
  90% { opacity: 0.5; }
  100% { opacity: 0; transform: translateX(520px); }
}
.art--nerve .tingle path { stroke: var(--coral); stroke-width: 3.5; stroke-linecap: round; opacity: 0; }
.fig.in[data-state="b"] .art--nerve .tingle path { animation: b4-tingle 1.2s steps(2) 1.6s infinite; }
@keyframes b4-tingle { 50% { opacity: 1; } }
/* batch 5 pictures */
.art .b5-ride { opacity: 0; offset-rotate: auto; }
@keyframes b5-ride { 0% { offset-distance: 0%; opacity: 0; } 12%, 85% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes b5-halt { 0% { offset-distance: 0%; opacity: 0; } 10% { opacity: 1; } 34% { offset-distance: 29%; opacity: 1; } 50%, 100% { offset-distance: 30%; opacity: 0; } }
@keyframes b5-spin { to { rotate: 360deg; } }
@keyframes b5-flow { to { transform: translateX(-392px); } }
@keyframes b5-jiggle { to { translate: 5px -4px; } }

/* vitamin D: sun on skin, the gut's calcium door, the lattice inside the bone */
.art--sunbone .route { fill: none; stroke: var(--ink-soft); stroke-opacity: 0.4; stroke-width: 2.5; stroke-dasharray: 2 8; stroke-linecap: round; }
.art--sunbone .rays line { stroke: var(--mustard); stroke-width: 5; stroke-linecap: round; }
.fig.in .art--sunbone .rays { animation: b5-spin 40s linear infinite; }
.art--sunbone .sun { transition: opacity 1.6s 0.4s; }
.fig[data-state="b"] .art--sunbone .sun { opacity: 0.5; }
.art--sunbone .beam { fill: var(--mustard); opacity: 0.22; transition: opacity 1.4s 0.4s; }
.fig[data-state="b"] .art--sunbone .beam { opacity: 0.03; }
.art--sunbone .cloud { fill: #eef1f1; opacity: 0; transform: translateX(-190px); transition: transform 2.2s var(--ease), opacity 1s; }
.fig[data-state="b"] .art--sunbone .cloud { opacity: 1; transform: none; }
.fig.in .art--sunbone .ride--d { animation: b5-ride 4.4s ease-in infinite; }
.fig[data-state="b"] .art--sunbone .ride--d:not(:first-child) { visibility: hidden; }
.art--sunbone .door-top, .art--sunbone .door-low { transition: transform 1.6s var(--ease) 0.8s; }
.fig[data-state="b"] .art--sunbone .door-top { transform: translateY(12px); }
.fig[data-state="b"] .art--sunbone .door-low { transform: translateY(-12px); }
.fig.in .art--sunbone .ride--ca { animation: b5-ride 4.8s linear infinite; }
.fig.in[data-state="b"] .art--sunbone .ride--ca { animation-name: b5-halt; }
.art--sunbone .strut { stroke: #fbf5e6; stroke-width: 5; stroke-linecap: round; transition: stroke-width 2.4s var(--ease) 1s, opacity 2.4s 1s; }
.fig[data-state="b"] .art--sunbone .strut { stroke-width: 2; }
.fig[data-state="b"] .art--sunbone .strut--lost { opacity: 0; }
.art--sunbone .cortex { fill: none; stroke: url(#g-bone5); stroke-width: 14; transition: stroke-width 2.4s var(--ease) 1s; }
.fig[data-state="b"] .art--sunbone .cortex { stroke-width: 4; }

/* constipation: soft stool moves; hard stool dries, slows and piles up; fibre and water soften it */
.fig.in .art--colon .ride--soft { animation: b5-ride 7s linear infinite; }
.fig.in .art--colon .ride--hard { animation: b5-ride 16s linear infinite; }
.art--colon .go, .art--colon .pile, .art--colon .drain, .art--colon .soak, .art--colon .fleck { transition: opacity 1s 0.4s; }
.art--colon .go--hard, .art--colon .pile, .art--colon .drain, .art--colon .soak, .art--colon .fleck { opacity: 0; }
.fig[data-state="b"] .art--colon .go--soft { opacity: 0; }
.fig[data-state="b"] .art--colon .go--hard, .fig[data-state="b"] .art--colon .pile, .fig[data-state="b"] .art--colon .drain { opacity: 1; }
.fig[data-state="c"] .art--colon .soak, .fig[data-state="c"] .art--colon .fleck { opacity: 1; }
.art--colon .stool { transition: scale 1s var(--ease) 0.4s; }
.art--colon .go--hard .stool, .art--colon .pile .stool, .fig[data-state="c"] .art--colon .go--soft .stool { scale: 1.25; }
.fig.in .art--colon .wet { animation: b5-seep 3.2s ease-in infinite; }
@keyframes b5-seep { 0% { opacity: 0; transform: none; } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)); } }

/* loose motions: water crosses the gut wall one way or the other; the body's level follows */
.art--flux .level { transition: transform 2.6s var(--ease) 0.6s; }
.fig[data-state="b"] .art--flux .level { transform: translateY(96px); }
.fig[data-state="c"] .art--flux .level { transform: translateY(40px); }
.fig.in .art--flux .surf { animation: b5-wave 3s linear infinite; }
@keyframes b5-wave { to { transform: translateX(-100px); } }
.art--flux .flood { opacity: 0; transition: opacity 1.6s 0.6s; }
.fig[data-state="b"] .art--flux .flood { opacity: 0.35; }
.art--flux .streaks path { stroke: var(--ink); stroke-opacity: 0.2; stroke-width: 4; stroke-linecap: round; }
.fig.in .art--flux .streaks path { animation: b5-rush 4.5s linear infinite; }
.fig.in[data-state="b"] .art--flux .streaks path { animation-duration: 1.1s; }
.art--flux .streaks path:nth-child(2n) { animation-delay: -0.5s; }
.art--flux .streaks path:nth-child(3n) { animation-delay: -1.7s; }
@keyframes b5-rush { 0% { opacity: 0; transform: none; } 30%, 70% { opacity: 1; } 100% { opacity: 0; transform: translateX(90px); } }
.fig.in .art--flux .flow { animation: b5-flow 9s linear infinite; }
.fig.in .art--flux .move { animation: b5-cross 3.6s ease-in-out infinite; }
.fig.in[data-state="b"] .art--flux .move { animation-direction: reverse; animation-duration: 2.4s; }
@keyframes b5-cross { 0% { opacity: 0; transform: none; } 15%, 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(186px); } }
.art--flux .ors { opacity: 0; scale: 1.4; transition: opacity 0.8s; }
.fig[data-state="c"] .art--flux .ors { opacity: 1; }

/* bloating and IBS: the squeeze, the gas, and the nerves to and from the brain */
.art--ibs .up circle { fill: var(--teal); transition: fill 0.8s; }
.fig[data-state="b"] .art--ibs .up circle { fill: var(--coral); }
.fig.in .art--ibs .ride--up { animation: b5-ride 3.6s linear infinite; }
.fig.in[data-state="b"] .art--ibs .ride--up { animation-duration: 1.8s; }
.fig:not([data-state="b"]) .art--ibs .ride--up:not(:nth-child(3n)) { visibility: hidden; }
.art--ibs .down circle { fill: var(--ink); }
.art--ibs .down { opacity: 0; transition: opacity 1s 0.6s; }
.fig[data-state="b"] .art--ibs .down { opacity: 1; }
.fig.in[data-state="b"] .art--ibs .ride--down { animation: b5-ride 3s linear infinite; }
.art--ibs .brain-hot, .art--ibs .belly-hot { opacity: 0; transition: opacity 1.6s 1s; }
.fig.in[data-state="b"] .art--ibs .brain-hot, .fig.in[data-state="b"] .art--ibs .belly-hot { opacity: 0.8; animation: throb 2.4s ease-in-out 2.6s infinite; }
.art--ibs .gut { transform-box: view-box; transform-origin: 420px 290px; transition: transform 2.2s var(--ease) 0.4s; }
.fig[data-state="b"] .art--ibs .gut { transform: scale(1.05, 1.14); }
.art--ibs .bub { fill: url(#g-gas); stroke: #fff; stroke-width: 1.5; transition: scale 2.2s var(--ease) 0.6s; }
.fig[data-state="b"] .art--ibs .bub { scale: 1.55; }
.fig.in .art--ibs .bub { animation: b5-jiggle 2.6s ease-in-out infinite alternate; }
.art--ibs .squeeze { fill: #a8513c; opacity: 0; transition: fill 0.8s; }
.fig.in .art--ibs .squeeze { animation: b5-squeeze 4.2s ease-in-out infinite; }
.fig.in[data-state="b"] .art--ibs .squeeze { fill: var(--coral); animation-name: b5-spasm; }
@keyframes b5-squeeze { 0% { opacity: 0; transform: translateX(210px); } 15%, 85% { opacity: 0.6; } 100% { opacity: 0; transform: translateX(620px); } }
@keyframes b5-spasm {
  0% { opacity: 0; transform: translateX(220px); } 10% { opacity: 0.7; } 22%, 36% { transform: translateX(330px); }
  42%, 58% { transform: translateX(420px) scaleX(2); } 64% { transform: translateX(350px); } 82% { transform: translateX(520px); opacity: 0.7; } 100% { opacity: 0; transform: translateX(630px); }
}
.art--ibs .zap { fill: none; stroke: var(--coral); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.fig.in[data-state="b"] .art--ibs .zap { animation: b5-zap 1.8s ease infinite 1.6s; }
.art--ibs .zap:nth-child(2n) { animation-delay: 2.3s; }
.art--ibs .zap:nth-child(3n) { animation-delay: 2.7s; }
@keyframes b5-zap { 0%, 60%, 100% { opacity: 0; } 15%, 40% { opacity: 1; } }

/* gout: the uric acid level, the crystals it leaves in the big toe, the attack, and lowering it */
.art--gout .uric { transition: transform 2.8s var(--ease) 0.4s; }
.fig[data-state="c"] .art--gout .uric { transform: translateY(87.5px); }
.art--gout .tick--x { stroke: var(--coral); stroke-width: 3; stroke-dasharray: 7 5; }
.art--gout .tick--ok { stroke: var(--teal); stroke-width: 3; opacity: 0; transition: opacity 0.8s 1.6s; }
.fig[data-state="c"] .art--gout .tick--ok { opacity: 1; }
.art--gout .toe { fill: #f3d6c4; stroke: #dcb09a; stroke-width: 2; }
.art--gout .toe-red { fill: var(--coral); opacity: 0; transition: opacity 1.6s 0.6s; }
.fig[data-state="b"] .art--gout .toe-red { opacity: 0.34; }
.art--gout .heat { opacity: 0; transition: opacity 1.6s 1s; }
.fig.in[data-state="b"] .art--gout .heat { opacity: 0.85; animation: throb 2.4s ease-in-out 2.6s infinite; }
.art--gout .sac { transform-box: fill-box; transform-origin: center; transition: transform 2s var(--ease) 0.4s; }
.fig[data-state="b"] .art--gout .sac { transform: scale(1.12); }
.art--gout .sac-hot { opacity: 0; transition: opacity 1.4s 0.4s; }
.fig[data-state="b"] .art--gout .sac-hot { opacity: 1; }
.art--gout .cart { fill: none; stroke: #e4f1f1; stroke-width: 7; stroke-linecap: round; }
.art--gout .xtal { fill: #fbfdff; stroke: #7fa3b9; stroke-width: 1.2; transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform 1.4s var(--ease), opacity 1.4s; }
.fig.in .art--gout .xtal { transform: scale(1); }
.fig.in[data-state="c"] .art--gout .xtal { transform: scale(0.4); opacity: 0.5; transition-duration: 3.2s; }
.art--gout .wbc { fill: url(#g-wbc); stroke: #b9c3d3; opacity: 0; transition: opacity 1s 1.2s; }
.fig[data-state="b"] .art--gout .wbc { opacity: 0.95; }
.fig.in[data-state="b"] .art--gout .wbc { animation: b5-jiggle 1.6s ease-in-out infinite alternate; }

/* batch 6 pictures */
.art .b6-ride { opacity: 0; offset-rotate: auto; }
@keyframes b6-ride { 0% { offset-distance: 0%; opacity: 0; } 12%, 85% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes b6-gather { 0% { opacity: 0; translate: 0 0; } 20% { opacity: 1; } 100% { opacity: 0; translate: var(--dx) var(--dy); } }
@keyframes b6-flicker { 50% { opacity: 0.3; } }
@keyframes b6-jostle { to { translate: 2px -2px; } }

/* kidney stones: crystals clump; a stone squeezes down the ureter; water washes small ones out */
.art--stone .grow { transform: scale(0.35); transition: transform 3s var(--ease) 0.6s; }
.fig.in .art--stone .grow { transform: none; }
.art--stone .stone-k { transition: opacity 0.8s; }
.fig:not([data-state="a"]) .art--stone .stone-k { opacity: 0; }
.art--stone .xt { opacity: 0; }
.fig.in[data-state="a"] .art--stone .xt { animation: b6-gather 3.4s ease-in infinite; }
.fig.in[data-state="b"] .art--stone .stone-go { animation: b6-pass 7s ease-in-out infinite; }
@keyframes b6-pass { 0% { offset-distance: 0%; opacity: 0; } 6% { opacity: 1; } 28% { offset-distance: 30%; } 40% { offset-distance: 33%; } 62% { offset-distance: 64%; } 72% { offset-distance: 67%; } 92% { offset-distance: 100%; opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
.art--stone .cramp, .art--stone .hot, .art--stone .zap { opacity: 0; transition: opacity 1s 0.4s; }
.fig.in[data-state="b"] .art--stone .cramp { opacity: 0.7; animation: throb 1.2s ease-in-out 1.4s infinite; }
.fig.in[data-state="b"] .art--stone .hot { opacity: 0.55; animation: throb 2.4s ease-in-out 2s infinite; }
.fig.in[data-state="b"] .art--stone .zap { opacity: 1; animation: b6-flicker 0.9s steps(2) 1.4s infinite; }
.fig.in[data-state="c"] .art--stone .flow { animation: b6-ride 3.6s linear infinite; }
.fig.in[data-state="c"] .art--stone .pebble { animation: b6-ride 5.4s ease-in infinite; }

/* rashes and itching: the brick-wall barrier, what gets through it, the itch nerve */
.art--itch .brick { fill: url(#g-brick6); stroke: #e2a792; stroke-width: 1.2; transform-box: fill-box; transform-origin: center; transition: transform 1.6s var(--ease) 0.4s, opacity 1.6s 0.4s; }
.fig[data-state="b"] .art--itch .gap { transform: scale(0.55, 0.7); opacity: 0.35; }
.art--itch .mortar { fill: #f0d79a; transition: fill 1.4s 0.4s; }
.fig[data-state="b"] .art--itch .mortar { fill: #b98474; }
.art--itch .flush, .art--itch .patch { opacity: 0; transition: opacity 1.6s 0.8s; }
.fig[data-state="b"] .art--itch .flush { opacity: 1; }
.fig[data-state="b"] .art--itch .patch { opacity: 0.35; }
.fig.in[data-state="b"] .art--itch .flush { animation: throb 3s ease-in-out 2.4s infinite; }
.art--itch .scratch path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.fig.in[data-state="b"] .art--itch .scratch path { animation: b6-scratch 2.4s ease-out 1s infinite; }
.fig.in[data-state="b"] .art--itch .scratch path:nth-child(2) { animation-delay: 1.15s; }
.fig.in[data-state="b"] .art--itch .scratch path:nth-child(3) { animation-delay: 1.3s; }
@keyframes b6-scratch { 0% { stroke-dashoffset: 1; opacity: 1; } 30% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.art--itch .wet { transition: opacity 1.2s 0.4s; }
.fig[data-state="b"] .art--itch .wet { opacity: 0.3; }
.fig.in[data-state="b"] .art--itch .out { animation: b6-ride 3.2s ease-out infinite; }
.fig.in[data-state="b"] .art--itch .fall { animation: b6-ride 4s ease-in infinite; }
.fig.in[data-state="b"] .art--itch .sig { animation: b6-ride 2.4s ease-in infinite; }
.art--itch .cream, .art--itch .cream-band { fill: #fff; }
.art--itch .cream, .art--itch .cream-band, .art--itch .cream-gloss { opacity: 0; transition: opacity 1.4s 0.6s; }
.fig[data-state="c"] .art--itch .cream { opacity: 0.45; }
.fig[data-state="c"] .art--itch .cream-band { opacity: 0.85; }
.fig[data-state="c"] .art--itch .cream-gloss { opacity: 0.9; }

/* hives: welts come and go on the skin; under one, histamine makes a vessel leak */
.art--wheal .hive-in { transform-box: fill-box; transform-origin: center; opacity: 0; transform: scale(0.5); transition: opacity 1s, transform 1.2s var(--ease); }
.fig[data-state="b"] .art--wheal .hive-in { opacity: 1; transform: none; }
.fig[data-state="c"] .art--wheal .hive-in { opacity: 0.16; transform: scale(0.7); }
.fig.in[data-state="b"] .art--wheal .hive-in { animation: b6-come 8.5s ease-in-out infinite; }
.fig.in[data-state="b"] .art--wheal .hive:nth-child(2) .hive-in { animation: none; }
@keyframes b6-come { 0% { opacity: 0; transform: scale(0.5); } 14%, 62% { opacity: 1; transform: none; } 86%, 100% { opacity: 0; transform: scale(0.85); } }
.art--wheal .hump { transform-box: view-box; transform-origin: 470px 152px; transform: scaleY(0.04); transition: transform 2s var(--ease) 0.8s; }
.fig[data-state="b"] .art--wheal .hump { transform: none; }
.fig[data-state="c"] .art--wheal .hump { transform: scaleY(0.15); }
.art--wheal .pool { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0.3); transition: opacity 1.6s 0.6s, transform 2s var(--ease) 0.6s; }
.fig[data-state="b"] .art--wheal .pool { opacity: 1; transform: none; }
.fig[data-state="c"] .art--wheal .pool { opacity: 0.25; transform: scale(0.5); }
.fig.in[data-state="b"] .art--wheal .leak { animation: b6-ride 2.6s ease-out infinite; }
.art--wheal .hist circle { opacity: 0; }
.fig.in[data-state="b"] .art--wheal .hist circle { animation: b6-gather 2.4s ease-out infinite; }
.art--wheal .gran { transition: opacity 1s 0.4s; }
.fig[data-state="b"] .art--wheal .gran { opacity: 0.35; }
.art--wheal .blocks rect { opacity: 0; transform: translateY(-24px); transition: opacity 0.8s 0.6s, transform 1.2s var(--ease) 0.6s; }
.fig[data-state="c"] .art--wheal .blocks rect { opacity: 1; transform: none; }

/* boils: germs slip into a hair root, white cells swarm, pus collects; sometimes it spreads */
.fig.in .art--boil .germs > g { animation: b6-jostle 1.6s ease-in-out infinite alternate; }
.art--boil .pus { transform-box: fill-box; transform-origin: center; transform: scale(0.15); opacity: 0; transition: transform 2.4s var(--ease) 0.6s, opacity 1s 0.6s; }
.fig:not([data-state="a"]) .art--boil .pus { transform: none; opacity: 1; }
.art--boil .dome { transform-box: view-box; transform-origin: 318px 150px; transform: scaleY(0.03); transition: transform 2.2s var(--ease) 1s; }
.fig:not([data-state="a"]) .art--boil .dome { transform: none; }
.art--boil .fighters { opacity: 0; transition: opacity 1.2s 1.4s; }
.fig:not([data-state="a"]) .art--boil .fighters { opacity: 1; }
.fig.in:not([data-state="a"]) .art--boil .fighters > g { animation: b6-jostle 1.4s ease-in-out infinite alternate; }
.fig.in:not([data-state="a"]) .art--boil .fighters > g:nth-child(2n) { animation-delay: -0.7s; }
.art--boil .red { opacity: 0; transition: opacity 1.6s 0.8s; }
.fig[data-state="b"] .art--boil .red { opacity: 1; }
.fig.in[data-state="b"] .art--boil .red { animation: throb 2.6s ease-in-out 2.4s infinite; }
.art--boil .spread { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0.4); transition: opacity 1.6s 0.4s, transform 3s var(--ease) 0.4s; }
.fig[data-state="c"] .art--boil .spread { opacity: 1; transform: none; }
.art--boil .streak { stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset 2.6s var(--ease) 1.6s, opacity 0.6s; }
.fig[data-state="c"] .art--boil .streak { stroke-dashoffset: 0; opacity: 1; transition-delay: 1.6s, 1.4s; }
.fig.in[data-state="b"] .art--boil .germ-in { animation: b6-ride 3.6s ease-in infinite; }
.fig.in:not([data-state="a"]) .art--boil .cell-in { animation: b6-ride 3s ease-in-out infinite; }

/* malaria: a bite, the liver, red cells bursting in waves of fever, then the medicine */
.art--plasmo .wings { transform-box: fill-box; transform-origin: 90% 80%; }
.fig.in[data-state="a"] .art--plasmo .wings { animation: b6-buzz 0.12s linear infinite alternate; }
@keyframes b6-buzz { to { transform: rotate(-6deg); } }
.fig.in[data-state="a"] .art--plasmo .spz { animation: b6-ride 2.4s ease-in infinite; }
.art--plasmo .brood { transform-box: fill-box; transform-origin: center; transform: scale(0.3); transition: transform 3s var(--ease) 1s, opacity 0.8s; }
.fig.in[data-state="a"] .art--plasmo .brood { transform: none; }
.fig:not([data-state="a"]) .art--plasmo .brood { opacity: 0; }
.art--plasmo .sleep { transition: opacity 1.4s 0.6s; }
.fig.in:not([data-state="c"]) .art--plasmo .sleep { animation: throb 3.2s ease-in-out infinite; }
.fig[data-state="c"] .art--plasmo .sleep { opacity: 0; }
.fig.in[data-state="b"] .art--plasmo .mero { animation: b6-ride 2.8s ease-in infinite; }
.art--plasmo .rc { transform-box: fill-box; transform-origin: center; }
.art--plasmo .rg, .art--plasmo .sz, .art--plasmo .mz circle { opacity: 0; }
.fig.in[data-state="b"] .art--plasmo .rc { animation: b6-rc 6s ease-in-out var(--d) infinite; }
.fig.in[data-state="b"] .art--plasmo .rg { animation: b6-rg 6s linear var(--d) infinite; }
.fig.in[data-state="b"] .art--plasmo .sz { animation: b6-sz 6s linear var(--d) infinite; }
.fig.in[data-state="b"] .art--plasmo .mz circle { animation: b6-mz 6s ease-out var(--d) infinite; }
@keyframes b6-rc { 0%, 58% { opacity: 1; transform: none; } 64% { transform: scale(1.12); } 70%, 88% { opacity: 0; transform: scale(0.5); } 100% { opacity: 1; transform: none; } }
@keyframes b6-rg { 0%, 6% { opacity: 0; } 12%, 30% { opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes b6-sz { 0%, 32% { opacity: 0; } 40%, 60% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes b6-mz { 0%, 62% { opacity: 0; translate: 0 0; } 68% { opacity: 1; } 92%, 100% { opacity: 0; translate: var(--dx) var(--dy); } }
.art--plasmo .tick, .art--plasmo .days text { font-size: 15px; fill: var(--ink-soft); }
.art--plasmo .spikes, .art--plasmo .calm { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 3s var(--ease) 0.6s; }
.fig.in[data-state="b"] .art--plasmo .spikes { stroke-dashoffset: 0; }
.fig.in:not([data-state="b"]) .art--plasmo .calm { stroke-dashoffset: 0; }
.art--plasmo .cure { opacity: 0; transition: opacity 1.4s 0.6s; }
.fig.in[data-state="c"] .art--plasmo .cure { opacity: 1; animation: throb 3s ease-in-out 2s infinite; }

/* batch 7 pictures */
.art .b7-ride { opacity: 0; offset-rotate: auto; }
@keyframes b7-ride { 0% { offset-distance: 0%; opacity: 0; } 12%, 85% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes b7-beat { 0%, 100% { scale: 1; } 14% { scale: 1.035; } 34% { scale: 0.985; } }
@keyframes b7-jostle { to { translate: 2px -2px; } }

/* chest infection: air sacs pass oxygen; they fill with pus; treatment clears them */
.art--pneumo .o2 { fill: url(#g-o27); opacity: 0; }
.fig.in .art--pneumo .o2 { animation: b7-o2 2.8s ease-out infinite; }
@keyframes b7-o2 { 0% { opacity: 0; translate: 0 0; } 25% { opacity: 1; } 100% { opacity: 0; translate: var(--dx) var(--dy); } }
.fig[data-state="b"] .art--pneumo .hit .o2 { visibility: hidden; }
.art--pneumo .pus { fill: url(#g-pus7); transform-box: fill-box; transform-origin: center; transform: scale(0); opacity: 0; transition: transform 1.8s var(--ease) var(--d), opacity 1.2s var(--d); }
.fig[data-state="b"] .art--pneumo .pus { transform: none; opacity: 1; }
.fig[data-state="c"] .art--pneumo .pus { transform: scale(0.4); opacity: 0.7; }
.art--pneumo .germ { fill: #5e7d32; }
.art--pneumo .germ, .art--pneumo .wbc7 { opacity: 0; transition: opacity 0.9s 0.5s; }
.fig[data-state="b"] .art--pneumo .germ, .fig[data-state="b"] .art--pneumo .wbc7 { opacity: 1; }
.fig[data-state="c"] .art--pneumo .wbc7 { opacity: 0.35; }
.fig.in[data-state="b"] .art--pneumo .wbc7 { animation: b7-jostle 0.9s ease-in-out infinite alternate; }
.art--pneumo .patch { opacity: 0; transition: opacity 1.6s 0.4s; }
.fig[data-state="b"] .art--pneumo .patch { opacity: 0.95; }
.fig[data-state="c"] .art--pneumo .patch { opacity: 0.4; }

/* COPD: small springy sacs become big baggy ones; the airway thickens; inhaler and quitting */
.art--copd .breathe { transform-box: view-box; transform-origin: 468px 214px; }
.fig.in .art--copd .breathe { animation: b7-breathe 4s ease-in-out infinite; }
.fig.in:not([data-state="a"]) .art--copd .breathe { animation-name: b7-stuck; }
@keyframes b7-breathe { 50% { scale: 0.92; } }
@keyframes b7-stuck { 50% { scale: 0.985; } }
.art--copd .small, .art--copd .bags { transition: opacity 1.8s 0.3s; }
.art--copd .bags { opacity: 0; }
.fig:not([data-state="a"]) .art--copd .small { opacity: 0; }
.fig:not([data-state="a"]) .art--copd .bags { opacity: 1; }
.art--copd .lumen, .art--copd .duct { transition: stroke-width 1.6s var(--ease) 0.3s; }
.fig[data-state="b"] .art--copd .lumen { stroke-width: 14px; }
.fig[data-state="c"] .art--copd .lumen { stroke-width: 26px; }
.fig[data-state="b"] .art--copd .duct { stroke-width: 6px; }
.fig[data-state="c"] .art--copd .duct { stroke-width: 10px; }
.fig.in[data-state="b"] .art--copd .lumen { animation: b7-floppy 4s ease-in-out 2s infinite; }
@keyframes b7-floppy { 50% { stroke-width: 6px; } }
.art--copd .mucus, .art--copd .cig, .art--copd .inhaler { opacity: 0; transition: opacity 1.2s 0.4s; }
.fig[data-state="b"] .art--copd .mucus, .fig[data-state="b"] .art--copd .cig, .fig[data-state="c"] .art--copd .inhaler { opacity: 1; }
.fig[data-state="c"] .art--copd .mucus { opacity: 0.3; }
.fig.in .art--copd .air { animation: b7-ride 3.2s ease-in-out infinite; }
.fig.in[data-state="b"] .art--copd .air { animation-duration: 6.4s; }
.fig.in[data-state="b"] .art--copd .air:nth-child(2n) { visibility: hidden; }
.fig.in[data-state="b"] .art--copd .smoke { animation: b7-ride 4.5s linear infinite; }
.fig.in[data-state="c"] .art--copd .puff { animation: b7-ride 2.6s ease-out infinite; }

/* heart disease: a narrowed artery, angina on effort, a clot and a heart attack */
.art--coronary .beat { transform-box: view-box; }
.fig.in .art--coronary .beat { animation: b7-beat 1.3s ease-in-out infinite; }
.fig.in[data-state="b"] .art--coronary .beat { animation-duration: 0.62s; }
.art--coronary .zone { fill: url(#g-ache7); opacity: 0; transition: opacity 1.4s 0.4s; }
.art--coronary .zone-dead { fill: #4a1a2e; opacity: 0; transition: opacity 2.4s 1.2s; }
.fig[data-state="b"] .art--coronary .zone { opacity: 1; }
.fig.in[data-state="b"] .art--coronary .zone { animation: throb 1.24s ease-in-out 1.6s infinite; }
.fig[data-state="c"] .art--coronary .zone { opacity: 0; }
.fig[data-state="c"] .art--coronary .zone-dead { opacity: 0.72; }
.art--coronary .lad-far { transition: opacity 1.4s 0.8s; }
.fig[data-state="c"] .art--coronary .lad-far { opacity: 0.4; }
.fig.in .art--coronary .flow { animation: b7-ride 2.4s linear infinite; }
.fig.in[data-state="b"] .art--coronary .flow { animation-duration: 1.2s; }
.fig[data-state="c"] .art--coronary .flow-far { visibility: hidden; }
.fig.in .art--coronary .flow-near { animation: b7-ride 1.2s linear infinite; }
.fig.in .art--coronary .lens-flow { animation: b7-flow 3.4s linear infinite; }
.fig.in[data-state="b"] .art--coronary .lens-flow { animation-duration: 1.6s; }
.fig[data-state="c"] .art--coronary .lens-flow { animation: none; opacity: 0.55; }
@keyframes b7-flow { to { transform: translateX(-300px); } }
.art--coronary .clot { transform-box: fill-box; transform-origin: 50% 100%; transform: scale(0.3, 0.2); opacity: 0; transition: transform 1.8s var(--ease) 0.3s, opacity 0.8s 0.3s; }
.art--coronary .crack { opacity: 0; transition: opacity 0.6s; }
.fig[data-state="c"] .art--coronary .clot { transform: none; opacity: 1; }
.fig[data-state="c"] .art--coronary .crack { opacity: 1; }

/* heart failure: a strong pump; a stretched, weak one with fluid backing up; better on treatment */
.art--pump .grow, .art--pump .cav { transform-box: fill-box; transform-origin: center; transition: scale 1.8s var(--ease) 0.3s; }
.fig[data-state="b"] .art--pump .grow { scale: 1.1; }
.fig[data-state="c"] .art--pump .grow { scale: 1.04; }
.fig[data-state="b"] .art--pump .cav { scale: 1.2; }
.fig[data-state="c"] .art--pump .cav { scale: 1.08; }
.art--pump .beat { transform-box: fill-box; transform-origin: center; }
.art--pump .cav path { transform-box: fill-box; transform-origin: center; --sq: 0.62; }
.fig[data-state="b"] .art--pump .cav path { --sq: 0.9; }
.fig[data-state="c"] .art--pump .cav path { --sq: 0.76; }
.fig.in .art--pump .beat { animation: b7-beat 1.2s ease-in-out infinite; }
.fig.in .art--pump .cav path { animation: b7-squeeze 1.2s ease-in-out infinite; }
@keyframes b7-squeeze { 0%, 100% { scale: 1; } 30% { scale: var(--sq); } }
.fig.in .art--pump .out { animation: b7-ride 1.6s linear infinite; }
.fig.in[data-state="b"] .art--pump .out { animation-duration: 3.2s; }
.fig.in[data-state="b"] .art--pump .out:nth-child(2n) { visibility: hidden; }
.fig.in[data-state="c"] .art--pump .out { animation-duration: 2.2s; }
.art--pump .back { offset-rotate: 0deg; }
.fig.in[data-state="b"] .art--pump .back { animation: b7-ride 3.8s ease-in infinite; }
.art--pump .flood { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; transform: scale(0.4); transition: transform 2.4s var(--ease) 0.8s, opacity 1.6s 0.8s; }
.fig[data-state="b"] .art--pump .flood { transform: none; opacity: 1; }
.fig[data-state="c"] .art--pump .flood { transform: scale(0.6); opacity: 0.3; }
.art--pump .swell, .art--pump .spot { opacity: 0; transition: opacity 1.6s 1s; }
.fig[data-state="b"] .art--pump .swell, .fig[data-state="b"] .art--pump .spot { opacity: 1; }
.fig[data-state="c"] .art--pump .swell { opacity: 0.3; }
.fig.in[data-state="b"] .art--pump .spot { animation: throb 1.6s ease-in-out 2s infinite; }

/* nerve pain: a clear signal from the sole; a worn coating misfires; a numb foot misses an injury */
.art--neuro .zone { fill: url(#g-ache7); opacity: 0; transition: opacity 1.6s 0.6s; }
.fig[data-state="b"] .art--neuro .zone { opacity: 1; }
.fig[data-state="b"] .art--neuro .zone--hand { opacity: 0.55; }
.fig.in[data-state="b"] .art--neuro .zone { animation: throb 1.4s ease-in-out 2s infinite; }
.fig[data-state="c"] .art--neuro .zone { fill: url(#g-numb7); opacity: 1; }
.fig[data-state="c"] .art--neuro .zone--hand { opacity: 0.45; }
.art--neuro .mind { opacity: 0; transition: opacity 1s 0.6s; }
.fig[data-state="a"] .art--neuro .mind { opacity: 0.8; }
.fig[data-state="b"] .art--neuro .mind { opacity: 0.9; fill: url(#g-ache7); }
.fig.in:not([data-state="c"]) .art--neuro .mind { animation: throb 1.8s ease-in-out 1.4s infinite; }
.fig.in[data-state="a"] .art--neuro .sig { animation: b7-ride 3s ease-in infinite; }
.fig.in[data-state="a"] .art--neuro .lens-sig .sig { animation-duration: 1.8s; }
.fig.in[data-state="b"] .art--neuro .up .sig { animation: b7-ride 1.5s ease-in infinite; }
.art--neuro .seg-in { transform-box: fill-box; transform-origin: center; transition: transform 1.6s var(--ease) 0.3s, opacity 1.6s 0.3s; }
.fig[data-state="b"] .art--neuro .seg-in { transform: scale(0.85); }
.fig[data-state="b"] .art--neuro .seg--worn .seg-in { transform: scale(0.55, 0.6); opacity: 0.35; }
.fig[data-state="c"] .art--neuro .seg-in { transform: scale(0.7); opacity: 0.6; }
.fig[data-state="c"] .art--neuro .seg--worn .seg-in { transform: scale(0.4); opacity: 0.1; }
.art--neuro .ends { transition: opacity 1.6s 0.3s; }
.fig[data-state="b"] .art--neuro .ends { opacity: 0.6; }
.fig[data-state="c"] .art--neuro .ends { opacity: 0.15; }
.art--neuro .press, .art--neuro .thorn { opacity: 0; transition: opacity 0.9s 0.4s; }
.fig[data-state="a"] .art--neuro .press, .fig[data-state="c"] .art--neuro .thorn { opacity: 1; }
.fig.in[data-state="a"] .art--neuro .press { animation: b7-press 1.8s ease-in-out infinite; }
@keyframes b7-press { 0%, 100% { translate: 0 6px; } 40%, 60% { translate: 0 -4px; } }
.art--neuro .misfire g { opacity: 0; }
.fig.in[data-state="b"] .art--neuro .misfire g { animation: b7-misfire 1.1s ease-out infinite; }
@keyframes b7-misfire { 0% { opacity: 0; scale: 0.4; } 18% { opacity: 1; scale: 1.25; } 55%, 100% { opacity: 0; scale: 0.8; } }

/* batch 8 pictures */
.art .b8-ride { opacity: 0; offset-rotate: auto; }
@keyframes b8-ride { 0% { offset-distance: 0%; opacity: 0; } 12%, 85% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes b8-pulse { 50% { scale: 1.07; } }
@keyframes b8-jostle { to { translate: 2px -3px; } }

/* kidney damage: a million filters; scarred ones stop for good; the rest protected */
.art--nephron .kid { transition: scale 2s var(--ease) 0.4s; }
.fig:not([data-state="a"]) .art--nephron .kid { scale: 0.88; }
.art--nephron .pale { opacity: 0; transition: opacity 2s 0.4s; }
.fig:not([data-state="a"]) .art--nephron .pale { opacity: 0.4; }
.art--nephron .tuft, .art--nephron .scar { transform-box: fill-box; transform-origin: center; }
.fig.in .art--nephron .tuft { animation: b8-pulse 1.6s ease-in-out infinite; animation-delay: calc(var(--d) * -1); }
.art--nephron .tuft { transition: opacity 1.6s var(--d), transform 1.6s var(--ease) var(--d); }
.fig:not([data-state="a"]) .art--nephron .glom--lost .tuft { opacity: 0.25; transform: scale(0.7); animation: none; }
.art--nephron .scar { opacity: 0; transform: scale(0.5); transition: opacity 1.6s calc(var(--d) + 0.3s), transform 1.6s var(--ease) calc(var(--d) + 0.3s); }
.fig:not([data-state="a"]) .art--nephron .scar { opacity: 1; transform: none; }
.art--nephron .glom > circle { transition: stroke 1s 0.6s, stroke-width 1s 0.6s; }
.fig[data-state="c"] .art--nephron .glom:not(.glom--lost) > circle { stroke: #16737a; stroke-width: 4px; }
.art--nephron .gfr { transform-box: fill-box; transform-origin: left center; transition: transform 2.4s var(--ease) 0.6s; }
.fig:not([data-state="a"]) .art--nephron .gfr { transform: scaleX(0.31); }
.art--nephron .gfr-low { opacity: 0; transition: opacity 1.2s 0.8s; }
.fig[data-state="b"] .art--nephron .gfr-low { opacity: 1; }
.art--nephron .hold { opacity: 0; transition: opacity 0.8s 1.4s; }
.fig[data-state="c"] .art--nephron .hold { opacity: 1; }

/* protein or blood in the urine: the sieve's gaps widen; protein, then red cells, slip through */
.fig.in .art--sieve .go { animation: b8-ride 6s linear infinite; }
.fig.in .art--sieve .pass { animation: b8-ride 2.4s ease-in infinite; }
.fig.in:not([data-state="a"]) .art--sieve .leak-p { animation: b8-ride 3.2s ease-in 1.2s infinite; }
.fig.in[data-state="c"] .art--sieve .leak-r { animation: b8-ride 3.6s ease-in 1.2s infinite; }
.art--sieve .foot { transform-box: fill-box; transform-origin: center; transition: transform 1.6s var(--ease), opacity 1s; }
.fig[data-state="b"] .art--sieve .foot { transform: scaleX(0.62); }
.fig[data-state="c"] .art--sieve .foot { transform: scaleX(0.78); }
.fig[data-state="c"] .art--sieve .foot--torn { opacity: 0; transform: scale(0.4, 0.8); }
.art--sieve .pee--red, .art--sieve .foam { opacity: 0; transition: opacity 1.6s 1.4s; }
.fig[data-state="b"] .art--sieve .foam { opacity: 1; }
.fig[data-state="c"] .art--sieve .pee--red { opacity: 0.8; }
.fig[data-state="c"] .art--sieve .foam { opacity: 0.35; }

/* raised liver tests: irritated cells swell and spill enzymes; the reading climbs, then settles */
.fig.in .art--enzyme .go { animation: b8-ride 5.4s linear infinite; }
.fig.in .art--enzyme .enz-go { animation: b8-ride 5.4s linear infinite; }
.fig:not([data-state="b"]) .art--enzyme .enz-go:not(:nth-child(4n+1)) { visibility: hidden; }
.art--enzyme .lc { transition: scale 1.4s var(--ease); }
.fig[data-state="b"] .art--enzyme .lc--sore { scale: 1.05; }
.art--enzyme .burn { opacity: 0; transition: opacity 1.4s; }
.fig[data-state="b"] .art--enzyme .burn { opacity: 0.9; }
.fig.in[data-state="b"] .art--enzyme .burn { animation: throb 1.6s ease-in-out 1.4s infinite; }
.art--enzyme .enz { transition: translate 1.8s var(--ease) var(--d), opacity 1.8s var(--d); }
.fig[data-state="b"] .art--enzyme .lc--sore .enz { translate: var(--dx) var(--dy); opacity: 0; }
.art--enzyme .level { transform-box: fill-box; transform-origin: center bottom; transform: scaleY(0.2); transition: transform 2.4s var(--ease) 0.6s; }
.fig[data-state="b"] .art--enzyme .level { transform: scaleY(0.82); }
.fig[data-state="c"] .art--enzyme .level { transform: scaleY(0.22); }

/* jaundice: bilirubin from old red cells goes through the liver into bile; it backs up when the liver or the duct fails */
.fig.in .art--bile .bili { animation: b8-ride 3.6s linear infinite; }
.fig.in[data-state="a"] .art--bile .bili-out { animation: b8-ride 3s linear infinite; }
.fig.in[data-state="b"] .art--bile .bili-out { animation: b8-ride 6s linear infinite; }
.fig[data-state="b"] .art--bile .bili-out:nth-child(2n) { visibility: hidden; }
.fig.in[data-state="c"] .art--bile .bili-stuck { animation: b8-ride 2.4s ease-in infinite; }
.fig.in[data-state="a"] .art--bile .poo { animation: b8-ride 4s linear infinite; }
.fig.in[data-state="b"] .art--bile .poo { animation: b8-ride 8s linear infinite; }
.art--bile .duct { stroke-width: 13px; transition: stroke-width 1.8s var(--ease) 0.8s; }
.art--bile .duct-in { stroke-width: 6px; transition: stroke-width 1.8s var(--ease) 0.8s; }
.fig[data-state="c"] .art--bile .duct { stroke-width: 20px; }
.fig[data-state="c"] .art--bile .duct-in { stroke-width: 12px; }
.art--bile .stone { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0.4); transition: opacity 0.8s 0.3s, transform 1.2s var(--ease) 0.3s; }
.fig[data-state="c"] .art--bile .stone { opacity: 1; transform: none; }
.art--bile .burn { opacity: 0; transition: opacity 1.4s 0.3s; }
.fig[data-state="b"] .art--bile .burn { opacity: 1; }
.fig.in[data-state="b"] .art--bile .burn { animation: throb 1.8s ease-in-out 1.6s infinite; }
.art--bile .backlog circle { opacity: 0; transition: opacity 1.2s calc(var(--d) + 1s); }
.fig:not([data-state="a"]) .art--bile .backlog circle { opacity: 0.9; }
.fig.in:not([data-state="a"]) .art--bile .backlog circle { animation: b8-jostle 1.1s ease-in-out infinite alternate; animation-delay: calc(var(--d) * -1); }
.art--bile .hazy, .art--bile .sclera-y, .art--bile .skin-y, .art--bile .pee--dark { opacity: 0; transition: opacity 2s 1.2s; }
.fig:not([data-state="a"]) .art--bile .hazy { opacity: 0.55; }
.fig:not([data-state="a"]) .art--bile .sclera-y { opacity: 0.9; }
.fig:not([data-state="a"]) .art--bile .skin-y { opacity: 0.3; }
.fig:not([data-state="a"]) .art--bile .pee--dark { opacity: 0.85; }

/* hepatitis B and C: blood-to-blood spread; silent years of scarring; tablets and the vaccine */
.fig.in[data-state="a"] .art--hepat .vir { animation: b8-ride 3.2s ease-in infinite; }
.fig.in[data-state="b"] .art--hepat .vir { animation: b8-ride 6.4s ease-in infinite; }
.fig[data-state="b"] .art--hepat .vir:nth-child(2n) { visibility: hidden; }
.art--hepat .shield { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0.6); transition: opacity 0.9s 0.4s, transform 1.2s var(--ease) 0.4s; }
.fig[data-state="c"] .art--hepat .shield { opacity: 1; transform: none; }
.art--hepat .vin { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0.4); transition: opacity 1.4s var(--d), transform 1.4s var(--ease) var(--d); }
.fig[data-state="a"] .art--hepat .vin--b { opacity: 0.8; transform: none; }
.fig[data-state="b"] .art--hepat .vin { opacity: 1; transform: none; }
.fig[data-state="c"] .art--hepat .vin--b { opacity: 0.35; transform: scale(0.7); }
.fig.in[data-state="b"] .art--hepat .vin { animation: b8-jostle 1.3s ease-in-out infinite alternate; }
.art--hepat .liv { transition: scale 2.4s var(--ease) 0.8s; }
.fig[data-state="b"] .art--hepat .liv { scale: 0.95; }
.art--hepat .nods { opacity: 0; transition: opacity 2.4s 1s; }
.fig[data-state="b"] .art--hepat .nods { opacity: 1; }
.fig[data-state="c"] .art--hepat .nods { opacity: 0.5; }
.art--hepat .scar { fill: none; stroke: #f8f3ea; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.8s var(--ease) 0.6s, opacity 1.4s; filter: drop-shadow(0 1px 1.5px rgba(11, 30, 35, 0.35)); }
.fig:not([data-state="a"]) .art--hepat .scar { stroke-dashoffset: 0; }
.fig[data-state="c"] .art--hepat .scar { opacity: 0.55; }
/* batch 9 pictures */
.art .b9-ride { opacity: 0; offset-rotate: 0deg; }
@keyframes b9-ride { 0% { offset-distance: 0%; opacity: 0; } 10%, 88% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes b9-jostle { to { translate: 2px -2px; } }

/* gallbladder stones: silent stones; a stone jams the outlet after a meal; a stone blocks the bile duct */
.fig.in .art--gall .bile-go, .fig.in .art--gall .bile-in { animation: b9-ride 4s linear infinite; }
.fig[data-state="b"] .art--gall .in, .fig[data-state="c"] .art--gall .go, .fig[data-state="c"] .art--gall .in { visibility: hidden; }
.fig.in[data-state="c"] .art--gall .bile-back { animation: b9-ride 3.6s linear infinite; }
.art--gall .yellow { opacity: 0; transition: opacity 2s 0.8s; }
.fig[data-state="c"] .art--gall .yellow { opacity: 0.55; }
.art--gall .pain, .art--gall .meal { opacity: 0; transition: opacity 1.2s 0.4s; }
.fig[data-state="b"] .art--gall .pain, .fig[data-state="b"] .art--gall .meal { opacity: 1; }
.fig.in[data-state="b"] .art--gall .pain { animation: throb 1.8s ease-in-out 1.6s infinite; }
.art--gall .gb { transform-box: fill-box; transform-origin: 80% 10%; }
.fig.in[data-state="b"] .art--gall .gb { animation: b9-squeeze 1.8s ease-in-out 1s infinite; }
@keyframes b9-squeeze { 50% { scale: 0.95; } }
.art--gall .jam .st-in { translate: -25px 62px; transition: translate 1.6s var(--ease) 0.3s; }
.fig[data-state="b"] .art--gall .jam .st-in { translate: 0 0; }
.art--gall .duct .st-in { transform-box: fill-box; transform-origin: center; scale: 0; transition: scale 1.2s var(--ease) 0.4s; }
.fig[data-state="c"] .art--gall .duct .st-in { scale: 1; }

/* stroke: a clot blocks a brain artery; a weak one bursts; act FAST against the clock */
.art--stroke .b9-ride { offset-rotate: auto; }
.fig.in .art--stroke .rbc9 { animation: b9-ride 3.2s linear infinite; }
.fig:not([data-state="b"]) .art--stroke .flow-up { visibility: hidden; }
.art--stroke .far { transition: opacity 1.4s 0.6s; }
.fig:not([data-state="b"]) .art--stroke .far { opacity: 0.35; }
.art--stroke .dead { fill: #4a1a2e; opacity: 0; transition: opacity 2.4s 0.8s; }
.fig[data-state="a"] .art--stroke .dead { opacity: 0.6; }
.fig[data-state="c"] .art--stroke .dead { opacity: 0.5; }
.fig.in[data-state="c"] .art--stroke .dead { animation: throb 2s ease-in-out 1.6s infinite; }
.art--stroke .clot, .art--stroke .bleed, .art--stroke .spill, .art--stroke .lens-clot { transform-box: fill-box; transform-origin: center; }
.art--stroke .clot { scale: 0; transition: scale 1s var(--ease) 0.3s; }
.fig:not([data-state="b"]) .art--stroke .clot { scale: 1; }
.art--stroke .bleed, .art--stroke .spill { scale: 0.15; opacity: 0; transition: scale 2.4s var(--ease) 0.4s, opacity 0.8s 0.4s; }
.fig[data-state="b"] .art--stroke .bleed, .fig[data-state="b"] .art--stroke .spill { scale: 1; opacity: 1; }
.fig.in .art--stroke .lens-flow { animation: b9-flow 3.4s linear infinite; }
.fig[data-state="a"] .art--stroke .lens-flow, .fig[data-state="c"] .art--stroke .lens-flow { animation: none; opacity: 0.5; }
@keyframes b9-flow { to { transform: translateX(-300px); } }
.art--stroke .lens-clot { scale: 0.2; opacity: 0; transition: scale 1.4s var(--ease) 0.3s, opacity 0.6s 0.3s; }
.fig[data-state="a"] .art--stroke .lens-clot { scale: 1; opacity: 1; }
.art--stroke .tear { opacity: 0; transition: opacity 0.6s 0.3s; }
.fig[data-state="b"] .art--stroke .tear { opacity: 1; }
.art--stroke .clock { opacity: 0; transition: opacity 0.9s 0.2s; }
.fig[data-state="c"] .art--stroke .clock { opacity: 1; }
.fig.in[data-state="c"] .art--stroke .hand { animation: b9-sweep 6s linear infinite; }
@keyframes b9-sweep { to { rotate: 360deg; } }

/* fits: cells signal in turn; one patch fires together; the whole brain fires at once */
.art--storm .ln { stroke: #b9695a; stroke-opacity: 0.45; transition: stroke 0.8s, stroke-opacity 0.8s; }
.fig[data-state="b"] .art--storm .ln--hot, .fig[data-state="c"] .art--storm .ln { stroke: #e8674f; stroke-opacity: 0.9; }
.art--storm .spark { opacity: 0; }
.art--storm .spark circle { fill: #edb940; transition: fill 0.6s; }
.fig[data-state="b"] .art--storm .nd--hot .spark circle, .fig[data-state="c"] .art--storm .spark circle { fill: #e8674f; }
.fig.in .art--storm .spark { animation: b9-fire 3.2s ease-out infinite; animation-delay: var(--d); }
.fig.in[data-state="b"] .art--storm .nd--hot .spark, .fig.in[data-state="c"] .art--storm .spark { animation: b9-burst 0.6s ease-out infinite; }
@keyframes b9-fire { 0% { opacity: 0; scale: 0.4; } 8% { opacity: 1; scale: 1.25; } 30%, 100% { opacity: 0; scale: 0.8; } }
@keyframes b9-burst { 0%, 100% { opacity: 0.45; scale: 0.8; } 25% { opacity: 1; scale: 1.35; } }
.art--storm .glow { opacity: 0; transition: opacity 1.2s 0.3s; }
.fig[data-state="b"] .art--storm .glow--one, .fig[data-state="c"] .art--storm .glow--all { opacity: 1; }
.fig.in[data-state="b"] .art--storm .glow--one, .fig.in[data-state="c"] .art--storm .glow--all { animation: throb 0.6s ease-in-out 1.2s infinite; }
.fig.in .art--storm .eeg { animation: b9-scroll 9s linear infinite; }
@keyframes b9-scroll { to { transform: translateX(-640px); } }

/* blood in the stools: where it starts sets its colour on the way out */
.art--bleed .src, .art--bleed .drip, .art--bleed .see { opacity: 0; transition: opacity 1s 0.3s; }
.fig[data-state="a"] .art--bleed :is(.src--a, .drip--a, .see--a),
.fig[data-state="b"] .art--bleed :is(.src--b, .drip--b, .see--b),
.fig[data-state="c"] .art--bleed :is(.src--c, .drip--c, .see--c) { opacity: 1; }
.fig.in[data-state="a"] .art--bleed .src--a, .fig.in[data-state="b"] .art--bleed .src--b, .fig.in[data-state="c"] .art--bleed .src--c { animation: throb 1.6s ease-in-out 1.2s infinite; }
.art--bleed .bl { fill: #d8322a; }
.fig.in .art--bleed .ride--a { animation: b9-ride 1.8s ease-in infinite; }
.fig.in .art--bleed .ride--b { animation: b9-ride 3.6s linear infinite; }
.fig.in .art--bleed .ride--c { animation: b9-ride 10s linear infinite; }
.fig.in .art--bleed .ride--b .bl { animation: b9-maroon 3.6s linear infinite; animation-delay: var(--d); }
.fig.in .art--bleed .ride--c .bl { animation: b9-tar 10s linear infinite; animation-delay: var(--d); }
@keyframes b9-maroon { to { fill: #6e1a14; } }
@keyframes b9-tar { 35% { fill: #7a1a14; } 100% { fill: #140d0b; } }

/* IBD: colitis inflames the lining from the end up; Crohn's goes in patches, through the whole wall */
.art--colitis .uc { stroke-dasharray: 0 100; opacity: 0; transition: stroke-dasharray 2.4s var(--ease) 0.3s, opacity 0.6s 0.3s; }
.fig[data-state="b"] .art--colitis .uc { stroke-dasharray: 62 100; opacity: 0.85; }
.art--colitis .cd path { opacity: 0; transition: opacity 1.2s 0.3s; }
.art--colitis .cd .cd-1 { transition-delay: 0.7s; }
.art--colitis .cd .cd-2 { transition-delay: 1.1s; }
.fig[data-state="c"] .art--colitis .cd path { opacity: 0.9; }
.fig.in[data-state="b"] .art--colitis .uc, .fig.in[data-state="c"] .art--colitis .cd { animation: b9-hot 2.4s ease-in-out 2.4s infinite; }
@keyframes b9-hot { 50% { opacity: 0.6; } }
.art--colitis :is(.raw, .ulcers, .lens-drops, .cells-b, .deep, .fissure, .cells-c) { opacity: 0; transition: opacity 1.2s 0.5s; }
.fig[data-state="b"] .art--colitis :is(.ulcers, .lens-drops, .cells-b) { opacity: 1; }
.fig[data-state="b"] .art--colitis .raw { opacity: 0.8; }
.fig[data-state="c"] .art--colitis .deep { opacity: 0.55; }
.fig[data-state="c"] .art--colitis :is(.fissure, .cells-c) { opacity: 1; }
.art--colitis .wall { transition: translate 1.6s var(--ease) 0.3s; }
.fig[data-state="c"] .art--colitis .wall { translate: 0 -18px; }
.fig.in:not([data-state="a"]) .art--colitis .wbc9 { animation: b9-jostle 0.9s ease-in-out infinite alternate; }
.fig.in[data-state="b"] .art--colitis .lens-drops { animation: b9-drift 3s ease-in-out infinite alternate; }
@keyframes b9-drift { to { translate: 8px 5px; } }
/* batch 10 pictures */
.art .b10-ride { opacity: 0; offset-rotate: 0deg; }
@keyframes b10-ride { 0% { offset-distance: 0%; opacity: 0; } 12%, 85% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes b10-jig { to { translate: 2px -2px; } }

/* fever with no clear cause: a chart that will not settle; the search through the body; found and treated */
.art--hunt .chart, .art--hunt .heat { transition: opacity 0.9s; }
.fig[data-state="b"] .art--hunt .chart { opacity: 0.22; }
.art--hunt .t { fill: none; stroke-width: 4.5; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 3s var(--ease) 0.3s; }
.art--hunt .t--worse { stroke: var(--coral); }
.art--hunt .t--better { stroke: var(--teal); }
.fig.in:not([data-state="c"]) .art--hunt .t--worse, .fig.in[data-state="c"] .art--hunt .t--better { stroke-dashoffset: 0; }
html:not(.js) .art--hunt .t--worse { stroke-dashoffset: 0; }
.art--hunt .heat { opacity: 0; }
.fig[data-state="a"] .art--hunt .heat { opacity: 0.55; }
.fig.in[data-state="a"] .art--hunt .heat { animation: throb 2.4s ease-in-out 1s infinite; }
.art--hunt .site { opacity: 0; }
.fig.in[data-state="b"] .art--hunt .site { animation: b10-site 9s ease-in-out infinite; }
@keyframes b10-site { 0%, 14% { opacity: 1; } 18%, 100% { opacity: 0; } }
.art--hunt .lens { opacity: 0; translate: 78.7px 107.5px; transition: opacity 0.6s; }
.fig[data-state="b"] .art--hunt .lens { opacity: 1; }
.fig.in[data-state="b"] .art--hunt .lens { animation: b10-hop 9s ease-in-out infinite; }
@keyframes b10-hop {
  0%, 13% { translate: 96.4px 67.2px; }
  16.7%, 30% { translate: 78.7px 107.5px; }
  33.3%, 46.7% { translate: 101.4px 115.1px; }
  50%, 63.3% { translate: 83.7px 141.5px; }
  66.7%, 80% { translate: 113px 159.2px; }
  83.3%, 96.7% { translate: 96px 212.5px; }
  100% { translate: 96.4px 67.2px; }
}
.art--hunt .found { opacity: 0; transition: opacity 1s 0.8s; }
.fig[data-state="c"] .art--hunt .found { opacity: 1; }

/* recurring infections: a close lining and patrolling white cells; gaps and sugar let germs in; fixed */
.fig.in .art--guard .jig { animation: b10-jig 1.4s ease-in-out infinite alternate; }
.art--guard .cell--gap { transform-box: fill-box; transform-origin: 50% 100%; transition: transform 1.4s var(--ease) 0.3s, opacity 1.4s 0.3s; }
.fig[data-state="b"] .art--guard .cell--gap { transform: scale(0.45, 0.35); opacity: 0.2; }
.art--guard .sug, .art--guard .abs { opacity: 0; transition: opacity 1.2s 0.5s; }
.fig[data-state="b"] .art--guard .sug, .fig[data-state="c"] .art--guard .abs { opacity: 1; }
.fig.in[data-state="b"] .art--guard .in { animation: b10-ride 3.2s ease-in infinite; }
.fig.in .art--guard .wbc { animation: b10-ride 6s linear infinite; }
.fig.in[data-state="b"] .art--guard .wbc { animation-duration: 15s; }
.art--guard .flare { opacity: 0; }
.fig.in[data-state="b"] .art--guard .flare { animation: b10-flare 2.7s ease-in-out infinite; }
@keyframes b10-flare { 0%, 100% { opacity: 0; } 35%, 55% { opacity: 1; } }

/* low sugar: sugar feeds the brain; it falls, the body sweats and the brain dims; 15 grams brings it back */
.art--hypo .big { font-size: 54px; font-weight: 800; letter-spacing: -0.02em; }
.art--hypo .unit { font-size: 17px; fill: var(--ink-soft); }
.art--hypo .fuel { transition: opacity 1.6s 0.4s; }
.fig[data-state="b"] .art--hypo .fuel { opacity: 0.12; }
.fig.in:not([data-state="b"]) .art--hypo .fuel { animation: throb 2.6s ease-in-out 1.6s infinite; }
.art--hypo .dim { opacity: 0; transition: opacity 1.8s 0.8s; }
.fig[data-state="b"] .art--hypo .dim { opacity: 0.5; }
.fig.in .art--hypo .sug { animation: b10-ride 3s linear infinite; }
.fig.in[data-state="b"] .art--hypo .sug { animation-duration: 6s; }
.fig[data-state="b"] .art--hypo .sug:not(:nth-child(3n+1)) { visibility: hidden; }
.fig.in[data-state="c"] .art--hypo .sug { animation-duration: 2s; }
.fig.in[data-state="b"] .art--hypo .shake { animation: b10-shake 0.16s linear infinite; }
@keyframes b10-shake { 25% { translate: 1px 0; } 75% { translate: -1px 0; } }
.art--hypo .sweat { opacity: 0; }
.fig.in[data-state="b"] .art--hypo .sweat { animation: b10-sweat 1.8s ease-in infinite; }
@keyframes b10-sweat { 0% { opacity: 0; translate: 0 0; } 25% { opacity: 1; } 100% { opacity: 0; translate: 0 18px; } }
.art--hypo .level { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0.686); transition: transform 2.2s var(--ease) 0.3s; }
.fig[data-state="b"] .art--hypo .level { transform: scaleY(0.343); }
.fig[data-state="c"] .art--hypo .level { transform: scaleY(0.629); }
.art--hypo .glass { opacity: 0; translate: 0 12px; transition: opacity 0.9s 0.3s, translate 0.9s var(--ease) 0.3s; }
.fig[data-state="c"] .art--hypo .glass { opacity: 1; translate: 0 0; }

/* weight loss: the needle and the line hold steady, then slide; then five places the weight goes */
.art--weigh .kg { font-size: 17px; }
.art--weigh .needle { rotate: -98deg; transition: rotate 2.2s var(--ease) 0.3s; }
.fig.in[data-state="a"] .art--weigh .needle, html:not(.js) .art--weigh .needle { rotate: 42deg; }
.fig.in:not([data-state="a"]) .art--weigh .needle { rotate: -42deg; }
.art--weigh .chart { transition: opacity 0.8s; }
.fig[data-state="c"] .art--weigh .chart { opacity: 0; }
.art--weigh .w { fill: none; stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.6s var(--ease) 0.3s; }
.art--weigh .w--steady { stroke: var(--teal); }
.art--weigh .w--falling { stroke: var(--coral); }
.fig.in[data-state="a"] .art--weigh .w--steady, .fig.in[data-state="b"] .art--weigh .w--falling { stroke-dashoffset: 0; }
html:not(.js) .art--weigh .w--steady { stroke-dashoffset: 0; }
.art--weigh .five { opacity: 0; transition: opacity 0.9s 1.2s; }
.fig[data-state="b"] .art--weigh .five { opacity: 1; }
.art--weigh .why { opacity: 0; translate: 14px 0; transition: opacity 0.7s var(--d), translate 0.9s var(--ease) var(--d); }
.fig[data-state="c"] .art--weigh .why { opacity: 1; translate: 0 0; }

/* snoring and sleep apnoea: a narrowed, fluttering throat; a throat that closes; CPAP holds it open */
.art--apnoea .lab { font-size: 16px; fill: var(--ink-soft); }
.art--apnoea .tongue, .art--apnoea .palate { transition: translate 1.6s var(--ease) 0.2s; }
.fig[data-state="a"] .art--apnoea .tongue { translate: -9px 0; }
.fig[data-state="a"] .art--apnoea .palate { translate: -6px 1px; }
.fig[data-state="b"] .art--apnoea .tongue { translate: -26px 0; }
.fig[data-state="b"] .art--apnoea .palate { translate: -14px 2px; }
.art--apnoea .palate path { transform-box: fill-box; transform-origin: 100% 0; }
.fig.in[data-state="a"] .art--apnoea .palate path { animation: b10-flutter 0.24s ease-in-out infinite alternate; }
@keyframes b10-flutter { from { rotate: -4deg; } to { rotate: 5deg; } }
.fig.in[data-state="b"] .art--apnoea .tongue { animation: b10-shut 8s ease-in-out 1.8s infinite; }
@keyframes b10-shut { 0%, 72%, 94%, 100% { translate: -26px 0; } 78%, 88% { translate: -8px 0; } }
.art--apnoea .snore { opacity: 0; }
.fig.in[data-state="a"] .art--apnoea .snore { animation: b10-snore 1.3s ease-out infinite; }
@keyframes b10-snore { 0% { opacity: 0; translate: -4px 0; } 30% { opacity: 1; } 100% { opacity: 0; translate: 10px 0; } }
.art--apnoea .jolt { opacity: 0; }
.fig.in[data-state="b"] .art--apnoea .jolt { animation: b10-jolt 8s ease-out 1.8s infinite; }
@keyframes b10-jolt { 0%, 74%, 90%, 100% { opacity: 0; } 78%, 84% { opacity: 1; } }
.fig.in:not([data-state="b"]) .art--apnoea .breath { animation: b10-ride 2.6s linear infinite; }
.fig.in[data-state="c"] .art--apnoea .breath { animation-duration: 1.8s; }
.art--apnoea .mask { opacity: 0; transition: opacity 1s 0.3s; }
.fig[data-state="c"] .art--apnoea .mask { opacity: 1; }
.art--apnoea .o { fill: none; stroke-width: 4.5; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.6s var(--ease) 0.3s; }
.art--apnoea .o--steady { stroke: var(--teal); }
.art--apnoea .o--dips { stroke: var(--coral); }
.fig.in:not([data-state="b"]) .art--apnoea .o--steady, .fig.in[data-state="b"] .art--apnoea .o--dips { stroke-dashoffset: 0; }
html:not(.js) .art--apnoea .o--steady { stroke-dashoffset: 0; }
/* batch 11 pictures */
.art .b11-ride { opacity: 0; offset-rotate: auto; }
@keyframes b11-ride { 0% { offset-distance: 0%; opacity: 0; } 12%, 85% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes b11-beat { 0%, 100% { scale: 1; } 14% { scale: 1.05; } 34% { scale: 0.98; } }
@keyframes b11-weak { 0%, 100% { scale: 1; } 20% { scale: 1.015; } }
@keyframes b11-draw { 0% { stroke-dashoffset: 1; } 85%, 100% { stroke-dashoffset: 0; } }

/* stress, low mood and poor sleep: a loop that speeds up; a week of sleep shrinks, then recovers */
.art--mood .day { font-size: 14px; fill: var(--ink-soft); }
.art--mood .loop { transform-box: view-box; transition: transform 1.6s var(--ease); }
.fig[data-state="b"] .art--mood .loop { transform: scale(0.94); }
.fig.in .art--mood .spin { animation: b11-ride 9s linear infinite; }
.fig.in[data-state="b"] .art--mood .spin { animation-duration: 4.5s; }
.art--mood .halo { fill: var(--coral); opacity: 0; }
.art--mood .hot { opacity: 0; transition: opacity 1.2s 0.3s; }
.fig[data-state="b"] .art--mood .hot { opacity: 1; }
.fig.in[data-state="b"] .art--mood .halo { animation: b11-halo 1.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes b11-halo { 0% { opacity: 0.5; scale: 0.8; } 100% { opacity: 0; scale: 1.3; } }
.art--mood .night { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(var(--a)); transition: transform 1.4s var(--ease) 0.2s; }
.fig[data-state="b"] .art--mood .night { transform: scaleY(var(--b)); }
.fig[data-state="c"] .art--mood .night { transform: scaleY(var(--c)); }
.art--mood .woke rect { fill: var(--paper); opacity: 0; transition: opacity 0.8s 0.8s; }
.fig[data-state="b"] .art--mood .woke rect { opacity: 1; }

/* many medicines: tablets from three doctors; doubles and a clash; one reviewed list */
.art--meds .rx { font-size: 22px; }
.art--meds .box-day, .art--meds .list-h { fill: var(--paper); font-size: 20px; }
.fig.in .art--meds .drop { animation: b11-ride 3.6s ease-in infinite; }
.art--meds .fall { transition: opacity 0.8s; }
.fig[data-state="c"] .art--meds .fall { opacity: 0; }
.art--meds .pill-in { transition: opacity 1s 0.3s; }
.fig[data-state="b"] .art--meds .pill-in:not(.dup):not(.clash) { opacity: 0.3; }
.fig[data-state="c"] .art--meds .extra { opacity: 0; }
.art--meds .dup > g { transition: filter 0.6s; }
.fig[data-state="b"] .art--meds .dup > g { filter: drop-shadow(0 0 3px #e8674f) drop-shadow(0 0 6px #e8674f); }
.art--meds .zap { opacity: 0; transition: opacity 0.8s 0.4s; }
.fig[data-state="b"] .art--meds .zap { opacity: 1; }
.fig.in[data-state="b"] .art--meds .zap { animation: throb 0.9s ease-in-out 1s infinite; }
.art--meds .list { opacity: 0; transform: translateY(14px); transition: opacity 1s 0.3s, transform 1s var(--ease) 0.3s; }
.fig[data-state="c"] .art--meds .list { opacity: 1; transform: none; }

/* chest pain: the heart's spreading ache; other causes; only a test can tell */
.art--chestpain .ask { font-size: 64px; }
.art--chestpain .heart-pain, .art--chestpain .other, .art--chestpain .unsure { opacity: 0; transition: opacity 1s 0.3s; }
.fig[data-state="a"] .art--chestpain .heart-pain, .fig[data-state="b"] .art--chestpain .other, .fig[data-state="c"] .art--chestpain .unsure { opacity: 1; }
.fig.in[data-state="a"] .art--chestpain .core { animation: throb 1.4s ease-in-out infinite; }
.fig.in[data-state="a"] .art--chestpain .ache { animation: b11-ride 1.8s ease-out infinite; }
.fig.in[data-state="b"] .art--chestpain .o-spot { animation: throb 1.8s ease-in-out infinite; }
.fig.in[data-state="c"] .art--chestpain .unsure circle { animation: b11-march 6s linear infinite; }
@keyframes b11-march { to { stroke-dashoffset: -52; } }
.art--chestpain .trace, .art--faint .trace { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.fig.in[data-state="c"] .art--chestpain .trace { animation: b11-draw 3.2s linear infinite; }

/* breathlessness: narrowed airways and filled sacs; fluid from a weak heart; too few red cells */
.art--breath .read { font-size: 40px; fill: #6fd0c9; font-variant-numeric: tabular-nums; }
.art--breath .read--low { fill: #ff9a84; }
.fig.in .art--breath .air { animation: b11-ride 3.2s ease-in infinite; }
.fig.in[data-state="a"] .art--breath .air { animation-duration: 6.4s; }
.fig[data-state="a"] .art--breath .air:nth-child(2n) { visibility: hidden; }
.art--breath .tree { transition: stroke-width 1.4s var(--ease) 0.3s; }
.fig[data-state="a"] .art--breath .tree { stroke-width: 4px; }
.art--breath .fill { opacity: 0; transition: opacity 1.4s 0.5s; }
.fig[data-state="a"] .art--breath .fill { opacity: 1; }
.art--breath .water { transition: transform 2s var(--ease) 0.3s; }
.fig[data-state="b"] .art--breath .water { transform: translateY(-70px); }
.art--breath .beat { transform-box: fill-box; transform-origin: center; transition: transform 1.6s var(--ease); }
.fig[data-state="b"] .art--breath .beat { transform: scale(1.12); }
.fig.in .art--breath .beat { animation: b11-beat 1.1s ease-in-out infinite; }
.fig.in[data-state="b"] .art--breath .beat { animation: b11-weak 1.3s ease-in-out infinite; }
.fig.in .art--breath .rbc11 { animation: b11-ride 5.4s linear infinite; }
.fig[data-state="c"] .art--breath .rbc11:not(:nth-child(3n)) { visibility: hidden; }

/* fainting: blood sinks to the legs, or the heart pauses; lying flat brings it back */
.art--faint .lie { transform-box: view-box; transform-origin: 208px 210px; transition: transform 1.8s var(--ease); }
.fig[data-state="c"] .art--faint .lie { transform: translate(96px, 112px) rotate(-96deg); }
.art--faint .sway { transform-box: view-box; transform-origin: 208px 412px; }
.fig.in[data-state="a"] .art--faint .sway { animation: b11-sway 5s ease-in-out infinite; }
@keyframes b11-sway { 0%, 45%, 100% { rotate: 0deg; } 62% { rotate: 2.5deg; } 78% { rotate: -1.5deg; } }
.art--faint .pool { opacity: 0; }
.fig.in[data-state="a"] .art--faint .pool { animation: b11-pool 5s ease-in-out infinite; }
.fig.in[data-state="a"] .art--faint .brain { animation: b11-dim 5s ease-in-out infinite; }
@keyframes b11-pool { 0%, 25% { opacity: 0.1; } 50%, 80% { opacity: 0.9; } 100% { opacity: 0.1; } }
@keyframes b11-dim { 0%, 30% { opacity: 1; } 55%, 80% { opacity: 0.12; } 100% { opacity: 1; } }
.fig.in .art--faint .pulse { animation: throb 1s ease-in-out infinite; }
.fig.in[data-state="b"] .art--faint .trace { animation: b11-draw 4s linear infinite; }
.fig.in[data-state="b"] .art--faint .brain, .fig.in[data-state="b"] .art--faint .pulse { animation: b11-gap 4s linear infinite; }
@keyframes b11-gap { 0%, 40% { opacity: 1; } 48%, 72% { opacity: 0.12; } 84%, 100% { opacity: 1; } }
.fig.in .art--faint .rise { animation: b11-ride 1.6s linear infinite; }
.fig[data-state="a"] .art--faint .rise:nth-child(2n) { visibility: hidden; }
.fig.in[data-state="a"] .art--faint .sink { animation: b11-ride 3s ease-in infinite; }

/* black stools or vomiting blood: an ulcer bleeds; blood comes up, or goes down and turns black */
.art--ulcer .ooze { transform-box: fill-box; transform-origin: center; opacity: 0; }
.fig.in .art--ulcer .ooze { animation: b11-ooze 2s ease-out infinite; }
@keyframes b11-ooze { 0% { opacity: 0.9; scale: 0.6; } 100% { opacity: 0; scale: 1.4; } }
.fig.in[data-state="b"] .art--ulcer .rise { animation: b11-ride 3.4s ease-in infinite; }
.fig.in[data-state="c"] .art--ulcer .sink { animation: b11-ride 7s linear infinite; }
.art--ulcer .tint { fill: #c2412b; }
.fig.in[data-state="c"] .art--ulcer .tint { animation: b11-dark 7s linear infinite; animation-delay: inherit; }
@keyframes b11-dark { 0%, 15% { fill: #c2412b; } 60%, 100% { fill: #1e1411; } }
.art--ulcer .level { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0.94); transition: transform 2.4s var(--ease) 0.4s; }
.fig[data-state="b"] .art--ulcer .level { transform: scaleY(0.62); }
.fig[data-state="c"] .art--ulcer .level { transform: scaleY(0.56); }

/* ——— Go to hospital now ——— */
.c-now { background: var(--coral); padding: clamp(64px, 10vh, 120px) var(--gutter); }
.c-now-in { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 80px); align-items: start; }
.c-now a:hover { color: var(--ink); }
.c-now .pill--ink:hover { color: var(--paper); }
.c-soon { max-width: 1320px; margin: clamp(32px, 5vh, 56px) auto 0; }
.c-soon h3 { color: #97301a; }
.c-soon ul li::before { color: var(--coral); }

/* ——— Tests: typed on the same lined report paper ——— */
.c-report { transform: rotate(-1deg); }
.c-report th[scope="row"] { width: 38%; padding-right: 14px; font-weight: 800; vertical-align: top; }
.c-report td { color: var(--ink-soft); vertical-align: top; }
.c-report tbody th, .c-report tbody td { padding-top: 10px; padding-bottom: 10px; }

/* ——— Have it ready: a checklist that remembers, on this phone only ——— */
.c-check { display: grid; gap: 10px; margin-top: 22px; max-width: 34em; }
.c-check label { display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: start; padding: 14px 18px; border-radius: 18px; background: var(--paper); cursor: pointer; transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.c-check label:hover { transform: translateX(4px); box-shadow: var(--shadow); }
.c-check input {
  appearance: none; -webkit-appearance: none; margin: 0; width: 28px; height: 28px; border-radius: 9px;
  box-shadow: inset 0 0 0 2px var(--ink); cursor: pointer; display: grid; place-items: center; transition: background-color 0.25s;
}
.c-check input::after { content: ""; width: 12px; height: 7px; margin-top: -3px; border: solid var(--paper); border-width: 0 0 3px 3px; transform: rotate(-45deg) scale(0); transition: transform 0.35s var(--ease); }
.c-check input:checked { background: var(--teal); box-shadow: none; }
.c-check input:checked::after { transform: rotate(-45deg) scale(1); }
.c-check input:checked + span { color: var(--ink-soft); text-decoration: line-through; text-decoration-color: rgba(22, 115, 122, 0.6); text-decoration-thickness: 2px; }
.c-howto { margin-top: clamp(0px, 8vw, 110px); }
.c-ready--solo { grid-template-columns: 1fr; }
.c-ready--solo .c-check { max-width: none; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.c-howto ol { counter-reset: step; display: grid; gap: 4px; }
.c-howto li { counter-increment: step; position: relative; padding: 9px 0 9px 46px; border-top: 1px solid var(--line); }
.c-howto li:first-child { border-top: 0; }
.c-howto li::before {
  content: counter(step); position: absolute; left: 0; top: 6px; width: 32px; height: 32px; border-radius: 999px;
  display: grid; place-items: center; background: var(--mustard); font-weight: 800; font-size: 0.95rem;
}

/* ——— Online or in person ——— */
.c-caution { margin-top: 24px; max-width: 30em; padding: 16px 20px; border-radius: 18px; background: #f6e3b4; font-weight: 700; }

/* ——— Close: him, and the booking button ——— */
.c-close {
  display: grid; grid-template-columns: minmax(200px, 0.6fr) minmax(0, 1.4fr); gap: clamp(28px, 6vw, 96px); align-items: end;
  padding: clamp(64px, 10vh, 120px) var(--gutter) clamp(48px, 8vh, 96px);
}
.c-close-doc { position: relative; aspect-ratio: 0.7; max-width: 360px; border-radius: 999px 999px 0 0; overflow: hidden; background: var(--paper); box-shadow: var(--shadow); }
.c-close-doc img { position: absolute; left: 50%; bottom: 0; width: 104%; height: auto; translate: -50% 4%; -webkit-mask-image: linear-gradient(#000 78%, transparent 99%); mask-image: linear-gradient(#000 78%, transparent 99%); }
.c-close-text { display: grid; gap: 18px; justify-items: start; padding-bottom: 8px; }
.c-close .pill--big { min-height: 62px; padding: 0 32px; font-size: 1.15rem; }
.c-id { font-size: 0.9rem; color: var(--ink-soft); }
.c-related { margin-top: 18px; }
.c-related h3 { font-size: 0.82rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); margin-bottom: 10px; }
.c-related ul { display: flex; flex-wrap: wrap; gap: 8px; }

/* ——— Reveal (content is visible without script) ——— */
.js .c-reveal { opacity: 0; transform: translateY(26px); transition: opacity 1s, transform 1.3s var(--ease); }
.js .c-reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .plate-body, .fig-tilt, .js .c-reveal { transition: none; }
  .js .plate:not(.in) .plate-body, .js .fig:not(.in) .fig-tilt { transform: none; opacity: 1; }
  .plate-ring, .art *, .fig-say p { animation: none !important; }
  .art * { transition-duration: 0.01s !important; transition-delay: 0s !important; }
  .art--insulin .enter .bead { opacity: 1; transform: translate(var(--x2), var(--y2)); }
  .fig[data-state="b"] .art--insulin .enter .bead { transform: translate(var(--x1), calc(var(--y1) - 30px)); }
  .art--pressure .wave { stroke-dashoffset: 0; }
  .art--thyroid .dot { opacity: 1; }
  .art--thyroid .dot--tsh { transform: translate(220px, 227px); }
  .art--thyroid .dot--t4 { transform: translate(308px, 331px); }
  .art--thyroid .dot:not(:first-child) { visibility: hidden; }
  .art--oxygen .give { opacity: 0.9; transform: translateY(48px); }
  .art--airway .air { opacity: 0.8; transform: translateY(70px); }
  .art--dengue .line, .art--gauge .way { stroke-dashoffset: 0; }
  .art--dengue .dot { opacity: 1; }
  .art .ride { opacity: 1; offset-distance: 70%; }
  /* batch 4 */
  .fig[data-state="a"] .art--tank .tap--l .drip, .fig[data-state="b"] .art--tank .tap--r .drip { opacity: 1; transform: translateY(14px); }
  .fig[data-state="c"] .art--bronchus .puff circle { opacity: 1; transform: translateY(40px); }
  .fig[data-state="b"] .art--mast .burst circle { opacity: 0.9; transform: translate(calc(var(--dx) * 0.6), calc(var(--dy) * 0.6)); }
  .fig[data-state="b"] .art--mast .seep ellipse { opacity: 1; }
  .art--nerve .signal { opacity: 1; transform: translateX(327px); }
  .fig[data-state="b"] .art--nerve .signal { opacity: 0.5; transform: translateX(230px); }
  .fig[data-state="b"] .art--nerve .tingle path { opacity: 1; }
  /* batch 5 */
  .art .b5-ride { opacity: 1; offset-distance: 25%; }
  .art .b5-ride:nth-child(3n+2) { offset-distance: 55%; }
  .art .b5-ride:nth-child(3n) { offset-distance: 85%; }
  .art--gout .xtal { transform: scale(1); }
  .fig[data-state="c"] .art--gout .xtal { transform: scale(0.4); }
  /* batch 6 */
  .art .b6-ride { offset-distance: 35%; }
  .art .b6-ride:nth-child(2n) { offset-distance: 70%; }
  .fig[data-state="b"] .art--stone .stone-go { opacity: 1; offset-distance: 45%; }
  .fig[data-state="c"] .art--stone .flow, .fig[data-state="c"] .art--stone .pebble { opacity: 1; }
  .fig[data-state="a"] .art--stone .xt { opacity: 0.8; }
  .fig[data-state="b"] .art--itch .out, .fig[data-state="b"] .art--itch .fall, .fig[data-state="b"] .art--itch .sig { opacity: 1; }
  .fig[data-state="b"] .art--itch .scratch path { stroke-dashoffset: 0; }
  .fig[data-state="b"] .art--wheal .leak { opacity: 1; }
  .fig[data-state="b"] .art--wheal .hist circle { opacity: 0.9; translate: calc(var(--dx) * 0.5) calc(var(--dy) * 0.5); }
  .fig[data-state="b"] .art--boil .germ-in, .fig:not([data-state="a"]) .art--boil .cell-in { opacity: 1; }
  .fig[data-state="a"] .art--plasmo .spz, .fig[data-state="b"] .art--plasmo .mero { opacity: 1; }
  .fig[data-state="b"] .art--plasmo .rg { opacity: 1; }
  /* batch 7 */
  .art .b7-ride { offset-distance: 40%; }
  .art .b7-ride:nth-child(2n) { offset-distance: 75%; }
  .art--pneumo .o2 { opacity: 0.9; translate: calc(var(--dx) * 0.5) calc(var(--dy) * 0.5); }
  .art--copd .air, .fig[data-state="b"] .art--copd .smoke, .fig[data-state="c"] .art--copd .puff { opacity: 1; }
  .art--coronary .flow, .art--coronary .flow-near, .art--pump .out, .fig[data-state="b"] .art--pump .back { opacity: 1; }
  .fig[data-state="a"] .art--neuro .sig, .fig[data-state="b"] .art--neuro .up .sig, .fig[data-state="b"] .art--neuro .misfire g { opacity: 1; }
  /* batch 8 */
  .art .b8-ride { offset-distance: 40%; }
  .art .b8-ride:nth-child(2n) { offset-distance: 75%; }
  .art--sieve .go, .art--sieve .pass, .fig:not([data-state="a"]) .art--sieve .leak-p, .fig[data-state="c"] .art--sieve .leak-r { opacity: 1; }
  .art--enzyme .go, .art--enzyme .enz-go, .art--bile .bili { opacity: 1; }
  .fig:not([data-state="c"]) .art--bile .bili-out, .fig:not([data-state="c"]) .art--bile .poo, .fig[data-state="c"] .art--bile .bili-stuck { opacity: 1; }
  .fig:not([data-state="c"]) .art--hepat .vir { opacity: 1; }
  /* batch 9 */
  .art .b9-ride { offset-distance: 40%; }
  .art .b9-ride:nth-child(2n) { offset-distance: 75%; }
  .art--gall .bile-go, .art--gall .bile-in, .fig[data-state="c"] .art--gall .bile-back, .art--stroke .rbc9 { opacity: 1; }
  .fig[data-state="a"] .art--storm .nd:nth-child(4n) .spark, .fig[data-state="b"] .art--storm .nd--hot .spark, .fig[data-state="c"] .art--storm .spark { opacity: 1; }
  .art--bleed .b9-ride { opacity: 1; }
  .art--bleed .ride--b .bl { fill: #8a1f18; }
  .art--bleed .ride--c .bl { fill: #2a1210; }
  /* batch 10 */
  .art .b10-ride { offset-distance: 40%; }
  .art .b10-ride:nth-child(2n) { offset-distance: 75%; }
  .art--guard .wbc, .fig[data-state="b"] .art--guard .in, .art--hypo .sug, .fig:not([data-state="b"]) .art--apnoea .breath { opacity: 1; }
  .fig[data-state="b"] .art--hunt .site, .fig[data-state="b"] .art--guard .flare, .fig[data-state="b"] .art--hypo .sweat, .fig[data-state="b"] .art--apnoea .jolt, .fig[data-state="a"] .art--apnoea .snore { opacity: 0.85; }
  /* batch 11 */
  .art .b11-ride { offset-distance: 40%; }
  .art .b11-ride:nth-child(2n) { offset-distance: 75%; }
  .art--mood .spin, .art--meds .drop, .art--chestpain .ache, .art--breath .air, .art--breath .rbc11, .art--faint .rise, .fig[data-state="a"] .art--faint .sink, .fig[data-state="b"] .art--ulcer .rise, .fig[data-state="c"] .art--ulcer .sink { opacity: 1; }
  .art--chestpain .trace, .art--faint .trace { stroke-dashoffset: 0; }
  .fig[data-state="a"] .art--faint .pool { opacity: 0.9; }
  .fig[data-state="a"] .art--faint .brain, .fig[data-state="b"] .art--faint .brain { opacity: 0.3; }
  .fig[data-state="c"] .art--ulcer .tint { fill: #1e1411; }
}

@media (max-width: 819px) {
  .c-hero { grid-template-columns: 1fr; min-height: 0; gap: 28px; padding-top: calc(var(--bar-h) + 20px); padding-bottom: 32px; }
  .c-h1 { font-size: clamp(2.1rem, 9.6vw, 3rem); }
  .plate { max-width: 340px; height: 54svh; min-height: 400px; }
  .c-split, .c-now-in, .c-close { grid-template-columns: 1fr; }
  .c-split { padding-top: 56px; padding-bottom: 56px; }
  .c-signs, .c-howto { margin-top: 0; transform: none; }
  .fig { grid-template-columns: 1fr; grid-template-areas: "switch" "stage" "say"; }
  .fig-stage { padding: 10px 8px; }
  .art .tag-in { transform-box: fill-box; transform-origin: left top; transform: scale(1.3); }
  .art .tag-in.tag--end { transform-origin: right top; }
  .c-report { transform: none; }
  .c-report th[scope="row"] { width: 42%; }
  .c-close-doc { width: 62%; max-width: 260px; justify-self: center; }
  .c-close .pill--big { width: 100%; justify-content: center; }
  .c-go .pill--big { flex: 1 1 100%; justify-content: center; }
}