/* Transição suave entre as páginas do Flix Pulse (fora dos relatórios: o Faturamento não carrega
   este arquivo, e a transição só acontece quando as DUAS páginas participam).
   Navegadores com View Transitions entre documentos (Chrome/Edge 126+, Safari 18.2+): nativo, fluido.
   Os outros: .entrando/.saindo (transicoes.js). Tudo some com "reduzir movimento". */
@view-transition { navigation: auto; types: navegar; }
html:not(.trocando-tema) main{view-transition-name:conteudo}

/* O topo e o fundo ficam parados (sem "clarão" da página inteira); só o conteúdo troca:
   o antigo sai subindo de leve e o novo entra subindo, encadeados (o novo começa antes do fim). */
html:active-view-transition-type(navegar)::view-transition-old(root),
html:active-view-transition-type(navegar)::view-transition-new(root){animation:none}
html:not(:has(.pagina-login)):active-view-transition-type(navegar)::view-transition-group(conteudo){animation:none}
/* Telas de login (login, esqueci, redefinir): o bloco é centralizado e muda de altura entre elas.
   Sem deslizar a moldura, a imagem antiga pulava ~18px no primeiro quadro (o "tranco"). Aqui a moldura
   desliza até a posição nova e o logo fica de fora da troca: só escorrega junto, sem sumir e voltar. */
html:not(.trocando-tema) .pagina-login .login-marca{view-transition-name:marca}
html:active-view-transition-type(navegar):has(.pagina-login)::view-transition-group(conteudo),
html:active-view-transition-type(navegar)::view-transition-group(marca){animation-duration:.5s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
html:active-view-transition-type(navegar)::view-transition-old(conteudo),
html:active-view-transition-type(navegar)::view-transition-old(titulo){animation:vt-sai .2s cubic-bezier(.4,0,1,1) both}
/* A nova só começa quando a antiga já sumiu: sobrepostas, títulos e textos se embaralhavam. */
html:active-view-transition-type(navegar)::view-transition-new(conteudo),
html:active-view-transition-type(navegar)::view-transition-new(titulo){animation:vt-entra .5s cubic-bezier(.16,1,.3,1) .2s both}
/* Menu da conta aberto no clique (ex.: Perfil → Administração): some em fade em vez de sumir seco. */
html:not(.trocando-tema) .menu-conta{view-transition-name:menu}
html:active-view-transition-type(navegar)::view-transition-old(menu){animation:vt-sai .2s cubic-bezier(.4,0,1,1) both}
/* Título da página e canto esquerdo do topo ("Relatórios" + empresa) também mudam de uma página
   para outra; no fundo parado eles trocavam de uma vez (o "clique"). O título acompanha o conteúdo e
   o canto do topo troca em fade, sem sair do lugar. */
html:not(.trocando-tema) .titulo-pagina{view-transition-name:titulo}
html:not(.trocando-tema) .barra-esq{view-transition-name:barra-esq}
html:active-view-transition-type(navegar)::view-transition-group(titulo){animation:none}
html:active-view-transition-type(navegar)::view-transition-group(barra-esq){animation-duration:.35s}
@keyframes vt-sai{to{opacity:0;transform:translateY(-10px)}}
@keyframes vt-entra{from{opacity:0;transform:translateY(22px)}}

/* Plano B (sem View Transitions entre páginas, ou página rolada no clique: ver transicoes.js) */
html.entrando main,html.entrando .titulo-pagina{animation:pg-entra .6s cubic-bezier(.16,1,.3,1) both}
html.saindo main{opacity:0;transform:translateY(-10px);transition:opacity .32s ease,transform .32s ease}
@keyframes pg-entra{from{opacity:0;transform:translateY(22px)}}

@media (prefers-reduced-motion: reduce){
  @view-transition { navigation: none; }
  html.entrando main,html.entrando .titulo-pagina{animation:none}
  html.saindo main{transition:none}
}