/* ============================================================
   ANIMATIONS & VISUAL EFFECTS
   ============================================================ */

/* --- Card play / deploy animation --- */
@keyframes card-deploy {
  0% { transform: scale(1); opacity: 1; }
  40% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(0.6) translateY(-20px); opacity: 0; }
}
.card-deploying {
  animation: card-deploy 0.4s ease-out forwards;
  pointer-events: none;
}

/* --- Spawn pop-in for board units --- */
@keyframes spawn-pop {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* --- Hit flash on cards --- */
@keyframes card-hit-flash {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(2.5); }
}
.card-hit { animation: card-hit-flash 0.15s ease; }

/* --- Screen shake --- */
@keyframes screen-shake {
  0%, 100% { transform: translate(0); }
  10% { transform: translate(-3px, 2px); }
  20% { transform: translate(3px, -2px); }
  30% { transform: translate(-2px, -1px); }
  40% { transform: translate(2px, 1px); }
  50% { transform: translate(-1px, 2px); }
  60% { transform: translate(1px, -1px); }
  70% { transform: translate(-2px, 1px); }
  80% { transform: translate(2px, -2px); }
  90% { transform: translate(-1px, -1px); }
}
.screen-shake { animation: screen-shake 0.3s ease-out; }

/* --- HP bar damage flash --- */
@keyframes hp-damage {
  0% { background-color: #fff; filter: brightness(2); }
  100% { background-color: transparent; filter: brightness(1); }
}
.hp-bar-flash { animation: hp-damage 0.2s ease-out; }

/* --- Elixir segment fill pop --- */
@keyframes elixir-fill {
  0% { transform: scaleY(0); }
  60% { transform: scaleY(1.15); }
  100% { transform: scaleY(1); }
}
.elixir-seg {
  transform-origin: bottom;
}
.elixir-seg.just-filled {
  animation: elixir-fill 0.2s ease-out;
}

/* --- Double elixir pulse --- */
@keyframes double-pulse {
  0%, 100% { text-shadow: 0 0 4px #ffd76a; opacity: 1; }
  50% { text-shadow: 0 0 12px #ffd76a, 0 0 24px #ff9a3d; opacity: 0.85; }
}
.double-pulse { animation: double-pulse 0.8s ease-in-out infinite; }

/* --- Lane hover glow --- */
@keyframes lane-glow {
  0%, 100% { box-shadow: inset 0 0 20px rgba(255,255,255,0.08); }
  50% { box-shadow: inset 0 0 30px rgba(255,255,255,0.18); }
}

/* --- Floating damage number (DOM-based) --- */
@keyframes damage-float {
  0% { transform: translateY(0) scale(0.7); opacity: 0; }
  15% { transform: translateY(-4px) scale(1.1); opacity: 1; }
  100% { transform: translateY(-32px) scale(0.9); opacity: 0; }
}
.damage-number {
  position: absolute;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  pointer-events: none;
  animation: damage-float 0.8s ease-out forwards;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
  z-index: 50;
  white-space: nowrap;
}
.damage-number.crit {
  font-size: 12px;
  color: #ffd76a !important;
}
.damage-number.weak {
  font-size: 7px;
  color: #8888a0 !important;
}

/* --- Spell effect overlays --- */
@keyframes fireball-burst {
  0% { transform: scale(0); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.8; }
  100% { transform: scale(2.5); opacity: 0; }
}
@keyframes frost-nova {
  0% { transform: scale(0.3); opacity: 0; }
  30% { transform: scale(1); opacity: 0.9; }
  100% { transform: scale(2); opacity: 0; }
}

.spell-overlay {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  z-index: 40;
}
.spell-overlay-fireball {
  width: 60px;
  height: 60px;
  background: radial-gradient(circle, #ffd76a 0%, #ff5b3d 40%, transparent 70%);
  animation: fireball-burst 0.5s ease-out forwards;
  box-shadow: 0 0 30px 10px rgba(255,91,61,0.6);
}
.spell-overlay-frost {
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, #a8e8ff 0%, #4ac9f5 30%, transparent 70%);
  animation: frost-nova 0.6s ease-out forwards;
  box-shadow: 0 0 25px 8px rgba(74,201,245,0.5);
}

/* --- Status text pop --- */
@keyframes status-pop {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}
.status-pop { animation: status-pop 0.2s ease-out; }

/* --- Card tray slide-in on load --- */
@keyframes tray-slide-up {
  0% { transform: translateY(20px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
#tray { animation: tray-slide-up 0.4s ease-out; }

/* --- Overlay entrance --- */
@keyframes overlay-bounce {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}
#overlay.show #overlay-title,
#pause-overlay.show #pause-title {
  animation: overlay-bounce 0.4s ease-out;
}

/* --- Title shimmer --- */
@keyframes title-shimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* --- Ground scorch marks --- */
.ground-scorch {
  position: absolute;
  width: 30px;
  height: 20px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 5;
  animation: scorch-appear 0.3s ease-out forwards;
}
@keyframes scorch-appear {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 0.8; }
}

/* --- Dust puffs --- */
.dust-puff {
  position: absolute;
  width: 16px;
  height: 8px;
  background: radial-gradient(ellipse, rgba(169,131,79,0.6) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 10;
  animation: dust-expand 0.4s ease-out forwards;
  transform: scaleX(var(--direction, 1));
}
@keyframes dust-expand {
  0% { transform: scale(0.3) scaleX(var(--direction, 1)); opacity: 0.8; }
  100% { transform: scale(1.5) scaleX(var(--direction, 1)); opacity: 0; }
}

/* --- Death burst particles --- */
.death-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 45;
  animation: particle-burst 0.5s ease-out forwards;
}
@keyframes particle-burst {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) translateX(0);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) rotate(var(--angle, 0deg)) translateX(var(--distance, 20px));
    opacity: 0;
  }
}

/* --- Lane hover glow enhancement --- */
@keyframes lane-glow-subtle {
  0%, 100% { box-shadow: inset 0 0 15px rgba(255,255,255,0.05); }
  50% { box-shadow: inset 0 0 25px rgba(255,255,255,0.12); }
}

/* --- Base damage flash --- */
@keyframes base-damage-flash {
  0% { filter: brightness(1); }
  20% { filter: brightness(1.8); }
  100% { filter: brightness(1); }
}
.base-damaged {
  animation: base-damage-flash 0.2s ease-out;
}

/* --- Deploy ripple --- */
.deploy-ripple {
  position: absolute;
  width: 40px;
  height: 30px;
  border: 2px solid var(--team-color, #fff);
  border-radius: 50%;
  pointer-events: none;
  z-index: 15;
  animation: ripple-expand 0.6s ease-out forwards;
}
@keyframes ripple-expand {
  0% { transform: scale(0.3); opacity: 1; }
  100% { transform: scale(2); opacity: 0; }
}

/* --- Unit spawn pop (canvas overlay) --- */
@keyframes spawn-pop {
  0% { transform: scale(0) rotate(-10deg); opacity: 0; }
  60% { transform: scale(1.3) rotate(5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* --- Cave emergence dust --- */
.cave-emerge-dust {
  position: absolute;
  width: 24px;
  height: 16px;
  background: radial-gradient(ellipse, var(--team-color, #fff) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 12;
  animation: cave-dust-burst 0.45s ease-out forwards;
  opacity: 0.6;
}
@keyframes cave-dust-burst {
  0% { transform: scale(0.5); opacity: 0.8; }
  100% { transform: scale(2); opacity: 0; }
}

/* --- Cave emergence particles --- */
.cave-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--team-color, #fff);
  border-radius: 1px;
  pointer-events: none;
  z-index: 14;
  animation: cave-particle-fly 0.4s ease-out forwards;
}
@keyframes cave-particle-fly {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) translateX(0);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) rotate(var(--angle, 0deg)) translateX(var(--distance, 15px));
    opacity: 0;
  }
}