/* KM 5 · Quem conduz — a noite nasce da parede de mármore: a parede dele segue para a direita (placas tiradas da própria foto)
   e o veio claro atravessa a seção como estrada vista de longe; embaixo, o veio vira a rota dele, com os marcos. */
.sb-grade {
  display: grid;
  grid-template-columns: minmax(0, 545px) minmax(0, 1fr);
  grid-template-areas: "retrato cabeca" "retrato historia";
  grid-template-rows: auto 1fr;
  column-gap: clamp(32px, 5.4vw, 80px);
  align-items: start;
}
.sb-cabeca { grid-area: cabeca; position: relative; z-index: 1; padding-top: clamp(84px, 8.6vw, 128px); }
.sb-historia { grid-area: historia; position: relative; z-index: 1; display: grid; gap: 1.05em; margin-top: clamp(26px, 3vw, 44px); }
.sb-abre { color: var(--tinta); }
.sb-fala { font-weight: 600; color: var(--tinta); }

/* retrato + parede estendida: uma imagem só; o quadro ocupa a largura da foto e a parede sangra para os lados */
.sb-retrato { grid-area: retrato; margin: 0; width: 100%; max-width: 545px; }
.sb-retrato__quadro { position: relative; aspect-ratio: 1070 / 1190; }
.sb-retrato__parede {
  position: absolute; inset: -16% -170% -12% -40%; z-index: -1;
  background: radial-gradient(in oklab ellipse closest-side, rgb(9 10 15 / .9) 0%, rgb(9 10 15 / .75) 45%, rgb(9 10 15 / 0) 100%);
}
.sb-retrato img { position: absolute; left: -18.692%; top: 0; width: 286.916%; max-width: none; height: auto; display: block; }
/* o gesto: uma luz percorre o veio da parede. A camada é só o veio (recortado da própria parede), revelado por uma máscara que anda;
   fica à direita do ombro dele, nunca passa pelo rosto */
.sb-retrato__luz {
  position: absolute; left: 57.944%; top: 0; width: 210.28%; height: 39.076%; pointer-events: none;
  background: url("../img/sb-veio.webp") 0 0 / 100% 100% no-repeat;
  -webkit-mask: linear-gradient(to right, transparent, #000 50%, transparent) 0 0 / 30% 100% no-repeat;
  mask: linear-gradient(to right, transparent, #000 50%, transparent) 0 0 / 30% 100% no-repeat;
  opacity: 0; animation: sb-luz 14s linear 1.2s infinite;
}
@keyframes sb-luz {
  0% { -webkit-mask-position: -10% 0; mask-position: -10% 0; opacity: 0; }
  10% { opacity: 1; }
  75% { opacity: 1; }
  100% { -webkit-mask-position: 105% 0; mask-position: 105% 0; opacity: 0; }
}
.sb-nome { position: relative; z-index: 1; display: grid; gap: 7px; margin: -4% 0 0 15.5%; padding-left: 18px; border-left: 5px solid var(--d-faixa); }
.sb-nome h3 { font-size: clamp(1.3rem, 1.6vw, 1.6rem); font-weight: 800; line-height: 1.15; letter-spacing: -.005em; }
.sb-nome p { font-size: var(--t-mini); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta-2); }
.sb-nome p span { color: var(--acento); margin-left: .9em; }

/* a rota: o veio vira estrada vista de longe, com os marcos dele */
.sb-rota { position: relative; margin-top: clamp(48px, 6vw, 88px); }
.sb-rota__linha { position: absolute; overflow: visible; pointer-events: none; }
.sb-rota__linha--h { left: calc(var(--d-margem) * -1); top: 0; width: calc(100% + var(--d-margem) * 2); height: 44px; }
.sb-rota__linha--v { display: none; }
.sb-rota__linha { filter: drop-shadow(0 0 5px rgb(233 223 200 / .4)); clip-path: inset(-20px 0 -20px 0); transition: clip-path 3s var(--d-curva) .2s; }
.js .sb-rota:not(.visto) .sb-rota__linha--h { clip-path: inset(-20px 100% -20px 0); }
.js .sb-rota:not(.visto) .sb-rota__linha--v { clip-path: inset(0 -20px 100% -20px); }
.sb-rota__linha--v { clip-path: inset(0 -20px 0 -20px); }
.sb-rota__traco { fill: none; stroke: #e9dfc8; stroke-width: 1.1; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .62; }
.sb-rota__traco--forte { stroke-width: 2; opacity: .85; stroke: #f3ead6; }
.sb-rota__traco--ramo { stroke-width: .8; opacity: .34; }
.sb-marcos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sb-marco { position: relative; padding: 58px 28px 0 0; }
.sb-marco::before { content: ""; position: absolute; left: -2px; top: 9px; width: 5px; height: 26px; border-radius: 1px; background: var(--d-faixa); box-shadow: 0 0 18px 1px rgb(224 168 60 / .45); }
.sb-marco__quando { font-size: clamp(1.5rem, 2.1vw, 2rem); font-weight: 700; letter-spacing: .01em; text-transform: uppercase; color: var(--tinta); line-height: 1; }
.sb-marco__quando span { display: block; margin-top: 12px; font-size: var(--t-mini); font-weight: 600; letter-spacing: .14em; color: var(--acento); }
.sb-marco__que { margin-top: 10px; font-size: 1rem; line-height: 1.4; color: var(--tinta-2); max-width: 17em; }

@media (max-width: 900px) {
  .sb-grade { grid-template-columns: minmax(0, 1fr); grid-template-areas: "cabeca" "retrato" "historia"; }
  .sb-cabeca { padding-top: 0; }
  .sb-retrato { margin: 22px auto 0; max-width: 440px; }
  .sb-nome { margin: -2% 0 0; }
  .sb-historia { margin-top: 20px; }
  .sb-rota__linha--h { display: none; }
  .sb-rota__linha--v { display: block; left: 0; top: 0; width: 28px; height: 100%; }
  .sb-marcos { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .sb-marco { padding: 0 0 0 44px; }
  .sb-marco::before { left: 8px; top: 0; width: 26px; height: 5px; }
}