/**
 * NA-Kit UI — Animation Utilities
 * Reusable CSS animations for entrance, exit, and interaction effects.
 */

/* ========== Keyframes ========== */
@keyframes ui-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ui-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes ui-slide-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes ui-slide-down {
  from { opacity: 0; transform: translateY(-16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes ui-slide-left {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes ui-slide-right {
  from { opacity: 0; transform: translateX(-16px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes ui-scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes ui-scale-out {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.95); }
}

@keyframes ui-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes ui-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes ui-bounce {
  0%, 100% { transform: translateY(0); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
  50% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
}

@keyframes ui-shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

@keyframes ui-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ========== Animation Classes ========== */
.animate-fade-in { animation: ui-fade-in 300ms ease forwards; }
.animate-fade-out { animation: ui-fade-out 300ms ease forwards; }
.animate-slide-up { animation: ui-slide-up 300ms ease forwards; }
.animate-slide-down { animation: ui-slide-down 300ms ease forwards; }
.animate-slide-left { animation: ui-slide-left 300ms ease forwards; }
.animate-slide-right { animation: ui-slide-right 300ms ease forwards; }
.animate-scale-in { animation: ui-scale-in 200ms ease forwards; }
.animate-scale-out { animation: ui-scale-out 200ms ease forwards; }
.animate-spin { animation: ui-spin 1s linear infinite; }
.animate-pulse { animation: ui-pulse 2s ease-in-out infinite; }
.animate-bounce { animation: ui-bounce 1s infinite; }
.animate-shake { animation: ui-shake 0.5s ease; }

/* Duration modifiers */
.animate-fast { animation-duration: 150ms; }
.animate-slow { animation-duration: 500ms; }

/* Delay modifiers */
.animate-delay-100 { animation-delay: 100ms; }
.animate-delay-200 { animation-delay: 200ms; }
.animate-delay-300 { animation-delay: 300ms; }
.animate-delay-500 { animation-delay: 500ms; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .animate-fade-in,
  .animate-fade-out,
  .animate-slide-up,
  .animate-slide-down,
  .animate-slide-left,
  .animate-slide-right,
  .animate-scale-in,
  .animate-scale-out,
  .animate-spin,
  .animate-pulse,
  .animate-bounce,
  .animate-shake {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}