/* Keyframes */
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-12px) } to { opacity: 1; transform: none } }
@keyframes slideInRight { from { transform: translateX(100%) } to { transform: none } }
@keyframes slideInLeft { from { transform: translateX(-100%) } to { transform: none } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.95) } to { opacity: 1; transform: none } }
@keyframes spin { to { transform: rotate(360deg) } }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .5 } }
@keyframes shimmer { 0% { background-position: -200% 0 } 100% { background-position: 200% 0 } }
@keyframes badgePop { 0%,100% { transform: scale(1) } 50% { transform: scale(1.2) } }

/* Utility classes */
.animate-fade-in     { animation: fadeIn var(--ease-base) both }
.animate-fade-in-up  { animation: fadeInUp var(--ease-base) both }
.animate-scale-in    { animation: scaleIn var(--ease-fast) both }
.animate-spin        { animation: spin 0.7s linear infinite }
.animate-pulse       { animation: pulse 2s ease infinite }

/* Spinner */
.spinner {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2px solid var(--color-gray-200);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
.spinner-sm { width: 14px; height: 14px; }
.spinner-lg { width: 24px; height: 24px; border-width: 3px; }

/* Skeleton */
.skeleton {
  background: linear-gradient(90deg,
    var(--color-gray-100) 25%,
    var(--color-gray-200) 50%,
    var(--color-gray-100) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: var(--radius-sm);
}

/* Transition helpers */
.transition-all    { transition: all var(--ease-fast) }
.transition-colors { transition: color var(--ease-fast), background-color var(--ease-fast), border-color var(--ease-fast) }
.transition-transform { transition: transform var(--ease-fast) }
.transition-opacity { transition: opacity var(--ease-fast) }