/* ===== animations.css — @keyframes (animacoes) =====
   Gerado por tools/split-css-modules.mjs (Fase B-CSS). Nao editar a divisao manualmente sem
   reconferir a cascata. Ver VaultBrain/Brain/Padroes/Padroes CSS.md ===== */
@keyframes deck-team-glow {
  0% {
    box-shadow:
      0 0 8px rgba(var(--gold-rgb), 0.4),
      0 0 14px rgba(var(--gold-rgb), 0.15),
      inset 0 0 4px rgba(var(--gold-rgb), 0.1);
  }
  100% {
    box-shadow:
      0 0 14px rgba(var(--gold-rgb), 0.7),
      0 0 28px rgba(var(--gold-rgb), 0.3),
      inset 0 0 8px rgba(var(--gold-rgb), 0.2);
  }
}
@keyframes pos-breathe {
  0%,
  100% {
    transform: scaleY(1) scaleX(1);
  }
  50% {
    transform: scaleY(1.03) scaleX(1.01);
  }
}
@keyframes pulse-cell {
  from {
    background: rgba(190, 150, 20, 0.06);
    outline-color: rgba(160, 120, 10, 0.55);
    box-shadow: inset 0 0 6px rgba(160, 120, 10, 0.14);
  }
  to {
    background: rgba(190, 150, 20, 0.18);
    outline-color: rgba(180, 140, 15, 0.95);
    box-shadow: inset 0 0 12px rgba(180, 140, 15, 0.3);
  }
}
@keyframes rage-pulse {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.15);
  }
}
@keyframes floatUp {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-40px);
  }
}
@keyframes particle-fly {
  from {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  to {
    opacity: 0;
    transform: var(--tx) scale(0);
  }
}
@keyframes ring-expand {
  from {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  to {
    transform: translate(-50%, -50%) scale(6);
    opacity: 0;
  }
}
@keyframes aoe-expand {
  0% {
    transform: translate(-50%, -50%) scale(0.05);
    opacity: 0.95;
  }
  70% {
    opacity: 0.7;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}
@keyframes slime-pulse {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.3);
  }
}
@keyframes monkey-spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) rotate(180deg) scale(1.4);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg) scale(1);
  }
}
@keyframes beam-fade {
  from {
    opacity: 0.9;
  }
  to {
    opacity: 0;
  }
}
@keyframes coconut-spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(720deg);
  }
}
@keyframes rage-banner-anim {
  from {
    opacity: 0.8;
  }
  to {
    opacity: 1;
  }
}
@keyframes quake-shake {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(-5px, 3px);
  }
  40% {
    transform: translate(5px, -3px);
  }
  60% {
    transform: translate(-4px, 2px);
  }
  80% {
    transform: translate(3px, -2px);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes card-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
@keyframes deck-soul-spin {
  to { transform: rotate(360deg); }
}
@keyframes btn-glow {
  0%,
  100% {
    box-shadow:
      0 0 12px rgba(var(--accent-rgb), 0.3),
      inset 0 1px 1px rgba(var(--white-rgb), 0.15);
  }
  50% {
    box-shadow:
      0 0 28px rgba(var(--accent-rgb), 0.6),
      0 0 6px rgba(var(--accent-rgb), 0.15) inset;
  }
}
@keyframes hp-danger {
  from {
    opacity: 1;
    box-shadow: none;
  }
  to {
    opacity: 0.6;
    box-shadow:
      0 0 6px var(--red),
      0 0 2px var(--red) inset;
  }
}
@keyframes floatUp {
  0% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-48px) scale(1.1);
  }
}
@keyframes trophy-pop {
  0% {
    transform: scale(0) rotate(-15deg);
    opacity: 0;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}
@keyframes title-glow {
  from {
    text-shadow: 0 0 12px currentColor;
  }
  to {
    text-shadow:
      0 0 30px currentColor,
      0 0 60px rgba(var(--white-rgb), 0.08);
  }
}
@keyframes confetti-fall {
  0% {
    opacity: 1;
    transform: translate(var(--sx, 0), var(--sy, -120px)) rotate(0deg);
  }
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(var(--ex, 0), 650px) rotate(var(--rot, 360deg));
  }
}
@keyframes screen-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes trophyBump {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes _walf-pulse {
  from {
    opacity: 0.6;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1.15);
  }
}
@keyframes _rbox-flash-anim {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes curse-rot {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes curse-rot-rev {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}
@keyframes fenix-flame-flicker {
  0%,
  100% {
    opacity: 0.85;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.12);
  }
}
@keyframes fenix-wings-flap {
  0%,
  100% {
    transform: translate(-50%, -50%) scaleX(1);
  }
  50% {
    transform: translate(-50%, -50%) scaleX(0.9);
  }
}
@keyframes pick-snd-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes redeemFloat {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-6px) scale(1.05);
  }
}
@keyframes configSpin {
  0% {
    transform: rotate(0deg);
  }
  70% {
    transform: rotate(200deg);
  }
  100% {
    transform: rotate(180deg);
  }
}
@keyframes rboxCosmicPulse {
  from {
    box-shadow:
      0 0 40px rgba(var(--white-rgb), 0.15),
      0 8px 32px rgba(var(--black-rgb), 0.8);
  }
  to {
    box-shadow:
      0 0 80px rgba(200, 180, 255, 0.45),
      0 0 120px rgba(150, 100, 255, 0.2),
      0 8px 32px rgba(var(--black-rgb), 0.8);
  }
}
@keyframes bomb-crater {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.3);
  }
  25% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.6);
  }
  80% {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(1.8);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2);
  }
}
@keyframes battle-flash-anim {
  0% {
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes unit-disintegrate {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  30% {
    transform: scale(1.12) rotate(4deg);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.5) rotate(-6deg);
    opacity: 0;
  }
}
@keyframes frag-flash {
  0% {
    opacity: 1;
    transform: scale(1.4);
  }
  100% {
    opacity: 0;
    transform: scale(0.6);
  }
}
@keyframes heartPulse {
  from {
    transform: translate(-50%, -50%) scale(0.9);
  }
  to {
    transform: translate(-50%, -50%) scale(1.25);
  }
}
@keyframes ldot {
  0%,
  80%,
  100% {
    transform: scale(0.5);
    opacity: 0.3;
  }
  40% {
    transform: scale(1.1);
    opacity: 1;
  }
}

/* Partículas decorativas de almas no header */
@keyframes sb-particle-float {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.5;
  }
  50% {
    transform: translateY(-8px) scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 0.5;
  }
}
@keyframes boss-pulse {
  /* NAO animar transform: .is-boss-unit fica no elemento posicionado por positionUnit
     (transform: translate). Animar transform aqui sobrescreveria a posicao e jogaria o boss
     para o canto (0,0) = "invisivel". Pulsa so a opacidade; o brilho vem do filter da classe. */
  0% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}
@keyframes energy-bump-anim {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.12);
  }
  100% {
    transform: scale(1);
  }
}

/* Fundir button orbit dots — CONTORNAM A BORDA do botao (retangulo), nao o icone.
   Extents = metade da caixa de padding do #sbv-fusion (img 68 + padding 3px 6px = 80x74 -> 40x37),
   pra as bolinhas andarem EM CIMA do contorno do quadro, nao dentro. GPU via transform. */
@keyframes orbitDot1 {
  0% {
    transform: translate(-50%, -50%) translate(-40px, -37px);
  }
  25% {
    transform: translate(-50%, -50%) translate(40px, -37px);
  }
  50% {
    transform: translate(-50%, -50%) translate(40px, 37px);
  }
  75% {
    transform: translate(-50%, -50%) translate(-40px, 37px);
  }
  100% {
    transform: translate(-50%, -50%) translate(-40px, -37px);
  }
}
@keyframes orbitDot2 {
  0% {
    transform: translate(-50%, -50%) translate(40px, 37px);
  }
  25% {
    transform: translate(-50%, -50%) translate(-40px, 37px);
  }
  50% {
    transform: translate(-50%, -50%) translate(-40px, -37px);
  }
  75% {
    transform: translate(-50%, -50%) translate(40px, -37px);
  }
  100% {
    transform: translate(-50%, -50%) translate(40px, 37px);
  }
}

@keyframes tapBlink {
  0%,
  100% {
    opacity: 0.55;
  }
  50% {
    opacity: 1;
  }
}
@keyframes hedge-roll-cw {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes hedge-roll-ccw {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

@keyframes quest-badge-pulse {
  0%,
  100% {
    box-shadow:
      0 0 6px #b06aff,
      0 0 0 0 rgba(var(--purple-rgb), 0.7);
  }
  50% {
    box-shadow:
      0 0 10px #b06aff,
      0 0 0 5px rgba(var(--purple-rgb), 0);
  }
}
@keyframes quest-claim-pulse {
  0%,
  100% {
    box-shadow:
      0 0 10px rgba(var(--purple-rgb), 0.5),
      0 0 0 0 rgba(var(--purple-rgb), 0.5);
  }
  50% {
    box-shadow:
      0 0 22px rgba(var(--purple-rgb), 0.9),
      0 0 0 6px rgba(var(--purple-rgb), 0);
  }
}
@keyframes quest-card-glow {
  0%,
  100% {
    box-shadow:
      0 0 14px rgba(var(--purple-rgb), 0.25),
      0 2px 10px rgba(var(--black-rgb), 0.35);
  }
  50% {
    box-shadow:
      0 0 32px rgba(var(--purple-rgb), 0.6),
      0 2px 14px rgba(var(--black-rgb), 0.5);
  }
}
@keyframes quest-icon-pop {
  0%,
  100% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.22);
  }
  70% {
    transform: scale(0.93);
  }
}
@keyframes tut-bounce {
  from {
    transform: translateY(0) scale(1);
  }
  to {
    transform: translateY(-8px) scale(1.15);
  }
}
@keyframes tut-pop-in {
  from {
    opacity: 0;
    transform: scale(0.85) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes tut-battle-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--gold-rgb), 0.7);
  }
  70% {
    box-shadow: 0 0 0 14px rgba(var(--gold-rgb), 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(var(--gold-rgb), 0);
  }
}
@keyframes tut-monte-pulse {
  0%,
  100% {
    opacity: 0.7;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}
@keyframes tut-glow-pulse {
  0%, 100% {
    opacity: 0.75;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.06);
  }
}

@keyframes gift-pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.15); }
}

/* NAO reintroduzir um override global de prefers-reduced-motion aqui.
   Tentativa anterior (commit fae6e09, 2026-06-05) zerava animation-duration/transition-duration de
   `*` quando o SO tinha "reduzir movimento" ligado. Neste jogo o MOVIMENTO e feedback de jogo
   (projeteis voam via `transition`, lupa do matchmaking gira via `animation`, VFX por keyframes):
   zerar tudo fazia projetil teletransportar, spinner congelar e os VFX sumirem — SO no PC (o PC do
   autor tinha a preferencia ligada; no celular/WebView ela nao se aplica). Quebrava o jogo em vez de
   so reduzir movimento. Se um dia for necessario respeitar a preferencia, faca de forma SELETIVA
   (apenas animacoes decorativas/ambiente), nunca um blanket em `*`. */