/* ============================================================================
   ARRASTÃO entre o Início e as Notas de atualização (montagem em view-transitions-init.js)
   ----------------------------------------------------------------------------
   Sem cortina: a página escorre para o lado com um borrão de movimento e a nova
   chega do lado oposto, ainda borrada, até assentar.
   Anima cada bloco de primeiro nível do <body> (conteúdo, barra lateral, rodapé)
   com as propriedades translate/scale, e não o <body> inteiro com transform: assim
   o que é fixo na tela, como a barra de ícones, desliza junto sem sair do lugar.
   ========================================================================== */

/* A transição nativa do navegador ficaria por baixo desta; desligada para não brigar. */
@view-transition { navigation: none; }

html.arrastao-sai body > *,
html.arrastao-chega body > * {
  will-change: translate, filter;
}

/* O esmaecimento usa filter: opacity() e não a propriedade opacity: assim cada bloco some a partir
   da própria transparência (o ruído do fundo continua sutil, o botão escondido continua escondido). */

/* Saindo: escorre para o lado do puxão. */
html.arrastao-sai.arrastao-direita body > * { animation: arrastaoSaiDireita .3s cubic-bezier(.55, 0, .9, .4) forwards; }
html.arrastao-sai.arrastao-esquerda body > * { animation: arrastaoSaiEsquerda .3s cubic-bezier(.55, 0, .9, .4) forwards; }

/* Chegando: nasce deslocada do lado de onde vem o puxão, borrada e apagada... */
html.arrastao-chega.arrastao-direita body > * { translate: -70px 0; scale: 1.03 1; filter: blur(12px) opacity(0); }
html.arrastao-chega.arrastao-esquerda body > * { translate: 70px 0; scale: 1.03 1; filter: blur(12px) opacity(0); }
/* ...e assenta. */
html.arrastao-chega.arrastao-assenta body > * { animation: arrastaoAssenta .46s cubic-bezier(.12, .7, .2, 1) forwards; }

@keyframes arrastaoSaiDireita { to { translate: 90px 0; scale: 1.04 1; filter: blur(12px) opacity(0); } }
@keyframes arrastaoSaiEsquerda { to { translate: -90px 0; scale: 1.04 1; filter: blur(12px) opacity(0); } }
@keyframes arrastaoAssenta { to { translate: 0 0; scale: 1 1; filter: blur(0) opacity(1); } }

/* Quem pediu menos movimento e não liberou no aviso do site: navegação direta, sem efeito. */
@media (prefers-reduced-motion: reduce) {
  html:not(.force-motion).arrastao-chega body > * { translate: none; scale: none; filter: none; animation: none; }
}