/**
 * PWA Performance Optimization CSS
 * File: /assets/pwa/css/pwa-performance.css
 * 
 * Fixes smooth scroll lag/freeze issues by:
 * 1. Removing global smooth scroll behavior (causes excessive reflows)
 * 2. Using transform3d for GPU acceleration
 * 3. Disabling expensive animations during scroll
 */

/* ============================================================
   SCROLL PERFORMANCE OPTIMIZATION
   ============================================================ */

/* 
   CRITICAL FIX: Disable global smooth scroll behavior
   This was causing 60+ fps to drop to 10-20 fps during scroll
   Bootstrap's @media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}
   needs to be overridden
*/
:root {
    scroll-behavior: auto !important;
}

/* 
   Enable smooth scroll ONLY for anchor link clicks
   Not during regular scrolling - this is efficient
*/
html {
    scroll-behavior: auto;
}

html[data-smooth-scroll="true"] {
    scroll-behavior: smooth;
}

/* ============================================================
   HARDWARE ACCELERATION
   ============================================================ */

/* 
   Optimize carousel and scrollable containers with GPU acceleration
   This prevents janky scrolling on mobile devices
*/
[data-highlight-carousel],
[data-carousel],
.carousel,
.carousel-inner,
.carousel-item,
.product-carousel,
.feed-container,
.table-responsive {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000px;
    -webkit-perspective: 1000px;
}

/* ============================================================
   INTERSECTION OBSERVER OPTIMIZATION
   ============================================================ */

/* 
   Optimize elements watched by IntersectionObserver
   These are frequently checked during scroll
*/
[data-highlight-item],
.carousel-item,
img[loading="lazy"],
[data-observe] {
    will-change: auto;
    transform: translateZ(0);
}

/* ============================================================
   AVOID LAYOUT THRASHING
   ============================================================ */

/* 
   Disable expensive transforms during scroll
   Use containment to limit layout recalculation scope
*/
.product-card,
[data-highlight-carousel],
.carousel-container {
    contain: layout style paint;
    -webkit-contain: layout style paint;
}

/* ============================================================
   POINTER EVENTS OPTIMIZATION
   ============================================================ */

/* 
   Improve touch responsiveness during scroll
   Use passive event listeners where possible (JavaScript)
*/
body {
    touch-action: pan-y; /* Allow vertical scroll to be non-blocking */
    -webkit-touch-callout: none; /* Disable callout menu on long press */
}

/* ============================================================
   ANIMATION FRAME OPTIMIZATION
   ============================================================ */

/* 
   Disable animations during scroll (passive scroll events)
   Only animate user interactions
*/
body.scrolling .smooth-animation,
body.scrolling [data-animate] {
    animation: none !important;
    transition: none !important;
}

/* Re-enable animations when scroll stops */
body.not-scrolling .smooth-animation,
body.not-scrolling [data-animate] {
    animation: auto !important;
    transition: auto !important;
}

/* ============================================================
   STICKY HEADER OPTIMIZATION
   ============================================================ */

/* 
   Optimize fixed/sticky positioning which causes paint on every scroll
   Use transform instead of position changes
*/
.site-main-header.scroll-active,
.sticky-header,
[data-sticky] {
    will-change: transform;
    position: fixed;
    transform: translateZ(0);
}

/* ============================================================
   REDUCE REPAINTS
   ============================================================ */

/* 
   Minimize repaints during scroll with efficient CSS
   Avoid shadows, glows, and expensive filters during scroll
*/
@media (hover: hover) {
    /* Only show shadows on hover, not during scroll */
    .product-card {
        box-shadow: none;
    }
    
    .product-card:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        transition: box-shadow 0.3s ease;
    }
}

/* ============================================================
   MOBILE OPTIMIZATION
   ============================================================ */

/* 
   Mobile devices have less processing power
   Optimize more aggressively on mobile
*/
@media (max-width: 768px) {
    /* Disable hardware acceleration on older mobile devices */
    @supports (contain: layout) {
        [data-highlight-carousel],
        .carousel,
        .feed-container {
            contain: layout style paint;
        }
    }
    
    /* Reduce animation complexity on mobile */
    .carousel-item,
    .product-card {
        transform: none;
    }
    
    /* Minimize blur/shadow effects on mobile */
    * {
        -webkit-font-smoothing: antialiased;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }
}

/* ============================================================
   REDUCE MOTION PREFERENCE
   ============================================================ */

/* 
   Respect user's motion preference
   Important for accessibility and 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;
    }
}

/* ============================================================
   PASSIVE SCROLL LISTENER FIX
   ============================================================ */

/* 
   JavaScript should use passive: true for scroll listeners
   This tells browser scroll is not interrupted by preventDefault()
   
   Example:
   window.addEventListener('scroll', handler, { passive: true });
   
   Instead of:
   window.addEventListener('scroll', handler);
*/