/* Brand Image Optimization CSS */

/* Prevent brand images from being reloaded unnecessarily */
.brands-section img,
.brand-list img,
[data-brand-image] {
    /* Use will-change to optimize rendering */
    will-change: transform;
    
    /* Smooth transitions for any changes */
    transition: transform 0.2s ease, opacity 0.2s ease;
    
    /* Prevent layout shift */
    contain: layout style paint;
    
    /* Optimize for performance */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Cached brand images */
.brand-image-cached {
    /* Indicate cached state */
    opacity: 1;
    transform: scale(1);
}

/* Loading state for brand images */
.brands-section img.loading,
.brand-list img.loading {
    opacity: 0.7;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: brand-loading-shimmer 1.5s infinite;
}

/* Error state for brand images */
.brand-image-error {
    opacity: 0.5;
    filter: grayscale(100%);
}

/* Hover effects for brand images */
.brands-section img:hover,
.brand-list img:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Loading animation for brand images */
@keyframes brand-loading-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Optimize brand section performance */
.brands-section {
    /* Use transform3d to create a new stacking context */
    transform: translateZ(0);
    
    /* Optimize scrolling */
    -webkit-overflow-scrolling: touch;
    
    /* Prevent unnecessary repaints */
    backface-visibility: hidden;
}

/* Brand list optimization */
.brand-list {
    /* Optimize for performance */
    contain: layout style;
    
    /* Smooth scrolling */
    scroll-behavior: smooth;
}

/* Responsive brand images */
@media (max-width: 768px) {
    .brands-section img,
    .brand-list img {
        /* Smaller images on mobile for better performance */
        max-width: 100%;
        height: auto;
    }
}

/* Dark theme adjustments */
[data-bs-theme="dark"] .brands-section img.loading,
[data-bs-theme="dark"] .brand-list img.loading {
    background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
}

/* Print styles */
@media print {
    .brands-section img,
    .brand-list img {
        /* Ensure images print properly */
        -webkit-print-color-adjust: exact;
        color-adjust: exact;
        
        /* Remove hover effects for print */
        transform: none !important;
        box-shadow: none !important;
    }
}