/*
 * MOVIMENTO — entrada suave do conteúdo e micro-transições.
 *
 * Tudo vive dentro de `screen and (prefers-reduced-motion: no-preference)`:
 * quem pede menos movimento (acessibilidade) não recebe NENHUMA animação, e a
 * impressão nunca começa com o conteúdo invisível.
 *
 * As animações re-disparam a cada navegação do Turbo Drive — o <main> é
 * recriado e os filhos entram de novo, dando a sensação de transição entre
 * páginas sem JS. Animamos só o conteúdo (.app-container), nunca a sidebar/
 * topbar, para o chrome não piscar a cada visita.
 */

@media screen and (prefers-reduced-motion: no-preference) {
  /* Revelação escalonada dos blocos de topo do conteúdo: cada filho direto do
     container entra subindo e aparecendo, com um atraso curto em cascata.
     Curto de propósito (≤ ~0,2s no total) para nunca parecer lento. */
  @keyframes block-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .app-container > * {
    animation: block-in 0.34s var(--ease-out) both;
  }

  .app-container > *:nth-child(1) { animation-delay: 0.02s; }
  .app-container > *:nth-child(2) { animation-delay: 0.06s; }
  .app-container > *:nth-child(3) { animation-delay: 0.10s; }
  .app-container > *:nth-child(4) { animation-delay: 0.14s; }
  .app-container > *:nth-child(n+5) { animation-delay: 0.16s; }

  /* Scrim do modal/lightbox: fade de entrada. */
  @keyframes overlay-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  .modal,
  .lightbox {
    animation: overlay-in 0.15s ease both;
  }

  /* Caixa do modal: surge com leve subida + escala (dá foco ao diálogo). */
  @keyframes box-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }

  .modal__box {
    animation: box-in 0.18s var(--ease-out) both;
  }

  /* Menus flutuantes (dropdown, painel de notificações): surgem ao abrir.
     Ao remover o atributo [hidden] o elemento entra no fluxo e a animação
     dispara do zero. */
  @keyframes pop-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .dropdown__menu,
  .notif__panel {
    animation: pop-in 0.14s var(--ease-out) both;
  }
}

/* Movimento reduzido: além das entradas (já fora do bloco no-preference acima),
   neutraliza os deslocamentos de posição no hover/active. Quem pede menos
   movimento mantém o realce (sombra/borda) mas o card/botão não "salta". */
@media (prefers-reduced-motion: reduce) {
  .kpi--link:hover,
  .btn:not(:disabled):not([disabled]):active {
    transform: none;
  }
}