/* =====================================================================
   kit/animations.css — sistema de movimento.

   Tres regras, sem excecao:
   1. Anima SO `transform` e `opacity`. As duas o navegador resolve na GPU
      sem recalcular layout. Animar width/height/top/margin forca reflow a
      cada quadro — e' de onde vem a sensacao de travado.
   2. Entrada acontece 1x. Nada fica em loop na tela, exceto indicador de
      progresso real (spinner de "salvando", skeleton de "carregando").
   3. Duracao e curva sempre por token (ver tokens.css).
   ===================================================================== */

/* ============================ KEYFRAMES ============================ */
@keyframes entrar-subindo { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes entrar-escala  { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes entrar-lateral { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }

@keyframes surgir-overlay { from { opacity: 0; } to { opacity: 1; } }
@keyframes sumir-overlay  { from { opacity: 1; } to { opacity: 0; } }
@keyframes subir-modal    { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes descer-modal   { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(10px) scale(.99); } }

/* "Isto acabou de mudar" — pulo curto, uma vez. */
@keyframes destacar { 0% { transform: scale(1); } 35% { transform: scale(1.14); } 100% { transform: scale(1); } }
/* Linha que chegou pelo polling: acende em verde e apaga. */
@keyframes acender-linha { 0% { background: var(--accent-soft); } 100% { background: transparent; } }
/* Saida de linha excluida: encolhe pra esquerda em vez de sumir num corte. */
@keyframes linha-sai { to { opacity: 0; transform: translateX(-14px) scale(.98); } }

/* Sinais de posicao que crescem em vez de simplesmente aparecer. */
@keyframes barra-entra    { to { transform: translateY(-50%) scaleY(1); } }
@keyframes tracinho-entra { to { transform: translateX(-50%) scaleX(1); } }
@keyframes sublinhado-entra { to { transform: scaleX(1); } }

/* Progresso real. Sao os UNICOS loops permitidos. */
@keyframes girar { to { transform: rotate(360deg); } }
@keyframes pulsar-ponto {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.82); }
}
@keyframes brilho-skeleton { to { transform: translateX(100%); } }

/* Erro: treme no lugar. Curto o suficiente pra ler como "nao deu", nao
   como enfeite. */
@keyframes tremer {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-3px); }
  40%, 60% { transform: translateX(3px); }
}

/* Aurora do fundo: deriva lenta e longa. E' fundo, nao conteudo — por
   isso e' a unica coisa que pode durar mais que .4s. */
@keyframes derivar-aurora {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2%, -1.5%, 0) scale(1.06); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

/* ======================= CLASSES DE ENTRADA =======================
   `both` mantem o estado inicial durante o atraso — sem isso o elemento
   aparece, pisca, e so depois anima. */
.anim-page-in { animation: entrar-subindo var(--dur-lenta) var(--ease-saida) both; }
.anim-escala  { animation: entrar-escala var(--dur-lenta) var(--ease-mola) both; }
.anim-lateral { animation: entrar-lateral var(--dur-base) var(--ease-saida) both; }

/* Fila (cascata). Aceita `--i` no filho (sem limite) e tambem funciona
   sem ele, via nth-child, ate 12 itens. */
.anim-stagger > * { animation: entrar-subindo var(--dur-lenta) var(--ease-saida) both; }
.anim-stagger > * { animation-delay: calc(var(--fila-passo) * var(--i, 0)); }
.anim-stagger > *:nth-child(1)  { --i: 0; }
.anim-stagger > *:nth-child(2)  { --i: 1; }
.anim-stagger > *:nth-child(3)  { --i: 2; }
.anim-stagger > *:nth-child(4)  { --i: 3; }
.anim-stagger > *:nth-child(5)  { --i: 4; }
.anim-stagger > *:nth-child(6)  { --i: 5; }
.anim-stagger > *:nth-child(7)  { --i: 6; }
.anim-stagger > *:nth-child(8)  { --i: 7; }
.anim-stagger > *:nth-child(9)  { --i: 8; }
.anim-stagger > *:nth-child(10) { --i: 9; }
.anim-stagger > *:nth-child(11) { --i: 10; }
.anim-stagger > *:nth-child(12) { --i: 11; }

/* Atraso avulso, pra encadear um bloco depois de uma fila. */
.anim-atraso-1 { animation-delay: .08s; }
.anim-atraso-2 { animation-delay: .14s; }
.anim-atraso-3 { animation-delay: .20s; }

/* ===================== SKELETON (carregando) =====================
   Skeleton no lugar de spinner generico: mostra a FORMA do que esta
   chegando, entao a tela nao "salta" quando o dado entra. */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  color: transparent !important;
}
.skeleton::after {
  content: "";
  position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .045), transparent);
  animation: brilho-skeleton 1.15s var(--ease-suave) infinite;
}

/* ===================== MENOS MOVIMENTO =====================
   Desliga tudo pra quem pediu no sistema. Cobre as animacoes deste
   arquivo E as declaradas no <style> de cada tela. O JS tem o espelho
   disso (NexiUI.MENOS_MOVIMENTO) — uma contagem feita em JS ignoraria
   a media query. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}