/*!
 * fx-transicao.css — transição suave entre páginas (Elementor FX) · só CSS
 *
 * Usa a API nativa View Transitions entre documentos: o navegador "fotografa" a página que
 * sai e a que entra e anima as duas. Cada página carrega de verdade (não é AJAX), então
 * Elementor, JetEngine, formulários, popups e GTM funcionam como sempre.
 *
 * ONDE COLAR: Elementor → Configurações do Site → CSS personalizado (vale para todas as
 * páginas). A página de destino também precisa ter este CSS.
 *
 * AJUSTES (no mesmo CSS, depois deste bloco):
 *   :root { --fx-transicao-duracao: .4s; --fx-transicao-distancia: 4vh; --fx-transicao-curva: ease; }
 *
 * Suporte: Chrome/Edge 126+ e Safari 18.2+. No Firefox e em navegadores sem suporte, a
 * regra é ignorada e a navegação acontece normal, sem animação e sem erro.
 */

@view-transition {
  navigation: auto;
}

:root {
  --fx-transicao-duracao: .4s;    /* duração da saída e da entrada */
  --fx-transicao-distancia: 4vh;  /* quanto a página sobe ao sair e de onde vem ao entrar */
  --fx-transicao-curva: ease;     /* easing */
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-old(root) {
  animation: fx-transicao-sai var(--fx-transicao-duracao) var(--fx-transicao-curva) forwards;
}
::view-transition-new(root) {
  animation: fx-transicao-entra var(--fx-transicao-duracao) var(--fx-transicao-curva) forwards;
}

@keyframes fx-transicao-sai {
  to { opacity: 0; transform: translateY(calc(-1 * var(--fx-transicao-distancia))); }
}
@keyframes fx-transicao-entra {
  from { opacity: 0; transform: translateY(var(--fx-transicao-distancia)); }
  to { opacity: 1; transform: translateY(0); }
}

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