/**
 * CSS Otimizações para Prevenir Reflows Forçados
 * Aplica técnicas CSS para reduzir reflows e melhorar performance
 */

/* Otimizações para elementos que causam reflows */
.js-mouse-move-container,
.js-pin,
.galleryGrid__item,
.hero,
.slider-container {
    /* Força o navegador a criar uma nova camada de composição */
    will-change: transform;
    /* Otimiza renderização */
    transform: translateZ(0);
    /* Melhora performance de animações */
    backface-visibility: hidden;
}

/* Elementos com animações GSAP */
.gsap-animated {
    will-change: transform, opacity;
    transform: translateZ(0);
}

/* Otimizações para sliders e carrosséis */
.swiper-container,
.slick-slider,
.carousel-container {
    will-change: transform;
    contain: layout style paint;
}

/* Elementos que mudam de tamanho frequentemente */
.resizable-element,
.dynamic-height {
    contain: layout;
}

/* Otimizações para scroll */
.scroll-container {
    contain: layout style paint;
    /* Melhora performance de scroll */
    scroll-behavior: smooth;
}

/* Elementos com hover effects */
.hover-effect {
    will-change: transform, opacity;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Otimizações para imagens */
img {
    /* Evita reflows durante carregamento */
    max-width: 100%;
    height: auto;
    /* Melhora renderização */
    image-rendering: optimizeSpeed;
}

/* Placeholders para evitar layout shift */
.image-placeholder {
    background-color: #f0f0f0;
    display: block;
    /* Mantém proporção durante carregamento */
    aspect-ratio: 4/3;
}

/* Otimizações para texto dinâmico */
.dynamic-text {
    /* Evita reflows quando texto muda */
    min-height: 1.2em;
    contain: layout;
}

/* Elementos com posicionamento absoluto */
.absolute-positioned {
    /* Cria nova camada de composição */
    transform: translateZ(0);
    will-change: transform;
}

/* Otimizações para elementos com JavaScript */
.js-interactive {
    /* Prepara para mudanças de estado */
    will-change: auto;
}

/* Estados de loading para evitar reflows */
.loading-state {
    /* Mantém dimensões durante carregamento */
    min-height: 200px;
    contain: layout;
}

/* Otimizações para formulários */
.form-element {
    /* Evita reflows durante validação */
    contain: layout;
}

/* Elementos com shadow que podem causar reflows */
.shadow-element {
    /* Otimiza renderização de sombras */
    will-change: box-shadow;
}

/* Media queries para otimizações específicas */
@media (prefers-reduced-motion: reduce) {
    .gsap-animated,
    .hover-effect {
        will-change: auto;
        transition: none;
    }
}

/* Otimizações para dispositivos móveis */
@media (max-width: 768px) {
    .js-mouse-move-container {
        /* Desabilita efeitos de mouse em mobile */
        will-change: auto;
    }
    
    .parallax-element {
        /* Simplifica parallax em mobile */
        transform: none !important;
    }
}

/* Classes utilitárias para performance */
.performance-layer {
    transform: translateZ(0);
    will-change: transform;
}

.no-reflow {
    contain: layout style paint;
}

.optimized-scroll {
    contain: layout style;
    scroll-behavior: smooth;
}

/* Otimizações para elementos com JavaScript dinâmico */
.dynamic-content {
    /* Prepara para mudanças frequentes */
    will-change: contents;
    contain: layout;
}

/* Estados de transição otimizados */
.transition-optimized {
    will-change: transform, opacity;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Elementos que mudam de visibilidade */
.visibility-toggle {
    will-change: opacity, visibility;
    contain: layout style paint;
}