/* Trajetória — prefixo tr-. Clara. O trilho da persiana vira o eixo com os anos pendurados. */
.tr-miolo {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(2.5rem, 2rem + 4vw, 5.5rem);
  align-items: start;
}
.tr-parede { position: sticky; top: 1.5rem; }
.tr-parede .wf-titulo { margin-top: 1.1rem; }
.tr-parede .wf-texto { margin-top: 1.4rem; }

/* o retrato na janela e a frase no vidro, apoiada no peitoril */
.tr-retrato {
  position: relative; margin-top: 2.2rem;
  display: grid; grid-template-columns: 12.5rem minmax(0, 1fr); align-items: end;
}
.tr-janela { aspect-ratio: 425 / 672; }
.tr-vidro {
  position: relative; z-index: 1;
  margin-left: -2.4rem; margin-bottom: 0;
  padding: 1.15rem 1.25rem 1.05rem;
  border-radius: var(--raio-janela);
  background: linear-gradient(to bottom in oklab, color-mix(in oklab, var(--luz-a) 74%, transparent), color-mix(in oklab, var(--luz-b) 70%, transparent));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), 0 24px 50px -30px rgba(28, 20, 16, .45);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: background 2.4s linear;
}
.tr-vidro blockquote { font-size: 1.02rem; line-height: 1.34; }

/* o trilho */
.tr-trilho-area { position: relative; padding-top: .4rem; }
.tr-trilho {
  --tr-ano: 6.4rem;        /* coluna dos anos pendurados */
  --tr-gancho: 1.4rem;     /* o gancho que prende o ano ao trilho */
  --tr-folga: 1.8rem;      /* do trilho ao texto */
  --tr-progresso: 1;       /* o quanto do trilho já foi desenhado (tr.js) */
  position: relative;
  padding-left: calc(var(--tr-ano) + var(--tr-gancho) + var(--tr-folga));
}
.tr-trilho::before, .tr-trilho::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 1px;
  left: calc(var(--tr-ano) + var(--tr-gancho));
}
.tr-trilho::before { background: color-mix(in oklab, var(--caramelo) 28%, transparent); }
.tr-trilho::after {
  background: var(--caramelo);
  transform: scaleY(var(--tr-progresso)); transform-origin: top;
  transition: transform .4s linear;
}

/* capítulo: etiqueta pendurada no trilho */
.tr-capitulo { position: relative; padding: .2rem 0 1.2rem; }
.tr-item + .tr-capitulo { padding-top: 2.6rem; }
.tr-capitulo span {
  position: relative; display: inline-block;
  font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-suave);
}
.tr-capitulo span::before { /* o gancho da etiqueta */
  content: ""; position: absolute; right: 100%; top: 50%; width: var(--tr-folga); height: 1px;
  background: var(--caramelo); opacity: .8;
}

/* parada: o ano pendurado à esquerda do trilho, o fato à direita */
.tr-item { position: relative; padding: .95rem 0 1.1rem; }
.tr-item + .tr-item { border-top: 1px solid color-mix(in oklab, var(--caramelo) 16%, transparent); }
.tr-ano {
  position: absolute; top: .95rem;
  left: calc(-1 * (var(--tr-ano) + var(--tr-gancho) + var(--tr-folga)));
  width: var(--tr-ano); text-align: right; white-space: nowrap;
  font-family: var(--fonte-titulo); font-weight: 500; font-size: 1.7rem; line-height: 1; letter-spacing: -.01em;
  color: var(--madeira); transition: color .8s var(--suave);
}
.tr-ano small { font-size: .62em; font-weight: 400; letter-spacing: 0; opacity: .85; }
.tr-ano::after { /* o gancho */
  content: ""; position: absolute; left: 100%; top: .55em; height: 1px; width: var(--tr-gancho);
  background: var(--caramelo); transform: scaleX(.3); transform-origin: right; opacity: .5;
  transition: transform .8s var(--suave), opacity .8s var(--suave);
}
.tr-item--aceso .tr-ano { color: var(--tinta-escura); }
.tr-item--aceso .tr-ano::after { transform: none; opacity: 1; }
.tr-fato { font-family: var(--fonte-texto); font-weight: 600; font-size: 1.04rem; line-height: 1.4; letter-spacing: -.005em; max-width: 46ch; }
.tr-nota { margin-top: .3rem; font-size: .9rem; line-height: 1.55; color: var(--tinta-suave); max-width: 52ch; }

/* marcos: formação, Maringá, a clínica */
.tr-item--marco { padding: 1.2rem 0 1.4rem; }
.tr-item--marco .tr-ano { font-size: 2.35rem; top: 1.05rem; }
.tr-item--marco .tr-ano::after { top: .5em; }
.tr-item--marco .tr-fato { font-family: var(--fonte-titulo); font-weight: 400; font-size: 1.45rem; line-height: 1.15; letter-spacing: -.01em; }
.tr-item--marco .tr-nota { margin-top: .5rem; font-size: .94rem; }

/* a última parada: hoje, com o botão */
.tr-item--hoje { padding: 1.4rem 0 .2rem; }
.tr-item--hoje .tr-ano { font-style: italic; font-weight: 400; font-size: 1.9rem; top: 1.45rem; }
.tr-item--hoje .tr-ano::after { top: .5em; }
.tr-item--hoje .tr-fato { font-family: var(--fonte-titulo); font-weight: 400; font-size: 1.45rem; line-height: 1.15; letter-spacing: -.01em; max-width: 24ch; }
.tr-item--hoje .tr-nota { margin-top: .5rem; font-size: .94rem; }
.tr-botao { margin-top: 1.3rem; }

.tr-rodape {
  margin-top: 2.2rem; padding-left: calc(6.4rem + 1.4rem + 1.8rem);
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-suave);
}

/* escalonamento das entradas (a base só cobre 5 irmãos) */
.js .tr-trilho > .wf-entra { transition-delay: 0s; }
.js .tr-trilho > .wf-entra:nth-child(2) { transition-delay: .1s; }
.js .tr-trilho > .wf-entra:nth-child(3) { transition-delay: .2s; }
.js .tr-trilho > .wf-entra:nth-child(4) { transition-delay: .3s; }
.js .tr-trilho > .wf-entra:nth-child(5) { transition-delay: .4s; }
.js .tr-trilho > .wf-entra:nth-child(6) { transition-delay: .5s; }
.js .tr-trilho > .wf-entra:nth-child(7) { transition-delay: .6s; }

@media (max-width: 1000px) {
  .tr-miolo { grid-template-columns: 1fr; row-gap: 3rem; }
  .tr-parede { position: static; }
  .tr-retrato { grid-template-columns: 14rem minmax(0, 24rem); }
}
@media (max-width: 600px) {
  .tr-retrato { grid-template-columns: 1fr; margin-top: 2rem; }
  .tr-janela { width: min(12.5rem, 60%); }
  .tr-vidro { margin-left: 2.25rem; margin-top: -1.4rem; }
  .tr-trilho { --tr-ano: 4rem; --tr-gancho: .8rem; --tr-folga: .9rem; }
  .tr-item { padding: .85rem 0 .95rem; }
  .tr-ano { font-size: 1.1rem; top: 1.05rem; color: var(--tinta-suave); } /* abaixo de 24px o caramelo não dá AA */
  .tr-item--aceso .tr-ano { color: var(--tinta-escura); }
  .tr-ano small { font-size: .7em; }
  .tr-item--marco .tr-ano { font-size: 1.45rem; top: 1.3rem; }
  .tr-item--marco .tr-fato { font-size: 1.3rem; }
  .tr-item--hoje .tr-ano { font-size: 1.3rem; top: 1.5rem; }
  .tr-item--hoje .tr-fato { font-size: 1.3rem; }
  .tr-fato { font-size: 1rem; }
  .tr-rodape { padding-left: calc(4rem + .8rem + .9rem); }
}