/* ==========================================================================
   AXIONMESK — Transições de Navegação Rápidas
   Fade curto, sem flash, com a bottom nav sempre estável.
   ========================================================================== */

/* Evita qualquer flash branco/preto */
html, body {
  background-color: #0B1220 !important;
}

/* Fade-out ao navegar (só o conteúdo some, a nav fica) */
html.cm-nav-out body > *:not(#bottomNav):not(.mais-panel):not(.mais-fundo):not(.pwa-install-bar):not(.cm-drawer):not(.cm-drawer-backdrop) {
  opacity: 0;
  transition: opacity .09s ease-out;
  pointer-events: none;
}

/* Fade-in na chegada (só conteúdo, não a nav) */
body > main,
body > .page,
body > .hero,
body > .container {
  animation: cmPageIn .16s ease-out both;
}

@keyframes cmPageIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Ao voltar do bfcache, sem animação (já está pronto) */
html.cm-nav-back body > main,
html.cm-nav-back body > .page,
html.cm-nav-back body > .hero {
  animation: none !important;
}

/* Bottom nav nunca anima/aparece piscando entre páginas */
#bottomNav {
  opacity: 1 !important;
  transition: none !important;
}

/* Indicador: atualiza sem "pular" na troca de página */
html.cm-nav-out .bn-indicator {
  opacity: 0;
  transition: none;
}

/* Estado offline */
html.cm-offline body::after {
  content: "Sem conexão";
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #F6465D;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 99px;
  z-index: 9999;
  pointer-events: none;
}

/* Acessibilidade */
@media (prefers-reduced-motion: reduce) {
  html.cm-nav-out body > *,
  body > main, body > .page, body > .hero, body > .container {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
  }
}

/* ==========================================================================
   DESKTOP — sem animacao de pagina (navegacao nativa e instantanea)
   A transicao em fade existe apenas no mobile.
   ========================================================================== */
@media (min-width: 901px) {
  body > main,
  body > .page,
  body > .hero,
  body > .container {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  html.cm-nav-out body > * {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* ==========================================================================
   DESKTOP v2 — cobre QUALQUER container (nao apenas filhos diretos)
   ========================================================================== */
@media (min-width: 901px) {
  main,
  .page,
  .page-body,
  .hero,
  .container,
  .content,
  .wrap,
  section {
    animation: none !important;
    -webkit-animation: none !important;
  }
}

/* ==========================================================================
   DESKTOP v3 — kill switch global de animacao de entrada
   No computador a navegacao deve ser instantanea (sem fade/translate).
   ========================================================================== */
@media (min-width: 901px) {
  body *:not(.bn-tab):not(.bn-tab__icon):not(.bn-indicator):not(.pwa-install-bar) {
    animation-name: none !important;
  }
  /* restaura animacoes legitimas de UI (spinner, skeleton, pulses) */
  body .spinner,
  body .skeleton,
  body .pulse,
  body .animate-spin,
  body .animate-pulse,
  body [class*="spin"],
  body [class*="pulse"] {
    animation-name: revert !important;
  }
}