/* ============ WMS · SM PRO — movimento ============
   Uma curva só (--curva, saída exponencial). As transições de hover, foco e clique ficam junto de
   cada componente; aqui estão as barras e o esqueleto. Trocar de página não anima nada: é uma
   ferramenta de uso contínuo. O momento autoral é o do mapa (as ruas pousam uma a uma), em mapa.css.
   Os keyframes só têm «from»: o fim é sempre o estado normal do elemento. */

@keyframes entrar { from { opacity: 0; transform: translateY(8px); } }
@keyframes crescer-x { from { transform: scaleX(0); } }
@keyframes crescer-y { from { transform: scaleY(0); } }
@keyframes brilho { to { background-position: -200% 0, 0 0; } }
@keyframes pulso { 0% { transform: scale(1); opacity: .8; } 70%, 100% { transform: scale(2.6); opacity: 0; } }

/* ---------- Entrada: só o que aparece por um gesto (a rua de frente) e o cartão de entrada ---------- */
.login-cartao, .entra { animation: entrar 320ms var(--curva) backwards; }

/* ---------- Barras crescem até o valor ---------- */
.trilho .barra, .progresso > span { animation: crescer-x 700ms var(--curva) 120ms backwards; }
.coluna-barra { animation: crescer-y 700ms var(--curva) 120ms backwards; }

/* ---------- Ponto de alerta: o único laço da interface, lento ---------- */
.tom-alerta .sinal::after, .sinal.tom-alerta::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--c);
  animation: pulso 2.6s var(--curva) infinite;
}

/* ---------- Esqueleto de carregamento: entra com atraso para não piscar em resposta rápida ---------- */
.esqueleto {
  --brilho: linear-gradient(90deg, transparent 30%, color-mix(in oklab, var(--forte) 7%, transparent) 50%, transparent 70%);
  height: 192px; border: 1px solid var(--fio); border-radius: var(--raio);
  background: var(--brilho) 0 0 / 200% 100%, var(--placa);
  animation: entrar var(--medio) var(--curva) 140ms backwards, brilho 2.2s linear infinite;
}
.esqueleto.baixo { height: 64px; }
.esqueleto.tela { height: 100vh; border: 0; border-radius: 0; background: var(--brilho) 0 0 / 200% 100% var(--chao); animation: brilho 2.2s linear infinite; }

/* ---------- Quem pediu menos movimento não recebe nenhum ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}