/* tr · Trajetória — o fio de luz é a linha do tempo: corre de 1995 até hoje e sobe até ela */
.tr {
  --tr-h: 1; --tr-v: 1;
  --tr-fora: calc(max(var(--margem), (100vw - var(--larg)) / 2) - var(--margem));
  --tr-brilho: 0 0 0 1px rgb(201 163 111 / .35), 0 0 10px var(--luz), 0 0 30px rgb(255 205 130 / .95), 0 0 70px rgb(255 190 110 / .5);
  --tr-apagado: color-mix(in oklab, var(--tinta-2) 72%, var(--claro));
}
.js .tr { --tr-h: 0; --tr-v: 0; }

.tr { --tr-colunas: repeat(4, minmax(0, 1fr)) minmax(0, 1.4fr); --tr-vao: clamp(1.25rem, 2.6vw, 2.5rem); }
.tr-cima { position: relative; display: grid; grid-template-columns: var(--tr-colunas); column-gap: var(--tr-vao); align-items: stretch; }
.tr-cabeca { grid-column: 1 / span 3; display: flex; flex-direction: column; padding-bottom: clamp(2.5rem, 4.5vw, 4rem); }
.tr-abre { margin-top: 1.7rem; max-width: 31rem; }
.tr-guia { margin: auto 0 0; padding-top: 2.5rem; display: flex; align-items: center; gap: .8rem; }
.tr-guia::after { content: ""; flex: none; width: 2.25rem; height: 1px; background: currentColor; }
/* ela, hoje: o arco pousa em cima da linha do tempo */
.tr-retrato { grid-column: 4 / span 2; position: relative; margin: 0 clamp(1.5rem, 2.6vw, 2.5rem) 0 0; }
.tr-clarao { /* a luz que chega nela quando o fio termina */
  position: absolute; z-index: -1; left: 50%; top: 46%; width: 190%; aspect-ratio: 1.1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side in oklab, oklch(.992 .04 90) 0%, oklch(.97 .055 86 / .75) 30%, oklch(.93 .06 80 / .25) 62%, oklch(.9 .05 80 / 0) 100%);
  transition: opacity 1.8s ease, scale 2.2s var(--curva);
}
.js .tr:not(.tr-aceso) .tr-clarao { opacity: 0; scale: .6; }
.tr-arco { position: relative; aspect-ratio: 1 / 1.14; overflow: hidden; border-radius: 999px 999px 0 0; box-shadow: 0 -30px 70px -40px rgb(84 56 20 / .45); }
.tr-arco img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; transition: filter 1.6s ease; }
.js .tr:not(.tr-aceso) .tr-arco img { filter: brightness(.74) saturate(.55); }
.tr-ano .tr-registro { margin-top: .9rem; font-size: var(--t-rotulo); letter-spacing: .06em; font-weight: 600; color: var(--tinta); }

/* a perna que sobe de "hoje" até o L do alto da seção */
.tr-sobe { position: absolute; right: calc(-1 * var(--tr-fora)); bottom: 0; width: 3px; top: calc(clamp(1.5rem, 3.4vw, 3rem) + clamp(4.5rem, 9vw, 8rem) - var(--sec)); background: linear-gradient(var(--linha), var(--linha)) center / 1px 100% no-repeat; }
.tr-sobe::after { content: ""; position: absolute; inset: 0; border-radius: 2px; background: var(--fio); box-shadow: var(--tr-brilho); transform: scaleY(var(--tr-v)); transform-origin: bottom; transition: transform .5s linear; }

/* a linha do tempo */
.tr-linha { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: var(--tr-colunas); column-gap: var(--tr-vao); }
.tr-linha::before, .tr-linha::after { content: ""; position: absolute; left: 0; right: calc(-1 * var(--tr-fora)); top: 0; }
.tr-linha::before { height: 1px; background: var(--linha); }
.tr-linha::after { top: -1px; height: 3px; border-radius: 2px; background: var(--fio); box-shadow: var(--tr-brilho); transform: scaleX(var(--tr-h)); transform-origin: left; transition: transform .5s linear; }
.tr-ano { position: relative; padding-top: 2rem; }
.tr-ponto { position: absolute; z-index: 1; left: 0; top: 0; width: 13px; height: 13px; translate: 0 -50%; border-radius: 50%; background: var(--claro); box-shadow: 0 0 0 1px var(--veio); transition: background-color .8s, box-shadow .8s; }
.tr-num { display: block; font-family: var(--f-titulo); font-weight: 400; font-size: clamp(2.8rem, 4.9vw, 4.6rem); line-height: 1; letter-spacing: -.01em; color: var(--tr-apagado); transition: color 1s; }
.tr-ano .wf-rotulo { display: block; margin-top: .9rem; color: var(--ouro); }
.tr-ano p { margin: .5rem 0 0; font-size: .98rem; line-height: 1.55; color: var(--tinta-2); text-wrap: pretty; }
.tr-ano .tr-nota { margin-top: 1.5rem; padding-top: .9rem; border-top: 1px solid var(--veio); width: calc(200% + var(--tr-vao) - 1.5rem); max-width: none; }
.tr-nota-anos { display: block; margin-bottom: .3rem; font-family: var(--f-titulo); font-size: 1.35rem; line-height: 1.1; color: var(--tinta); }
.tr-ano.tr-on .tr-ponto { background: var(--fio); box-shadow: 0 0 0 1px var(--veio), 0 0 10px var(--luz), 0 0 26px rgb(255 195 110 / .95); }
.tr-ano.tr-on .tr-num { color: var(--tinta); }

/* o tempo de quem é paciente: uma lista, cada voz com a sua marca de tempo */
.tr-vozes { margin-top: clamp(4.5rem, 9vw, 8.5rem); display: grid; grid-template-columns: var(--tr-colunas); column-gap: var(--tr-vao); align-items: start; }
.tr-vozes-cabeca { grid-column: 1 / span 2; position: sticky; top: 2.5rem; }
.tr-vozes-cabeca .wf-texto { margin-top: 1rem; }
.tr-vozes-cabeca .wf-elo { margin-top: .5rem; }
.tr-vozes-lista { grid-column: 3 / -1; list-style: none; margin: 0; padding: 0; }
.tr-voz { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); column-gap: var(--tr-vao); align-items: baseline; padding: clamp(1.4rem, 2.4vw, 2rem) 0; border-top: 1px solid var(--linha); }
.tr-voz:last-child { border-bottom: 1px solid var(--linha); }
.tr-voz .wf-cita blockquote { font-size: clamp(1.25rem, 1.65vw, 1.5rem); line-height: 1.28; }
.tr-voz--grande { padding-top: 0; border-top: 0; padding-bottom: clamp(2rem, 3.4vw, 3rem); }
.tr-voz--grande .wf-cita blockquote { font-size: clamp(1.7rem, 2.9vw, 2.6rem); line-height: 1.12; }
.tr-marca { margin: 0; font-size: var(--t-rotulo); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--ouro); }
.tr-marca small { display: block; margin-top: .35rem; font-size: var(--t-rotulo); letter-spacing: .02em; text-transform: none; font-weight: 400; color: var(--tinta-2); }
.tr-voz--grande .tr-marca { align-self: start; padding-top: .7rem; }

@media (max-width: 1099.98px) {
  .tr-dentro { display: flex; flex-direction: column; }
  .tr-cima { display: contents; }
  .tr-sobe { display: none; }
  .tr-cabeca { order: 1; padding-bottom: 0; }
  .tr-abre { margin-top: 1.5rem; padding-top: 0; }
  .tr-linha { order: 2; margin-top: 2.75rem; grid-template-columns: minmax(0, 1fr); row-gap: 2.4rem; padding-left: 2.1rem; }
  .tr-linha::before, .tr-linha::after { left: 6px; right: auto; top: 1.1rem; bottom: 0; }
  .tr-linha::before { width: 1px; height: auto; }
  .tr-linha::after { left: 5px; top: 1.1rem; width: 3px; height: auto; transform: scaleY(var(--tr-h)); transform-origin: top; }
  .tr-ano { padding-top: 0; }
  .tr-ponto { left: -2.1rem; top: 1.1rem; translate: 0 -50%; }
  .tr-num { font-size: 3.1rem; }
  .tr-ano p { max-width: 32rem; }
  .tr-ano .tr-nota { width: auto; }
  .tr-guia { display: none; }
  /* no celular o fio desce de "hoje", passa ao lado dela e vira o pé do L */
  .tr-retrato { order: 3; margin: 0; padding: 2.75rem 0 0 2.1rem; width: min(100%, 28rem); }
  .tr-retrato::before, .tr-retrato::after { content: ""; position: absolute; border-radius: 2px; background: var(--fio); box-shadow: var(--tr-brilho); }
  .tr-retrato::before { left: 5px; top: 0; bottom: 0; width: 3px; transform-origin: top; transition: transform .9s var(--curva); }
  .tr-retrato::after { left: 5px; right: 0; bottom: -1px; height: 3px; transform-origin: left; transition: transform 1s var(--curva) .8s; }
  .js .tr:not(.tr-aceso) .tr-retrato::before { transform: scaleY(0); }
  .js .tr:not(.tr-aceso) .tr-retrato::after { transform: scaleX(0); }
  .tr-arco img { transition-delay: 1s; }
  .tr-clarao { width: 150%; transition-delay: 1s; }
  .tr-vozes { order: 4; display: block; }
  .tr-vozes-cabeca { position: static; margin-bottom: 2.25rem; }
}
@media (max-width: 699.98px) {
  .tr-voz { grid-template-columns: minmax(0, 1fr); row-gap: .7rem; }
  .tr-voz--grande .tr-marca { padding-top: 0; }
}
@media (min-width: 700px) and (max-width: 1099.98px) {
  /* tablet: a linha desce à esquerda e ela fica ao lado, pousada no fim da linha */
  .tr-dentro { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: clamp(2rem, 5vw, 3.5rem); }
  .tr-cabeca, .tr-vozes { grid-column: 1 / -1; }
  .tr-linha { grid-column: 1; }
  .tr-retrato { grid-column: 2; align-self: end; width: auto; padding: 0; }
  .tr-retrato::before { display: none; }
  .tr-retrato::after { left: 0; }
  .tr-vozes { margin-top: clamp(4rem, 9vw, 6rem); }
}