/* =============================================
   ANIMATIONS.CSS - GLOBAL STYLES
   Shared between Fallback HTML (Django) and React
   Author:Boubacar Yomboliba
   ============================================= */

/* =============================================
   1. KEYFRAMES (Core Animations)
   ============================================= */

/**
 * Fade in with upward movement
 * Used for sections appearing on scroll
 */
 /* home, products_list, product_detailss, cart, checkout, order_detail, order_list ... */
 @keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/**
 * Simple fade in animation
 */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* for products_list */
/* @keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
} */

/**
 * Fade out animation
 */
@keyframes fadeOut {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-10px); }
}

/* cart */
@keyframes slideInRight {
    from {
      transform: translateX(100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
}

/* payment_success,  */
@keyframes scaleIn {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

/**
 * Heartbeat effect (used on wishlist buttons)
 */
 /* products_list, product_detail,  */
@keyframes heartBeat {
    0%, 100% { transform: scale(1); }
    25%      { transform: scale(1.3); }
    50%      { transform: scale(1); }
    75%      { transform: scale(1.2); }
}

/**
 * One-time bounce animation
 */
@keyframes bounce-once {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.1); }
}

/**
 * Infinite rotation (used for loading spinners)
 */
@keyframes spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/**
 * Modal entrance animation
 */
/* for products_list */
@keyframes modalSlideIn {
    from { opacity: 0; transform: translateY(50px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Toast animations */
@keyframes toastEnter {
    from { transform: translateX(100%); opacity: 0;}
    to { transform: translateX(0); opacity: 1;}
}

@keyframes toastExist {
    from { transform: translateX(0); opacity: 1;}
    to { transform: translateX(0); opacity: 0;}
}

/* Shake */
/* stripe_failed */
@keyframes shake { 10%,90%{transform:translate3d(-1px,0,0)} 20%,80%{transform:translate3d(2px,0,0)} 30%,50%,70%{transform:translate3d(-4px,0,0)} 40%,60%{transform:translate3d(4px,0,0)} }

/* Pop */
/* stripe_success */
@keyframes pop { 0%{transform:scale(0)} 80%{transform:scale(1.1)} 100%{transform:scale(1)} }

/* Ping */
/* checkout */
@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* =============================================
   2. UTILITY CLASSES
   ============================================= */

/* Fade in upward - very commonly used */
/* home,  */
.animate-fade-in-up { animation: fadeInUp 0.8s ease-out forwards; }
/* for productlist, product_detailss, cart, checkout, order_detail, ... */
.animate-fadeInUp {
animation: fadeInUp 0.4s ease-out;
}

/* Simple fade in */
.animate-fadeIn     { animation: fadeIn 0.3s ease-out forwards; }

/* Fade out */
.animate-fadeOut    { animation: fadeOut 0.3s ease forwards; }

/* Heartbeat effect for wishlist icon */
/* products_list,  */
.animate-heartBeat  { animation: heartBeat 0.3s ease-in-out; }

/* One-time bounce */
.animate-bounce-once{ animation: bounce-once 0.5s ease; }

/* Modal slide in */
.animate-modal-slide{ animation: modalSlideIn 0.4s ease; }

/* cart */
.animate-slideInRight {
    animation: slideInRight 0.3s ease-out;
  }

/* spinner */
/* for all pages */
.loader-spinner {
    border: 2px solid #f3f3f3;
    border-top: 2px solid #7d2ae8;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}

/* Font Awesome spinner */
/* home,  */
.fa-spinner {
    animation: spin 1s linear infinite;
}

/* Toast */
.toast-enter {
    animation: toastEnter 0.5s ease;
}
.toast-exit {
    animation: toastExist 0.5s ease;
}

/* Shake */
.shake { animation: shake 0.8s; }

/* Pop */
.pop { animation: pop 0.6s cubic-bezier(0.68,-0.55,0.265,1.55); }

/* Ping */
.animate-ping {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* =============================================
   3. BUTTON RIPPLE EFFECT
   ============================================= */
/* products_list, product_detailss, ...  */

.btn-ripple {
    position: relative;
    overflow: hidden;
}

.btn-ripple::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    border-radius: 100%;
    transform: translate(-50%, -50%) scale(1);
    transition: all 0.4s ease-out;
}

.btn-ripple:active::after {
    width: 200px;
    height: 200px;
    opacity: 1;
    transition: 0s;
}

/* =============================================
   4. CUSTOM SCROLLBAR
   ============================================= */
/* for products_list, product_detailss */
.scrollbar-thin::-webkit-scrollbar {
    height: 4px;
    width: 4px;
}

.scrollbar-thin::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* =============================================
   5. ACCESSIBILITY - Reduced Motion
   ============================================= */
/* for home */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        /* scroll-behavior: auto !important; */
    }
}

/* =============================================
   END OF FILE
   ============================================= */