/* ==========================================================================
   MOVIMENTO — FONTE: DS 4.0, secao "MOVIMENTO".

   Tres niveis, comutaveis (--mo em base.css). A lei continua valendo no
   PADRAO: nada entra em cena so para ser bonito. O nivel Expressivo e onde a
   entrada escalonada de bloco e permitida — e ele e uma escolha explicita.
   Toda duracao e derivada de --t1/--t2/--t3/--t4 pelo multiplicador --mo.

   DIFERENCA DESTE ARQUIVO PARA A FOLHA DO DS
   O DS troca de rota trocando `.rota.on`; o produto RECONSTROI a tela inteira
   a cada render — inclusive ao digitar na busca. Uma animacao de entrada presa
   ao elemento repetiria a cada tecla. Por isso ela e presa a classe `.entra`,
   que o desenhar() so poe quando a ROTA mudou de fato.
   ========================================================================== */

/* Cruza-fade de tema: so DURANTE a troca, nunca permanente.
   Declarar o atalho `transition` num seletor amplo ZERA as outras
   propriedades — foi assim que o cartao clicavel perdeu a transicao de
   `transform` e o hover passou a saltar. Nunca declarar o atalho aqui. */
html.trocando *, html.trocando *::before, html.trocando *::after {
  transition: background-color var(--t2) var(--suave),
              border-color     var(--t2) var(--suave),
              color            var(--t2) var(--suave),
              fill             var(--t2) var(--suave),
              stroke           var(--t2) var(--suave) !important;
}

/* ------------------------------------------------------ entrada de tela --
   A secura vinha de curso grande em tempo curto com a curva de estado. Agora:
   curso menor (6 px), tempo maior (--t4) e a curva de entrada, que desacelera
   longo e nao repica.

   `backwards`, nunca `forwards` com opacity:0 no elemento: se a animacao nao
   rodar — aba oculta, renderizador ocupado, politica do sistema —, o bloco
   fica no estado de repouso, que e VISIVEL. Conteudo nunca depende de
   animacao para existir. */
.pg__in.entra { animation: entra calc(var(--t4) * var(--mo)) var(--entra) backwards; }
@keyframes entra { from { opacity: 0; transform: translateY(6px); } }

html[data-m="s"] .pg__in.entra { animation: fade var(--t2) var(--suave) backwards; }
@keyframes fade { from { opacity: 0; } }

/* o cabecalho entra um pouco depois do corpo — da direcao a leitura */
.pg__in.entra > .cab,
.pg__in.entra > .heroi { animation: entra calc(var(--t4) * var(--mo)) var(--entra) backwards; }
html[data-m="p"] .pg__in.entra > .cab,
html[data-m="p"] .pg__in.entra > .heroi { animation-delay: 40ms; }

/* Expressivo: os blocos sobem escalonados. O container perde a animacao
   propria — dois movimentos empilhados leem como atraso, nao como ritmo. */
html[data-m="e"] .pg__in.entra { animation: none; }
html[data-m="e"] .pg__in.entra > * { animation: sobeBl calc(var(--t4) * var(--mo)) var(--entra) backwards; }
@keyframes sobeBl { from { opacity: 0; transform: translateY(10px); } }
html[data-m="e"] .pg__in.entra > *:nth-child(2) { animation-delay: 90ms; }
html[data-m="e"] .pg__in.entra > *:nth-child(3) { animation-delay: 170ms; }
html[data-m="e"] .pg__in.entra > *:nth-child(4) { animation-delay: 240ms; }
html[data-m="e"] .pg__in.entra > *:nth-child(n+5) { animation-delay: 300ms; }

/* ---------------------------------------------------------- dado cresce --
   A barra revela a PROPORCAO ao entrar; nao decora. So na entrada de rota —
   uma barra que recresce a cada filtro digitado vira pisca-pisca. */
.bh__f, .cresce { transform-origin: left center; }
html:not([data-m="s"]) .pg__in.entra .bh__f,
html:not([data-m="s"]) .pg__in.entra .cresce {
  animation: cresce calc(var(--t4) * var(--mo) * 1.4) var(--suave) backwards; animation-delay: 80ms;
}
@keyframes cresce { from { transform: scaleX(0); } }

/* a coluna do grafico sobe do eixo, uma depois da outra */
html:not([data-m="s"]) .pg__in.entra .gr__pilha,
html:not([data-m="s"]) .pg__in.entra .fd__b i {
  transform-origin: bottom center;
  animation: sobeB calc(var(--t4) * var(--mo)) var(--suave) backwards;
}
@keyframes sobeB { from { transform: scaleY(0); } }
html:not([data-m="s"]) .pg__in.entra .gr__col:nth-child(2) .gr__pilha,
html:not([data-m="s"]) .pg__in.entra .fd__d:nth-child(2) .fd__b i { animation-delay: 40ms; }
html:not([data-m="s"]) .pg__in.entra .gr__col:nth-child(3) .gr__pilha,
html:not([data-m="s"]) .pg__in.entra .fd__d:nth-child(3) .fd__b i { animation-delay: 80ms; }
html:not([data-m="s"]) .pg__in.entra .gr__col:nth-child(4) .gr__pilha,
html:not([data-m="s"]) .pg__in.entra .fd__d:nth-child(4) .fd__b i { animation-delay: 120ms; }
html:not([data-m="s"]) .pg__in.entra .gr__col:nth-child(5) .gr__pilha,
html:not([data-m="s"]) .pg__in.entra .fd__d:nth-child(5) .fd__b i { animation-delay: 160ms; }
html:not([data-m="s"]) .pg__in.entra .gr__col:nth-child(6) .gr__pilha,
html:not([data-m="s"]) .pg__in.entra .fd__d:nth-child(6) .fd__b i { animation-delay: 200ms; }
html:not([data-m="s"]) .pg__in.entra .gr__col:nth-child(n+7) .gr__pilha,
html:not([data-m="s"]) .pg__in.entra .fd__d:nth-child(n+7) .fd__b i { animation-delay: 240ms; }

/* itens da paleta escalonam so no Expressivo */
html[data-m="e"] .pal__l button { animation: fade calc(var(--t2) * var(--mo)) var(--ease) backwards; }

/* --------------------------------------------------------- linha de acao -
   as linhas que nao sao <tr> (agenda, fazer, alerta) seguem o mesmo relogio
   da linha de tabela: entra e sai na mesma duracao, sem assimetria.

   A lista era herdada do v4 e carregava dois nomes MORTOS — `.faixa__i`, que
   nunca existiu em peca nenhuma, e `.ag2__i`, da grade de agenda que saiu em
   13/08. No lugar entram as linhas vivas do calendario novo e o rodape com
   porta da Home: sao lista, entao seguem o relogio de lista.
   (`.hoje__mais` virou `.home__mais` em 15/08, quando a Home absorveu o Hoje —
   a classe morreu com a tela, e um nome morto aqui nao falha em lugar nenhum:
   a regra simplesmente deixa de casar e o movimento some sem sintoma.) */
.js-hov, .vence__i, .fazer__l, .alerta__l, .ent__i, .obj2__c, .home__mais {
  transition: background calc(var(--t1) * var(--mo)) var(--suave),
              color      calc(var(--t1) * var(--mo)) var(--suave);
}

@media (prefers-reduced-motion: reduce) {
  .pg__in.entra, .pg__in.entra > * { animation: none !important; opacity: 1 !important; transform: none !important; }
  .bh__f, .cresce, .gr__pilha, .fd__b i { animation: none !important; transform: none !important; }
  .cx--clic:hover { transform: none; }
}