/* Bike Fit Lab — fig-objects.css (v8, agente OBJETOS)
 * Figuras dos objetos: selim (mapa de pressão), tacos (cleat), bicicleta (cotas) e ficha de medidas.
 * Regras: cores só pelas variáveis de .fig; animações só com transform / opacity / stroke-dashoffset; tudo
 * `paused` ou sem transição até a figura ganhar .fig--on (figures.js / motion.js); com prefers-reduced-motion
 * fica o estado final, estático. Carregado depois de site.css, figures.css e motion.css: as regras daqui vencem
 * as de site.css com a mesma especificidade.
 */

/* =====================================================================
   1. Selim: mapa de pressão (fig-selim.php)
   Cada célula <rect class="f-cell"> traz --a (opacidade no estado "antes"), --b ("depois") e --d (atraso da
   coluna). O estado por omissão é "depois"; .fig--selim[data-state] (site.js) ou a classe .fig-selim__state--antes
   (sem JS) mudam-no. A transição é por célula, 900 ms, escalonada por coluna.
   ===================================================================== */
.fig--selim { max-width: 34rem; }
.fig--selim-compact, .reading .fig--selim-compact { max-width: 22rem; margin-top: 2rem; }
.fig-selim__pair { grid-template-columns: minmax(0, 1fr); max-width: 26rem; }
.js .fig-selim__pair { max-width: 26rem; }
.post .prose .fig-selim__pair, .js .post .prose .fig-selim__pair { max-width: 23rem; }   /* nos artigos, coluna de 62ch */
.fig-selim__state--antes::after { content: "Antes"; display: block; font-weight: 600; margin-top: 0.4rem; }
.fig-selim__state--depois::after { content: "Depois"; display: block; font-weight: 600; margin-top: 0.4rem; }
.js .fig-selim__state::after { content: none; }
/* com JS só o primeiro SVG fica (tem os dois mapas); site.css escondia um por estado */
.js .fig--selim[data-state] .fig-selim__state--antes { opacity: 1; pointer-events: auto; }
.js .fig--selim[data-state] .fig-selim__state--depois { display: none; }
.fig .f-saddle-fill { fill: var(--paper); }
.fig .f-saddle { fill: none; stroke: var(--fg); stroke-width: 2; stroke-linejoin: miter; }
.fig .f-saddle--cut { stroke-width: 1.5; }
.fig--selim .f-grid { fill: none; stroke: var(--fg); stroke-width: 0.75; opacity: 0.12; }
.fig--selim .f-axis { stroke: var(--fg); stroke-width: 1; stroke-dasharray: 3 5; opacity: 0.3; }
.fig--selim .f-cell { fill: var(--fg2); stroke: var(--paper); stroke-width: 0.6; opacity: var(--b, 0); transition: opacity 900ms var(--ease-soft) var(--d, 0ms); }
.fig--selim .f-iso { opacity: 1; transition: opacity 900ms var(--ease-soft) 200ms; }
.fig--selim .f-iso path { fill: none; stroke: var(--fg); stroke-width: 1.25; stroke-linejoin: round; opacity: 0.75; }
.fig--selim .f-iso--a { opacity: 0; }
.fig--selim .f-cop circle { fill: var(--paper); stroke: var(--fg); stroke-width: 2; }
.fig--selim .f-cop line { stroke: var(--fg); stroke-width: 2; stroke-linecap: square; }
.fig--selim .f-cop:not(.f-cop--key) { transform: translate(var(--bx), var(--by)); transition: transform 900ms var(--ease-in-out) 150ms; }
.fig--selim .f-labels text, .fig--selim .f-scale text, .fig--selim .f-cop-key text { font-size: 13px; }
.fig--selim .f-scale__frame { fill: none; stroke: var(--fg); stroke-width: 1; opacity: 0.35; }
.fig--selim .f-lvl { fill: var(--fg2); }
.fig.fig--selim .f-state { font-size: 14px; }
.fig.fig--selim .f-state.f-state--a { opacity: 0; }
.fig.fig--selim .f-state.f-state--b { opacity: 1; }
/* estado "antes": sem JS é o primeiro SVG; com JS é o atributo data-state posto por site.js */
.fig-selim__state--antes .f-cell { opacity: var(--a, 0); }
.fig-selim__state--antes .f-iso--a { opacity: 1; }
.fig-selim__state--antes .f-iso--b { opacity: 0; }
.fig-selim__state--antes .f-cop:not(.f-cop--key) { transform: translate(var(--ax), var(--ay)); }
.fig.fig--selim .fig-selim__state--antes .f-state--a { opacity: 1; }
.fig.fig--selim .fig-selim__state--antes .f-state--b { opacity: 0; }
.js .fig--selim[data-state="antes"] .f-cell { opacity: var(--a, 0); }
.js .fig--selim[data-state="depois"] .f-cell { opacity: var(--b, 0); }
.js .fig--selim[data-state="antes"] .f-iso--a, .js .fig--selim[data-state="depois"] .f-iso--b { opacity: 1; }
.js .fig--selim[data-state="antes"] .f-iso--b, .js .fig--selim[data-state="depois"] .f-iso--a { opacity: 0; }
.js .fig--selim[data-state="antes"] .f-cop:not(.f-cop--key) { transform: translate(var(--ax), var(--ay)); }
.js .fig--selim[data-state="depois"] .f-cop:not(.f-cop--key) { transform: translate(var(--bx), var(--by)); }
.js .fig--selim[data-state] .f-state { display: none; }
/* entrada: a grelha e as células aparecem depois do contorno se desenhar (motion.css trata do traço) */
.has-motion .fig--selim .f-cells { opacity: 0; }
.has-motion .fig--selim.fig--on .f-cells { opacity: 1; transition: opacity 700ms var(--ease-out) 450ms; }
/* pulso de cadência: as células dos ísquios oscilam em contrafase (±1 nível), só com a figura visível */
@keyframes selim-pulse { from { opacity: 1; } to { opacity: 0.78; } }
.fig--selim .f-zone { animation: selim-pulse 800ms var(--ease-in-out) infinite alternate paused; }
.fig--selim .f-zone--r { animation-delay: -800ms; }
.fig--selim.fig--on .f-zone { animation-play-state: running; }
/* variante compacta (sem alternador): ciclo lento depois → antes → depois, 8 s, escalonado por coluna */
@keyframes selim-ab-cell {
  0%, 38% { opacity: var(--b, 0); animation-timing-function: var(--ease-soft); }
  50%, 88% { opacity: var(--a, 0); animation-timing-function: var(--ease-soft); }
  100% { opacity: var(--b, 0); }
}
@keyframes selim-ab-show { 0%, 38% { opacity: 1; } 50%, 88% { opacity: 0; } 100% { opacity: 1; } }
@keyframes selim-ab-hide { 0%, 38% { opacity: 0; } 50%, 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes selim-ab-cop {
  0%, 38% { transform: translate(var(--bx), var(--by)); animation-timing-function: var(--ease-in-out); }
  50%, 88% { transform: translate(var(--ax), var(--ay)); animation-timing-function: var(--ease-in-out); }
  100% { transform: translate(var(--bx), var(--by)); }
}
.fig--selim-compact.fig--on .f-cell { animation: selim-ab-cell 8s linear infinite; animation-delay: var(--d, 0ms); }
.fig--selim-compact.fig--on .f-iso--b { animation: selim-ab-show 8s var(--ease-soft) infinite 200ms; }
.fig--selim-compact.fig--on .f-iso--a { animation: selim-ab-hide 8s var(--ease-soft) infinite 200ms; }
.fig--selim-compact.fig--on .f-cop:not(.f-cop--key) { animation: selim-ab-cop 8s linear infinite 150ms; }
.fig.fig--selim-compact.fig--on .f-state--b { animation: selim-ab-show 8s var(--ease-soft) infinite 200ms; }
.fig.fig--selim-compact.fig--on .f-state--a { animation: selim-ab-hide 8s var(--ease-soft) infinite 200ms; }


/* =====================================================================
   2. Tacos: sola com volume e cleat que mexe (fig-tacos.php)
   O cleat (.f-cleat-g) roda/desliza à volta do eixo do pedal (86,88). Ponto ativo via :has() na figura; os .f-hot
   vêm antes do desenho no DOM, por isso o seletor irmão (~) serve de fallback onde :has() não existe.
   ===================================================================== */
.fig--tacos { max-width: 34rem; }
.fig--tacos .f-sole__out { fill: var(--paper); stroke: var(--fg); stroke-width: 2; stroke-linejoin: miter; }
.fig--tacos .f-sole__rim { fill: none; stroke: var(--fg); stroke-width: 1; opacity: 0.3; }
.fig--tacos .f-pad { fill: var(--soft); stroke: var(--fg); stroke-width: 1; stroke-opacity: 0.35; }
.fig--tacos .f-insole { fill: none; stroke: var(--fg); stroke-width: 1.5; stroke-dasharray: 4 3; opacity: 0.45; }
.fig--tacos .f-slot { fill: var(--paper); stroke: var(--fg); stroke-width: 1.5; }
.fig--tacos .f-cleat { fill: var(--soft); stroke: var(--fg); stroke-width: 2; stroke-linejoin: miter; }
.fig--tacos .f-cleat__lip { stroke: var(--fg); stroke-width: 1.5; opacity: 0.5; }
.fig--tacos .f-cleat__win { fill: var(--paper); stroke: var(--fg); stroke-width: 1.5; }
.fig--tacos .f-bolt { fill: var(--paper); stroke: var(--fg); stroke-width: 1.5; }
.fig--tacos .f-bolt__hex { fill: var(--fg); }
.fig--tacos .f-tread { fill: none; stroke: var(--fg); stroke-width: 1; opacity: 0.3; }
.fig--tacos .f-vent { fill: var(--paper); stroke: var(--fg); stroke-width: 1; stroke-opacity: 0.5; }
.fig--tacos .f-meta line { stroke: var(--fg); stroke-width: 1.75; opacity: 0.55; stroke-linecap: round; }
.fig--tacos .f-meta circle { fill: var(--fg); opacity: 0.55; }
.fig--tacos .f-meta__tarsus { fill: none; stroke: var(--fg); stroke-width: 1.5; opacity: 0.55; }
.fig--tacos .f-axle { stroke: var(--fg2); stroke-width: 2; stroke-linecap: square; }
.fig--tacos .f-small--muted { opacity: 0.6; }
.fig--tacos .f-lead { stroke: var(--fg); stroke-width: 1; opacity: 0.45; }
.fig--tacos .f-ind { fill: none; stroke: var(--fg2); stroke-width: 2; stroke-linecap: square; stroke-linejoin: miter; }
.fig--tacos .f-ind .f-arc { stroke-width: 2; }
.fig--tacos .f-wedge .f-thick { stroke: var(--fg); opacity: 0.55; stroke-linecap: square; }
.fig--tacos .f-wedge__w { fill: var(--fg2); opacity: 0.4; transform-box: view-box; transform-origin: 216px 213px; }
.fig--tacos .f-sole-cut { stroke: var(--fg); stroke-width: 3; stroke-linecap: square; }
.fig--tacos .f-foot-cut { fill: none; stroke: var(--fg); stroke-width: 1.5; stroke-dasharray: 4 3; opacity: 0.5; }
.fig--tacos .f-tilt { transform-box: view-box; transform-origin: 188px 213px; transform: rotate(-10deg); }
/* o cleat: sem ponto ativo, um ciclo de 9 s passa por avanço/recuo, rotação e lateral; parado até .fig--on */
.fig--tacos .f-cleat-g { transform-box: view-box; transform-origin: 86px 88px; animation: tacos-idle 9s var(--ease-in-out) infinite paused; }
.fig--tacos.fig--on .f-cleat-g { animation-play-state: running; }
@keyframes tacos-idle {
  0% { transform: translate(0, 0); } 8% { transform: translateY(-4.7px); } 24% { transform: translateY(4.7px); } 33% { transform: translate(0, 0) rotate(0deg); }
  41% { transform: rotate(-6deg); } 58% { transform: rotate(6deg); } 66% { transform: rotate(0deg) translate(0, 0); }
  75% { transform: translateX(-4px); } 91% { transform: translateX(4px); } 100% { transform: translate(0, 0); }
}
@keyframes tacos-slide { from { transform: translateY(-4.7px); } to { transform: translateY(4.7px); } }
@keyframes tacos-rot { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
@keyframes tacos-lat { from { transform: translateX(-4px); } to { transform: translateX(4px); } }
@keyframes tacos-wedge-tilt { from { transform: rotate(0deg); } to { transform: rotate(-10deg); } }
@keyframes tacos-wedge-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
/* ponto ativo: só esse movimento (1 e 5 param o cleat; 5 anima a cunha) */
.fig--tacos .f-hot[data-point="1"].is-active ~ .f-sole .f-cleat-g, .fig--tacos .f-hot[data-point="5"].is-active ~ .f-sole .f-cleat-g { animation: none; }
.fig--tacos .f-hot[data-point="2"].is-active ~ .f-sole .f-cleat-g { animation: tacos-slide 1.4s var(--ease-in-out) infinite alternate; }
.fig--tacos .f-hot[data-point="3"].is-active ~ .f-sole .f-cleat-g { animation: tacos-rot 1.4s var(--ease-in-out) infinite alternate; }
.fig--tacos .f-hot[data-point="4"].is-active ~ .f-sole .f-cleat-g { animation: tacos-lat 1.4s var(--ease-in-out) infinite alternate; }
.fig--tacos .f-hot[data-point="5"].is-active ~ .f-schemes .f-tilt { animation: tacos-wedge-tilt 1.6s var(--ease-in-out) infinite alternate; }
.fig--tacos .f-hot[data-point="5"].is-active ~ .f-schemes .f-wedge__w { animation: tacos-wedge-grow 1.6s var(--ease-in-out) infinite alternate; }
.fig--tacos:has(.f-hot[data-point="1"].is-active) .f-cleat-g, .fig--tacos:has(.f-hot[data-point="5"].is-active) .f-cleat-g { animation: none; }
.fig--tacos:has(.f-hot[data-point="2"].is-active) .f-cleat-g { animation: tacos-slide 1.4s var(--ease-in-out) infinite alternate; }
.fig--tacos:has(.f-hot[data-point="3"].is-active) .f-cleat-g { animation: tacos-rot 1.4s var(--ease-in-out) infinite alternate; }
.fig--tacos:has(.f-hot[data-point="4"].is-active) .f-cleat-g { animation: tacos-lat 1.4s var(--ease-in-out) infinite alternate; }
.fig--tacos:has(.f-hot[data-point="5"].is-active) .f-tilt { animation: tacos-wedge-tilt 1.6s var(--ease-in-out) infinite alternate; }
.fig--tacos:has(.f-hot[data-point="5"].is-active) .f-wedge__w { animation: tacos-wedge-grow 1.6s var(--ease-in-out) infinite alternate; }


/* =====================================================================
   3. Bicicleta: tubos com espessura e cotas que se desenham por ordem (fig-bicicleta.php)
   motion.css desenha o traço (.m-stroke) da bicicleta e das cotas quando a figura entra; aqui cada cota (.f-dim,
   --dd = (n−1) × 120 ms) espera pela bicicleta e desenha-se por ordem, e o rótulo numerado escala depois dela.
   ===================================================================== */
.fig--bicicleta .f-bike { opacity: 0.6; }
.fig--bicicleta .f-tube .f-t0 { stroke-width: 7; }
.fig--bicicleta .f-tube .f-t1 { stroke-width: 6; }
.fig--bicicleta .f-tube .f-t2 { stroke-width: 4.5; }
.fig--bicicleta .f-tube .f-t3 { stroke-width: 4; }
.fig--bicicleta .f-tube--in .f-t0 { stroke: var(--paper); stroke-width: 4; }
.fig--bicicleta .f-tube--in .f-t1 { stroke: var(--paper); stroke-width: 3; }
.fig--bicicleta .f-tube--in .f-t2 { stroke: var(--paper); stroke-width: 2; }
.fig--bicicleta .f-tube--in .f-t3 { stroke: var(--paper); stroke-width: 1.5; }
.fig--bicicleta .f-spokes line { stroke-width: 1; opacity: 0.5; }
.fig--bicicleta .f-rim { stroke-width: 1.5; }
.fig--bicicleta .f-tyre { stroke-width: 4; }
.fig--bicicleta .f-hub, .fig--bicicleta .f-bb { fill: var(--paper); stroke-width: 2.5; }
.fig--bicicleta .f-ring { stroke-width: 1.5; stroke-dasharray: 2 2; opacity: 0.6; }
.fig--bicicleta .f-saddle-side { fill: var(--fg); stroke: var(--fg); stroke-width: 1; }
.fig--bicicleta .f-bar { stroke-width: 3.5; }
.fig--bicicleta .f-hood { fill: var(--fg); stroke: var(--fg); stroke-width: 1; }
.fig--bicicleta .f-crank__arm { stroke-width: 4; }
.fig--bicicleta .f-pedal { fill: var(--fg); stroke: none; }
.fig--bicicleta .f-dim { transition: opacity var(--t-ui) ease; }
.fig--bicicleta .f-dim--lever line { stroke-dasharray: 2 3; }
/* ordem de entrada: a bicicleta desenha-se (motion.css), depois cada cota, depois o seu número */
.has-motion .fig--bicicleta.fig--on .f-dim .m-stroke { transition-delay: calc(800ms + var(--dd, 0ms)); }
.has-motion .fig--bicicleta.fig--on .f-hot, .has-motion .fig--bicicleta.fig--on .f-mark .f-num { transition-delay: calc(1250ms + var(--dd, 0ms)); }
.has-motion .fig--bicicleta .f-hot .f-num { opacity: 0; transform: scale(0.5); transform-box: fill-box; transform-origin: center; }
.has-motion .fig--bicicleta.fig--on .f-hot .f-num { opacity: 1; transform: scale(1); transition: opacity 300ms var(--ease-out) calc(1250ms + var(--dd, 0ms)), transform 500ms var(--ease-out) calc(1250ms + var(--dd, 0ms)); }
.has-motion .fig--bicicleta.fig--on .f-hot__ring { animation-delay: calc(1900ms + var(--dd, 0ms)); }
/* ponto ativo: só essa cota a --fg2 cheio, as outras a .35; em hover a cota sobe para .9 */
.fig--bicicleta.has-active .f-dim { opacity: 0.35; }
.fig--bicicleta:has(.f-hot[data-point="1"].is-active) .f-dim[data-dim="1"], .fig--bicicleta:has(.f-hot[data-point="2"].is-active) .f-dim[data-dim="2"],
.fig--bicicleta:has(.f-hot[data-point="3"].is-active) .f-dim[data-dim="3"], .fig--bicicleta:has(.f-hot[data-point="4"].is-active) .f-dim[data-dim="4"],
.fig--bicicleta:has(.f-hot[data-point="5"].is-active) .f-dim[data-dim="5"], .fig--bicicleta:has(.f-hot[data-point="6"].is-active) .f-dim[data-dim="6"],
.fig--bicicleta:has(.f-hot[data-point="7"].is-active) .f-dim[data-dim="7"], .fig--bicicleta:has(.f-hot[data-point="8"].is-active) .f-dim[data-dim="8"] { opacity: 1; }
.fig--bicicleta:has(.f-hot[data-point="1"].is-active) .f-dim[data-dim="1"] line, .fig--bicicleta:has(.f-hot[data-point="2"].is-active) .f-dim[data-dim="2"] line,
.fig--bicicleta:has(.f-hot[data-point="3"].is-active) .f-dim[data-dim="3"] line, .fig--bicicleta:has(.f-hot[data-point="4"].is-active) .f-dim[data-dim="4"] line,
.fig--bicicleta:has(.f-hot[data-point="5"].is-active) .f-dim[data-dim="5"] line, .fig--bicicleta:has(.f-hot[data-point="6"].is-active) .f-dim[data-dim="6"] line,
.fig--bicicleta:has(.f-hot[data-point="7"].is-active) .f-dim[data-dim="7"] line, .fig--bicicleta:has(.f-hot[data-point="8"].is-active) .f-dim[data-dim="8"] line { stroke-width: 2.5; }
.fig--bicicleta:has(.f-hot[data-point="1"].is-hover) .f-dim[data-dim="1"], .fig--bicicleta:has(.f-hot[data-point="2"].is-hover) .f-dim[data-dim="2"],
.fig--bicicleta:has(.f-hot[data-point="3"].is-hover) .f-dim[data-dim="3"], .fig--bicicleta:has(.f-hot[data-point="4"].is-hover) .f-dim[data-dim="4"],
.fig--bicicleta:has(.f-hot[data-point="5"].is-hover) .f-dim[data-dim="5"], .fig--bicicleta:has(.f-hot[data-point="6"].is-hover) .f-dim[data-dim="6"],
.fig--bicicleta:has(.f-hot[data-point="7"].is-hover) .f-dim[data-dim="7"], .fig--bicicleta:has(.f-hot[data-point="8"].is-hover) .f-dim[data-dim="8"] { opacity: 0.9; }
@supports not selector(:has(a)) { .fig--bicicleta.has-active .f-dim { opacity: 0.6; } }   /* sem :has() não se escurece nada */

/* =====================================================================
   4. Ficha: os valores em branco escrevem-se em cascata (fig-ficha.php)
   Cada travessão é um SVG com uma linha (pathLength=1): dashoffset 1 → 0 quando a figura entra, 110 ms por linha (--i).
   Sem motion.js (ou com movimento reduzido) o traço está sempre completo.
   ===================================================================== */
.fig .ficha__dash { display: inline-block; width: 1.75em; height: 0.5em; vertical-align: baseline; overflow: visible; margin: 0; }   /* vence .fig svg (bloco a 100 %) */
.ficha__dash line { stroke: var(--fg); stroke-width: 2.5; stroke-linecap: square; }
.has-motion .fig--ficha .ficha__dash line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.has-motion .fig--ficha.fig--on .ficha__dash line { stroke-dashoffset: 0; transition: stroke-dashoffset 500ms var(--ease-out) calc(900ms + var(--i, 0) * 110ms); }
.has-motion .fig--ficha.fig--on .ficha__dash + .ficha__dash line, .has-motion .fig--ficha.fig--on .sr-only + .ficha__dash:nth-of-type(2) line { transition-delay: calc(1150ms + var(--i, 0) * 110ms); }

/* =====================================================================
   Movimento reduzido: estado final estático (selim: "depois", ou o estado do alternador, sem transição)
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .fig--selim .f-cell, .fig--selim .f-iso, .fig--selim .f-cop, .fig--selim .f-cells { transition: none; }
  .fig--selim .f-zone, .fig--selim-compact.fig--on .f-cell, .fig--selim-compact.fig--on .f-iso--a, .fig--selim-compact.fig--on .f-iso--b,
  .fig--selim-compact.fig--on .f-cop, .fig.fig--selim-compact.fig--on .f-state { animation: none; }
  .has-motion .fig--selim .f-cells { opacity: 1; }
  .fig--tacos .f-cleat-g, .fig--tacos .f-tilt, .fig--tacos .f-wedge__w { animation: none; }
  .has-motion .fig--bicicleta .f-hot .f-num { opacity: 1; transform: none; transition: none; }
  .has-motion .fig--bicicleta.fig--on .f-dim .m-stroke, .has-motion .fig--bicicleta.fig--on .f-hot { transition: none; }
  .fig--bicicleta .f-dim { transition: none; }
  .has-motion .fig--ficha .ficha__dash line { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
}