/* ==========================================================================
   TRANSICAO ENTRE PAGINAS (10/11/2026) · em teste, so na homologacao
   Referencia: insany.com.br. La o site e um aplicativo (Framer) e a troca
   de pagina chama document.startViewTransition(); a receita deles e uma
   mascara de varredura, a pagina antiga subindo 30% e caindo a 10% de
   opacidade em 0,55s, e a nova entrando depois, tambem em 0,55s.

   Aqui o site e WordPress e recarrega a cada pagina, entao a transicao usa
   a versao ENTRE DOCUMENTOS da mesma API, que e so CSS: a regra
   @view-transition manda o navegador fotografar a pagina que sai e animar
   esse retrato contra a pagina que entra. Sem JavaScript, sem virar SPA.

   Como ler:
     ::view-transition-old(root)  o retrato da pagina que sai
     ::view-transition-new(root)  a pagina que entra, ao vivo
     ::view-transition            o fundo atras dos dois

   O desenho (segunda versao, pedida pelo Claudio no mesmo dia: "preta,
   aparece rapidamente o logo da Digital Pixel centralizado na cor branca e
   passa"): uma cortina preta em tela cheia.
     1. a pagina antiga e recolhida de baixo para cima (0,45s) e o preto
        aparece atras dela, com o logo branco no centro;
     2. o preto fica um instante (0,2s);
     3. a pagina nova sobe por cima do preto (0,5s).
   O preto e o logo nao sao um elemento da pagina: sao o fundo da propria
   transicao (::view-transition). O logo e o mesmo arquivo do header, branco
   sobre transparente (img/logo-dp-branco.webp).

   O header entra na cortina junto com a pagina. Na primeira versao ele
   ficava parado, com nome proprio na transicao; com a cortina em tela
   cheia ele ficaria claro por cima do preto.

   Onde nao funciona (navegador sem a regra, link para outro dominio,
   pagina fora da camada), a navegacao acontece normal, sem transicao.
   Quem pede menos movimento no sistema nao recebe nada disto.

   Quem carrega esta folha e o mu-plugin: sempre na homologacao; em
   producao so com a opcao dpxl_neon_transicao em 1.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  /* a cortina: o preto do site com o logo branco no centro */
  ::view-transition {
    background: #0d0d0d url("../img/logo-dp-branco.webp") center / clamp(180px, 30vw, 420px) auto no-repeat;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) { mix-blend-mode: normal; }

  /* 1. a pagina antiga e recolhida para cima e descobre a cortina */
  ::view-transition-old(root) {
    animation: dp-vt-sai .45s cubic-bezier(.76, 0, .24, 1) both;
  }
  /* 3. depois de 0,2s de cortina, a pagina nova sobe por cima dela */
  ::view-transition-new(root) {
    animation: dp-vt-entra .5s cubic-bezier(.76, 0, .24, 1) .65s both;
  }

  @keyframes dp-vt-sai {
    from { clip-path: inset(0 0 0 0); }
    to   { clip-path: inset(0 0 100% 0); }
  }
  @keyframes dp-vt-entra {
    from { clip-path: inset(100% 0 0 0); }
    to   { clip-path: inset(0 0 0 0); }
  }
}