/* static/css/movimento.css
 * ============================================================================
 * MOVIMENTO — camada global de transicoes e entradas.
 * ============================================================================
 *
 * Carregar SEMPRE logo depois de tokens.css e ANTES do CSS da tela:
 *     tokens.css  ->  movimento.css  ->  shell.css  ->  <tela>.css
 * Assim a tela pode sobrescrever uma transicao especifica sem !important.
 *
 * O QUE MORA AQUI: o comportamento que vale para o sistema inteiro — estados
 * interativos, a entrada dos blocos ao carregar, e a classe utilitaria de
 * revelacao usada pelo JS. Movimento de UM componente mora no CSS dele.
 *
 * O QUE NAO MORA AQUI: `.sidebar*`. O <style> de templates/_sidebar.html fica
 * dentro do <body> e vence qualquer <link> do <head> por ordem de documento —
 * uma regra de sidebar escrita aqui sumiria sem avisar. Regra do shell.css.
 *
 * TRES DECISOES QUE EXPLICAM O ARQUIVO INTEIRO:
 *
 * 1. NUNCA `transition: all`. Ele transiciona tambem o que voce nao previu —
 *    `width` de uma celula, `height` de um bloco — e a conta chega como
 *    engasgo. Toda regra aqui LISTA as propriedades.
 *
 * 2. So `opacity`, `transform`, cor, borda e sombra. Animar `height`, `width`,
 *    `margin` ou `top` obriga o navegador a recalcular layout a cada quadro.
 *    E o oposto do que este PR foi resolver.
 *
 * 3. `prefers-reduced-motion` ja esta resolvido nos TOKENS: as duracoes viram
 *    1ms e o deslocamento vira 0. Nenhuma regra deste arquivo precisa repetir a
 *    media query — e nenhuma deve, porque a que esquecesse passaria batida.
 */

/* ---------------------------------------------------------------------------
 * 1. ESTADOS INTERATIVOS
 * O maior ganho por linha do arquivo: tudo que reage ao mouse ou ao teclado
 * passa a TROCAR de estado em vez de pular para ele.
 * ------------------------------------------------------------------------- */
a,
button,
summary,
input,
select,
textarea,
/* LABEL entra na lista porque neste sistema ela nao e legenda, e ALVO: clicar
   nela marca o controle. Sao tres telas onde a label e a propria area clicavel
   — o destinatario em escolha_destinatarios.css, a opcao de recorte em
   configuracoes.css e o anexo em index.css — e todas as tres trocavam de fundo
   de um quadro para o outro, porque a lista so conhecia `a` e `button`. */
label,
.btn,
.btn-primary,
.atalho-btn,
.dash-card,
.enviar-card,
.modelo-card,
.msg-card,
.chip,
.status,
.status-mes,
.aba,
.tab,
.paginacao a,
.sel-toggle,
.btn-limpar-filtros {
    transition: background-color var(--cd-dur-1) var(--cd-ease-out),
                border-color     var(--cd-dur-1) var(--cd-ease-out),
                color            var(--cd-dur-1) var(--cd-ease-out),
                box-shadow       var(--cd-dur-1) var(--cd-ease-out),
                opacity          var(--cd-dur-1) var(--cd-ease-out),
                transform        var(--cd-dur-1) var(--cd-ease-out);
}

/* Linha de tabela: SO a cor. Nada de transform — a linha e larga, e mover 1px
   uma faixa de 1200px chama muito mais atencao do que mover um cartao.

   As duas LINHAS-DIV entram aqui, e nao na lista de cima, pela mesma razao:
   sao linhas largas. Duas listas do sistema sao montadas com `div` em vez de
   `<tr>` — os clientes do lote (editar_lote.js:104) e a linha de pendencias — e
   por isso o seletor `tbody tr` nunca as alcancou: nao ha tabela em volta
   delas. O realce de hover das duas pulava enquanto o das tabelas fazia a
   transicao, na mesma tela. */
tbody tr,
.lote-linha,
.lote-row {
    transition: background-color var(--cd-dur-1) var(--cd-ease-out);
}

/* PRESSIONADO. O botao afunda um fio: e a confirmacao tatil de que o clique
   pegou, antes mesmo de a tela responder. 0.98 e o limite — abaixo disso o
   texto do botao borra durante a escala. */
button:active,
.btn:active,
.btn-primary:active,
.atalho-btn:active,
.status-mes:active {
    transform: scale(.98);
}

/* Alvos GRANDES e clicaveis sobem um pixel em vez de encolher: cartao que
   encolhe parece defeito de renderizacao; cartao que levanta parece
   selecionavel. */
.dash-card:hover,
.atalho-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(14, 27, 46, .08);
}

/* FOCO DE TECLADO. O anel precisa SURGIR: aparecendo instantaneamente ele pisca
   e parece erro; com 150ms le-se como "o foco veio parar aqui". */
:focus-visible {
    transition: box-shadow var(--cd-dur-1) var(--cd-ease-out),
                border-color var(--cd-dur-1) var(--cd-ease-out);
}

/* ---------------------------------------------------------------------------
 * 2. ENTRADA DO CONTEUDO
 * ------------------------------------------------------------------------- */
@keyframes cd-entrar {
    from { opacity: 0; transform: translateY(var(--cd-shift)); }
    to   { opacity: 1; transform: none; }
}

/* Os blocos do painel entram escalonados. A SIDEBAR NAO ENTRA — ela e a parte
   estavel da tela, e anima-la a cada navegacao daria a sensacao de recarregar o
   aplicativo inteiro a cada clique. Por isso o seletor comeca no .main-panel.

   `both` segura o estado inicial antes de a animacao comecar; sem ele o bloco
   pisca visivel por um quadro e depois some para entrar. */
.main-panel > * {
    animation: cd-entrar var(--cd-dur-2) var(--cd-ease-out) both;
}

/* O escalonamento para no quarto: a partir dai o olho ja nao le "um depois do
   outro", le "demorou". */
.main-panel > *:nth-child(2)    { animation-delay: 40ms; }
.main-panel > *:nth-child(3)    { animation-delay: 80ms; }
.main-panel > *:nth-child(4)    { animation-delay: 120ms; }
.main-panel > *:nth-child(n+5)  { animation-delay: 160ms; }

/* Os KPIs entram um a um DENTRO do bloco que ja esta entrando: a leitura e da
   esquerda para a direita, e o atraso acompanha. */
.dashboard-cards > *   { animation: cd-entrar var(--cd-dur-2) var(--cd-ease-out) both; }
.dashboard-cards > *:nth-child(1) { animation-delay: 60ms; }
.dashboard-cards > *:nth-child(2) { animation-delay: 90ms; }
.dashboard-cards > *:nth-child(3) { animation-delay: 120ms; }

/* LINHA DE TABELA NAO ANIMA, e a ausencia e deliberada: com 160 clientes, 160
   entradas escalonadas viram chuvisco e a tabela demora a ficar legivel. A
   tabela entra como bloco, junto do cartao dela. */

/* ---------------------------------------------------------------------------
 * 3. REVELACAO SOB COMANDO DO JS
 * `display` nao e animavel: quando o JS troca de `none` para `block`, nenhuma
 * transicao roda. A saida e nao mexer no `display` — o JS continua fazendo o
 * que fazia — e ADICIONAR esta classe logo depois, para o CSS animar a chegada.
 * ------------------------------------------------------------------------- */
.cd-reveal {
    animation: cd-entrar var(--cd-dur-2) var(--cd-ease-out) both;
}

/* Mensagens de flash: entram como qualquer conteudo. */
.flashes li {
    animation: cd-entrar var(--cd-dur-2) var(--cd-ease-out) both;
}

/* ---------------------------------------------------------------------------
 * 4. MODAL
 * O unico lugar com `will-change`, e so porque a caixa anima `transform` sobre
 * um fundo translucido — o caso em que a promocao a camada propria paga. Em
 * massa, `will-change` gasta memoria e piora o que deveria melhorar.
 * ------------------------------------------------------------------------- */
.modal {
    animation: cd-fundo var(--cd-dur-2) var(--cd-ease-out) both;
}

@keyframes cd-fundo {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.modal-content {
    will-change: transform, opacity;
    animation: cd-modal var(--cd-dur-3) var(--cd-ease-out) both;
}

@keyframes cd-modal {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------
 * 5. CONFIRMACAO DE ACAO
 * Um pulso curto onde a acao ACONTECEU. Serve para o clique que muda um dado
 * sem sair da tela — sem ele, a pessoa clica, o valor muda no canto e ela nao
 * tem certeza de que foi ela quem fez.
 * ------------------------------------------------------------------------- */
@keyframes cd-confirma {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.06); }
    100% { transform: scale(1); }
}

.cd-trocou {
    animation: cd-confirma var(--cd-dur-2) var(--cd-ease-out);
}

/* ---------------------------------------------------------------------------
 * 6. ENTRADA POR ROLAGEM (so a landing)
 * O estado inicial vive numa classe dedicada, e nao em `[data-cd-anim]` puro:
 * se o JS nao carregar, nada fica invisivel para sempre. O observador ADICIONA
 * `cd-visivel`; sem ele, o conteudo simplesmente ja esta la.
 * ------------------------------------------------------------------------- */
[data-cd-anim].cd-armado {
    opacity: 0;
    transform: translateY(10px);
}

[data-cd-anim].cd-armado.cd-visivel {
    opacity: 1;
    transform: none;
    transition: opacity var(--cd-dur-3) var(--cd-ease-out),
                transform var(--cd-dur-3) var(--cd-ease-out);
}
