/* ============================================================
   OrderDash Animations Library
   Version: 1.0.0
   
   Shared animation keyframes, utility classes, stagger delays,
   and accessibility overrides for all OrderDash modules.
   ============================================================ */

/* ------------------------------------------------------------
   1. KEYFRAMES
   ------------------------------------------------------------ */

/* Fade In — Opacity 0→1 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Fade In Up — Translate up 16px + fade */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade In Down — Translate down 16px + fade */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Slide In Left — Translate from -24px left */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Slide In Right — Translate from 24px right */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Scale In — Scale 0.95→1 + fade (modals, dropdowns) */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Scale Out — Scale 1→0.95 + fade out */
@keyframes scaleOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

/* Shimmer — Skeleton loader sweep */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Slide In Toast — Slide from right edge for toasts */
@keyframes slideInToast {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  60% {
    transform: translateX(-4px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Slide Out Toast — Slide to right edge (toast dismiss) */
@keyframes slideOutToast {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

/* Pulse — Gentle pulse for notification dots */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.15);
  }
}

/* Spin — 360° rotation for loading spinners */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Bounce In — Subtle bounce entry */
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  50% {
    opacity: 1;
    transform: scale(1.02);
  }
  70% {
    transform: scale(0.995);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Progress — Progress bar fill animation */
@keyframes progress {
  from {
    width: 0%;
  }
  to {
    width: var(--progress-value, 100%);
  }
}

/* Progress Indeterminate — Left-to-right sweep */
@keyframes progressIndeterminate {
  0% {
    left: -30%;
    width: 30%;
  }
  50% {
    width: 40%;
  }
  100% {
    left: 100%;
    width: 30%;
  }
}

/* Fade In Scale Up — Combination for popovers */
@keyframes fadeInScaleUp {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(4px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Slide Down Expand — Accordion / collapse */
@keyframes slideDownExpand {
  from {
    opacity: 0;
    max-height: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    max-height: 500px;
    transform: translateY(0);
  }
}

/* Ripple — Button click ripple */
@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* Shake — Error shake feedback */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

/* Wiggle — Attention-grabbing wobble */
@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-3deg); }
  75% { transform: rotate(3deg); }
}

/* Count Up — Numeric counter entry */
@keyframes countUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Overlay Fade — Modal backdrop */
@keyframes overlayFadeIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(4px);
  }
}


/* ------------------------------------------------------------
   2. ANIMATION UTILITY CLASSES
   ------------------------------------------------------------ */
.animate-fade-in {
  animation: fadeIn 400ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.animate-fade-in-up {
  animation: fadeInUp 500ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.animate-fade-in-down {
  animation: fadeInDown 500ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.animate-slide-in-left {
  animation: slideInLeft 400ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.animate-slide-in-right {
  animation: slideInRight 400ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.animate-scale-in {
  animation: scaleIn 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.animate-scale-out {
  animation: scaleOut 200ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.animate-bounce-in {
  animation: bounceIn 500ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.animate-toast-in {
  animation: slideInToast 400ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.animate-toast-out {
  animation: slideOutToast 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.animate-shimmer {
  background: linear-gradient(
    90deg,
    var(--surface-raised) 25%,
    var(--surface-overlay) 37%,
    var(--surface-raised) 63%
  );
  background-size: 200% 100%;
  animation: shimmer 1.8s ease-in-out infinite;
}

.animate-progress {
  animation: progress 800ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.animate-shake {
  animation: shake 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-wiggle {
  animation: wiggle 300ms ease-in-out;
}

.animate-overlay {
  animation: overlayFadeIn 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.animate-expand {
  animation: slideDownExpand 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.animate-popover {
  animation: fadeInScaleUp 200ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.animate-count {
  animation: countUp 400ms cubic-bezier(0.4, 0, 0.2, 1) both;
}


/* ------------------------------------------------------------
   3. STAGGER DELAY CLASSES
   For sequential entry of list/grid items
   ------------------------------------------------------------ */
.stagger-1 { animation-delay: 50ms; }
.stagger-2 { animation-delay: 100ms; }
.stagger-3 { animation-delay: 150ms; }
.stagger-4 { animation-delay: 200ms; }
.stagger-5 { animation-delay: 250ms; }
.stagger-6 { animation-delay: 300ms; }
.stagger-7 { animation-delay: 350ms; }
.stagger-8 { animation-delay: 400ms; }
.stagger-9 { animation-delay: 450ms; }
.stagger-10 { animation-delay: 500ms; }


/* ------------------------------------------------------------
   4. TRANSITION UTILITY CLASSES
   For interactive element hover/state changes
   ------------------------------------------------------------ */
.transition-none {
  transition: none;
}

.transition-all {
  transition: all var(--transition-base);
}

.transition-fast {
  transition: all var(--transition-fast);
}

.transition-colors {
  transition: color var(--transition-base),
              background-color var(--transition-base),
              border-color var(--transition-base);
}

.transition-transform {
  transition: transform var(--transition-base);
}

.transition-opacity {
  transition: opacity var(--transition-base);
}

.transition-shadow {
  transition: box-shadow var(--transition-base);
}

/* Hover transform helpers */
.hover-lift {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.hover-scale {
  transition: transform var(--transition-fast);
}
.hover-scale:hover {
  transform: scale(1.02);
}

.hover-glow {
  transition: box-shadow var(--transition-base);
}
.hover-glow:hover {
  box-shadow: 0 0 20px var(--primary-light);
}

/* Active press effect */
.press:active {
  transform: scale(0.97);
}


/* ------------------------------------------------------------
   5. DURATION MODIFIERS
   ------------------------------------------------------------ */
.duration-150 { animation-duration: 150ms; }
.duration-200 { animation-duration: 200ms; }
.duration-300 { animation-duration: 300ms; }
.duration-500 { animation-duration: 500ms; }
.duration-700 { animation-duration: 700ms; }
.duration-1000 { animation-duration: 1000ms; }


/* ------------------------------------------------------------
   6. FILL MODE HELPERS
   ------------------------------------------------------------ */
.fill-forwards  { animation-fill-mode: forwards; }
.fill-backwards { animation-fill-mode: backwards; }
.fill-both      { animation-fill-mode: both; }


/* ------------------------------------------------------------
   7. ACCESSIBILITY — Reduced Motion
   Respects user system preferences
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .animate-shimmer {
    animation: none !important;
    background: var(--surface-raised) !important;
  }

  .animate-spin {
    animation: spin 3s linear infinite !important;
    /* Keep spinner functional but slower — essential for UX */
  }

  .hover-lift:hover {
    transform: none;
  }

  .hover-scale:hover {
    transform: none;
  }

  .press:active {
    transform: none;
  }
}