/* ============================================================
   mobile-performance.css — Reduce rendering cost on mobile
   ============================================================
   This file reduces paint/composite/reflow costs on mobile
   WITHOUT changing desktop visual design.
   
   Targets: box-shadow, hover transforms, transitions, filters
   Result: Fewer GPU composite layers, less main-thread paint
   ============================================================ */

/* ---- Mobile: Reduce hover/transform overhead ---- */
@media (max-width: 768px) {
    /* Disable hover-up transforms (46 elements have this class)
       Mobile has no hover — these transitions are wasted work */
    .hover-up:hover {
        transform: none !important;
    }
    .hover-up, .hover-up:hover {
        transition: none !important;
    }

    /* Simplify product card shadows (reduces paint cost) */
    .product-cart-wrap {
        box-shadow: none !important;
    }
    .product-cart-wrap:hover {
        box-shadow: 0 1px 4px rgba(0,0,0,.06) !important;
    }

    /* Reduce all transition durations (145 transitions in style.css) */
    .banner-img,
    .product-img-action-wrap img,
    .category-img img,
    .card-2 .card-img img {
        transition-duration: 0.1s !important;
    }

    /* Disable zoom-on-hover for product images on mobile */
    .product-img-action-wrap:hover img {
        transform: none !important;
    }

    /* Simplify banner hover effects */
    .banner-img:hover {
        box-shadow: none !important;
    }

    /* Reduce footer/section shadows */
    .section-padding,
    .footer-area {
        box-shadow: none !important;
    }

    /* Disable expensive filter effects */
    img.blur-up {
        filter: none !important;
        transition: none !important;
    }

    /* Disable ALL animate__animated classes on mobile (39 elements)
       Each creates a GPU composite layer via animation-fill-mode: both */
    .animate__animated {
        animation: none !important;
        animation-fill-mode: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /* Disable img-hover-scale zoom effect on mobile */
    .img-hover-scale:hover img {
        transform: none !important;
    }
    .img-hover-scale img {
        transition: none !important;
    }

    /* Disable card hover transforms */
    .card-2:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    /* Reduce ALL transitions on mobile (145 in style.css) */
    .btn, .nav-link, a, .badge,
    .product-content-wrap, .category-img,
    .footer-link a, .mobile-menu a {
        transition: color 0.1s !important;
    }

    /* Disable slider animation between slides on mobile */
    .single-animation-wrap .slider-animated-1 > * {
        animation: none !important;
    }
}

/* ---- Reduce animation duration globally ---- */
:root {
    --animate-duration: 0.6s; /* Was 1s — 40% faster = 40% less work */
}

/* ---- Reduce simultaneous WOW animations ---- */
/* Stagger animations less aggressively (reduces concurrent GPU work) */
.wow[data-wow-delay] {
    animation-delay: 0s !important; /* Remove stagger — fire all at once = finish faster */
}

/* ---- Slick performance: reduce transform overhead ---- */
.slick-track {
    will-change: transform; /* Promote to own GPU layer */
}
.slick-slide img {
    will-change: auto; /* Don't promote every image */
}

/* ---- Prefers reduced motion (accessibility + performance) ---- */
@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;
    }
}