/* Fast Loading CSS - Image Optimization Styles */

/* Loading placeholder animation */
.product-image {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    transition: opacity 0.3s ease;
}

.product-image.image-loaded {
    animation: none;
    background: none;
}

.product-image.image-loading {
    opacity: 0.7;
}

.product-image.image-error {
    background: #f8f9fa;
    opacity: 0.8;
}

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

/* Faster image rendering */
.product-image {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    will-change: transform;
    backface-visibility: hidden;
}

/* Preload hint for critical images */
.critical-image {
    content-visibility: auto;
    contain-intrinsic-size: 300px 300px;
}

/* Reduce layout shift */
.product-card {
    contain: layout style paint;
}

/* Optimize animations */
.card-hover {
    transform: translateZ(0);
    will-change: transform;
}

/* Loading spinner for slow connections */
.image-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}