/* ============================================================
   TonCraft Animations — Retro Stepped
   ============================================================ */

/* Score flash — leaderboard value update */
@keyframes score-flash {
  0%   { color: var(--col-nanoton); }
  25%  { color: #ffffff; }
  50%  { color: var(--sys-teal); }
  100% { color: var(--col-nanoton); }
}

/* Log entry slide-in from left */
@keyframes log-in {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Pulsing for connected status dot — simple blink */
@keyframes pulse-ring {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* Fade in utility */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Slide up utility */
@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* HP bar pulse on damage */
@keyframes hp-pulse {
  0%   { opacity: 1; }
  50%  { opacity: 0.3; }
  100% { opacity: 1; }
}

/* Glow pulse for selected entity — retro scanline glow */
@keyframes glow-pulse {
  0%, 100% { box-shadow: none; }
  50%      { box-shadow: 0 0 8px 2px rgba(68, 221, 255, 0.3); }
}

/* ---- Utility animation classes ---- */
.anim-fade-in   { animation: fade-in var(--duration-short) steps(3) both; }
.anim-slide-up  { animation: slide-up var(--duration-short) steps(3) both; }
.anim-glow      { animation: glow-pulse 2s steps(4) infinite; }
.anim-hp-pulse  { animation: hp-pulse var(--duration-short) steps(2); }