/* ============================================================================
   ~grec — O CAMINHO DESENHADO (rodada 7b, specs/rodada-7b-caminho.md; redesenhado na
   rodada 7c depois da crítica de 28/09 06h34: "não tá bom ainda não, porque visualmente está
   descaracterizando a página. Se não vêm muitos elementos gráficos junto, temos que
   melhorar." — o traço era um fio cinza fino e só texto, sem nada da linguagem de gravura a
   duas tintas do resto do site).

   Rodada 7d (specs/rodada-7d-trajetoria-pagina.md): duas mudanças de fundo.
   (1) Saiu da home e virou a página própria /trajetoria/ (a home ganhou um bloco curto
       "Marcos" em texto simples, lista_instituicoes() — sem este componente).
   (2) CADA PARADA GANHOU FEITOS (2–5 frases) — a crítica "a timeline não pode ter só essa
       imagenzinha... grandes conquistas, feitos". Isso quebrou o desenho da 7c, que posicionava
       cada parada em `top:N%` de uma pista de ALTURA FIXA (--stop-h × catorze): medido na
       primeira versão com feitos, a nota mais alta chegava a 1015px contra 274px da mais curta
       (3,7×) — paradas vizinhas se sobrepunham. A pista virou FLUXO NORMAL: cada `<li>` tem a
       altura do seu próprio conteúdo, uma abaixo da outra (gap fixo), sem position:absolute
       nem percentual de página. O traço (SVG) e o marco (círculo) deixam de precisar acertar a
       coordenada exata de cada parada — o traço é uma curva decorativa de forma fixa, esticada
       (preserveAspectRatio="none") para a altura real do fluxo; o marco é local a cada `<li>`
       (top:50% DAQUELE item, não da página). As fases da margem (bandas por percentual) saíram:
       como o campo "fase" de cada parada não é contíguo por posição (uma instituição recente
       pode ser classificada na fase "Educação", por exemplo), uma faixa lateral sincronizada
       ficaria fatiada demais para ler bem — viram divisores inline no próprio fluxo
       (.caminho__fase-divisor), sempre no lugar certo por construção.

   Estado final como padrão (GREC-0035 §pisos): a marcação em site/gerar.py (caminho_html) já
   é a composição inteira — a nota (vinheta + ano + nome + papel + feitos) sempre em
   `opacity:1`, nunca anima; só o nib do traço e o círculo do marco, os dois aria-hidden, se
   desenham com a rolagem. O desenho com a rolagem só liga dentro de
   @supports (animation-timeline: view()) e @media (prefers-reduced-motion: no-preference);
   sem isso (Firefox de hoje, celular com movimento reduzido, impressão, sem JavaScript) o
   caminho inteiro aparece de uma vez, com todas as paradas e vinhetas legíveis. Texto real em
   HTML (h3/p/ul), nunca em <text> de SVG; imagem real (<img>), nunca CSS de fundo.
   ============================================================================ */

.caminho__pista {
  position: relative;
  display: flex;
  box-sizing: border-box;
  gap: clamp(6px, 2vw, 20px);
  padding-block: clamp(32px, 7vw, 64px);
  margin-top: var(--s-6);
}

/* --------------------------------------------------------------- miolo: traço + paradas */
.caminho__miolo { position: relative; flex: 1 1 auto; min-width: 0; }
.caminho__traco { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* três camadas do MESMO traço, com a MESMA ondulação orgânica (filtro no <g> pai, em
   gerar.py) — a mancha granulada (tinta que "sangrou" no papel, borda erodida por
   feTurbulence/feComposite), o halo pálido por baixo, e o nib nítido por cima (o que se
   desenha com a rolagem) — para lerem como um só risco grosso de gravura, não uma linha
   técnica de diagrama. A forma (o `d` gerado em gerar.py) é FIXA — não tenta mais passar pela
   coordenada exata de cada parada (rodada 7d, ver nota no alto do arquivo) — e se estica para
   a altura real do fluxo via preserveAspectRatio="none". */
.caminho__mancha {
  fill: none; stroke: var(--fg); stroke-width: 7; stroke-linecap: round; opacity: .9;
  vector-effect: non-scaling-stroke;
}
.caminho__linha-base {
  fill: none; stroke: var(--fg); stroke-width: 5.5; stroke-linecap: round; opacity: .2;
  vector-effect: non-scaling-stroke;
}
.caminho__linha {
  fill: none; stroke: var(--brand); stroke-width: 2; stroke-linecap: round; opacity: .85;
  vector-effect: non-scaling-stroke;
}

.caminho__lista { position: relative; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: clamp(40px, 6vw, 76px); }
.caminho__parada { position: relative; display: flex; width: 100%; }
.caminho__parada--esq { justify-content: flex-start; }
.caminho__parada--dir { justify-content: flex-end; }

.caminho__marco {
  position: absolute; left: 50%; top: 50%; width: 15px; height: 15px; border-radius: 50%;
  background: var(--brand); transform: translate(-50%, -50%);
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--rule);
  z-index: 2;
}

.caminho__nota {
  position: relative; z-index: 1;
  width: min(44%, 420px); max-width: calc(50% - 34px);
  display: flex; flex-direction: column; gap: var(--s-2);
}
.caminho__parada--esq .caminho__nota { text-align: left; align-items: flex-start; }
.caminho__parada--dir .caminho__nota { text-align: right; align-items: flex-end; }

/* as paradas maiores (marcadas "grande" em caminho.json — hoje FAROL, Stanford, Porto Digital,
   CESAR, Sony CSL Paris, Sorbonne, D'Accord): nota mais larga, vinheta e tipografia maiores. */
.caminho__parada--grande .caminho__nota { width: min(56%, 480px); max-width: calc(50% - 22px); }

/* a vinheta: a gravura encomendada para a instituição daquela parada. `.arte img` já resolve
   o claro/escuro (grec.css); aqui só o enquadramento — moldura fina de duas linhas (a régua
   da casa), como uma prancha recortada e colada no caminho, nunca a sangrar. */
.caminho__vinheta { margin: 0; width: 100%; }
.caminho__vinheta img {
  display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: contain;
  /* sem moldura (Giordano, 28/09): a gravura solta sobre a página; o papel some pelo multiply de .arte img */
}

/* prancha: fundo sólido atrás do texto (a cor da página) — a mancha de tinta do traço passa
   perto de algumas notas (a curva alterna de lado a cada parada); o texto real nunca pode
   ficar ilegível por cima dela, então carrega o próprio fundo, como uma legenda impressa
   colada sobre a gravura. A margem negativa cancela o padding: a posição visual não muda. */
.caminho__texto {
  min-width: 0; position: relative; z-index: 2;
  background: var(--bg); padding: 5px 9px; margin: -5px -9px;
}

.caminho__ano {
  display: block; font-family: var(--font-mono); font-weight: 700;
  font-size: clamp(1.05rem, .88rem + .85vw, 1.5rem); color: var(--brand); letter-spacing: var(--tr-wide);
  font-variant-numeric: tabular-nums;
}
.caminho__nome {
  margin: .18em 0 .14em; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.32rem, 1.02rem + 1.5vw, 2rem); line-height: 1.1; color: var(--fg);
}
.caminho__nome a { color: inherit; text-decoration-color: var(--rule); text-underline-offset: .12em; }
.caminho__papel { margin: 0; font-size: var(--t-base); color: var(--fg-muted); line-height: 1.42; }

/* os feitos (rodada 7d): 2–5 frases por parada — é o que faltava na crítica "a timeline não
   pode ter só essa imagenzinha... grandes conquistas, feitos". Lista com marcador fino (a
   régua da casa, não bullet nativo), mesmo alinhamento do texto acima. */
.caminho__feitos {
  margin: var(--s-2) 0 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: .45em;
}
.caminho__feitos li {
  position: relative; padding-inline-start: 1.05em; font-size: .92rem;
  color: var(--fg-muted); line-height: 1.48;
}
.caminho__feitos li::before {
  content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 1.5px;
  background: var(--brand);
}
.caminho__parada--dir .caminho__feitos li { padding-inline-start: 0; padding-inline-end: 1.05em; }
.caminho__parada--dir .caminho__feitos li::before { left: auto; right: 0; }

.caminho__parada--grande .caminho__ano { font-size: clamp(1.2rem, .96rem + 1.1vw, 1.75rem); }
.caminho__parada--grande .caminho__nome { font-size: clamp(1.65rem, 1.15rem + 2.3vw, 2.75rem); }
.caminho__parada--grande .caminho__papel { font-size: clamp(1rem, .92rem + .35vw, 1.125rem); }
.caminho__parada--grande .caminho__feitos li { font-size: 1rem; }

/* -------------------------------------------------------- os divisores de fase (rodada 7d)
   Substituem a faixa lateral sincronizada da 7c (ver nota no alto do arquivo): um separador
   simples no próprio fluxo, sempre no lugar certo porque nasce entre dois `<li>` de fase
   diferente — nunca precisa de sincronismo com uma coluna à parte. */
.caminho__fase-divisor {
  display: flex; align-items: center; gap: var(--s-4);
  margin: clamp(4px, 1vw, 12px) 0 clamp(-16px, -2vw, -4px);
}
.caminho__fase-divisor::before, .caminho__fase-divisor::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--rule);
}
.caminho__fase-rotulo {
  margin: 0; flex: 0 0 auto; font-family: var(--font-mono); font-weight: 500;
  font-size: .68rem; letter-spacing: var(--tr-wide); text-transform: uppercase;
  color: var(--fg-muted); white-space: nowrap;
}
.caminho__fase-rotulo i { font-style: normal; opacity: .68; margin-inline-start: .5em; }

/* --------------------------------------------------------------------------- celular
   Uma coluna só (nunca alternando lados): com feitos de até cinco frases, duas colunas de
   ~58% em 390px obrigariam a quebra em muitas linhas — mais risco de rolagem lateral do que
   ganho de composição. O traço decorativo (SVG, aria-hidden) some; uma borda fina no lugar
   marca a espinha, mais barata e sem depender de a curva caber na largura menor. */
@media (max-width: 760px) {
  .caminho__pista { gap: 8px; }
  .caminho__miolo { padding-inline-start: 22px; }
  .caminho__traco { display: none; }
  .caminho__lista { gap: clamp(32px, 8vw, 44px); border-left: var(--border); }
  .caminho__parada, .caminho__parada--esq, .caminho__parada--dir { justify-content: flex-start; }
  .caminho__marco { left: -22px; top: 8px; transform: translate(-50%, -50%); }
  .caminho__nota, .caminho__parada--grande .caminho__nota { width: 100%; max-width: none; }
  .caminho__parada--esq .caminho__nota, .caminho__parada--dir .caminho__nota { text-align: left; align-items: flex-start; }
  .caminho__parada--dir .caminho__feitos li { padding-inline-start: 1.05em; padding-inline-end: 0; }
  .caminho__parada--dir .caminho__feitos li::before { left: 0; right: auto; }
  .caminho__nome { font-size: 1.15rem; }
  .caminho__parada--grande .caminho__nome { font-size: 1.4rem; }
  .caminho__fase-divisor { margin-inline-start: 22px; }
}

/* --------------------------------------------------------------------------- modo escuro
   Todos os tons vêm de tokens semânticos (--fg, --brand, --rule, --bg, --fg-muted) que já
   trocam sozinhos no escuro (tokens.css) — nada a redefinir aqui. A vinheta (.arte img)
   inverte no escuro pela regra global de grec.css, igual às demais gravuras do site. */

/* ==================================================== PISO: composição parada e completa
   .caminho__nota (vinheta + ano + nome + papel + feitos) não é redefinida aqui porque nunca
   sai deste estado — não há regra em nenhum outro lugar deste arquivo que mude sua opacidade
   ou seu transform. */
.caminho__linha { stroke-dasharray: 1000; stroke-dashoffset: 0; }

@media print {
  .caminho__linha { stroke-dashoffset: 0 !important; }
}

/* ============================================================== NÍVEL 1: rolagem nativa
   Chromium com scroll-driven animations: só o NIB do traço (decorativo, aria-hidden) se
   desenha com a posição de rolagem — puro CSS, funciona com ou sem JavaScript, exatamente
   como o .epoca__fio de grec.css (o mesmo precedente: o acento decorativo pode nascer "por
   desenhar" porque quem carrega a informação — a vinheta e a nota de texto — NUNCA depende
   disso). A mancha e o halo (a textura da gravura) ficam sempre inteiros: só o traço fino por
   cima é que "escreve" com a rolagem. `pathLength="1000"` normaliza o comprimento do traço
   independente da forma real — continua valendo com a curva de forma fixa da rodada 7d.

   Importante (correção pós-captura, 28/09): a nota de texto NÃO tem animação de entrada aqui.
   Uma primeira versão a fazia nascer em opacity:0 até a rolagem alcançá-la — em Chromium isso
   vale mesmo SEM JavaScript (animation-timeline: view() é CSS puro), o que violava o piso
   ("sem JavaScript... aparecem completos", GREC-0035) e a regra de que texto real nunca nasce
   apagado. Cada marco (o círculo vermelho, também decorativo) ainda pulsa uma vez para dar o
   "compasso" da revelação, sem esconder nada. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .caminho__pista { view-timeline: --caminho-fio block; }
    .caminho__linha {
      stroke-dashoffset: 1000;
      animation: caminho-desenha linear both;
      animation-timeline: --caminho-fio;
      animation-range: cover 6% cover 92%;
    }
    .caminho__marco {
      animation: caminho-marco-pulsa linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 30%;
    }
  }
}
@keyframes caminho-desenha { to { stroke-dashoffset: 0; } }
@keyframes caminho-marco-pulsa {
  from { transform: translate(-50%, -50%) scale(.4); box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--rule); }
  to   { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--rule), 0 0 14px 2px color-mix(in oklab, var(--brand), transparent 55%); }
}

/* ============================================= NÍVEL 2: JavaScript sem animation-timeline
   Safari/Firefox de hoje (09/2026) têm IntersectionObserver mas não animation-timeline: view()
   — caminho.js observa e acrescenta `.tem-ver` uma vez ao traço (só ele; a nota de texto
   continua sempre visível, em toda parte). Sem isso (JavaScript desligado), o piso já mostrou
   tudo — nada de conteúdo real sem rede de segurança. */
@media (prefers-reduced-motion: no-preference) {
  @supports not (animation-timeline: view()) {
    .caminho__linha { stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: stroke-dashoffset 1.1s var(--ease); }
    .caminho__linha.tem-ver { stroke-dashoffset: 0; }
  }
}