/* Nitro PvP — animações de acesso/navegação, carregadas em TODAS as páginas
   (site público, painel admin, suporte, minha conta, termos, privacidade).
   Três peças, cada uma independente das outras:
   1) fade de entrada quando uma página carrega, e fade de saída antes de
      navegar pra outra (assets/js/motion.js controla a classe .nitro-leaving);
   2) "reveal" ao rolar — qualquer elemento com .reveal (ver site.css/index.html);
   3) troca de seção no painel admin (.view), que já reaparece com um
      pequeno movimento sempre que sai de display:none.
   Tudo respeita prefers-reduced-motion. */

@media(prefers-reduced-motion:no-preference){
  /* só opacidade aqui, nunca transform: .nav, .toast e os overlays de
     Dialog são position:fixed direto dentro de <body> — se o body ficasse
     com um transform aplicado (mesmo translateY(0), que crava mesmo assim
     depois que a animação "both" termina), viram fixed relativos ao body
     em vez da viewport, e somem ao rolar a página. */
  body{animation:nitroPageIn .4s ease both}
}
@keyframes nitroPageIn{from{opacity:0}to{opacity:1}}
body.nitro-leaving{animation:nitroPageOut .18s ease forwards}
@keyframes nitroPageOut{to{opacity:0}}

/* reveal ao rolar (index.html) */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.is-visible{opacity:1;transform:none}
.reveal .cards>*{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.reveal.is-visible .cards>*{opacity:1;transform:none}
.reveal.is-visible .cards>*:nth-child(1){transition-delay:.04s}
.reveal.is-visible .cards>*:nth-child(2){transition-delay:.09s}
.reveal.is-visible .cards>*:nth-child(3){transition-delay:.14s}
.reveal.is-visible .cards>*:nth-child(4){transition-delay:.19s}
.reveal.is-visible .cards>*:nth-child(5){transition-delay:.24s}
.reveal.is-visible .cards>*:nth-child(n+6){transition-delay:.28s}

/* troca de seção no painel admin — o navegador reinicia a animação sozinho
   sempre que o elemento sai de display:none (.hidden), então não precisa de
   JS nenhum pra "retocar" a classe a cada troca */
.view{animation:nitroViewIn .32s cubic-bezier(.2,.8,.2,1) both}
@keyframes nitroViewIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

@media(prefers-reduced-motion:reduce){
  body,body.nitro-leaving,.view{animation:none}
  .reveal,.reveal .cards>*{opacity:1!important;transform:none!important;transition:none!important}
}