/* Skeletal muscle lesson. All rules scoped under .skm-* */
.skm-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.skm-full { flex: 1; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; padding: 8px 16px 0; }
.skm-full .skm-arm { width: auto; height: 100%; max-width: 100%; max-height: 420px; }

/* the arm */
.skm-arm { width: 100%; max-width: 320px; overflow: visible; }
.skm-arm.small { max-width: 200px; }
.skm-body { fill: rgba(169,155,255,.10); stroke: rgba(169,155,255,.22); stroke-width: 2; }
.skm-skin { stroke: rgba(233,199,166,.16); stroke-width: 70; stroke-linecap: round; }
.skm-skin.fa { stroke-width: 40; }
.skm-bone { stroke: rgba(234,227,215,.7); stroke-width: 7; stroke-linecap: round; }
.skm-joint { fill: #EAE3D7; }
.skm-fist { fill: #E9C7A6; stroke: rgba(0,0,0,.25); stroke-width: 1.5; }
.skm-ball { fill: var(--violet-bright); transform: translate(10px, -16px); }
.skm-mus { cursor: pointer; }
.skm-hit { fill: transparent; stroke: none; }
.skm-belly { fill: var(--violet-deep); stroke: var(--violet-bright); stroke-width: 1.5; transition: fill .3s; }
.skm-tend { stroke: rgba(234,227,215,.65); stroke-width: 3; stroke-linecap: round; }
.skm-mus.on .skm-belly { fill: var(--gold); stroke: #FFE08A; filter: drop-shadow(0 0 10px rgba(252,192,80,.65)); }
.skm-lab { font: 700 19px var(--sans); fill: var(--text); pointer-events: none; }
.skm-bag { fill: #3A2F5E; stroke: var(--violet-bright); stroke-width: 2; transform-box: fill-box; transform-origin: 50% 0; }
.skm-rope { stroke: rgba(234,227,215,.5); stroke-width: 2; }
.skm-sc.hit .skm-bag { animation: skmBag .9s ease-out; }
@keyframes skmBag { 25% { rotate: -16deg; } 55% { rotate: 7deg; } 80% { rotate: -3deg; } 100% { rotate: 0deg; } }

/* the rods */
.skm-rods { width: 100%; max-width: 340px; overflow: visible; }
.skm-sheath { fill: rgba(123,92,253,.10); stroke: rgba(169,155,255,.35); stroke-width: 1.5; }
.skm-wall { stroke: rgba(234,227,215,.55); stroke-width: 3; }
.skm-thin { stroke: var(--gold); stroke-width: 5; stroke-linecap: round; }
.skm-thick { fill: var(--violet); stroke: var(--violet-bright); stroke-width: 1; }
.skm-head { stroke: var(--violet-bright); stroke-width: 2.5; stroke-linecap: round; opacity: .55; }
.skm-head.on { opacity: 1; stroke: #D9D0FF; }
.skm-ruler line { stroke: rgba(234,227,215,.4); stroke-width: 2; }
.skm-leg { display: flex; gap: 16px; justify-content: center; font: 600 13px var(--sans); color: var(--dim); }
.skm-leg i { display: inline-block; width: 18px; height: 6px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }
.skm-leg i.t { background: var(--gold); }
.skm-leg i.m { background: var(--violet); }
.skm-rods.same .skm-thin, .skm-rods.same .skm-thick { filter: drop-shadow(0 0 6px rgba(255,255,255,.5)); }

/* the spider */
.skm-spider { margin: 0; width: 100%; display: flex; justify-content: center; }
.skm-spider img { width: 100%; max-width: 300px; transition: opacity .6s, scale .6s; }
.skm-spider.curl img { scale: .9; }

@media (max-height: 700px) {
  .skm-arm { max-width: 260px; }
  .skm-full .skm-arm { max-height: 330px; }
  .skm-arm.small { max-width: 180px; }
  .skm-spider img { max-width: 240px; }
}

/* the zoom into the biceps */
.skm-zoom { width: 100%; height: 230px; display: flex; justify-content: center; overflow: hidden; }
.skm-zoom .skm-arm { height: 100%; width: auto; max-width: none; will-change: transform; }
.skm-rods.pre, .skm-leg.pre { position: absolute; opacity: 0; }
.skm-rods, .skm-leg { transition: opacity .5s; }