/* heart_pump.css — circulation loop for viz/heart_pump.js (pure DOM). */

.hp { display: flex; flex-direction: column; gap: 0.85rem; }
.hp-stage { position: relative; width: 100%; aspect-ratio: 16 / 12; min-height: 250px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 0.8rem; background: radial-gradient(80% 60% at 50% 50%, rgba(244,63,94,0.06), transparent 70%), linear-gradient(180deg, #14101a, #0a0810); }
/* faint circulatory vessel the blood drops flow along — blue pulmonary half, red systemic half */
.hp-track { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.hp-track path { fill: none; stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: 0.16; }
.hp-track-blue { stroke: #38bdf8; } .hp-track-red { stroke: #fb7185; }
.hp-blood { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.hp-drop { position: absolute; width: 11px; height: 11px; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle at 34% 30%, #93c5fd, #2563eb 65%, #1e3a8a); box-shadow: 0 0 4px rgba(59,130,246,0.5); transition: background 0.2s; }
.hp-drop.hp-oxy { background: radial-gradient(circle at 34% 30%, #fca5a5, #dc2626 65%, #991b1b); box-shadow: 0 0 4px rgba(239,68,68,0.5); }

.hp-heart { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 64px; line-height: 1; color: #e11d48; z-index: 3; filter: drop-shadow(0 0 8px rgba(225,29,72,0.5)); }
.hp-lbl { position: absolute; left: 50%; transform: translateX(-50%); font-size: 0.74rem; font-weight: 700; color: #aab8c9; }
.hp-lung { top: 3%; } .hp-body { bottom: 3%; }
.hp-side { position: absolute; top: 46%; font-size: 0.64rem; line-height: 1.1; color: #8aa0b6; text-align: center; }
.hp-r { left: 13%; color: #7dd3fc; } .hp-l { right: 13%; color: #fda4af; }
.hp-phase { position: absolute; left: 8px; bottom: 6px; font-size: 0.78rem; font-weight: 600; color: #e8d9e6; background: rgba(6, 10, 18, 0.5); padding: 2px 7px; border-radius: 5px; }