/* Carregar após uiverse.css. Movimento com propósito e opção de redução. */
:root {
  --dur-rapida: 120ms;
  --dur-base: 200ms;
  --dur-lenta: 320ms;
  --ease-sair: cubic-bezier(.2, .8, .2, 1);
}

/* Escalonamento sem style inline (a CSP o bloqueia); limite de 400 ms na lista.
   --i pode ser personalizado em outra regra CSS. */
:where(.entra:nth-child(n + 2)) { --i: 1; }
:where(.entra:nth-child(n + 3)) { --i: 2; }
:where(.entra:nth-child(n + 4)) { --i: 3; }
:where(.entra:nth-child(n + 5)) { --i: 4; }
:where(.entra:nth-child(n + 6)) { --i: 5; }
:where(.entra:nth-child(n + 7)) { --i: 6; }
:where(.entra:nth-child(n + 8)) { --i: 7; }
:where(.entra:nth-child(n + 9)) { --i: 8; }
/* backwards libera o transform para o hover ao terminar. */
.entra {
  animation: crm-entrar var(--dur-lenta) var(--ease-sair) backwards;
  animation-delay: calc(var(--i, 0) * 50ms);
}
@keyframes crm-entrar {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

:where(.cartao, .botao, .painel, .contagens-orgaos__cartao, .email-linha,
       .navegacao__link, .segmentos__item, .aba, .abas__item,
       input, select, textarea) {
  transition: color var(--dur-rapida) var(--ease-sair),
    background-color var(--dur-rapida) var(--ease-sair),
    border-color var(--dur-rapida) var(--ease-sair),
    box-shadow var(--dur-base) var(--ease-sair),
    transform var(--dur-base) var(--ease-sair);
}
:where(input, select, textarea):focus-visible { border-color: var(--accent); }

/* Para ver os 120 ms completos: hx-swap="… swap:120ms settle:120ms". */
.htmx-swapping { opacity: 0; transition: opacity var(--dur-rapida) var(--ease-sair); }
.htmx-settling { animation: crm-assentar var(--dur-rapida) var(--ease-sair); }
@keyframes crm-assentar { from { opacity: 0; } to { opacity: 1; } }

/* Independe de inserir um indicador em cada formulário ou fragmento HTMX. */
body:has(.htmx-request)::after, body.htmx-request::after {
  content: "";
  position: fixed;
  z-index: 90;
  top: 0;
  left: 0;
  width: 30%;
  height: 2px;
  background: var(--accent);
  pointer-events: none;
  animation: crm-requisicao 1.1s linear infinite;
}
@keyframes crm-requisicao {
  from { transform: translateX(-100%); }
  to { transform: translateX(334%); }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-rapida: 0ms; --dur-base: 0ms; --dur-lenta: 0ms; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .entra, .htmx-swapping, .htmx-settling { opacity: 1; }
  .entra, .cartao:hover, .cartao:focus-within,
  .email-linha:hover,
  .tabela tbody tr:hover, .tabela tbody tr:focus-within,
  .botao:active:not(:disabled) { transform: none !important; }
  body:has(.htmx-request)::after, body.htmx-request::after { width: 100%; transform: none; }
  /* Sem contagem animada; fechamento e pausa continuam sob controle do JS. */
  .balao__progresso { display: none; }
}