/* ============================================================
   3. LINHA DO TEMPO — formato ACUMULO

   Os dez marcos nao andam em fila. Aparecem em posicoes fixas
   espalhadas pela tela e FICAM. No fim os dez estao visiveis ao
   mesmo tempo: o argumento da secao e a quantidade acumulada, nao
   cada marco isolado.

   Dois tempos por marco:
     1. o texto entra (ano em ambar, titulo, subtitulo)
     2. a imagem desce por cima com corte duro e cobre o texto
     3. o ano reaparece abaixo da imagem e fica

   O texto nao some por fade: ele SOBE e se recolhe enquanto a
   imagem desce, como se fosse guardado embaixo dela.

   Duas regras que ja quebraram isto antes:
     - NADA de aspect-ratio. A altura da imagem vem em px por --qh.
     - A altura da zona fica AQUI, nao em JS (?lt_zona so troca o
       numero da variavel).
   ============================================================ */

.linha-zona {
  position: relative;
  /* --lt-zona e ajustavel por ?lt_zona=N. 1050 e nao 900:
     a fase do titulo entrou na frente dos marcos. */
  height: calc(var(--lt-zona, 1050) * 1vh);
  background: var(--tinta);
}

.linha-pin {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}

/* O palco carrega a composicao inteira. Os marcos sao posicionados
   em % DELE, nao da tela: assim a composicao e uma peca so.
   Ver .linha-palco no bloco de encaixe, mais abaixo.

   z-index 2 NAO e detalhe. O palco tem transform, e transform CRIA
   contexto de empilhamento: os z-index 3/4/5 dos marcos valem so
   dentro dele, e nunca competem com o titulo. Sem um z-index aqui o
   palco fica em auto (0) e o titulo, em 1, pinta por cima de todas
   as fotos. */
.linha-palco {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* ---------------- titulo de abertura ----------------
   Mora DENTRO do pino, acima dos marcos, e sai crescendo.
   Em 10vw com o eixo Expanded as duas linhas SANGRAM pelas laterais
   de proposito: os pedacos fora da tela sao a intencao. Por isso
   nao ha overflow nem reducao de fonte aqui. */
/* z-index 1: o titulo vira FUNDO. Antes estava em 5, acima dos
   marcos; agora o que sobra dele nas laterais fica ATRAS deles.
   O container nao recebe mais transform — cada uma das tres partes
   se move sozinha, por isso o will-change vai nos filhos. */
.lt-titulo {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  pointer-events: none;
}
.lt-titulo > * { will-change: transform, opacity; }
.lt-olho {
  font-family: var(--fonte-mono);
  font-size: 13px;
  letter-spacing: .22em;
  color: var(--neutro);
  margin-bottom: 18px;
}
.lt-l1,
.lt-l2 {
  font-family: var(--fonte-texto);
  font-weight: 800;
  font-stretch: 125%;        /* eixo wdth do Archivo: 62..125 */
  letter-spacing: -.02em;
  line-height: .92;
  font-size: var(--lt-tf, 10vw);
  margin: 0;
}
.lt-l1 { color: var(--osso); }
.lt-l2 { color: var(--ambar); }

/* ---------------- o marco ---------------- */
/* Camadas declaradas de proposito. Sem numero explicito a ordem do
   DOM decide, e o titulo de fundo acaba por cima de algum marco. */
.marco {
  position: absolute;
  z-index: 3;
  width: var(--w);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

/* Fora do fluxo, ancorado no topo do marco: e por cima DELE que a
   imagem desce. Mais largo que a imagem nos cards estreitos, senao
   o subtitulo quebra em linhas demais. */
.marco-txt {
  position: absolute;
  left: 0;
  top: 0;
  width: max(var(--w), 268px);
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  will-change: opacity, transform;
}

.marco-ano {
  font-family: var(--fonte-mono);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--ambar);
}
.marco-tit {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--osso);
}
.marco-sub {
  font-size: 13px;
  line-height: 1.45;
  color: var(--neutro);
}

/* clip-path e o corte duro: a imagem desce inteira, sem fade. */
.marco-q {
  width: 100%;
  height: var(--qh);
  overflow: hidden;
  border-radius: 2px;
  z-index: 5;          /* a imagem e opaca: e ela que tapa o titulo */
  clip-path: inset(0 0 100% 0);
  will-change: clip-path;
}
.marco-q img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* logos nao sao fotos: nao podem ser recortadas */
.marco-q--contain img {
  object-fit: contain;
  background: var(--superficie);
}

.marco-pe {
  font-family: var(--fonte-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--neutro);
  opacity: 0;
  z-index: 5;
}

/* ---------------- encaixe do palco ----------------
   As posicoes sao % e os tamanhos px. Numa tela mais baixa que a de
   projeto os marcos de baixo saiam pela borda (o 10 e o pior: topo
   82% mais meia altura ja estoura abaixo de 900px de altura).
   O palco resolve isso mantendo a composicao intacta: ele tem a
   proporcao de projeto e encolhe junto, em vez de cada marco ir
   parar num lugar diferente.

   --u vale 1px na tela de projeto (1440x900), menos em telas
   menores. Tudo dentro do palco e medido em --u.

   O palco MEDE 900u, mas o encaixe reserva 930u: a composicao de
   verdade ocupa 913u (medido), porque o marco 2 sobe 13u acima do
   topo e o 10 encosta na base. Como o palco e centrado, os 30u de
   sobra viram 15u em cima e 15u embaixo — a folga que faltava, sem
   mover marco nenhum de lugar. */
@media (min-width: 901px) {
  .linha-palco {
    --u: min(calc(100vw / 1440), calc(100svh / 930));
    inset: auto;
    left: 50%;
    top: 50%;
    width: calc(1440 * var(--u));
    height: calc(900 * var(--u));
    transform: translate(-50%, -50%);
  }
  .marco     { width: calc(var(--wn) * var(--u)); gap: calc(7 * var(--u)); }
  .marco-txt { width: max(calc(var(--wn) * var(--u)), calc(268 * var(--u)));
               gap: calc(6 * var(--u)); }
  .marco-q   { height: calc(var(--qhn) * var(--u)); }
  .marco-ano { font-size: calc(12 * var(--u)); }
  .marco-tit { font-size: calc(17 * var(--u)); }
  .marco-sub { font-size: calc(13 * var(--u)); }
  .marco-pe  { font-size: calc(11 * var(--u)); }
}

/* ---------------- mobile ----------------
   Dez cards espalhados nao cabem numa tela estreita. Coluna unica,
   um marco por vez. Os dois tempos continuam; a composicao final
   densa e de desktop. */
@media (max-width: 900px) {
  /* FORMATO GRADE. Preserva o que o desktop faz — voce ve os dez de
     uma vez — sem precisar da composicao espalhada, que nao cabe.
     Sem pino: altura natural. */
  .linha-zona { height: auto; }
  .linha-pin {
    position: static;
    height: auto;
    overflow: visible;
    display: block;
    padding: clamp(2rem, 7vh, 4rem) var(--margem) clamp(3rem, 10vh, 6rem);
  }

  /* titulo fixo no topo, sem saida lateral */
  .lt-titulo {
    position: relative;
    inset: auto;
    display: block;
    white-space: normal;
    text-align: left;
    margin-bottom: clamp(1.5rem, 5vh, 2.5rem);
  }
  .lt-titulo > * { transform: none !important; opacity: 1 !important; }
  .lt-l1, .lt-l2 { display: block; font-size: 34px; line-height: 1.05; }
  .lt-olho { display: block; font-size: 11px; margin-bottom: 10px; }

  .linha-palco {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: none;
    height: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
    transform: none;
  }

  /* cada marco vira miniatura */
  .marco {
    position: relative;
    left: auto !important;
    top: auto !important;
    transform: none;
    width: auto;
    aspect-ratio: 3 / 4;
    gap: 0;
    cursor: pointer;
    overflow: hidden;
    border-radius: 3px;
    outline: 1.5px solid transparent;
    outline-offset: -1.5px;
    transition: outline-color .2s ease;
  }
  .marco-txt { display: none; }          /* o texto vive no painel */
  .marco-q {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: .62;
    clip-path: none !important;
    transition: opacity .2s ease;
  }
  .marco-q img { width: 100%; height: 100%; object-fit: cover; }
  .marco.ativa { outline-color: var(--ambar); }
  .marco.ativa .marco-q { opacity: 1; }

  /* o ano sobre a foto, canto inferior esquerdo */
  .marco-pe {
    position: absolute;
    left: 6px;
    bottom: 5px;
    z-index: 2;
    font-size: 10px;
    opacity: 1 !important;
    color: var(--osso);
    text-shadow: 0 1px 4px rgb(12 10 9 / .95), 0 0 10px rgb(12 10 9 / .8);
  }

  /* o painel, criado por linha-tempo.js so no estreito */
  .lt-painel {
    margin-top: 5px;
    overflow: hidden;
    border-radius: 3px;
    background: var(--superficie);
  }
  .lt-painel[hidden] { display: none; }
  .lt-painel img { width: 100%; height: auto; display: block; }
  .lt-painel .lt-p-tx { padding: 14px 14px 18px; }
  .lt-painel .lt-p-ano {
    font-family: var(--fonte-mono);
    font-size: 12px;
    letter-spacing: .14em;
    color: var(--ambar);
  }
  .lt-painel .lt-p-tit {
    margin: 6px 0 8px;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--osso);
  }
  .lt-painel .lt-p-sub {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--neutro);
  }
}

/* ---------------- sem movimento ----------------
   Tudo visivel, sem animacao de entrada. No desktop a composicao
   final; no mobile a pilha rolavel, porque dez marcos sobrepostos
   no centro seriam ilegiveis. */
@media (prefers-reduced-motion: reduce) {
  .linha-zona { height: auto; }
  .linha-pin  { position: static; height: auto; overflow: visible;
                padding-block: clamp(3rem, 10vh, 7rem); }
  .marco-txt  { opacity: 1 !important; transform: none !important; }
  .marco-q    { clip-path: none !important; }
  .marco-pe   { opacity: 1 !important; }

  .linha-palco { position: relative; inset: auto; width: 100%;
                 height: auto; transform: none;
                 display: flex; flex-wrap: wrap; justify-content: center;
                 gap: clamp(1.5rem, 4vw, 3rem);
                 padding-inline: var(--margem); }
  .marco { position: relative; left: auto !important; top: auto !important;
           transform: none; }
  .marco-txt { position: relative; }
  .lt-titulo { position: relative; inset: auto;
               transform: none !important; opacity: 1 !important;
               white-space: normal; text-align: center;
               padding-inline: var(--margem);
               margin-bottom: clamp(2rem, 6vh, 4rem); }
  .lt-l1, .lt-l2 { font-size: clamp(2.5rem, 9vw, 7rem); }
  /* nada de saida lateral: as tres partes ficam no centro, inteiras */
  .lt-titulo > * { transform: none !important; opacity: 1 !important; }
}