/* passo 3, "O Stocker sincroniza.": os quadros do onboard do Vitor na freada da C1, de pé sobre a pista (app.js,
   quadrosSinc). A caixa do passo guarda o lugar: a câmera da cena enquadra a zona de freada nela. Sem a cena (sem
   WebGL, sem a maquete), os quadros ficam numa folha de contato dentro da caixa. */
.gesto--sinc { position: relative; height: clamp(460px, 58vh, 540px); }

/* sem a cena: a folha de contato */
.quadros { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px 10px; align-content: center; height: 100%; }
.quadro { margin: 0; position: relative; }
.quadro img { display: block; width: 100%; height: auto; border: 1px solid rgba(139,107,255,.6); background: #0b0814; }
.quadro figcaption { display: grid; gap: 1px; margin-top: 6px; font-size: 11px; line-height: 1.35; color: #c4c4c4; white-space: nowrap; }
.quadros .quadros__elo, .quadro__haste, .quadro__pe { display: none; }

/* na cena: uma camada fixa por cima da luz; cada quadro é um ponto (o pé, no traçado) e os filhos sobem dele */
.quadros.quadros--cena { position: fixed; inset: 0; z-index: 1; display: block; height: auto; pointer-events: none;
  overflow: hidden; opacity: 0; visibility: hidden; contain: layout style; }
.quadros--cena .quadro { position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
.quadros--cena .quadro img { position: absolute; left: 0; bottom: 0; width: 220px; max-width: none;
  transform-origin: 50% 100%; will-change: transform; opacity: .8; filter: saturate(.6) brightness(.86);
  border-color: rgba(139,107,255,.55); transition: opacity .3s, filter .3s, box-shadow .3s, border-color .3s; }
/* a legenda de cada quadro (o instante, a velocidade e a força G): 12 px e o cinza claro sem transparência, que passa o
   AA sobre a maquete escurecida (auditoria de 2026-10-06: 9,5 px no celular e 3,5:1) */
.quadros--cena .quadro figcaption { position: absolute; left: 0; bottom: 0; margin: 0; text-align: center; font-size: 12px;
  line-height: 1.3; color: #c4c4c4; text-shadow: 0 0 3px #000, 0 0 8px #000;
  transition: color .3s, opacity .3s; will-change: transform; }
.quadros--cena .quadro__haste { display: block; position: absolute; left: -.5px; bottom: 0; width: 1px; height: 100px;
  transform-origin: 50% 100%; background: linear-gradient(to top, rgba(207,195,255,.75), rgba(139,107,255,.18)); }
.quadros--cena .quadro__pe { display: block; position: absolute; left: -2.5px; top: -2.5px; width: 5px; height: 5px;
  border-radius: 50%; background: #cfc3ff; box-shadow: 0 0 6px rgba(139,107,255,.9); }
.quadros--cena .quadro.aceso img { opacity: 1; filter: none; border-color: #cfc3ff;
  box-shadow: 0 0 0 1px rgba(139,107,255,.5), 0 0 28px rgba(139,107,255,.55); }
.quadros--cena .quadro.aceso figcaption { color: #fff; opacity: 1; }
.quadros--cena .quadro.aceso .quadro__haste { background: linear-gradient(to top, #fff, rgba(207,195,255,.5)); }
.quadros--cena .quadro.aceso .quadro__pe { background: #fff; }
.quadros--cena .quadros__elo { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 50; }
.quadros__elo path { fill: none; stroke: rgba(240,236,255,.85); stroke-width: 1; }

@media (max-width: 767px) {
  .gesto--sinc { height: clamp(420px, 56vh, 500px); }
  .quadros { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .quadros--cena .quadro img { width: 168px; }
  .quadros--cena .quadro figcaption { font-size: 11.5px; }
}
.rm .quadros--cena .quadro img, .rm .quadros--cena .quadro figcaption { transition: none; }