/* ===========================================================================
   Transição entre páginas — vale para o site inteiro
   ===========================================================================

   POR QUE NÃO É MAIS A API NATIVA

   A primeira versão usava `@view-transition { navigation: auto }`, que é a
   solução elegante: zero JavaScript, sem atraso na navegação, e o navegador
   ignora sozinho link externo e download.

   Só que ela não estava entregando. O diagnóstico mostrou o evento `pagereveal`
   disparando entre duas páginas mínimas de teste, mas NÃO entre as páginas
   reais do site — mesma origem, regra única, `prefers-reduced-motion` desligado.
   Alguma coisa nas páginas reais faz o navegador desistir da transição, e
   depois de três rodadas atrás disso o custo passou do benefício.

   Esta versão é JavaScript. Custa ~170 ms de atraso no clique e uma lista
   explícita de exceções (ver transicao.js), mas funciona de forma verificável.

   O QUE A TROCA NÃO PODE CUSTAR

   Se o JavaScript falhar, a página não pode ficar invisível. Por isso a ENTRADA
   é uma animação de CSS, não uma classe que o JavaScript precisa remover: uma
   vez começada, ela termina sozinha. O JavaScript só decide se ela acontece.
   =========================================================================== */

/* Fundo escuro por baixo de tudo.
   É o que aparece no intervalo entre a saída e a entrada — e também no instante
   anterior à primeira pintura, que é onde sairia o branco. Cada página
   sobrescreve com o próprio tom: esta folha é carregada ANTES da folha da
   página, então perde no desempate por ordem, que é o que se quer. */
html {
  background-color: #0d0d0d;
}

/* A classe .wp-trans é posta pelo transicao.js, de forma síncrona, antes da
   primeira pintura. Sem o script, nada aqui vale e a página aparece normal. */
.wp-trans body {
  animation: wpxEntra 260ms cubic-bezier(0, 0, 0.2, 1) both;
}

/* Precisa vir DEPOIS da regra de entrada: as duas têm a mesma especificidade e
   as duas classes ficam no <html> ao mesmo tempo, então quem decide é a ordem. */
.wp-trans--saindo body {
  animation: wpxSai 170ms cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes wpxEntra {
  from { opacity: 0; }
}

@keyframes wpxSai {
  to { opacity: 0; }
}

/* Menos movimento: o transicao.js nem chega a pôr a classe, então nada disto
   se aplica. Esta regra é a segunda camada, para o caso de a classe existir
   por qualquer outro motivo. */
@media (prefers-reduced-motion: reduce) {
  .wp-trans body,
  .wp-trans--saindo body {
    animation: none !important;
    opacity: 1 !important;
  }
}