/**
 * MOBILE OPTIMIZATION CSS
 * Simplifies animations and effects for older/slower phones
 * Add this AFTER styles.css for better performance
 */

/* ========================================
   GLOBAL MOBILE ANIMATIONS
   ======================================== */

/* Subtle confetti sparkle for mobile devices */
@keyframes gentleSparkle {
    0%, 100% {
        opacity: 0;
        transform: scale(0.8);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }
}

/* Gentle glow effect for savings value */
@keyframes gentleGlow {
    0%, 100% {
        text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
    }
    50% {
        text-shadow: 0 0 16px rgba(255, 255, 255, 0.6);
    }
}

/* ========================================
   SIMPLIFIED ANIMATIONS FOR MOBILE
   ======================================== */

/* Remove expensive backdrop-filter (causes lag on older phones) */
@media (max-width: 768px) {
    .sticky-footer,
    .scroll-to-top-btn-small,
    .bogo-header {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    
    /* Solid backgrounds instead of glassmorphism */
    .sticky-footer {
        background: rgba(255, 255, 255, 0.95) !important;
    }
    
    /* Keep up arrow red and visible */
    .scroll-to-top-btn-small {
        background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%) !important;
    }
}

/* ========================================
   DISABLE ALL ANIMATIONS ON OLDER DEVICES
   ======================================== */

/* This class will be added by JavaScript if device is slow */
.simplified-mode {
    /* Reduce but don't completely disable animations */
    * {
        animation-duration: 0.3s !important;
        transition-duration: 0.2s !important;
    }
    
    /* Remove transforms on hover */
    .product-card:hover,
    .scan-product-btn:hover,
    .scroll-to-top-btn-small:hover {
        transform: none !important;
    }
    
    /* Keep carousels moving but disable other infinite animations */
    .scanner-line,
    .bogo-offer-badge .badge-glow {
        animation: none !important;
    }
    
    /* Carousels continue to move - they're important for UX */
    .mix-match-carousel {
        animation: scrollLeft 15s linear infinite !important;
    }
    
    .category-carousel-container::before {
        animation-duration: revert !important;
    }
    
    /* Keep confetti subtle but visible */
    .confetti-particle {
        animation-duration: 4s !important;
    }
    
    .example-total .total-value {
        animation: gentleGlow 3s ease-in-out infinite !important;
    }
    
    .carousel-row {
        animation-duration: revert !important;
        animation-timing-function: linear !important;
        animation-iteration-count: infinite !important;
    }
    
    /* Hero carousel rows - preserve original speeds and directions */
    .carousel-row:nth-child(1) {
        animation-duration: 25s !important;
    }
    
    .carousel-row:nth-child(2) {
        animation-duration: 30s !important;
        animation-direction: reverse !important;
    }
    
    .carousel-row:nth-child(3) {
        animation-duration: 28s !important;
    }
    
    /* Remove box-shadow (expensive on mobile) */
    .product-card,
    .mix-match-card,
    .category-carousel-container,
    .sticky-footer {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Simplify borders */
    .product-card,
    .mix-match-card {
        border: 1px solid #E5E7EB !important;
    }
}

/* ========================================
   SIMPLIFIED PRODUCT CARDS
   ======================================== */

@media (max-width: 768px) {
    /* Remove 3D effects */
    .product-image-container .image-backdrop,
    .product-image-container::before {
        display: none !important;
    }
    
    /* Simplify card hover */
    .product-card:hover {
        transform: none !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    }
    
    /* Remove floating badges animation */
    .discount-badge-float {
        animation: none !important;
        position: absolute !important;
        top: 8px !important;
        right: 8px !important;
    }
    
    /* Remove glow effects */
    .badge-glow-effect,
    .card-border-glow {
        display: none !important;
    }
    
    /* Simplify pricing panel */
    .pricing-glass-panel {
        background: #FFFFFF !important;
        backdrop-filter: none !important;
        box-shadow: none !important;
    }
    
    /* Remove savings banner animation */
    .savings-banner {
        animation: none !important;
    }
}

/* ========================================
   SIMPLIFIED HERO SECTION
   ======================================== */

@media (max-width: 768px) {
    /* Disable hero logo animation */
    .hero-bogo-logo-large {
        animation: none !important;
    }
    
    /* Keep hero carousel rows moving - important for UX */
    .carousel-row {
        /* Keep original animations - don't disable */
    }
    
    .carousel-row:nth-child(1) {
        animation: scrollRow 25s linear infinite !important;
    }
    
    .carousel-row:nth-child(2) {
        animation: scrollRow 30s linear infinite reverse !important;
    }
    
    .carousel-row:nth-child(3) {
        animation: scrollRow 28s linear infinite !important;
    }
    
    /* Stop individual product cards from having additional animations */
    .hero-product-card {
        animation: none !important;
    }
    
    /* Simplify stats badges */
    .stat-badge {
        animation: none !important;
        background: rgba(255, 255, 255, 0.2) !important;
        backdrop-filter: none !important;
    }
}

/* ========================================
   SIMPLIFIED HOW BOGO WORKS
   ======================================== */

@media (max-width: 768px) {
    /* Remove step card animations */
    .step-card {
        animation: none !important;
    }
    
    /* Remove icon glow */
    .step-icon-wrapper {
        box-shadow: none !important;
    }
    
    /* Remove example item animations */
    .example-item,
    .example-plus,
    .example-equals {
        animation: none !important;
    }
    
    /* Simplify total card */
    .example-total {
        animation: none !important;
        background: #DC2626 !important;
    }
    
    /* Subtle mobile confetti - only show 3 particles with simpler animation */
    .confetti-particle:nth-child(1),
    .confetti-particle:nth-child(3),
    .confetti-particle:nth-child(5) {
        animation: gentleSparkle 4s ease-in-out infinite !important;
        font-size: 0.9rem !important;
    }
    
    /* Hide the other 3 for performance */
    .confetti-particle:nth-child(2),
    .confetti-particle:nth-child(4),
    .confetti-particle:nth-child(6) {
        display: none !important;
    }
    
    /* Add subtle glow to the savings value on mobile */
    .example-total .total-value {
        animation: gentleGlow 3s ease-in-out infinite !important;
        text-shadow: 0 0 8px rgba(255, 255, 255, 0.3) !important;
    }
}

/* ========================================
   SIMPLIFIED CAROUSELS
   ======================================== */

@media (max-width: 768px) {
    /* Remove gradient animation */
    .category-carousel-container {
        background: #DC2626 !important;
        animation: none !important;
    }
    
    /* Remove shine effect */
    .category-carousel-container::before {
        display: none !important;
    }
    
    /* Simplify carousel cards */
    .carousel-product-card {
        transition: none !important;
    }
    
    .carousel-product-card:hover {
        transform: none !important;
    }
}

/* ========================================
   SIMPLIFIED MIX & MATCH CARDS
   ======================================== */

@media (max-width: 768px) {
    /* Remove gradient animation from card background */
    .mix-match-card {
        background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%) !important;
        animation: none !important;
    }
    
    /* Remove shine effect */
    .mix-match-card::before {
        display: none !important;
    }
    
    /* Keep carousel moving - faster on mobile for better UX */
    .mix-match-carousel {
        animation: scrollLeft 12s linear infinite !important;
    }
    
    /* Simplify product slides */
    .mix-match-product-slide {
        transition: none !important;
    }
    
    /* Remove hover effects */
    .mix-match-product-image:hover {
        transform: none !important;
    }
}

/* ========================================
   SIMPLIFIED STICKY FOOTER
   ======================================== */

@media (max-width: 768px) {
    /* Remove button animations */
    .scan-product-btn,
    .scroll-to-top-btn-small {
        transition: opacity 0.2s ease !important;
    }
    
    /* Remove icon animations */
    .scan-product-btn i,
    .scroll-to-top-btn-small i {
        animation: none !important;
    }
    
    /* Simplify hover effects */
    .scan-product-btn:hover,
    .scroll-to-top-btn-small:hover {
        transform: none !important;
        opacity: 0.9 !important;
    }
    
    /* Remove shimmer effect */
    .scan-product-btn::before {
        display: none !important;
    }
}

/* ========================================
   SIMPLIFIED POPUP
   ======================================== */

@media (max-width: 768px) {
    /* Simplify popup background */
    .barcode-popup {
        backdrop-filter: none !important;
        background: rgba(0, 0, 0, 0.9) !important;
    }
    
    /* Simplify popup content */
    .barcode-popup-content {
        animation: fadeIn 0.2s ease !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
    }
    
    /* Remove scanner line animation */
    .scanner-line {
        display: none !important;
    }
    
    /* Simplify result animations */
    .success-icon,
    .error-icon {
        animation: none !important;
    }
    
    /* Remove button hover effects */
    .check-product-btn:hover,
    .manual-entry-btn:hover {
        transform: none !important;
        opacity: 0.9 !important;
    }
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

@media (max-width: 768px) {
    /* Use GPU acceleration for scrolling only */
    #productsGrid {
        will-change: scroll-position;
        transform: translateZ(0);
    }
    
    /* Remove will-change from everything else */
    * {
        will-change: auto !important;
    }
    
    /* Disable smooth scrolling (can be janky) */
    html {
        scroll-behavior: auto !important;
    }
    
    /* Simplify images */
    img {
        image-rendering: auto !important;
    }
}

/* ========================================
   MINIMAL MODE FOR VERY OLD PHONES
   ======================================== */

/* This class added by JS for very old devices */
.minimal-mode {
    /* Remove ALL visual effects */
    * {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    
    /* Solid colors only */
    .sticky-footer {
        background: #FFFFFF !important;
        border-top: 2px solid #DC2626 !important;
    }
    
    .scan-product-btn {
        background: #DC2626 !important;
    }
    
    .scroll-to-top-btn-small {
        background: #DC2626 !important;
        border: 2px solid #FFFFFF !important;
    }
    
    .product-card {
        background: #FFFFFF !important;
        border: 1px solid #E5E7EB !important;
    }
    
    .mix-match-card,
    .category-carousel-container {
        background: #DC2626 !important;
    }
    
    /* Remove hover effects entirely */
    *:hover {
        transform: none !important;
        box-shadow: none !important;
    }
}

/* ========================================
   PRINT OPTIMIZATIONS
   ======================================== */

@media print {
    /* Hide interactive elements */
    .sticky-footer,
    .barcode-popup,
    .search-filter-bar {
        display: none !important;
    }
    
    /* Simplify for printing */
    * {
        animation: none !important;
        transition: none !important;
        box-shadow: none !important;
    }
}