/* Componente transicoes-pagina.
   Transicao suave entre paginas do mesmo site, so com CSS, sem uma linha de JavaScript.
   Usa a View Transitions API para navegacao entre documentos (@view-transition).

   Guarda dura: tudo vive dentro de @supports (view-transition-name: none). Onde o browser nao
   suporta, e inofensivo, a navegacao e a normal, sem transicao e sem qualquer efeito. Com
   prefers-reduced-motion a reduce, a transicao visivel desliga e a troca de pagina e instantanea.

   As duracoes ficam abaixo de 0,3s, dentro do orcamento de movimento da casa. */

@supports (view-transition-name: none) {
  @view-transition { navigation: auto; }

  ::view-transition-old(root) { animation: transicao-pagina-sai 0.28s ease both; }
  ::view-transition-new(root) { animation: transicao-pagina-entra 0.28s ease both; }

  @keyframes transicao-pagina-sai   { to   { opacity: 0; } }
  @keyframes transicao-pagina-entra { from { opacity: 0; } }

  @media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) { animation: none; }
  }
}