/**
 * Animations - Centralized Animation Keyframes
 * Single source of truth for all animations used across the application
 * Avoids duplication and ensures consistency
 */

/* ============================================
   ENTRANCE ANIMATIONS
   ============================================ */

/**
 * Fade In Animation
 * Simple opacity transition from 0 to 1
 * Used for: Modal overlays, gentle content reveals
 */
@keyframes customFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/**
 * Slide In Animation
 * Smooth entrance with scale and vertical movement
 * Used for: Modals, popups, alerts
 */
@keyframes customSlideIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/**
 * Slide Out Animation
 * Smooth exit with scale and vertical movement
 * Used for: Modals, popups, alerts closing
 */
@keyframes customSlideOut {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  to {
    opacity: 0;
    transform: scale(0.95) translateY(-20px);
  }
}

/* ============================================
   FEEDBACK ANIMATIONS
   ============================================ */

/**
 * Shake Animation
 * Horizontal shake for error feedback
 * Used for: Form validation errors, invalid actions
 */
@keyframes shake {
  0%, 100% {
    transform: translateX(0) translateY(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-10px) translateY(0);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(10px) translateY(0);
  }
}

/* ============================================
   LOADING ANIMATIONS
   ============================================ */

/**
 * Shimmer Animation
 * Horizontal gradient sweep for skeleton loading states
 * Used for: .skeleton elements across all pages
 */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/**
 * Spin Animation
 * Continuous 360° rotation
 * Used for: Loading spinners, refresh icons
 */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/**
 * Pulse Animation
 * Scale up and down for attention
 * Used for: Notification badges, activity indicators
 */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}

/* ============================================
   SLIDE ANIMATIONS (Directional)
   ============================================ */

/**
 * Slide In From Right
 * Used for: Side panels, notifications
 */
@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/**
 * Slide In From Left
 * Used for: Side panels, menus
 */
@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/**
 * Slide In From Bottom
 * Used for: Bottom sheets, mobile menus
 */
@keyframes slideInBottom {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/**
 * Slide Out To Bottom
 * Used for: Bottom sheets closing
 */
@keyframes slideOutBottom {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(100%);
    opacity: 0;
  }
}

/**
 * Slide Out To Right
 * Used for: Side panels closing
 */
@keyframes slideOutRight {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

/**
 * Slide Out To Left
 * Used for: Side panels closing
 */
@keyframes slideOutLeft {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-100%);
    opacity: 0;
  }
}

/* ============================================
   BOUNCE ANIMATIONS
   ============================================ */

/**
 * Bounce Animation
 * Elastic bounce effect
 * Used for: Success messages, playful interactions
 */
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
  60% {
    transform: translateY(-10px);
  }
}

/* ============================================
   FADE OUT ANIMATIONS
   ============================================ */

/**
 * Fade Out Animation
 * Smooth exit with opacity
 * Used for: Removing elements, closing modals
 */
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/**
 * Slide Out Up
 * Exit animation moving upward
 * Used for: Dismissing notifications, closing modals
 */
@keyframes slideOutUp {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-100%);
    opacity: 0;
  }
}

/* ============================================
   UTILITY CLASSES (Optional)
   ============================================ */

/**
 * Apply animation classes directly to elements
 * Example: <div class="animate-fadeIn"></div>
 */
.animate-fadeIn {
  animation: customFadeIn 0.3s ease;
}

.animate-slideIn {
  animation: customSlideIn 0.3s ease;
}

.animate-shake {
  animation: shake 0.5s ease;
}

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

.animate-pulse {
  animation: pulse 2s ease-in-out infinite;
}

.animate-bounce {
  animation: bounce 1s ease;
}

/* ============================================
   CART ANIMATIONS
   ============================================ */

/**
 * Fly to Cart Animation
 * Animates product image flying from product to cart icon
 * Used for: Add to cart action feedback
 * Note: Uses CSS custom properties for dynamic start/end positions
 */
@keyframes flyToCart {
  0% {
    top: var(--fly-start-top);
    left: var(--fly-start-left);
    width: var(--fly-start-width);
    height: var(--fly-start-height);
    opacity: 1;
    transform: scale(1);
  }
  100% {
    top: var(--fly-end-top);
    left: var(--fly-end-left);
    width: 40px;
    height: 40px;
    opacity: 0.3;
    transform: scale(0.1);
  }
}

/**
 * Tab Icon Bounce
 * Bounces a navigation tab/icon for user feedback
 * Used for: Navigation icon feedback (cart, account, etc.)
 */
@keyframes tabBounce {
  0%, 100% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.3);
  }
  50% {
    transform: scale(0.9);
  }
  75% {
    transform: scale(1.15);
  }
}