/* ====================================================================
   GPU ACCELERATION STYLES
   Applied when body has 'gpu-enabled' class
   Enables hardware acceleration without visual changes
   ==================================================================== */

/* Base GPU acceleration for all elements when GPU is enabled */
.gpu-enabled * {
    /* Prevent flickering during transforms */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    
    /* Optimize for animations */
    -webkit-perspective: 1000px;
    perspective: 1000px;
}

/* Smooth scrolling optimizations */
.gpu-enabled html {
    /* Enable smooth scrolling for entire page */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.gpu-enabled body {
    /* Optimize body scrolling */
    -webkit-overflow-scrolling: touch;
}

/* Force GPU acceleration on main containers with 3D transforms */
.gpu-enabled #app,
.gpu-enabled .container,
.gpu-enabled .view-container,
.gpu-enabled .scroll-container {
    /* Create new GPU layer with 3D transform */
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    
    /* Hint browser about future changes */
    will-change: transform;
    
    /* Container-level containment for layout isolation */
    contain: layout style;
}

/* GPU acceleration for images with 3D transforms */
.gpu-enabled img,
.gpu-enabled .product-image,
.gpu-enabled .shop-logo,
.gpu-enabled .top-banner-center-logo {
    /* Create GPU layer for images with 3D transform */
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    
    /* Optimize image rendering */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* GPU acceleration for cards and interactive elements with containment */
.gpu-enabled .product-card,
.gpu-enabled .shop-card,
.gpu-enabled .cart-item,
.gpu-enabled .option-button,
.gpu-enabled button {
    /* Hardware accelerate interactive elements */
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    
    /* CSS containment for better GPU layer isolation */
    contain: layout style paint;
}

/* GPU acceleration for modals and overlays with 3D transforms */
.gpu-enabled .modal,
.gpu-enabled .modal-overlay,
.gpu-enabled #loading {
    /* Create separate GPU layer for overlays with 3D transform */
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    will-change: opacity, transform;
    
    /* CSS containment for overlay isolation */
    contain: layout style paint;
}

/* GPU acceleration for animations with 3D transforms */
.gpu-enabled .loading-content,
.gpu-enabled .spinner {
    /* Hardware accelerate spinning animations with 3D transform */
    transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0deg);
    -webkit-transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0deg);
    will-change: transform;
    
    /* Disable pointer events for loading animations */
    pointer-events: none;
}

/* Optimize scrolling performance with 3D transforms */
.gpu-enabled .scrollable,
.gpu-enabled .product-list,
.gpu-enabled .cart-items-container,
.gpu-enabled .products-grid,
.gpu-enabled .category-products,
.gpu-enabled .shop-list {
    /* Enable smooth GPU-accelerated scrolling with 3D transform */
    -webkit-overflow-scrolling: touch;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    
    /* Smooth momentum scrolling */
    scroll-behavior: smooth;
    
    /* Advanced containment for scroll containers */
    contain: layout style paint size;
}

/* GPU acceleration for transitions with pointer optimization */
.gpu-enabled * {
    /* Ensure transitions use GPU */
    transition-property: transform, opacity;
    -webkit-transition-property: -webkit-transform, opacity;
}

/* Disable pointer events during animations for smoother performance */
.gpu-enabled *:hover {
    /* Prevent pointer events during hover transitions */
    pointer-events: auto;
}


/* Re-enable pointer events after animations complete */
.gpu-enabled .animation-complete {
    pointer-events: auto;
}

/* Specific optimizations for animated properties with 3D transforms */
.gpu-enabled .top-banner-basket-count,
.gpu-enabled .notification,
.gpu-enabled .success-message {
    /* Elements that animate opacity with 3D transform */
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    will-change: opacity, transform;
}

/* 3D transform hints for interactive hover states */
.gpu-enabled .product-card:hover,
.gpu-enabled .shop-card:hover {
    /* GPU acceleration without scaling */
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
}

.gpu-enabled .option-button:hover {
    /* GPU acceleration without scaling */
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
}

/* GPU acceleration for buttons without scaling */
.gpu-enabled button:hover {
    /* GPU acceleration without size change */
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
}

/* 3D transform for form elements */
.gpu-enabled input:focus,
.gpu-enabled textarea:focus,
.gpu-enabled select:focus {
    /* GPU acceleration without scaling */
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
}

/* Grid overlay optimization with 3D transform */
.gpu-enabled .grid-overlay {
    /* Ensure grid overlay doesn't impact performance with 3D transform */
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    pointer-events: none;
}

/* Form elements optimization with 3D transforms */
.gpu-enabled input,
.gpu-enabled textarea,
.gpu-enabled select {
    /* Prevent lag during form interactions with 3D transform */
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
}

/* GPU-accelerated lazy loading (invisible optimization) */
.gpu-enabled .gpu-lazy-optimized {
    /* Create GPU layer for optimized loading - no visual changes */
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    
    /* Optimize for image loading */
    contain: layout style;
}

/* Native lazy loading optimization */
.gpu-enabled img[loading="lazy"],
.gpu-enabled .lazy-image {
    /* GPU optimization for lazy loaded images */
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
}

/* CPU Fallback - Disable GPU optimizations when not available */
.cpu-fallback * {
    /* Remove GPU hints to prevent overhead */
    will-change: auto !important;
    transform: none !important;
    -webkit-transform: none !important;
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
    perspective: none !important;
    -webkit-perspective: none !important;
}