แอนิเมตซ้ำและหยุด

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

.badge-live {
  animation: pulse 1.4s ease-in-out infinite;
}

/* หยุดเมื่อไม่โฟกัสหน้า — ลดงานพื้นหลัง */
@media (prefers-reduced-motion: no-preference) {
  .spinner {
    animation: spin 0.8s linear infinite;
  }
}
แอนิเมตลูปไม่มีที่สิ้นสุดควรมีเหตุ (โหลด, สถานะสด) และต้องมีทางลดโมชัน