/*
 * LEDS Child Theme - Mobile Performance Optimizations
 * 
 * @package LEDS_Child_Theme
 * @version 1.0.3
 * 
 * Este arquivo contém otimizações específicas de performance para dispositivos móveis
 */

/* ========================================
   OTIMIZAÇÕES DE RENDERIZAÇÃO
   ======================================== */

/* Acelerar renderização de elementos */
.leds-header,
.leds-footer,
.leds-banner-section,
.leds-technology,
.leds-solutions-dark,
.leds-brands,
.leds-segments,
.leds-solutions-360,
.leds-blog-section,
.leds-cta-final {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform;
}

/* Otimizar animações para GPU */
.leds-animate,
.leds-button,
.leds-card,
.leds-menu > li > a {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* ========================================
   OTIMIZAÇÕES DE LAYOUT
   ======================================== */

/* Containment para melhor performance */
.leds-container,
.leds-grid,
.leds-technology-grid,
.leds-solutions-grid,
.leds-brands-grid,
.leds-segments-grid,
.leds-solutions-360-grid,
.leds-blog-grid,
.leds-info-grid {
    contain: layout style;
}

/* ========================================
   OTIMIZAÇÕES DE IMAGENS
   ======================================== */

/* Lazy loading placeholder */
.leds-lazy {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

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

/* Otimizar imagens para mobile */
@media (max-width: 768px) {
    img {
        max-width: 100%;
        height: auto;
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
    
    /* Reduzir qualidade de imagens em mobile se necessário */
    .leds-banner-image img,
    .leds-brand-logo,
    .leds-technology-icon {
        image-rendering: auto;
        -webkit-image-rendering: auto;
    }
}

/* ========================================
   OTIMIZAÇÕES DE FONTES
   ======================================== */

/* Preload de fontes críticas */
@font-face {
    font-family: 'Poppins';
    font-display: swap;
    src: url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
}

/* Otimizar renderização de texto */
body,
.leds-banner-title,
.leds-banner-subtitle,
.leds-technology-title,
.leds-solutions-dark-title,
.leds-brands-title,
.leds-segments-title,
.leds-solutions-360-title,
.leds-blog-title,
.leds-cta-final-title {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ========================================
   OTIMIZAÇÕES DE SCROLL
   ======================================== */

/* Smooth scroll otimizado */
html {
    scroll-behavior: smooth;
}

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

/* Otimizar scroll em containers */
.leds-modal-content,
.leds-faq-answer {
    -webkit-overflow-scrolling: touch;
    /* overflow-scrolling: touch; - propriedade não padrão, removida */
}

/* ========================================
   OTIMIZAÇÕES DE TOUCH
   ======================================== */

/* Melhorar responsividade touch */
.leds-button,
.leds-cta-button,
.leds-menu > li > a,
.leds-back-to-top {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Estados touch otimizados */
.leds-touch-active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
}

/* ========================================
   OTIMIZAÇÕES DE MEMÓRIA
   ======================================== */

.leds-modal:not(.leds-modal-open) {
    visibility: hidden;
    pointer-events: none;
}

/* Dropdown é controlado pelo hover no style.css principal */

/* Otimizar elementos fora da viewport */
.leds-animate:not(.leds-animated) {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.leds-animate.leds-animated {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================
   OTIMIZAÇÕES DE CARREGAMENTO
   ======================================== */

/* Critical CSS inline para elementos acima da dobra */


/* ========================================
   OTIMIZAÇÕES DE BATERIA
   ======================================== */

/* Reduzir animações em modo de economia de bateria */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Pausar animações quando não visível */
@media (prefers-reduced-motion: no-preference) {
    .leds-brands-carousel {
        animation-play-state: running;
    }
    
    .leds-brands-carousel:hover {
        animation-play-state: paused;
    }
}

/* ========================================
   OTIMIZAÇÕES DE REDE
   ======================================== */

/* Preload de recursos críticos */
.leds-critical-resources {
    display: none;
}

/* ========================================
   OTIMIZAÇÕES DE ACESSIBILIDADE
   ======================================== */

/* Melhorar contraste em modo escuro 
/* Reduzir transparência para melhor legibilidade */
@media (prefers-reduced-transparency: reduce) {
    .leds-header-sticky {
        background: var(--color-surface-base-white) !important;
        backdrop-filter: none !important;
    }
}

/* ========================================
   OTIMIZAÇÕES DE PRINT
   ======================================== */

@media print {
    .leds-lazy {
        background: none !important;
        animation: none !important;
    }
    
    .leds-animate {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ========================================
   UTILITÁRIOS DE PERFORMANCE
   ======================================== */

/* Classe para elementos que precisam de otimização de GPU */
.leds-gpu-accelerated {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform;
}

/* Classe para elementos que precisam de containment */
.leds-contained {
    contain: layout style;
}

/* Classe para elementos críticos */
.leds-critical {
    content-visibility: auto;
}

/* Classe para elementos não críticos */
.leds-non-critical {
    content-visibility: auto;
    contain-intrinsic-size: 0 500px;
}