/* AXIS · v3 · o motor de cenas (engenheiro de efeitos; v2 de 15/10/2026, v3 de 16/10/2026 22h45).
   Carregado depois das folhas da direção. Sem JavaScript nada daqui muda a página: o :target da direção mostra a cena certa.
   Com JavaScript (html.axs-js), a cena atual é a que tem .axs-ct--atual (history.replaceState não atualiza :target em todo
   navegador).
   1. View Transitions entre documentos (v3, EFEITOS-PEDIDO.md §1): corte com dissolução de 240 ms; só a logo continua
      (axs-logo). Nenhuma imagem recebe nome, nem entre o paredão e a trilha nem entre duas trilhas: a foto nunca escala de uma
      página para a outra. Movimento reduzido: troca seca. Firefox: troca normal.
   2. A troca de cena dentro da trilha: as duas cenas visíveis durante a passagem (a que sai por baixo); o padrão é a
      dissolução de 300 ms; efeitos.js pode registrar outra (o líquido, só com a chave "liquido").
   3. Arrasto: touch-action: pan-y na trilha (o horizontal é do motor; a rolagem vertical é do navegador). */
@view-transition{navigation:auto}
::view-transition-group(*){animation-duration:.24s;animation-timing-function:cubic-bezier(.4,0,.2,1)}
::view-transition-old(*),::view-transition-new(*){animation-duration:.24s;animation-timing-function:linear}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}
/* o que continua entre as páginas: só a logo (na trilha, só a da cena visível leva o nome; nome repetido cancela tudo).
   A foto da cena não recebe nome em lugar nenhum: duas fotos de tamanhos diferentes viravam uma escala entre elas. */
html:not(.axs-js) .axs-trilha .axs-ct:target .axs-logo,
html:not(.axs-js) .axs-trilha:not(:has(.axs-ct:target)) #c1 .axs-logo,
html.axs-js .axs-trilha .axs-ct--atual:not(.axs-ct--entra) .axs-logo{view-transition-name:axs-logo}
/* no paredão, o motor dá o nome só à logo, no instante do clique (motor.js); nenhuma foto recebe nome ali */

/* ===== a trilha com JavaScript ===== */
html.axs-js .axs-trilha{touch-action:pan-y;-webkit-user-select:none;user-select:none}
html.axs-js .axs-trilha .axs-txt,html.axs-js .axs-trilha .axs-painel{-webkit-user-select:text;user-select:text}
html.axs-js .axs-trilha .axs-ct{display:none}
html.axs-js .axs-trilha .axs-ct.axs-ct--atual,html.axs-js .axs-trilha .axs-ct.axs-ct--sai{display:flex}
html.axs-js .axs-trilha .axs-ct--sai{z-index:1;pointer-events:none}
html.axs-js .axs-trilha .axs-ct--atual{z-index:2}
/* a passagem padrão: a cena que entra esmaece por cima da que sai; cada direção substitui em efeitos.css */
@media (prefers-reduced-motion:no-preference){
  html.axs-js .axs-trilha .axs-ct--entra{animation:axs-entra .3s ease-out both}
}
@keyframes axs-entra{from{opacity:0}}
/* durante a passagem por shader (A: líquido; B: trama), o canvas mora na cena que sai, entre a foto e o texto;
   a cena que entra fica transparente e com a foto escondida até o último quadro, e só o texto esmaece */
html.axs-js .axs-fx-passagem{position:absolute;inset:0;z-index:2;pointer-events:none;display:block;width:100%;height:100%}
html.axs-js .axs-trilha .axs-ct--entra.axs-ct--shader{animation:none;background:transparent}
html.axs-js .axs-trilha .axs-ct--entra.axs-ct--shader .axs-palco{visibility:hidden}
html.axs-js .axs-trilha .axs-ct--entra.axs-ct--shader::after{display:none}
@media (prefers-reduced-motion:no-preference){
  html.axs-js .axs-trilha .axs-ct--entra.axs-ct--shader .axs-txt{animation:axs-entra .32s ease-out .22s both}
  html.axs-js .axs-trilha .axs-ct--sai.axs-ct--shader .axs-txt{animation:axs-sai .26s ease-in both}
}
@keyframes axs-sai{to{opacity:0}}
/* a seta que não leva a lugar nenhum nesta cena */
.axs-seta[aria-disabled="true"]{opacity:.35;pointer-events:none}
/* o painel longo rola dentro do painel, nunca a cena */
.axs-painel--longo{max-height:calc(100svh - 240px);overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

/* ===== o trajeto obrigatório (início) ===== */
/* a rolagem suave (a seta "Continuar", a logo do paredão) só depois da chegada: motor.js põe html.axs-suave depois da
   carga. Na volta da trilha (../#paredao) a página pousa no paredão sem rolar pela abertura e pelo dia 3 (revisão visual,
   erro 5: o scroll-behavior valia também para o fragmento da chegada) */
@media (prefers-reduced-motion:no-preference){html.axs-js.axs-pag-inicio.axs-suave{scroll-behavior:smooth}}

/* ===== o que é leve e comum às duas direções ===== */
/* o gráfico que se traça uma vez: <path class="axs-traco" pathLength="1">; o estado padrão é o traço inteiro */
.axs-traco{stroke-dasharray:1 1;stroke-dashoffset:0}
@media (prefers-reduced-motion:no-preference){
  html.axs-js .axs-ct--atual:not(.axs-ct--sai) .axs-traco,html:not(.axs-js) .axs-ct:target .axs-traco,
  html.axs-js .axs-cena.axs-em-vista .axs-traco{animation:axs-traca .6s cubic-bezier(.4,0,.2,1) .15s both}
}
@keyframes axs-traca{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
/* o marca-texto: <mark class="axs-marca"> passa uma vez sobre o trecho e fica (a cor vem de cada direção) */
.axs-marca{background:linear-gradient(var(--marca,rgba(255,54,45,.28)) 0 0) 0 0/100% 100% no-repeat;color:inherit;padding:.04em .08em;margin:0 -.08em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
@media (prefers-reduced-motion:no-preference){
  html.axs-js .axs-ct--atual:not(.axs-ct--sai) .axs-marca,html:not(.axs-js) .axs-ct:target .axs-marca,
  html.axs-js .axs-cena.axs-em-vista .axs-marca{animation:axs-marca .5s cubic-bezier(.4,0,.2,1) .25s both}
}
@keyframes axs-marca{from{background-size:0% 100%}to{background-size:100% 100%}}