/*
  Chrome Performance Override CSS
  Fixes excessive will-change declarations that cause lag in Chrome
*/

/* Only apply these fixes in Chrome-optimized mode */
.chrome-optimized {
    /* Reset will-change for all elements by default */
    * {
        will-change: auto !important;
    }
    
    /* Enable will-change only for actively hovering/animating elements */
    .minimal_review_card:hover,
    .review_card:hover,
    .product_card:hover,
    button:hover,
    .btn:hover {
        will-change: transform, box-shadow !important;
    }
    
    /* AOS elements only during animation */
    [data-aos].aos-animate {
        will-change: transform, opacity !important;
    }
    
    /* Reset AOS elements after animation */
    [data-aos].aos-animate.animation-complete {
        will-change: auto !important;
    }
    
    /* iPhone image only on hover */
    .iphone_new_image:hover {
        will-change: transform !important;
    }
    
    /* About us sections only when visible and animating */
    .about_us_left[data-aos].aos-animate,
    .about_us_right[data-aos].aos-animate {
        will-change: transform, opacity !important;
    }
    
    /* FAQ items only when opening/closing */
    .faq_item.active .faq_content {
        will-change: max-height !important;
    }
    
    /* Scrolling elements */
    .scroll-container:hover {
        will-change: transform !important;
    }
}

/* Low performance mode - disable all GPU acceleration */
.low-performance-mode * {
    will-change: auto !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    backface-visibility: visible !important;
    perspective: none !important;
    contain: none !important;
}

.low-performance-mode .minimal_review_card:hover,
.low-performance-mode .review_card:hover,
.low-performance-mode .product_card:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Chrome-specific transition optimizations */
.chrome-optimized .minimal_review_card,
.chrome-optimized .review_card,
.chrome-optimized .product_card {
    /* Use cheaper transitions for Chrome */
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.chrome-optimized [data-aos] {
    /* Simpler easing for better Chrome performance */
    transition: opacity 0.6s ease, transform 0.6s ease !important;
}

/* Force layout containment for better Chrome performance */
.chrome-optimized .about_us_container,
.chrome-optimized .review_section,
.chrome-optimized .shop_section {
    contain: layout style !important;
}

/* Reduce animation complexity on Chrome */
.chrome-optimized .about_us_left[data-aos="fade-right"] {
    transform: translateX(-30px) !important;
}

.chrome-optimized .about_us_right[data-aos="fade-left"] {
    transform: translateX(30px) !important;
}

.chrome-optimized .about_us_left[data-aos="fade-right"].aos-animate,
.chrome-optimized .about_us_right[data-aos="fade-left"].aos-animate {
    transform: translateX(0) !important;
}

/* Disable complex transforms on Chrome for smoother performance */
.chrome-optimized .about_us_left .about_us_badge,
.chrome-optimized .about_us_left .about_us_title,
.chrome-optimized .about_us_left .about_us_description,
.chrome-optimized .about_us_left .about_us_features > div {
    transform: none !important;
    transition: opacity 0.4s ease !important;
}

/* Chrome-specific media queries for performance */
@media (max-width: 768px) {
    .chrome-optimized * {
        /* Disable all animations on mobile Chrome for better performance */
        animation: none !important;
        transition: none !important;
        will-change: auto !important;
    }
    
    /* Ensure carousel animations work on mobile Chrome */
    .chrome-optimized.low-performance-mode .minimal_carousel_track {
        /* Keep carousel animation even in low performance mode */
        animation: minimalSlide 60s infinite linear !important;
        -webkit-animation: minimalSlide 60s infinite linear !important;
        will-change: transform !important;
        -webkit-will-change: transform !important;
        transform: translate3d(0, 0, 0) !important;
        -webkit-transform: translate3d(0, 0, 0) !important;
    }

    .chrome-optimized .minimal_carousel_track {
        /* Ensure mobile Chrome doesn't disable carousel animation */
        animation: minimalSlide 60s infinite linear !important;
        -webkit-animation: minimalSlide 60s infinite linear !important;
        will-change: transform !important;
        -webkit-will-change: transform !important;
        /* Don't override transform for carousel - let animation handle it */
        transform: translate3d(0, 0, 0) !important;
        -webkit-transform: translate3d(0, 0, 0) !important;
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
        perspective: 1000px !important;
        -webkit-perspective: 1000px !important;
    }
    
    .chrome-optimized .minimal_review_card {
        /* Conservative optimizations for mobile carousel cards */
        will-change: auto;
        transform: none;
    }
    
    .chrome-optimized .minimal_review_card:hover {
        /* Disable hover effects on mobile for better performance */
        will-change: auto !important;
        transform: none !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
    }
}

/* Chrome-specific fixes for About Us section scroll overlay issue */
.chrome-optimized .about_us_container {
    /* Ensure proper spacing and prevent overlay */
    margin-top: 0 !important;
    padding-top: 60px !important;
    position: relative !important;
    /* Prevent transforms from causing layout issues */
    transform: none !important;
    will-change: auto !important;
    /* Ensure proper stacking context */
    z-index: 1 !important;
    /* Prevent container from shifting during scroll */
    contain: layout style !important;
}

/* Prevent About Us animations from causing scroll positioning issues */
.chrome-optimized .about_us_left[data-aos="fade-right"],
.chrome-optimized .about_us_right[data-aos="fade-left"] {
    /* Disable problematic transforms that cause overlay */
    transform: none !important;
    /* Use only opacity for smoother Chrome performance */
    opacity: 0.6 !important;
    transition: opacity 0.6s ease !important;
}

.chrome-optimized .about_us_left[data-aos="fade-right"].aos-animate,
.chrome-optimized .about_us_right[data-aos="fade-left"].aos-animate {
    /* Simple opacity-only animation */
    opacity: 1 !important;
    transform: none !important;
}

/* Ensure header content stays in proper position */
.chrome-optimized .header_content {
    position: relative !important;
    z-index: 10 !important;
    /* Prevent shifts during scroll */
    contain: layout style !important;
}

/* Add clear separation between header and About Us sections */
.chrome-optimized .about_us_container::before {
    content: '' !important;
    display: block !important;
    height: 40px !important;
    width: 100% !important;
    clear: both !important;
}

/* Chrome mobile specific fixes */
@media (max-width: 768px) {
    .chrome-optimized .about_us_container {
        padding-top: 80px !important;
        margin-top: 20px !important;
    }
    
    /* Completely disable problematic animations on mobile Chrome */
    .chrome-optimized .about_us_left[data-aos],
    .chrome-optimized .about_us_right[data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
}