/* 10 · treinao — galeria horizontal fixada: a fita anda para a esquerda (câmera para a direita).
   A fita é uma sequência de quadros de uma tela cada (fora da grade, medidos pela tela); dentro de
   cada quadro, a gramática do núcleo (.wrap › .lay de 12 colunas). Fotos na proporção nativa. */

#treinao .tr-stage { background: var(--ink); }
#treinao .tr-bg { position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 18% 30%, rgba(125, 85, 150, .16), transparent 70%),
    radial-gradient(50% 40% at 86% 80%, rgba(244, 178, 35, .07), transparent 70%),
    linear-gradient(180deg, #0e0713 0%, #150a1c 56%, #0e0713 100%); }
#treinao .tr-stage > .checker { z-index: 0; }

/* ---------- a fita ---------- */
#treinao .tr-track { position: absolute; z-index: 1; left: 0; top: 0; height: 100%; width: max-content; display: flex; }
#treinao .tr-page { position: relative; flex: none; width: 100vw; height: 100%; }
#treinao .tr-page > .wrap { position: relative; z-index: 2; height: 100%; }
#treinao .tr-lay { height: 100%; align-items: start; grid-template-columns: repeat(12, minmax(0, 1fr)); }
#treinao .tr-lay > .tr-item { grid-row: 1; grid-column: var(--span); position: relative; margin-top: calc(var(--y, 0) * 1svh); }
#treinao .tr-route { position: absolute; left: 0; top: 0; z-index: 1; overflow: visible; pointer-events: none; }
#treinao .tr-route .route { stroke: url(#tr-route-g); stroke-width: 6; }
#treinao .tr-route circle { fill: var(--honey); filter: drop-shadow(0 0 10px rgba(244, 178, 35, .6)); }

/* abertura */
#treinao .tr-intro { container-type: inline-size; display: grid; justify-items: start; gap: clamp(12px, 2.2vh, 22px); }
#treinao .tr-title { font-size: calc((clamp(52px, 16.5cqi, 118px)) * var(--ts, 1)); text-wrap: balance; }
#treinao .tr-lede { max-width: 30ch; }

/* fotos: proporção nativa (nada cortado), limitadas pela altura da tela; legenda embaixo */
#treinao .tr-shot { justify-self: start; width: min(100%, calc(var(--mh) * var(--ar) * 1svh)); }
#treinao .tr-photo { width: 100%; aspect-ratio: var(--ar); }
#treinao .tr-cap { margin-top: 12px; }
/* crédito: preso às duas bordas da foto e quebrando só entre o fotógrafo e a agência (nas fotos em pé, estreitas,
   a letra maior quebrava "HEUSI / ACTION" em três linhas); véu curto no pé da foto para ele não sumir no chão claro */
#treinao .tr-photo::after { content: ''; position: absolute; inset: auto 0 0; z-index: 1; height: clamp(48px, 16%, 84px); pointer-events: none;
  background: linear-gradient(0deg, rgba(14, 7, 19, .62) 0%, rgba(14, 7, 19, .28) 45%, rgba(14, 7, 19, 0) 100%); }
#treinao .tr-photo > .credit { left: 12px; text-align: right; line-height: 1.45; }
#treinao .tr-photo > .credit > span { display: inline-block; white-space: nowrap; }

/* cartões de L15 */
#treinao .tr-card { display: grid; gap: 14px; background: rgba(22, 10, 29, .94); } /* a linha passa por trás: o cartão a esconde */
#treinao .tr-card__t { font-size: calc((clamp(18px, .55vw + 11px, 24px)) * var(--ts, 1)); max-width: 34ch; }

/* etiquetas de lugar: um ponto na linha e o nome do lugar embaixo */
#treinao .tr-node { position: relative; }
#treinao .tr-dot { position: absolute; left: 0; top: -11px; width: 22px; height: 22px; border-radius: 50%; background: var(--honey); box-shadow: 0 0 0 6px rgba(244, 178, 35, .22), 0 0 24px rgba(244, 178, 35, .6); }
#treinao .tr-node .lt { padding-top: 26px; }
#treinao .tr-node .lt b { color: var(--offwhite); }
/* "Percurso do treinão" e "Açaí e talk show" numa linha só: a coluna do lugar é estreita (2 de 12), mas a
   foto seguinte começa depois do vão da grade e há folga para a legenda ocupar */
#treinao .tr-node .lt span { white-space: nowrap; }
#treinao .tr-node--start { margin-top: clamp(18px, 4vh, 40px); }
#treinao .tr-node--nw .lt b { white-space: nowrap; } /* "Avenida Beira-Mar" não quebra no hífen (a coluna à direita está livre na altura dele) */

/* fim da fita: a data de 2027 */
#treinao .tr-end { container-type: inline-size; display: grid; justify-items: start; gap: 14px; }
#treinao .tr-end__d { font-size: calc((clamp(96px, 30cqi, 230px)) * var(--ts, 1)); color: var(--honey); line-height: 1.04; }

#treinao .tr-wrap { position: relative; z-index: 3; height: 100%; pointer-events: none; }
/* projetor 2560: a faixa de 1560 deixava cada quadro miúdo no meio da tela; as fotos são limitadas pela coluna,
   então a faixa abre até 2100 e elas crescem junto (a linha e as paradas se remedem no refresh) */
@media (min-width: 2200px) and (orientation: landscape) {
  #treinao .tr-page > .wrap--wide, #treinao .tr-wrap { max-width: 2100px; }
}
#treinao .tr-cam { position: absolute; left: var(--gutter); top: calc(var(--hud-h) + 26px); }

/* tablet em pé: cada quadro empilha em duas faixas (as mesmas fotos, maiores, sem corte) */
@media (orientation: portrait) {
  #treinao .tr-lay > .tr-item { grid-column: var(--sp, var(--span)); margin-top: calc(var(--yp, var(--y, 0)) * 1svh); }
  #treinao .tr-shot { width: min(100%, calc(46 * var(--ar) * 1svh)); }
}

/* ---------- movimento reduzido: os quadros empilham e rolam na vertical, sem a linha ---------- */
.reduced #treinao .tr-stage { height: auto; overflow: visible; }
.reduced #treinao .tr-track { position: relative; flex-direction: column; width: auto; height: auto; padding-block: calc(var(--hud-h) + 40px) 80px; }
.reduced #treinao .tr-page { width: auto; height: auto; padding-block: 5vh; }
.reduced #treinao .tr-lay > .tr-item { margin-top: 0; }
.reduced #treinao .tr-route, .reduced #treinao .tr-cam { display: none; }