/**
 * Image Performance Optimization CSS
 * Tối ưu hóa performance cho images
 */

/* Optimize all images */
img {
    /* Prevent layout shift */
    max-width: 100%;
    height: auto;
    
    /* Optimize rendering */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    
    /* Smooth loading transition */
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

/* Images that are loading */
img[loading="lazy"] {
    /* Slight fade-in effect */
    opacity: 0.8;
}

img[loading="lazy"]:not([data-loaded]) {
    /* Placeholder while loading */
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s ease-in-out infinite;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Mark as loaded when image loads */
img[data-loaded="true"] {
    opacity: 1;
}

/* Product images optimization */
.product-image img,
.product-card img {
    /* Prevent layout shift with aspect ratio */
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 100%;
    height: 100%;
    
    /* Optimize for performance */
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* Banner/hero background optimization */
.hero {
    /* GPU acceleration */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    
    /* Optimize background image rendering */
    background-attachment: scroll; /* Fixed can be slow on mobile */
    will-change: background-position;
}

/* Lazy load fade-in animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

img[loading="lazy"][data-loaded="true"] {
    animation: fadeIn 0.4s ease-in-out;
}

/* Optimize thumbnail images */
.thumbnail-item img,
.thumbnail-row img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease;
}

/* Optimize brand/logo images */
.category-image img,
.brand-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Prevent images from being too large */
img {
    max-width: 100%;
    height: auto;
}

/* Optimize background images */
[style*="background-image"] {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Use will-change sparingly - only for elements that will animate */
}

/* Responsive images */
@media (max-width: 768px) {
    img {
        /* Reduce quality slightly on mobile for faster loading */
        image-rendering: auto;
    }
    
    .hero {
        /* Simpler background on mobile */
        background-attachment: scroll;
    }
}