/* ===== navegação lateral entre páginas ===== */
@view-transition{navigation:auto}

/* o topo fica parado; só o conteúdo desliza */
.topo{view-transition-name:topo}
::view-transition-group(topo){animation-duration:0s}

::view-transition-old(root){animation:pg-sai .7s cubic-bezier(.76,0,.24,1) both}
::view-transition-new(root){animation:pg-entra .7s cubic-bezier(.76,0,.24,1) both}
@keyframes pg-sai{to{transform:translateX(-28%);opacity:.25;filter:brightness(.6)}}
@keyframes pg-entra{
  from{transform:translateX(100%);box-shadow:-4px 0 0 #ffb55a, -18px 0 36px -8px #e8730c}
  to{transform:translateX(0);box-shadow:-4px 0 0 #ffb55a, -18px 0 36px -8px #e8730c}
}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* páginas internas: espaço pro topo fixo */
.sec-pg{padding-top:clamp(110px,16vh,150px)}
#jeito{padding-top:clamp(60px,10vh,110px)}

/* "próxima página": chamada grande no fim de cada página */
.proxima{
  position:relative;display:grid;grid-template-columns:1fr auto;align-items:end;gap:6px 24px;
  padding:clamp(48px,10vh,96px) clamp(22px,5vw,84px);
  border-top:1px solid var(--linha);background:var(--painel);text-decoration:none;color:var(--creme);overflow:hidden;
  isolation:isolate;
}
.proxima::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--laranja);
  transform:translateX(-101%);transition:transform .6s cubic-bezier(.76,0,.24,1);
}
.proxima-rot{grid-column:1 / -1;font-family:var(--nav);letter-spacing:.22em;text-transform:uppercase;font-size:.85rem;color:var(--laranja);transition:color .3s}
.proxima-nome{font-family:var(--titulo);text-transform:uppercase;font-size:clamp(3rem,11vw,9rem);line-height:.9;transition:color .3s}
.proxima-seta{font-size:clamp(2.4rem,7vw,5.5rem);line-height:1;color:var(--laranja);transition:color .3s,translate .5s cubic-bezier(.22,1,.36,1)}
.proxima:hover::before,.proxima:focus-visible::before{transform:translateX(0)}
.proxima:hover .proxima-nome,.proxima:hover .proxima-rot,.proxima:hover .proxima-seta{color:#0a0a0c}
.proxima:hover .proxima-seta{translate:18px 0}
@media (prefers-reduced-motion:reduce){.proxima::before,.proxima-seta{transition:none}}

/* direção da passagem: ao voltar, tudo se inverte */
html[data-dir="back"]::view-transition-old(root){animation-name:pg-sai-v}
html[data-dir="back"]::view-transition-new(root){animation-name:pg-entra-v}
@keyframes pg-sai-v{to{transform:translateX(28%);opacity:.25;filter:brightness(.6)}}
@keyframes pg-entra-v{
  from{transform:translateX(-100%);box-shadow:4px 0 0 #ffb55a, 18px 0 36px -8px #e8730c}
  to{transform:translateX(0);box-shadow:4px 0 0 #ffb55a, 18px 0 36px -8px #e8730c}
}

/* painel que cresce na borda enquanto se empurra a página: o mesmo fundo da home, como uma janela */
.puxa{
  position:fixed;top:0;bottom:0;width:0;z-index:40;overflow:hidden;pointer-events:none;
  background:#000 url("../frames/filme/0001.webp") center / cover fixed;
  display:flex;align-items:center;
}
.puxa::before{content:"";position:absolute;inset:0;background:#0007}
.puxa-dir{right:0;justify-content:flex-start;box-shadow:inset 18px 0 36px -12px #ffb55acc,inset 40px 0 70px -30px #e8730c}
.puxa-esq{left:0;justify-content:flex-end;box-shadow:inset -18px 0 36px -12px #ffb55acc,inset -40px 0 70px -30px #e8730c}
.puxa img{position:relative;flex:none;display:block;width:min(48vw,680px);height:auto;margin:0 1vw}
html.puxando{overflow-x:hidden}