/* Pulse attention */
.badge-pulse {
  animation: pulse 2000ms ease-in-out 3;
}

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

/* Subtle glow */
.glow-attention {
  animation: glow 2000ms ease-in-out 3;
}

@keyframes glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
  50% { box-shadow: 0 0 0 8px rgba(59, 130, 246, 0.3); }
}

/* Error shake */
.shake {
  animation: shake 400ms ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}

/* Ring animation (notification) */
.ring {
  animation: ring 2500ms ease-in-out 2;
}

@keyframes ring {
  0%, 100% { transform: rotate(0); }
  10%, 30% { transform: rotate(10deg); }
  20%, 40% { transform: rotate(-10deg); }
  50%, 100% { transform: rotate(0); }
}

// Auto-stop attention after timeout
const attention = element.animate([
  { transform: 'scale(1)' },
  { transform: 'scale(1.15)' },
  { transform: 'scale(1)' }
], {
  duration: 2000,
  iterations: 3
});

// Or with CSS
setTimeout(() => {
  element.classList.remove('attention');
}, 6000);