/* ============================================
   LERDOW CASA - Mobile Performance Fix
   Fix scroll freeze on mobile devices
   ============================================ */

/* --- GPU Acceleration for animated elements --- */
.hero-sticky,
.hero-canvas-container,
.hero-canvas-container img,
#heroImage,
.hero-overlay,
.hero-content {
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* --- Mobile-specific fixes --- */
@media (max-width: 1024px) {

    /* Reduce hero scroll zone — less frames to process */
    .hero {
        height: 200vh;
    }

    /* Lighter header — remove expensive backdrop-filter */
    .header {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(255, 255, 255, 0.99);
    }

    .header.scrolled {
        background: #fff;
    }

    /* Force GPU compositing on hero image */
    #heroImage {
        will-change: transform, opacity;
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }

    /* Prevent reflow on hero sticky */
    .hero-sticky {
        will-change: transform;
        -webkit-overflow-scrolling: touch;
        overflow: hidden;
        contain: layout style paint;
    }

    /* Contain paint on hero section to limit repaint area */
    .hero {
        contain: layout style;
    }

    /* Reduce transition overhead on product images */
    .product-image {
        transition: none;
    }

    .product-card:hover .product-image.primary,
    .product-card:hover .product-image.secondary {
        transform: none;
    }

    /* Simpler overlay transition */
    .hero-overlay {
        transition: none;
    }

    /* Disable smooth scroll behavior — causes jank on older mobiles */
    html {
        scroll-behavior: auto;
    }

    /* Lighter shadows on mobile */
    .product-card:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    /* Optimize newsletter popup */
    .newsletter-popup {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    /* Cart overlay — lighter */
    .cart-overlay {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    /* Prevent body scroll-chaining */
    body {
        overscroll-behavior-y: none;
    }

    /* Force touch scroll optimization */
    main,
    .products-section,
    .footer {
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }
}

/* Extra fixes for small phones */
@media (max-width: 480px) {
    .hero {
        height: 150vh;
    }

    /* Disable all transitions during scroll for perf */
    .hero-content,
    .hero-subtitle {
        transition: none;
    }
}