/* =========================================================
   AURIFEX STUDIO v9 :: Projetos lado a lado (23/10/2026)
   Camada da chave PROJETOS_LADO_A_LADO em gerador/montar.py. Pedido dele:
   o computador de um projeto, o texto embaixo e logo depois o projeto seguinte ficavam
   "muito confusos"; "o texto do lado e as fotos do mesmo lado, um do lado
   do outro", e o projeto parado para ver o vídeo e ler. Sem a chave, a
   página aprovada, idêntica.
   - computador: cada projeto é um quadro do tamanho da tela, texto à
     esquerda e palco à direita, alinhados pelo topo (regra 3.3); o quadro
     fica parado por um trecho da rolagem (--pausa), o fio de ouro ao lado
     do número enche nesse trecho, e o quadro que sai esmaece enquanto o
     próximo acende (só nos navegadores com animação pela rolagem; nos
     outros, o quadro parado e o fio cheio);
   - tablet e celular: o nome e a frase primeiro, depois as telas, depois a
     lista e os botões; um fio separa um projeto do outro.
   ========================================================= */
.trabalhos-lista{padding-top:0}
.grade-trabalhos{gap:0}
.trabalho.lado{display:block;justify-items:normal;scroll-margin-top:-20px}   /* o "center" da página aprovada encolhia o quadro */   /* âncora: o quadro encosta no cabeçalho (scroll-padding 84 − 20) */
.trabalho-quadro{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:clamp(36px,4.4vw,72px);align-items:start;align-content:center;padding-block:clamp(40px,6vw,72px)}
.trabalho.lado + .trabalho.lado .trabalho-quadro{border-top:1px solid var(--linha)}

/* o texto numa coluna só (a página aprovada o dividia em duas, embaixo do palco) */
.trabalho.lado .trabalho-texto{max-width:none;grid-template-columns:minmax(0,1fr);gap:12px;align-content:start}
.trabalho.lado .trabalho-texto > :is(.selo-status,.trabalho-num,h2,.sub,ul,.acoes){grid-column:auto;grid-row:auto}
.trabalho.lado .trabalho-texto h2{font-size:clamp(26px,2.3vw,34px);text-wrap:balance}
.trabalho.lado .trabalho-texto h2::before{display:none}
.trabalho.lado .trabalho-texto .sub{font-size:16px;line-height:1.55;max-width:44ch}
.trabalho.lado .trabalho-texto ul{gap:8px;font-size:15px;line-height:1.5;margin-top:4px;padding-top:14px;border-top:1px solid var(--linha)}
.trabalho.lado .trabalho-texto li .icone{margin-top:3px}
.trabalho.lado .trabalho-texto .acoes{margin-top:8px}

/* o número do projeto e o fio que mostra quanto falta do quadro parado */
.trabalho-num{display:flex;align-items:center;gap:14px;margin-top:2px;font:500 19px/1 var(--serif);color:var(--ouro)}
.trabalho-num::before{content:"0" counter(projeto)}
.trabalho-fio{position:relative;flex:0 0 76px;height:1px;background:var(--linha-forte);overflow:hidden}
.trabalho-fio i{position:absolute;inset:0;background:var(--ouro);transform-origin:left center}

/* o palco ocupa a coluna inteira; embaixo dele, o vídeo extra de um projeto, com o triângulo de tocar */
.trabalho.lado .palco-projeto{width:100%;justify-self:stretch}
.telas-extra{display:flex;margin-top:18px}
.telas-extra .botao::before{content:"";flex:none;width:8px;height:10px;background:var(--ouro);clip-path:polygon(0 0,100% 50%,0 100%)}

/* aparece em cascata: primeiro o texto, linha por linha, depois as telas */
html.mov .trabalho.lado.revela:not(.visto){opacity:1;transform:none}
html.mov .trabalho.lado.revela:not(.visto) .trabalho-texto > *{opacity:0;transform:translateY(16px)}
html.mov .trabalho.lado.revela:not(.visto) .trabalho-telas{opacity:0;transform:translateY(26px)}
html.mov .trabalho.lado.revela:not(.revelado) .trabalho-texto > *,
html.mov .trabalho.lado.revela:not(.revelado) .trabalho-telas{transition:opacity .7s var(--curva) calc(var(--j,0) * 70ms),transform .7s var(--curva) calc(var(--j,0) * 70ms)}
.trabalho.lado .trabalho-texto > :nth-child(2){--j:1}
.trabalho.lado .trabalho-texto > :nth-child(3){--j:2}
.trabalho.lado .trabalho-texto > :nth-child(4){--j:3}
.trabalho.lado .trabalho-texto > :nth-child(5){--j:4}
.trabalho.lado .trabalho-texto > :nth-child(6){--j:5}
.trabalho.lado .trabalho-telas{--j:2}

/* computador com altura para o quadro inteiro: o quadro fica parado enquanto a rolagem anda --pausa */
@media (min-width:1021px) and (min-height:560px){
  .trabalho.lado{--quadro:calc(100svh - var(--topo-a));--pausa:45svh;height:calc(var(--quadro) + var(--pausa))}
  .trabalho-quadro{position:sticky;top:var(--topo-a);height:var(--quadro);box-sizing:border-box;padding-block:clamp(20px,4svh,44px)}
  @supports (animation-timeline:view()){
    html.mov .trabalho.lado{view-timeline:--passagem block;view-timeline-inset:var(--topo-a) 0px}
    html.mov .trabalho.lado .trabalho-fio i{animation:fio-enche linear both;animation-timeline:--passagem;animation-range:contain 0% contain 100%}
    html.mov .trabalho.lado .trabalho-quadro{animation:quadro-passa linear both;animation-timeline:--passagem}
  }
}
@keyframes fio-enche{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes quadro-passa{
  entry 0%{opacity:.18}
  entry 60%{opacity:1}
  exit 40%{opacity:1}
  exit 100%{opacity:.18}
}

/* tablet e celular: uma coluna; o nome e a frase, as telas, a lista e os botões */
@media (max-width:1020px){
  .grade-trabalhos{gap:clamp(44px,8vw,72px)}
  .trabalho-quadro{grid-template-columns:minmax(0,1fr);gap:14px;padding-block:0}
  .trabalho.lado + .trabalho.lado .trabalho-quadro{padding-top:clamp(40px,8vw,64px)}
  .trabalho.lado:first-child .trabalho-quadro{padding-top:clamp(36px,6vw,56px)}
  .trabalho.lado .trabalho-texto{display:contents}
  .trabalho.lado .trabalho-texto > .selo-status,.trabalho.lado .trabalho-texto > .trabalho-num,
  .trabalho.lado .trabalho-texto > h2,.trabalho.lado .trabalho-texto > .sub{order:0}
  .trabalho.lado .trabalho-telas{order:1;margin-block:10px 4px;justify-self:center;width:100%;max-width:760px}
  .telas-extra{justify-content:center}
  .trabalho.lado .trabalho-texto > ul,.trabalho.lado .trabalho-texto > .acoes{order:2}
  .trabalho.lado .trabalho-texto .sub{max-width:60ch}
}