/*
 * Bailder — vocabulário canônico de animações.
 *
 * 6 animações (5 keyframes + 1 JS-driven). Use SEMPRE estas, não invente
 * novas a cada componente. Cor padrão por animação reflete o significado
 * semântico (ver docs/design-system.md), mas pode ser sobrescrita via
 * --pulse-color / --glow-color inline.
 *
 * Convenção: as classes `is-*` ligam a animação. Stimulus controllers
 * (pulse_controller, bump_controller) gerenciam o toggle automaticamente.
 *
 * NOTA: classes scoped antigas (ex `.archlive-node__count.is-bumped`)
 * continuam coexistindo — `is-bumped` (passado) vs `is-bumping` (canônico
 * novo) são intencionalmente nomes distintos pra não atropelar o que já
 * funciona no arch_live.
 */

/* ---------------------------------------------------------------
 * PULSE — algo está acontecendo agora (radial halo cyan default).
 * Use em: nodes ativos no war room, indicadores "ao vivo", spinners
 * de status. NÃO use em texto estático.
 * --------------------------------------------------------------- */
@keyframes bailder-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 var(--pulse-color, var(--neon-cyan));
    opacity: 1;
  }
  50% {
    box-shadow: 0 0 0 12px rgba(0, 229, 255, 0);
    opacity: 0.85;
  }
}
.is-pulsing {
  animation: bailder-pulse 1.6s ease-in-out infinite;
}

/* ---------------------------------------------------------------
 * BUMP — contador subiu (scale up rápido e volta).
 * Use em: KPIs, counters, badges quando o valor numérico muda.
 * Disparado automaticamente pelo bump_controller via MutationObserver.
 * --------------------------------------------------------------- */
@keyframes bailder-bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}
.is-bumping {
  animation: bailder-bump var(--motion-fast) ease-out;
}

/* ---------------------------------------------------------------
 * ORB — evento atravessando flow (JS-driven, SVG <circle> animado).
 * NÃO é keyframe — ver arch_live_controller#spawnOrb. Documentado
 * aqui pra fechar o vocabulário das 6 animações canônicas.
 * --------------------------------------------------------------- */

/* ---------------------------------------------------------------
 * GLOW — destaque crescente (amber default, "olha aqui").
 * Use em: dados que acabaram de persistir, KPIs em alerta suave,
 * elementos com afford. de "tem coisa nova". NÃO empilhar com pulse.
 * --------------------------------------------------------------- */
@keyframes bailder-glow {
  0%, 100% { filter: drop-shadow(0 0 6px var(--glow-color, var(--neon-amber))); }
  50%      { filter: drop-shadow(0 0 16px var(--glow-color, var(--neon-amber))); }
}
.is-glowing {
  animation: bailder-glow 2.2s ease-in-out infinite;
}

/* ---------------------------------------------------------------
 * SHAKE — erro (one-shot, horizontal).
 * Use em: forms com falha de validação, blocos que falharam guard
 * (tier vermelho), confirmações negadas. NÃO use em loop.
 * --------------------------------------------------------------- */
@keyframes bailder-shake {
  0%, 100%      { transform: translateX(0); }
  20%, 60%      { transform: translateX(-4px); }
  40%, 80%      { transform: translateX(4px); }
}
.is-shaking {
  animation: bailder-shake 360ms ease-in-out;
}

/* ---------------------------------------------------------------
 * FADE-IN — nova entidade aparecendo (one-shot, sobe 4px).
 * Use em: novos cards de subagent, items em listas live, turbo
 * streams append. Mais sutil que o `reveal` da homepage.
 * --------------------------------------------------------------- */
@keyframes bailder-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.is-fading-in {
  animation: bailder-fade-in var(--motion-base) ease-out;
}

/* Respeita prefers-reduced-motion — application.css já cobre via
 * regra global, mas reforçamos aqui caso alguém remova de lá. */
@media (prefers-reduced-motion: reduce) {
  .is-pulsing,
  .is-bumping,
  .is-glowing,
  .is-shaking,
  .is-fading-in {
    animation: none !important;
  }
}
