/**
 * CSS para Otimização de Imagens - Arte e Crochê
 * 
 * Este arquivo contém estilos específicos para melhorar
 * a renderização e qualidade das imagens no site.
 */

/* Configurações globais para imagens otimizadas */
.optimized-image {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    image-rendering: high-quality;
    -ms-interpolation-mode: bicubic;
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform;
}

/* Melhorias específicas para imagens de produtos */
.produto-imagem .optimized-image,
.ml-product-image .optimized-image {
    transition: transform 0.3s ease, filter 0.3s ease;
    filter: contrast(1.02) saturate(1.05);
}

.produto-card:hover .produto-imagem .optimized-image,
.ml-product-card:hover .ml-product-image .optimized-image {
    transform: scale(1.05) translateZ(0);
    filter: contrast(1.05) saturate(1.1);
}

/* Placeholder simplificado (sem animação) */
.image-placeholder {
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 0.9rem;
    min-height: 200px;
}

/* Estilos para imagens WebP */
.webp .optimized-image[src$=".webp"] {
    image-rendering: auto;
    image-rendering: -webkit-optimize-contrast;
}

/* Melhorias para galeria de imagens */
.galeria-item .optimized-image {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: high-quality;
    -ms-interpolation-mode: bicubic;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Otimizações para imagens hero */
.hero-image .optimized-image,
.banner-image .optimized-image {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: high-quality;
    -ms-interpolation-mode: bicubic;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Melhorias para miniaturas */
.thumb-item .optimized-image,
.list-thumb .optimized-image {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: bicubic;
    transition: transform 0.2s ease;
}

.thumb-item:hover .optimized-image {
    transform: scale(1.1) translateZ(0);
}

/* Imagens sempre visíveis */
.optimized-image {
    opacity: 1;
}

/* Melhorias para diferentes tamanhos de tela */
@media (max-width: 768px) {
    .optimized-image {
        image-rendering: auto;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

/* Suporte para telas de alta densidade (Retina) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .optimized-image {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
        image-rendering: pixelated;
    }
}

/* Estilos para imagens com erro de carregamento */
.optimized-image[alt]:after {
    content: attr(alt);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    display: none;
}

.optimized-image[src=""],
.optimized-image[src="#"],
.optimized-image:not([src]) {
    display: none;
}

/* Melhorias para performance */
.optimized-image {
    content-visibility: auto;
    contain-intrinsic-size: 300px 200px;
}

/* Estilos para diferentes formatos de imagem */
.optimized-image[src$=".jpg"],
.optimized-image[src$=".jpeg"] {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: high-quality;
}

.optimized-image[src$=".png"] {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.optimized-image[src$=".webp"] {
    image-rendering: auto;
    image-rendering: -webkit-optimize-contrast;
}

/* Animações suaves para transições */
.produto-card .optimized-image,
.ml-product-card .optimized-image {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Melhorias para acessibilidade */
@media (prefers-reduced-motion: reduce) {
    .optimized-image {
        transition: none;
    }
    
    .image-placeholder {
        background: #f0f0f0;
    }
}

/* Estilos para modo escuro */
@media (prefers-color-scheme: dark) {
    .image-placeholder {
        background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
        color: #ccc;
    }
}

/* Otimizações específicas para impressão */
@media print {
    .optimized-image {
        image-rendering: auto;
        -webkit-print-color-adjust: exact;
        color-adjust: exact;
    }
}