/* Bike Fit Lab — fig-body.css (v8, agente CORPO)
 * Figuras do corpo com volume: fig-corpo, fig-joelho, fig-antes-depois, fig-pedalada (as regras base destas duas últimas
 * continuam em site.css e figures.css; aqui só o que é novo). Animações só com .fig--on (figures.js/motion.js), todas
 * `paused` até lá e desligadas com prefers-reduced-motion (fica o quadro 0 do atributo d, estático).
 *
 * Morph de caminhos: cada <path class="fb-m"> traz --k0..--kN com path('…') (fig_body_morph em _body.php); as @keyframes
 * abaixo animam a propriedade CSS `d` entre eles. Em browsers sem `d` em CSS o atributo d (quadro 0) fica, estático. */

/* ===== silhuetas (as mesmas regras da figura de /sintomas, para estas figuras) ===== */
.fig--corpo .f-silh, .fig--ad .f-silh, .fig--joelho .f-silh { fill: var(--paper); stroke: var(--fg); stroke-width: 2.5; stroke-linecap: square; stroke-linejoin: miter; }
.fig--corpo .f-silh--far, .fig--ad .f-silh--far, .fig--joelho .f-silh--far { opacity: 0.35; }
.fig--corpo .f-bike .f-far, .fig--ad .f-bike .f-far { opacity: 0.5; }
.fig--corpo .f-bike .f-rim, .fig--ad .f-bike .f-rim { opacity: 0.5; }
.fig--corpo .f-line, .fig--ad .f-line, .fig--joelho .f-line { fill: none; stroke: var(--fg); stroke-width: 2; stroke-linecap: square; opacity: 0.5; }
.fig--corpo .f-contacts .f-contact { fill: var(--fg); stroke: none; }
.fig--corpo .f-arc { fill: none; stroke: var(--fg2); stroke-width: 2; stroke-linejoin: miter; }

/* ===== quadros ===== */
/* 12 quadros em loop (uma volta de manivela, 30° por quadro, cadência constante) */
@keyframes fb-cycle12 {
  0% { d: var(--k0); } 8.3333% { d: var(--k1); } 16.6667% { d: var(--k2); } 25% { d: var(--k3); }
  33.3333% { d: var(--k4); } 41.6667% { d: var(--k5); } 50% { d: var(--k6); } 58.3333% { d: var(--k7); }
  66.6667% { d: var(--k8); } 75% { d: var(--k9); } 83.3333% { d: var(--k10); } 91.6667% { d: var(--k11); } 100% { d: var(--k0); }
}
/* um <text> por quadro: visível só no seu doze avos da volta (o atraso negativo --k põe cada um na sua vez) */
@keyframes fb-show12 { 0%, 8.3333% { opacity: 1; } 8.3334%, 100% { opacity: 0; } }   /* cada texto: 200 ms centrados no seu quadro (atraso negativo por --k) */
/* dois quadros, vai e vem (perna sobe e desce) */
@keyframes fb-lift { from { d: var(--k0); } to { d: var(--k1); } }
/* quatro quadros em loop (em baixo → em cima para dentro → em baixo → em cima para fora) */
@keyframes fb-sway4 { 0% { d: var(--k0); } 25% { d: var(--k1); } 50% { d: var(--k2); } 75% { d: var(--k3); } 100% { d: var(--k0); } }

/* ===== corpo: a perna pedala, o ângulo do joelho acompanha ===== */
.fig--corpo .fb-m { animation: fb-cycle12 2.4s linear infinite paused; }
.fig--corpo .f-deg { animation: fb-show12 2.4s linear infinite paused; animation-delay: calc((var(--k, 0) - 12) * 200ms + 100ms); font-weight: 600; font-size: 14px; fill: var(--fg2); }
.fig--corpo.fig--on .fb-m, .fig--corpo.fig--on .f-deg { animation-play-state: running; }

@media (prefers-reduced-motion: reduce) {
  .fig--corpo .fb-m { animation: none; }
  .fig--corpo .f-deg { animation: none; opacity: 0; }
  .fig--corpo .f-deg--0 { opacity: 1; }
}

/* ===== antes e depois: silhuetas em vez de palitos; o cursor continua a fundir pela opacidade (--mix de site.js) ===== */
.fig--ad .cyc--before .f-silh { stroke: var(--fg); }
.fig--ad .cyc--before .f-bike { opacity: 0.35; }
.fig--ad .cyc--after .f-bike { opacity: 0.55; }
.fig--ad .cyc--after .f-silh { stroke: var(--fg2); }
.fig--ad .cyc--after .f-line { stroke: var(--fg2); }
.fig--ad .cyc--after .f-silh--far { opacity: 0.45; }
.fig--ad .f-dim-label { fill: var(--fg2); font-weight: 600; }
.fig--ad .f-dims .f-dim-ref { stroke-width: 1.5; }

/* ===== joelho: pernas com volume; uma sobe e desce no plano, a outra alterna valgo/varo; a bacia balança no ponto 4 ===== */
.fig--joelho .f-body { stroke-width: 2.5; }
.fig--joelho .f-torso { fill: var(--paper); }
.fig--joelho .f-bike--bar .f-thick { stroke-width: 5; }
.fig--joelho .f-leg--l { animation: fb-lift 1s var(--ease-in-out) -1s infinite alternate paused; }
.fig--joelho .f-knee--l { animation: fb-lift 1s var(--ease-in-out) -1s infinite alternate paused; }
.fig--joelho .f-leg--r, .fig--joelho .f-knee--r { animation: fb-sway4 4s var(--ease-in-out) infinite paused; }
.fig--joelho.fig--on .f-leg--l, .fig--joelho.fig--on .f-knee--l, .fig--joelho.fig--on .f-leg--r, .fig--joelho.fig--on .f-knee--r { animation-play-state: running; }
/* ponto 4 ativo: a bacia balança (o que um selim alto faz); sem :has() fica nivelada */
@keyframes fb-tilt { from { rotate: -4deg; } to { rotate: 4deg; } }
.fig--joelho .f-pelvis { transform-box: fill-box; transform-origin: center; }
.fig--joelho.fig--on:has(.f-hot[data-point="4"].is-active) .f-pelvis { animation: fb-tilt 1s var(--ease-in-out) infinite alternate; }
/* a perna esquerda deixa de ser a referência "ideal" quando os pontos 2/3 estão ativos: nada muda, a perna direita já mostra o desvio */

@media (prefers-reduced-motion: reduce) {
  .fig--joelho .f-leg--l, .fig--joelho .f-knee--l, .fig--joelho .f-leg--r, .fig--joelho .f-knee--r, .fig--joelho .f-pelvis { animation: none; }
}

/* ===== pedalada: o ponto percorre a curva, as fatias acendem quando a manivela as atravessa =====
 * A manivela (figures.css, fig-crank) parte das 3 h: t = 0 ↔ 90°. Fatias: 1–2 h = 30–60° ↔ t 0,833–0,917; 2–4 h ↔ 0,917–1 e 0–0,083;
 * 4–5 h ↔ 0,083–0,167; recuperação 7–11 h = 210–330° ↔ 0,333–0,667. Ligeira rampa de 1 % para não piscar. */
@keyframes fb-dot24 {
  0% { translate: var(--p0); } 4.1667% { translate: var(--p1); } 8.3333% { translate: var(--p2); } 12.5% { translate: var(--p3); }
  16.6667% { translate: var(--p4); } 20.8333% { translate: var(--p5); } 25% { translate: var(--p6); } 29.1667% { translate: var(--p7); }
  33.3333% { translate: var(--p8); } 37.5% { translate: var(--p9); } 41.6667% { translate: var(--p10); } 45.8333% { translate: var(--p11); }
  50% { translate: var(--p12); } 54.1667% { translate: var(--p13); } 58.3333% { translate: var(--p14); } 62.5% { translate: var(--p15); }
  66.6667% { translate: var(--p16); } 70.8333% { translate: var(--p17); } 75% { translate: var(--p18); } 79.1667% { translate: var(--p19); }
  83.3333% { translate: var(--p20); } 87.5% { translate: var(--p21); } 91.6667% { translate: var(--p22); } 95.8333% { translate: var(--p23); } 100% { translate: var(--p24); }
}
@keyframes fb-sec-a { 0%, 82.3% { opacity: 0.22; } 83.3%, 91.7% { opacity: 0.5; } 92.7%, 100% { opacity: 0.22; } }
@keyframes fb-sec-b { 0%, 8.3% { opacity: 0.75; } 9.3%, 90.7% { opacity: 0.45; } 91.7%, 100% { opacity: 0.75; } }
@keyframes fb-sec-c { 0%, 7.3% { opacity: 0.22; } 8.3%, 16.7% { opacity: 0.5; } 17.7%, 100% { opacity: 0.22; } }
@keyframes fb-sec-rec { 0%, 32.3% { opacity: 0; } 33.3%, 66.7% { opacity: 0.14; } 67.7%, 100% { opacity: 0; } }
@keyframes fb-force { 0%, 8.3% { opacity: 1; } 9.3%, 90.7% { opacity: 0.45; } 91.7%, 100% { opacity: 1; } }
.fig--pedalada .f-dot { fill: var(--fg2); stroke: var(--paper); stroke-width: 2; animation: fb-dot24 2.4s linear -0.6s infinite paused; }
.fig--pedalada .f-sec--rec-lit { fill: var(--fg2); opacity: 0; }
.fig--pedalada .f-sec--a { animation: fb-sec-a 2.4s linear infinite paused; }
.fig--pedalada .f-sec--b { animation: fb-sec-b 2.4s linear infinite paused; }
.fig--pedalada .f-sec--c { animation: fb-sec-c 2.4s linear infinite paused; }
.fig--pedalada .f-sec--rec-lit { animation: fb-sec-rec 2.4s linear infinite paused; }
.fig--pedalada .f-force { animation: fb-force 2.4s linear infinite paused; }
.fig--pedalada.fig--on :is(.f-dot, .f-sec--a, .f-sec--b, .f-sec--c, .f-sec--rec-lit, .f-force) { animation-play-state: running; }

@media (prefers-reduced-motion: reduce) {
  .fig--pedalada :is(.f-dot, .f-sec--a, .f-sec--b, .f-sec--c, .f-sec--rec-lit, .f-force) { animation: none; }
  .fig--pedalada .f-dot { translate: var(--p6); }   /* parado às 3 h, como a manivela */
}

/* ===== larguras =====
 * corpo e antes/depois (400×330) e joelho (360×330) são mais altas do que as outras: nas colunas de leitura ficam com o máximo
 * das figuras (34rem, site.css); na coluna das figuras das páginas de apoio (≥ 64em, até 37,5rem) ocupam a largura toda;
 * dentro de um artigo (.post .prose) o joelho fica a 30rem para não ocupar um ecrã inteiro. */
.fig--corpo, .fig--ad { max-width: 34rem; }
.post .prose .fig--joelho { max-width: 30rem; }
@media (min-width: 64em) {
  .page--cols .page__figs > .fig--corpo, .page--cols .page__figs > .fig--ad { max-width: none; }
}
/* dentro de um artigo, .prose põe as listas em grelha: a legenda numerada volta a ser uma linha que quebra */
.post .prose .fig--corpo .fig__legend { display: flex; }