/* tr · Trajetória — os vãos da treliça viram molduras que se encaixam; dentro deles, o jardim do retrato */

.tr-secao {
  --tr-barra: clamp(9px, .85vw, 12px);
  --tr-u: clamp(28px, 2.75vw, 38px);
  --tr-col: calc(100% / 24);
  --tr-sombra: 2px 3px 0 rgb(51 80 63 / .14);
  background: linear-gradient(180deg in oklab, var(--creme-luz) 0%, var(--creme) 40%, var(--creme-quente) 100%);
}

/* claridade suave por trás da parede */
.tr-luz { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.tr-luz i { position: absolute; border-radius: 50%; filter: blur(50px); }
.tr-luz i:nth-child(1) { width: 56vmax; height: 56vmax; right: -14vmax; top: 4%; background: radial-gradient(closest-side in oklab, rgb(198 217 198 / .8) 0%, rgb(198 217 198 / .4) 45%, transparent 100%); animation: tr-deriva 29s ease-in-out infinite alternate; }
.tr-luz i:nth-child(2) { width: 48vmax; height: 48vmax; left: -10vmax; bottom: -12vmax; background: radial-gradient(closest-side in oklab, rgb(182 208 201 / .7) 0%, rgb(182 208 201 / .35) 50%, transparent 100%); animation: tr-deriva 37s ease-in-out infinite alternate-reverse; }
@keyframes tr-deriva { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-5vmax, 4vmax, 0) scale(1.12); } }

/* cabeçalho */
.tr-topo { display: grid; gap: 1.1rem; }
.tr-h2 { font-size: clamp(2.5rem, 6.6vw, 6.25rem); line-height: 1; letter-spacing: -.02em; }

/* a parede: 24 colunas sem calha; as molduras se sobrepõem em uma coluna */
.tr-parede { position: relative; display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); grid-auto-rows: minmax(var(--tr-u), auto); margin-top: clamp(2.25rem, 4.5vw, 4rem); }
.tr-marcos { display: contents; list-style: none; margin: 0; padding: 0; }

.tr-vao {
  --tr-veu: rgb(244 241 229 / .82);
  --tr-veu2: rgb(244 241 229 / .5);
  --tr-pos: 30% 40%;
  position: relative; margin: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(1.5rem, 2.6vw, 2.4rem);
  border: var(--tr-barra) solid var(--trelica);
  background:
    linear-gradient(200deg in oklab, var(--tr-veu2) 0%, var(--tr-veu) 62%) padding-box,
    url("../img/tr-jardim.webp") var(--tr-pos) / 190% 190% padding-box,
    var(--trelica);
  box-shadow: var(--tr-sombra), inset 2px 3px 0 rgb(51 80 63 / .12), inset -1px -1px 0 rgb(247 243 232 / .5);
}
.tr-vao::before { /* retângulo de dentro */
  content: ""; position: absolute; inset: clamp(7px, .8vw, 11px); pointer-events: none;
  border: 1px solid color-mix(in oklab, var(--tinta) 22%, transparent);
}

/* barras que continuam além das molduras: o gesto da seção */
.tr-fio { position: absolute; background: var(--trelica); box-shadow: var(--tr-sombra); pointer-events: none; }
.tr-vao--a .tr-fio { right: 100%; top: calc(var(--tr-barra) * -1); width: 100vw; height: var(--tr-barra); transform-origin: 100% 50%; }
.tr-vao--f .tr-fio { bottom: 100%; right: calc(var(--tr-barra) * -1); height: 200vh; width: var(--tr-barra); transform-origin: 50% 100%; }
.tr-vao--c .tr-fio { top: 100%; right: calc(var(--tr-barra) * -1); height: 200vh; width: var(--tr-barra); transform-origin: 50% 0; }
.tr-vao--h .tr-fio { right: 100%; bottom: calc(var(--tr-barra) * -1); width: 100vw; height: var(--tr-barra); transform-origin: 100% 50%; }
.js .tr-vao[data-entra] .tr-fio { transition: transform 1.5s var(--suave) calc(var(--ordem, 0) * .09s + .35s); }
.js .tr-vao--a[data-entra]:not(.visto) .tr-fio, .js .tr-vao--h[data-entra]:not(.visto) .tr-fio { transform: scaleX(0); }
.js .tr-vao--f[data-entra]:not(.visto) .tr-fio, .js .tr-vao--c[data-entra]:not(.visto) .tr-fio { transform: scaleY(0); }

/* posições: 1975 → 1978 → 2003 descem em diagonal; Hoje fecha embaixo, largo */
.tr-vao--a { grid-column: 1 / 10; grid-row: 1 / 11; z-index: 2; padding: clamp(2.2rem, 3.6vw, 3.4rem); padding-right: calc(var(--tr-col) * 2.6); --tr-pos: 12% 30%; --tr-veu: rgb(244 241 229 / .74); --tr-veu2: rgb(244 241 229 / .3); }
.tr-apoio { grid-column: 11 / 17; grid-row: 1 / 8; align-self: start; font-size: clamp(1.0625rem, 1.25vw, 1.25rem); }
.tr-vao--f { grid-column: 18 / 25; grid-row: 1 / 14; z-index: 5; }
.tr-vao--b { grid-column: 9 / 16; grid-row: 8 / 16; z-index: 3; padding-right: calc(var(--tr-col) * 2.4); --tr-pos: 70% 20%; }
.tr-vao--c { grid-column: 15 / 24; grid-row: 13 / 22; z-index: 1; padding-left: calc(var(--tr-col) * 3); --tr-pos: 90% 60%; --tr-veu: rgb(244 241 229 / .78); --tr-veu2: rgb(244 241 229 / .35); }
.tr-vao--luz { grid-column: 1 / 10; grid-row: 10 / 20; z-index: 0; padding: 0; --tr-pos: 22% 78%; --tr-veu: rgb(244 241 229 / .12); --tr-veu2: rgb(244 241 229 / .3); }
.tr-vao--h { grid-column: 1 / 16; grid-row: 19 / 26; z-index: 4; --tr-pos: 40% 96%; --tr-veu: rgb(247 243 232 / .9); --tr-veu2: rgb(247 243 232 / .62); }
.tr-passagem { grid-column: 17 / 23; grid-row: 23 / 28; align-self: end; }

/* a moldura de 1975 tem a barra dupla do desenho da treliça */
.tr-vao--a::before { inset: clamp(10px, 1.1vw, 16px); border: clamp(4px, .4vw, 6px) solid var(--trelica); box-shadow: 1px 2px 0 rgb(51 80 63 / .12), inset 1px 2px 0 rgb(51 80 63 / .1); }
.tr-vao--luz::before { inset: clamp(18px, 2.2vw, 32px); border-color: rgb(247 243 232 / .6); }

.tr-marco { display: grid; gap: .5rem; margin: 0; font: inherit; }
.tr-ano { font-family: var(--f-titulo); font-weight: 400; font-size: clamp(3.75rem, 6.8vw, 6.5rem); line-height: .86; letter-spacing: -.025em; color: var(--tinta); }
.tr-vao--a .tr-ano { font-size: clamp(5.5rem, 11vw, 10.5rem); color: var(--verde-fundo); margin-left: -.04em; }
.tr-vao--b .tr-ano { font-size: clamp(3.25rem, 5.2vw, 5rem); }
.tr-ano--hoje { font-style: italic; color: var(--verde-fundo); line-height: 1; }
.tr-rotulo { font-family: var(--f-titulo); font-size: var(--t-h3); line-height: 1.2; color: var(--tinta); text-wrap: balance; }
.tr-nota { margin-top: .55rem; font-size: 1.0625rem; line-height: 1.5; color: var(--tinta); max-width: 23em; }

.tr-apoio em { font-family: var(--f-titulo); font-style: italic; font-size: 1.12em; color: var(--verde-fundo); }

/* Hoje: vão largo e baixo, em duas colunas */
.tr-vao--h { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 1.5rem clamp(1.5rem, 4vw, 4rem); padding-right: calc(var(--tr-col) * 2); }
.tr-vao--h .tr-ano { font-size: clamp(4.25rem, 7.4vw, 7rem); margin-bottom: .08em; }
.tr-onde { display: grid; justify-items: start; gap: .2rem; padding-bottom: .1rem; }
.tr-onde .tr-nota { margin: 0; font-family: var(--f-titulo); font-size: var(--t-h3); line-height: 1.25; max-width: 12em; text-wrap: balance; }
.tr-onde__link svg, .tr-passagem__link svg { transition: transform .3s var(--suave); }
.tr-onde__link:hover svg { transform: translateX(3px); }
.tr-passagem__link:hover svg { transform: translateY(3px); }

/* a foto ocupa o vão inteiro; o nome fica na soleira da moldura, fora do rosto */
.tr-vao--f { display: grid; grid-template-rows: minmax(0, 1fr) auto; padding: 0; }
.tr-vao--f::before { display: none; }
.tr-vao--f img { width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: 50% 26%; }
.tr-placa { display: grid; gap: .1rem; padding: calc(.7rem + var(--tr-barra) * .5) 1rem .65rem; background: var(--trelica); box-shadow: inset 0 3px 0 rgb(51 80 63 / .12); }
.tr-placa__nome { font-family: var(--f-titulo); font-size: 1.1875rem; line-height: 1.2; color: var(--tinta); }
.tr-placa__reg { font-size: var(--t-mini); letter-spacing: .09em; color: var(--tinta-suave); }

.tr-passagem { display: grid; gap: .5rem; justify-items: start; }
.tr-passagem__frase { font-family: var(--f-titulo); font-size: clamp(1.5rem, 2.3vw, 2.2rem); line-height: 1.18; color: var(--tinta); text-wrap: balance; }
.tr-passagem__frase em { font-style: italic; color: var(--verde-fundo); }

/* empilhado: tablet em pé e celular */
@media (max-width: 900px) {
  .tr-secao { --tr-u: 24px; --tr-col: calc(100% / 6); }
  .tr-parede { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: auto; }
  .tr-apoio { grid-column: 1 / -1; grid-row: auto; order: 0; margin-bottom: 2.25rem; }
  .tr-vao { grid-row: auto; padding: 1.6rem 1.4rem 1.5rem; }
  .tr-vao--a { grid-column: 1 / 7; order: 1; min-height: 16rem; padding: 2.2rem 1.9rem 2.4rem; }
  .tr-vao--b { grid-column: 3 / 7; order: 2; margin-top: calc(var(--tr-u) * -1); min-height: 11rem; padding: 2.6rem 1.3rem 1.5rem; }
  .tr-vao--f { grid-column: 1 / 6; order: 3; margin-top: calc(var(--tr-u) * -1); padding: 0; }
  .tr-vao--f img { height: auto; aspect-ratio: 5 / 6; }
  .tr-placa { padding-bottom: calc(.7rem + var(--tr-u)); }
  .tr-vao--c { grid-column: 2 / 7; order: 4; margin-top: calc(var(--tr-u) * -1); min-height: 14rem; padding: 3rem 1.4rem 1.6rem 1.6rem; z-index: 6; }
  .tr-vao--h { grid-column: 1 / 7; order: 5; margin-top: calc(var(--tr-u) * -1); padding: 3rem 1.6rem 1.4rem; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: .9rem; z-index: 7; }
  .tr-vao--luz { display: none; }
  .tr-passagem { grid-column: 1 / -1; grid-row: auto; order: 6; margin-top: 2.5rem; padding-right: 1.5rem; }
  .tr-vao--a .tr-ano { font-size: clamp(5.5rem, 29vw, 11rem); }
  .tr-vao--c .tr-ano { font-size: clamp(4.25rem, 20vw, 7rem); }
  .tr-vao--h .tr-ano { font-size: clamp(4.25rem, 20vw, 7rem); }
  .tr-onde .tr-nota { max-width: none; }
  .tr-vao--f .tr-fio { display: none; }
}
@media (min-width: 600px) and (max-width: 900px) {
  .tr-parede { max-width: 40rem; margin-inline: auto; }
  .tr-topo, .tr-apoio { max-width: 40rem; margin-inline: auto; width: 100%; }
}