/* Animações de entrada das páginas migradas (módulo compartilhado).
   Os movimentos são cópia dos @keyframes que a página antiga gerava para cada elemento
   (lidos dos backups publicado.html), com a mesma curva que ela usava para cada tipo.

   Como usar no HTML (o script animacoes.v2.js faz o resto):
     data-animacao="slide|zoom|bounce|fade|fold|roll|shake"   anima o próprio elemento
     data-animacao-fundo="..."   anima só o ::before do elemento (a caixa de fundo), sem mexer no conteúdo.
                                 Um elemento usa um OU outro.
     data-duracao="800"          em ms (padrão 1000)
     data-atraso="300"           em ms (padrão 0)
     data-origem="top"           o "data-transformation-origin" da página antiga, copiado como está:
                                 slide: top = sobe de 120px abaixo, bottom = desce de 120px acima,
                                        left = vem 200px da direita, right = vem 200px da esquerda, center = só aparece
                                 fold:  center, left (gira presa à direita), right (gira presa à esquerda)
                                 roll:  center, left
                                 zoom, bounce, fade, shake: vira o transform-origin (padrão center)
     data-curva="ease-out"       opcional; sem ele vale a curva da página antiga para o tipo
     data-gatilho=".seletor"     opcional; começa quando o ancestral indicado entra na tela (ex.: itens de FAQ)
     data-repetir                opcional; repete sempre que o elemento volta para a tela.
                                 Sem ele toca uma vez, como na página antiga ("show").

   Para não "piscar" na abertura (a página aparecer inteira, sumir e depois animar, em conexão lenta),
   cada página põe este trecho no <head>, ANTES dos <link> de CSS:
     <script>(function(h){if(!('IntersectionObserver' in window)||!window.matchMedia||!matchMedia('(prefers-reduced-motion: no-preference)').matches)return;h.classList.add('animacao-js');setTimeout(function(){if(!window.__animacoes){window.__animacoesAtrasou=true;h.classList.remove('animacao-js');}},3000);})(document.documentElement);</script>
   Ele põe a classe animacao-js no <html>, que esconde os elementos marcados desde a primeira pintura.
   Quando o script começa, ele tira essa classe e passa a cuidar de cada elemento.
   Se o script não começar em 3 s (arquivo lento ou com erro), a classe sai sozinha e tudo aparece;
   quando o script chegar depois disso, o que já está na tela fica como está (não some de novo) e só
   o que ainda vai entrar na tela anima. Sem o trecho, funciona como antes: o script esconde tudo quando começa.

   Classes que o script põe e que o CSS da página pode usar: animacao-espera / animacao-ativa
   (no próprio elemento) e animacao-espera-fundo / animacao-ativa-fundo (quando anima o ::before).
   Antes do script começar, o estado "esperando" é ".animacao-js [data-animacao]" e ".animacao-js [data-animacao-fundo]".
   Ex.: caixa só com borda deixa a borda no elemento e só a passa para o ::before durante a animação
   (e nesses dois estados de espera).
   Enquanto anima, o elemento sem z-index recebe z-index 1 (fica por cima da seção seguinte, como antes).

   Sem JavaScript, na impressão ou com "reduzir movimento" ligado no aparelho, nada fica escondido nem se mexe. */

@media screen and (prefers-reduced-motion: no-preference) {
  /* esperando o script começar (classe do <html> posta pelo trecho do <head>) */
  .animacao-js [data-animacao],
  .animacao-js [data-animacao-fundo]::before,
  /* esperando entrar na tela (classe posta pelo script, só depois que ele começou) */
  .animacao-espera,
  .animacao-espera-fundo::before { opacity: 0 !important; }

  .animacao-ativa,
  .animacao-ativa-fundo::before {
    animation-name: var(--animacao-nome);
    animation-duration: var(--animacao-duracao, 1000ms);
    animation-timing-function: var(--animacao-curva, ease);
    animation-delay: var(--animacao-atraso, 0ms);
    animation-iteration-count: 1;
    animation-fill-mode: both;
    transform-origin: var(--animacao-origem, center);
  }
}

/* --animacao-opacidade = opacidade normal do elemento (a página antiga fazia o mesmo: 0,8 num elemento com 80%) */
@keyframes animacao-slide-top {
  0% { transform: translateY(120px); opacity: 0; }
  60% { opacity: var(--animacao-opacidade, 1); }
  100% { transform: translateY(0); }
}
@keyframes animacao-slide-bottom {
  0% { transform: translateY(-120px); opacity: 0; }
  60% { opacity: var(--animacao-opacidade, 1); }
  100% { transform: translateY(0); }
}
@keyframes animacao-slide-left {
  0% { transform: translateX(200px); opacity: 0; }
  60% { opacity: var(--animacao-opacidade, 1); }
  100% { transform: translateX(0); }
}
@keyframes animacao-slide-right {
  0% { transform: translateX(-200px); opacity: 0; }
  60% { opacity: var(--animacao-opacidade, 1); }
  100% { transform: translateX(0); }
}
@keyframes animacao-slide-center {
  0% { transform: translateX(0); opacity: 0; }
  60% { opacity: var(--animacao-opacidade, 1); }
  100% { transform: translateX(0); }
}
@keyframes animacao-zoom {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: var(--animacao-opacidade, 1); }
}
@keyframes animacao-bounce {
  0% { transform: scale(0); animation-timing-function: ease-in; opacity: 0; }
  38% { transform: scale(1); animation-timing-function: ease-out; opacity: var(--animacao-opacidade, 1); }
  55% { transform: scale(.7); animation-timing-function: ease-in; }
  72% { transform: scale(1); animation-timing-function: ease-out; }
  81% { transform: scale(.84); animation-timing-function: ease-in; }
  89% { transform: scale(1); animation-timing-function: ease-out; }
  95% { transform: scale(.95); animation-timing-function: ease-in; }
  100% { transform: scale(1); animation-timing-function: ease-out; }
}
@keyframes animacao-fade {
  0% { opacity: 0; }
  100% { opacity: var(--animacao-opacidade, 1); }
}
@keyframes animacao-fold-center {
  0% { transform: rotateY(-100deg); transform-origin: center; opacity: 0; }
  100% { transform: rotateY(0); transform-origin: center; opacity: var(--animacao-opacidade, 1); }
}
@keyframes animacao-fold-left {
  0% { transform: rotateY(-100deg); transform-origin: right; opacity: 0; }
  100% { transform: rotateY(0); transform-origin: right; opacity: var(--animacao-opacidade, 1); }
}
@keyframes animacao-fold-right {
  0% { transform: rotateY(100deg); transform-origin: left; opacity: 0; }
  100% { transform: rotateY(0); transform-origin: left; opacity: var(--animacao-opacidade, 1); }
}
@keyframes animacao-roll-center {
  0% { transform: scale(0) rotate(270deg); opacity: 0; }
  100% { transform: scale(1) rotate(0deg); opacity: var(--animacao-opacidade, 1); }
}
@keyframes animacao-roll-left {
  0% { transform: translateX(200px) rotate(270deg); opacity: 0; }
  100% { transform: translateX(0) rotate(0deg); opacity: var(--animacao-opacidade, 1); }
}
@keyframes animacao-shake {
  0%, 100% { transform: rotate(0deg); transform-origin: 50% 50%; }
  0%, 5% { opacity: 0; }
  10% { transform: rotate(2deg); opacity: var(--animacao-opacidade, 1); }
  20%, 40%, 60% { transform: rotate(-4deg); }
  30%, 50%, 70% { transform: rotate(4deg); }
  80% { transform: rotate(-2deg); }
  90% { transform: rotate(2deg); }
}