/* Mr.DBA: camada de movimento (motion.css + motion.js)

   Regra de ouro: o conteúdo nasce visível. Só fica escondido à espera da
   coreografia quando o motion.js confirmou que pode animar e marcou o <html>
   com .mo-on. Sem JS, com "reduzir movimento" ligado ou dentro de um iframe
   (prévia do editor), nada é escondido e a página aparece pronta.

   Uso no HTML:
     data-rv              o elemento sobe e clareia ao entrar na tela (uma vez)
     data-rv="fade"       só clareia
     data-rv-group        no pai: os filhos data-rv entram em cascata
     data-play            cena que toca uma vez ao entrar na tela (.mo-play)
     data-play-at="0.6"   opcional: a cena espera o topo chegar a 60% da tela
     data-count="39"      número que conta até o valor
     data-stage           palco preso à tela, conduzido pela rolagem
     data-progress        régua que avança com a rolagem (--mo-p de 0 a 1);
                          cada [data-progress-step] ganha .mo-passou
     .mo-btn              botão: sobe no mouse, afunda no toque

   Uma curva e três durações para o site inteiro (tokens do design system). */

:root{
  --mo-ease: var(--ease-out, cubic-bezier(.22,1,.36,1));
  --mo-fast: 160ms;
  --mo-mid: 420ms;
  --mo-slow: 720ms;
  --mo-passo: 80ms;      /* intervalo da cascata */
  --mo-topo: 72px;       /* altura do cabeçalho fixo */
}

/* ---- Revelação por elemento ---- */
.mo-on [data-rv]{
  opacity:0;
  transform:translateY(20px);
  transition:opacity var(--mo-slow) var(--mo-ease), transform var(--mo-slow) var(--mo-ease);
  transition-delay:calc(var(--mo-i, 0) * var(--mo-passo));
}
.mo-on [data-rv="fade"]{transform:none}
.mo-on [data-rv].mo-in{opacity:1;transform:none}
/* depois que entrou, o atraso da cascata não pode atrasar o hover */
.mo-on [data-rv].mo-fim{transition-delay:0s}

/* trava de segurança: se algo falhar, tudo aparece */
.mo-all [data-rv]{opacity:1 !important;transform:none !important;transition:none !important}

/* ---- Resposta ao mouse e ao toque ---- */
.mo-btn{
  transition:transform var(--mo-fast) ease, box-shadow var(--mo-fast) ease, background-color var(--mo-fast) ease, border-color var(--mo-fast) ease;
  will-change:transform;
}
.mo-btn svg{transition:transform var(--mo-fast) ease}
@media (hover:hover){
  .mo-btn:hover{transform:translateY(-2px)}
  .mo-btn:hover svg.mo-seta, .mo-btn:hover .mo-seta svg{transform:translateX(3px)}
}
.mo-btn:active{transform:translateY(0) scale(.985)}

/* âncoras rolam em vez de saltar, e param abaixo do cabeçalho fixo */
.mo-on{scroll-behavior:smooth}
[id="form"],[id="teste"]{scroll-margin-top:calc(var(--mo-topo) + 12px)}

/* números que contam não empurram o texto ao lado */
[data-count]{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion:reduce){
  [data-rv]{opacity:1 !important;transform:none !important;transition:none !important}
  .mo-btn,.mo-btn svg{transition:none !important}
  .mo-btn:hover,.mo-btn:active{transform:none !important}
  html{scroll-behavior:auto !important}
}