/* ===================================================================== */
/* === RETAIL ADMIN ANIMATIONS === */
/* Keyframes and Animation Classes */
/* ===================================================================== */

/* === CORE ANIMATIONS === */

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 30px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 20px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes modalAppear {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(-50px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

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

@keyframes shimmer {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 1;
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* === SPECIALIZED ANIMATIONS === */

@keyframes titleGlow {
    0%, 100% {
        text-shadow: 0 0 20px rgba(236, 138, 65, 0.3);
    }
    50% {
        text-shadow: 0 0 30px rgba(236, 138, 65, 0.6);
    }
}

@keyframes expandWidth {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

@keyframes cardsFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-5px);
    }
}

@keyframes tabBarSlide {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* === COMPONENT-SPECIFIC ANIMATIONS === */

@keyframes addonSelected {
    0% {
        transform: scale(1);
        background: rgba(255, 255, 255, 0.9);
    }
    50% {
        transform: scale(1.1);
        background: rgba(34, 197, 94, 0.2);
    }
    100% {
        transform: scale(1);
        background: rgba(34, 197, 94, 0.15);
    }
}

@keyframes addonDeselected {
    0% {
        transform: scale(1);
        background: rgba(34, 197, 94, 0.15);
    }
    50% {
        transform: scale(0.95);
        background: rgba(239, 68, 68, 0.1);
    }
    100% {
        transform: scale(1);
        background: rgba(255, 255, 255, 0.9);
    }
}

@keyframes highlightGreen {
    0%, 100% {
        background: rgba(34, 197, 94, 0.1);
    }
    50% {
        background: rgba(34, 197, 94, 0.3);
    }
}

@keyframes highlightBlue {
    0%, 100% {
        background: rgba(59, 130, 246, 0.1);
    }
    50% {
        background: rgba(59, 130, 246, 0.3);
    }
}

/* === LOADER ANIMATIONS === */

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes loaderGlassIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* === TOAST ANIMATIONS === */

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

@keyframes slideOutRight {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

/* === BUTTON SPECIFIC ANIMATIONS === */

@keyframes activeButtonGlow {
    0% {
        box-shadow: var(--shadow-brand), 0 0 0 3px rgba(236, 138, 65, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
    100% {
        box-shadow: var(--shadow-brand), 0 0 0 5px rgba(236, 138, 65, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
}

/* === CAROUSEL ANIMATIONS === */

@keyframes carouselCardAppear {
    from {
        opacity: 0;
        transform: translateX(30px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* === PURCHASE MODAL ANIMATIONS === */

@keyframes successPulse {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* === ANIMATION UTILITY CLASSES === */

.item-added {
    animation: highlightGreen 0.6s ease;
}

.item-updated {
    animation: highlightBlue 0.6s ease;
}

.addon-option.just-selected {
    animation: addonSelected 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.addon-option.just-deselected {
    animation: addonDeselected 0.3s ease-out;
}

/* === RESPONSIVE ANIMATION CONTROLS === */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    /* Keep spinners/loaders animated even with reduced motion preference */
    .retail-spinner,
    #retail-loader .retail-spinner,
    .retail-loader-bg .retail-spinner,
    .retail-admin-wrapper .retail-spinner {
        animation: spin 1s linear infinite !important;
        animation-duration: 1s !important;
        animation-iteration-count: infinite !important;
        animation-play-state: running !important;
        animation-fill-mode: none !important;
    }
}