/**
 * CSS Otimizado para Lazy Loading Avançado
 * Suporte visual e otimizações de performance para imagens
 */

/* Base styles para lazy loading */
img {
    /* Previne layout shift durante carregamento */
    aspect-ratio: attr(width) / attr(height);
    max-width: 100%;
    height: auto;
    
    /* Otimizações de renderização */
    image-rendering: optimizeSpeed;
    image-rendering: -webkit-optimize-contrast;
    
    /* Transições suaves */
    transition: opacity 0.3s ease-in-out, transform 0.2s ease;
}

/* Estados de carregamento */
img.loading {
    opacity: 0.7;
    filter: blur(2px);
    background-color: #f3f4f6;
    background-image: 
        linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%),
        linear-gradient(#f3f4f6 0%, #e5e7eb 50%, #f3f4f6 100%);
    background-size: 200% 100%, 100% 100%;
    animation: shimmer 1.5s infinite;
}

img.loaded {
    opacity: 1;
    filter: none;
    animation: none;
}

img.error {
    opacity: 0.5;
    filter: grayscale(100%);
    background-color: #fee2e2;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='15' y1='9' x2='9' y2='15'%3E%3C/line%3E%3Cline x1='9' y1='9' x2='15' y2='15'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px 24px;
}

/* Animação shimmer para loading */
@keyframes shimmer {
    0% {
        background-position: -200% 0, 0 0;
    }
    100% {
        background-position: 200% 0, 0 0;
    }
}

/* Placeholders específicos por tipo de conteúdo */
.img-ratio {
    position: relative;
    background-color: #f3f4f6;
    background-image: 
        linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%),
        linear-gradient(#f3f4f6 0%, #e5e7eb 50%, #f3f4f6 100%);
    background-size: 200% 100%, 100% 100%;
    animation: shimmer 1.5s infinite;
    overflow: hidden;
}

.img-ratio::before {
    content: '';
    display: block;
    padding-top: 75%; /* 4:3 aspect ratio por padrão */
}

.img-ratio img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Aspect ratios específicos */
.img-ratio--square::before {
    padding-top: 100%;
}

.img-ratio--16-9::before {
    padding-top: 56.25%;
}

.img-ratio--3-2::before {
    padding-top: 66.67%;
}

.img-ratio--2-1::before {
    padding-top: 50%;
}

/* Otimizações para galeria */
.galleryGrid__item {
    contain: layout style paint;
    will-change: transform;
}

.galleryGrid__item img {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Otimizações para cards */
.card img {
    contain: layout;
    will-change: transform;
}

.card:hover img {
    transform: scale(1.02);
}

/* Otimizações para hero/masthead */
.hero img,
.masthead img {
    /* Imagens críticas - carregar imediatamente */
    fetchpriority: high;
    loading: eager;
}

/* Otimizações para imagens abaixo da dobra */
.below-fold img {
    loading: lazy;
    fetchpriority: low;
}

/* Otimizações para imagens em modais */
.modal img {
    contain: layout style paint;
    will-change: transform;
}

/* Estados de hover otimizados */
.hover-effect img {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-effect:hover img {
    transform: scale(1.05);
}

/* Otimizações para dispositivos móveis */
@media (max-width: 768px) {
    img {
        /* Reduzir qualidade em mobile para economizar dados */
        image-rendering: optimizeSpeed;
    }
    
    .img-ratio::before {
        padding-top: 100%; /* Square em mobile */
    }
    
    /* Desabilitar hover effects em mobile */
    .hover-effect:hover img {
        transform: none;
    }
}

/* Otimizações para conexões lentas */
@media (prefers-reduced-data: reduce) {
    img {
        /* Carregar imagens de menor qualidade */
        image-rendering: optimizeSpeed;
    }
    
    .img-ratio {
        /* Placeholder mais simples */
        background-image: linear-gradient(#f3f4f6 0%, #e5e7eb 100%);
        animation: none;
    }
}

/* Otimizações para modo escuro */
@media (prefers-color-scheme: dark) {
    .img-ratio {
        background-color: #374151;
        background-image: 
            linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.1) 50%, transparent 100%),
            linear-gradient(#374151 0%, #4b5563 50%, #374151 100%);
    }
    
    img.error {
        background-color: #7f1d1d;
    }
}

/* Otimizações para impressão */
@media print {
    img {
        /* Carregar todas as imagens para impressão */
        loading: eager;
        opacity: 1 !important;
        filter: none !important;
    }
    
    .img-ratio {
        animation: none;
        background-image: none;
    }
}

/* Utilitários para debugging */
.debug-lazy-loading img {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

.debug-lazy-loading img.loaded {
    outline-color: #10b981;
}

.debug-lazy-loading img.error {
    outline-color: #ef4444;
}

.debug-lazy-loading img.loading {
    outline-color: #f59e0b;
}

/* Performance hints */
img[data-priority="high"] {
    fetchpriority: high;
    loading: eager;
}

img[data-priority="low"] {
    fetchpriority: low;
    loading: lazy;
}

/* Otimizações para WebP */
img[src$=".webp"] {
    /* WebP já é otimizado */
    image-rendering: optimizeQuality;
}

/* Fallback para browsers sem suporte a aspect-ratio */
@supports not (aspect-ratio: 1) {
    .img-ratio {
        height: 0;
        overflow: hidden;
    }
    
    .img-ratio img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}