/* ==========================================================================
   Performance Optimizations CSS
   ========================================================================== */

/* Otimizações de carregamento de fontes */
.font-display-swap {
    font-display: swap;
}

/* Lazy loading de imagens */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

img[loading="lazy"].loaded {
    opacity: 1;
}

/* Placeholder para imagens em carregamento */
.image-placeholder {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}

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

/* Otimização para animações AOS */
[data-aos] {
    pointer-events: none;
}

[data-aos].aos-animate {
    pointer-events: auto;
}

/* Redução de motion para usuários que preferem */
@media (prefers-reduced-motion: reduce) {
    [data-aos] {
        animation: none !important;
        transition: none !important;
    }
}

/* Otimizações de scroll */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* Container queries para melhor performance em layouts responsivos */
@container (min-width: 768px) {
    .container-responsive {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}

/* Otimizações de performance para cards */
.property-card,
.service-card {
    contain: layout style paint;
}

/* Carregamento crítico acima da dobra */
.above-fold {
    contain: layout;
}

/* Lazy loading para sections não críticas */
.below-fold {
    content-visibility: auto;
    contain-intrinsic-size: 300px;
}