/* breathing.css — chest, lungs, diaphragm for viz/breathing.js (pure DOM, animated).
   The JS drives transform:scale on the lungs, translateY on the diaphragm and ribs; this sheet
   gives them anatomical shapes (clip-path lung lobes + a rib cage) that scale with the animation. */

.br { display: flex; flex-direction: column; gap: 0.85rem; }
.br-stage { position: relative; width: 100%; aspect-ratio: 16 / 11; min-height: 240px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 0.8rem; background: radial-gradient(120% 90% at 50% 18%, #1b1726, #0a0810 70%); }
.br-trachea { position: absolute; left: 50%; top: 6%; width: 11px; height: 24%; transform: translateX(-50%); background: linear-gradient(180deg, #e2e8f0, #94a3b8); border-radius: 6px 6px 2px 2px; z-index: 3;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); }
/* bronchi: two short branches off the base of the trachea into each lung */
.br-trachea::after { content: ""; position: absolute; left: 50%; bottom: -10px; width: 46px; height: 18px; transform: translateX(-50%);
  border: 3px solid #94a3b8; border-top: none; border-bottom: none; border-radius: 0 0 14px 14px / 0 0 18px 18px; }

/* rib cage sits BEHIND the lungs (z-index 1) so it frames them instead of striping across them */
.br-ribs { position: absolute; left: 50%; top: 23%; width: 64%; height: 50%; transform: translateX(-50%); transform-origin: 50% 0%; pointer-events: none; transition: transform 0.12s linear; z-index: 1;
  border: 2px solid rgba(226, 232, 240, 0.34); border-top-color: rgba(226, 232, 240, 0.18); border-radius: 48% 48% 44% 44%;
  background: repeating-linear-gradient(176deg, transparent 0 12px, rgba(226, 232, 240, 0.2) 12px 14px); }

/* lung lobes — clip-path gives each a tapered apex + rounded base; the JS scales them to "breathe" */
.br-lung { position: absolute; top: 29%; width: 25%; height: 44%; transform-origin: 50% 16%; transition: transform 0.12s linear; z-index: 3;
  background: radial-gradient(circle at 46% 28%, #fecdd3, #fb7185 58%, #be185d);
  box-shadow: inset 0 -6px 12px rgba(136, 19, 55, 0.45), inset 0 4px 8px rgba(255, 255, 255, 0.25); }
.br-lung-l { left: 19%; clip-path: polygon(58% 2%, 82% 12%, 95% 38%, 93% 67%, 77% 91%, 52% 100%, 28% 93%, 10% 69%, 6% 41%, 22% 15%, 40% 5%); }
.br-lung-r { right: 19%; clip-path: polygon(42% 2%, 18% 12%, 5% 38%, 7% 67%, 23% 91%, 48% 100%, 72% 93%, 90% 69%, 94% 41%, 78% 15%, 60% 5%); }

.br-dia { position: absolute; left: 16%; right: 16%; top: 71%; height: 18px; transform-origin: 50% 50%; transition: transform 0.12s linear; z-index: 4;
  background: linear-gradient(180deg, #fbbf24, #b45309); border-radius: calc((1 - var(--flat, 0.5)) * 60px) calc((1 - var(--flat, 0.5)) * 60px) 7px 7px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); }

.br-air { position: absolute; left: 50%; top: 3.5%; transform: translateX(-50%); font-size: 0.8rem; font-weight: 800; color: #8aa0b6; z-index: 4; }
.br-air.br-in { color: #7dd3fc; } .br-air.br-out { color: #fcd34d; }
.br-phase { position: absolute; left: 8px; bottom: 6px; font-size: 0.78rem; font-weight: 600; color: #e8d9e6; background: rgba(6, 10, 18, 0.55); padding: 2px 7px; border-radius: 5px; z-index: 4; }