/* ===== MOBILE ANIMATIONS ===== */
/* Mobile-optimized animations for better performance */

/* Enhanced mobile performance optimizations */
@media (max-width: 768px) {
    /* Ensure smooth animations on mobile */
    .card,
    .header-btn,
    .action-btn,
    .footer-tab,
    .modal-content,
    .preferences-content {
        will-change: transform;
        transform: translateZ(0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        perspective: 1000px;
        -webkit-perspective: 1000px;
    }
    
    /* Optimize animations for mobile performance */
    .card {
        transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    }
    
    .card.dragging {
        transition: none;
        will-change: transform;
    }
    
    .header-btn,
    .action-btn,
    .footer-tab {
        transition: transform 0.15s ease-out, background-color 0.15s ease-out, box-shadow 0.15s ease-out;
    }
    
    .modal-content,
    .preferences-content {
        transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    }
}

/* Enhanced mobile swipe animations */
@media (max-width: 768px) {
    .card-swipe-left {
        animation: swipeLeftMobile 0.3s ease-out forwards;
    }
    
    .card-swipe-right {
        animation: swipeRightMobile 0.3s ease-out forwards;
    }
    
    .card-swipe-up {
        animation: swipeUpMobile 0.3s ease-out forwards;
    }
    
    .card-bounce-back {
        animation: bounceBackMobile 0.3s ease-out forwards;
    }
}

@keyframes swipeLeftMobile {
    0% {
        transform: translateX(0) rotate(0deg) translateZ(0);
        opacity: 1;
    }
    100% {
        transform: translateX(-100vw) rotate(-30deg) translateZ(0);
        opacity: 0;
    }
}

@keyframes swipeRightMobile {
    0% {
        transform: translateX(0) rotate(0deg) translateZ(0);
        opacity: 1;
    }
    100% {
        transform: translateX(100vw) rotate(30deg) translateZ(0);
        opacity: 0;
    }
}

@keyframes swipeUpMobile {
    0% {
        transform: translateY(0) scale(1) translateZ(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-100vh) scale(0.8) translateZ(0);
        opacity: 0;
    }
}

@keyframes bounceBackMobile {
    0% {
        transform: translateX(var(--swipe-distance, 0)) rotate(var(--swipe-rotation, 0deg)) translateZ(0);
    }
    50% {
        transform: translateX(calc(var(--swipe-distance, 0) * 0.1)) rotate(calc(var(--swipe-rotation, 0deg) * 0.1)) translateZ(0);
    }
    100% {
        transform: translateX(0) rotate(0deg) translateZ(0);
    }
}

/* Enhanced mobile touch feedback animations */
@media (max-width: 768px) {
    .touch-feedback {
        animation: touchFeedbackMobile 0.2s ease-out;
    }
    
    .touch-ripple {
        animation: touchRippleMobile 0.4s ease-out;
    }
}

@keyframes touchFeedbackMobile {
    0% {
        transform: scale(1) translateZ(0);
    }
    50% {
        transform: scale(0.95) translateZ(0);
    }
    100% {
        transform: scale(1) translateZ(0);
    }
}

@keyframes touchRippleMobile {
    0% {
        transform: scale(0) translateZ(0);
        opacity: 1;
    }
    100% {
        transform: scale(4) translateZ(0);
        opacity: 0;
    }
}

/* Enhanced mobile modal animations */
@media (max-width: 768px) {
    .modal-enter-mobile {
        animation: modalEnterMobile 0.3s ease-out forwards;
    }
    
    .modal-exit-mobile {
        animation: modalExitMobile 0.3s ease-in forwards;
    }
    
    .modal-content-enter-mobile {
        animation: modalContentEnterMobile 0.3s ease-out forwards;
    }
    
    .modal-content-exit-mobile {
        animation: modalContentExitMobile 0.3s ease-in forwards;
    }
}

@keyframes modalEnterMobile {
    0% {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
    100% {
        opacity: 1;
        backdrop-filter: blur(10px);
    }
}

@keyframes modalExitMobile {
    0% {
        opacity: 1;
        backdrop-filter: blur(10px);
    }
    100% {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
}

@keyframes modalContentEnterMobile {
    0% {
        transform: translateY(100%) translateZ(0);
        opacity: 0;
    }
    100% {
        transform: translateY(0) translateZ(0);
        opacity: 1;
    }
}

@keyframes modalContentExitMobile {
    0% {
        transform: translateY(0) translateZ(0);
        opacity: 1;
    }
    100% {
        transform: translateY(100%) translateZ(0);
        opacity: 0;
    }
}

/* Enhanced mobile footer animations */
@media (max-width: 768px) {
    .footer-tab-pulse {
        animation: footerTabPulseMobile 0.3s ease-out;
    }
    
    .footer-slide-up {
        animation: footerSlideUpMobile 0.3s ease-out;
    }
    
    .collections-panel-enter {
        animation: collectionsPanelEnterMobile 0.3s ease-out;
    }
    
    .collections-panel-exit {
        animation: collectionsPanelExitMobile 0.3s ease-in;
    }
}

@keyframes footerTabPulseMobile {
    0% {
        transform: scale(1) translateZ(0);
    }
    50% {
        transform: scale(1.1) translateZ(0);
    }
    100% {
        transform: scale(1) translateZ(0);
    }
}

@keyframes footerSlideUpMobile {
    0% {
        transform: translateY(100%) translateZ(0);
    }
    100% {
        transform: translateY(0) translateZ(0);
    }
}

@keyframes collectionsPanelEnterMobile {
    0% {
        transform: translateX(100%) translateZ(0);
        opacity: 0;
    }
    100% {
        transform: translateX(0) translateZ(0);
        opacity: 1;
    }
}

@keyframes collectionsPanelExitMobile {
    0% {
        transform: translateX(0) translateZ(0);
        opacity: 1;
    }
    100% {
        transform: translateX(100%) translateZ(0);
        opacity: 0;
    }
}

/* Enhanced mobile loading animations */
@media (max-width: 768px) {
    .loading-spinner {
        animation: spinMobile 1s linear infinite;
    }
}

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

/* Enhanced mobile card stack animations */
@media (max-width: 768px) {
    .card-stack-enter {
        animation: cardStackEnterMobile 0.4s ease-out forwards;
    }
    
    .card-enter {
        animation: cardEnterMobile 0.3s ease-out forwards;
    }
    
    .card-exit {
        animation: cardExitMobile 0.3s ease-in forwards;
    }
}

@keyframes cardStackEnterMobile {
    0% {
        opacity: 0;
        transform: translateY(50px) translateZ(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0) translateZ(0);
    }
}

@keyframes cardEnterMobile {
    0% {
        opacity: 0;
        transform: translateY(50px) scale(0.9) translateZ(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) translateZ(0);
    }
}

@keyframes cardExitMobile {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1) translateZ(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-50px) scale(0.9) translateZ(0);
    }
}

/* Enhanced mobile button animations */
@media (max-width: 768px) {
    .btn-press-mobile {
        animation: btnPressMobile 0.15s ease-out;
    }
    
    .btn-success-mobile {
        animation: btnSuccessMobile 0.5s ease-out;
    }
    
    .btn-error-mobile {
        animation: btnErrorMobile 0.5s ease-out;
    }
}

@keyframes btnPressMobile {
    0% {
        transform: scale(1) translateZ(0);
    }
    50% {
        transform: scale(0.95) translateZ(0);
    }
    100% {
        transform: scale(1) translateZ(0);
    }
}

@keyframes btnSuccessMobile {
    0% {
        background-color: var(--color-success);
        transform: scale(1) translateZ(0);
    }
    50% {
        transform: scale(1.05) translateZ(0);
    }
    100% {
        background-color: var(--color-success);
        transform: scale(1) translateZ(0);
    }
}

@keyframes btnErrorMobile {
    0% {
        background-color: var(--color-error);
        transform: scale(1) translateZ(0);
    }
    25% {
        transform: translateX(-5px) translateZ(0);
    }
    50% {
        transform: translateX(5px) translateZ(0);
    }
    75% {
        transform: translateX(-5px) translateZ(0);
    }
    100% {
        background-color: var(--color-error);
        transform: translateX(0) translateZ(0);
    }
}

/* Enhanced swipe indicator animations */
@media (max-width: 768px) {
    .swipe-indicator {
        animation: swipeIndicatorEnter 0.3s ease-out;
    }
    
    .swipe-indicator.show {
        animation: swipeIndicatorPulseMobile 0.5s ease-in-out;
    }
}

@keyframes swipeIndicatorEnter {
    0% {
        transform: translate(-50%, -50%) scale(0.5) translateZ(0);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, -50%) scale(1) translateZ(0);
        opacity: 1;
    }
}

@keyframes swipeIndicatorPulseMobile {
    0% {
        transform: translate(-50%, -50%) scale(0.8) translateZ(0);
        opacity: 0.8;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2) translateZ(0);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1) translateZ(0);
        opacity: 1;
    }
}

/* Reduce motion preferences for mobile */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    .card,
    .header-btn,
    .action-btn,
    .footer-tab,
    .modal-content,
    .preferences-content {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .card-swipe-left,
    .card-swipe-right,
    .card-swipe-up,
    .card-bounce-back {
        animation: none !important;
    }
    
    .modal-enter-mobile,
    .modal-exit-mobile,
    .modal-content-enter-mobile,
    .modal-content-exit-mobile {
        animation: none !important;
    }
    
    .loading-spinner {
        animation: none !important;
    }
}

/* Mobile performance optimizations */
@media (max-width: 768px) {
    /* Force GPU acceleration for better performance */
    .card,
    .header-btn,
    .action-btn,
    .footer-tab,
    .modal-content,
    .preferences-content {
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        -moz-transform: translateZ(0);
        -ms-transform: translateZ(0);
        -o-transform: translateZ(0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        perspective: 1000px;
        -webkit-perspective: 1000px;
    }
    
    /* Optimize for mobile scrolling */
    .cards-stack,
    .preferences-body,
    .collections-content,
    .chat-messages {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        transform: translateZ(0);
    }
    
    /* Reduce paint complexity on mobile */
    .card::before,
    .header::before,
    .footer::before {
        transform: translateZ(0);
        will-change: opacity;
    }
    
    /* Optimize transform operations */
    .card:hover,
    .header-btn:hover,
    .action-btn:hover,
    .footer-tab:hover {
        will-change: transform;
    }
    
    /* Reset will-change after animations */
    .card:not(:hover):not(.dragging),
    .header-btn:not(:hover):not(:active),
    .action-btn:not(:hover):not(:active),
    .footer-tab:not(:hover):not(:active) {
        will-change: auto;
    }
}