/**
 * ✅ OPTIMIZADO: CSS para Categories Slider con mejor rendimiento
 * Archivo CSS separado correctamente del PHP
 */

/* Contenedor principal del carrusel */
#categories-carousel-track {
    width: 100%;
    will-change: transform; /* Optimización GPU */
}

/* Manejo de clones */
#categories-carousel-track .clone {
    display: none;
}

#categories-carousel-track.initialized .clone {
    display: block;
}

#categories-carousel-track.initialized {
    transition: transform 500ms ease-in-out;
}

#categories-carousel-track > div:not(.clone) {
    flex-shrink: 0;
}

/* Optimizaciones de imágenes */
.category-lazy-img {
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0); /* Forzar aceleración GPU */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Estados de carga */
.categories-section-loading {
    opacity: 0.8;
    pointer-events: none;
    filter: blur(0.5px);
}

.categories-section-loaded {
    opacity: 1;
    pointer-events: auto;
    filter: none;
    transition: opacity 0.3s ease, filter 0.3s ease;
}

/* Optimización para dispositivos lentos */
@media (prefers-reduced-motion: reduce) {
    .category-lazy-img {
        transition: none !important;
    }
    
    .group:hover .category-lazy-img {
        transform: none !important;
    }
    
    #categories-carousel-track.initialized {
        transition: none !important;
    }
}

/* Optimización para pantallas de alta densidad */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .category-lazy-img {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* Contenedor optimizado */
#categories-section {
    contain: layout style paint; /* CSS Containment para mejor rendimiento */
}

/* Botones de navegación optimizados */
#categories-prev-btn,
#categories-next-btn,
#categories-prev-btn-mobile,
#categories-next-btn-mobile {
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* Hover effects optimizados */
.category-image-container {
    overflow: hidden;
    contain: layout style paint;
}

.category-image-container:hover .category-lazy-img {
    transform: scale(1.05) translateZ(0);
}