/* Transição entre as páginas (home ⇄ login ⇄ sistema). O navegador guarda uma "foto" da página que sai e da que entra e anima entre as
   duas, em vez de piscar em branco. O tipo (de-para) vem de js/transicao.js. Sem suporte (ex.: Firefox), a navegação fica como era. */
@view-transition { navigation: auto; }

/* A página nova aparece por cima da antiga (que fica inteira por baixo e só some no fim): nada de "buraco" transparente no meio */
::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; animation-fill-mode: both; }
::view-transition-old(root) { animation: vtSai .42s cubic-bezier(.4, 0, .2, 1); }
::view-transition-new(root) { animation: vtEntra .55s cubic-bezier(.16, 1, .3, 1); }
@keyframes vtSai { 60% { opacity: 1; } to { opacity: 0; } }
@keyframes vtEntra { from { opacity: 0; transform: translateY(12px); } 60% { opacity: 1; } }

/* O logo é o mesmo nas duas páginas: ele "viaja" da home para o login e volta (os dois nomes nunca existem na mesma página) */
.hm-topo .hm-marca img, .lg-logo { view-transition-name: logo; }
::view-transition-group(logo) { animation-duration: .6s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
::view-transition-old(logo), ::view-transition-new(logo) { animation-duration: .6s; }
/* o cartão do login não sobe sozinho enquanto o logo viaja: o navegador já mostra a página nova subindo */
html.vt-home-login .lg-card, html.vt-home-login .lg-logo { animation: none; }

/* LOGIN → SISTEMA: "entrar": o cartão do login se aproxima e o sistema chega de dentro, crescendo até o tamanho normal */
:root:active-view-transition-type(login-sistema)::view-transition-old(root) { animation: vtEntrarSai .5s cubic-bezier(.4, 0, .2, 1) both; }
:root:active-view-transition-type(login-sistema)::view-transition-new(root) { animation: vtEntrarEntra .75s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes vtEntrarSai { 55% { opacity: 1; } to { opacity: 0; transform: scale(1.06); } }
@keyframes vtEntrarEntra { from { opacity: 0; transform: scale(.965); } 45% { opacity: 1; } }

/* SISTEMA → LOGIN: "sair": o sistema recua e some, e o login sobe por cima */
:root:active-view-transition-type(sistema-login)::view-transition-old(root) { animation: vtSairSai .5s cubic-bezier(.4, 0, .2, 1) both; }
:root:active-view-transition-type(sistema-login)::view-transition-new(root) { animation: vtEntra .7s cubic-bezier(.16, 1, .3, 1) .08s both; }
@keyframes vtSairSai { 55% { opacity: 1; } to { opacity: 0; transform: scale(.94); } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}