/* =====================================================
   Performance Mobile - ClubeMix
   =====================================================
   Descrição: Otimizações de performance para mobile
   Data: 2025-11-09
   ===================================================== */

/* Otimizações de Renderização */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Melhorias de Scroll */
html {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Otimizações de Imagens */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Prevenir Layout Shift */
img[width][height] {
    aspect-ratio: attr(width) / attr(height);
}

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

/* Melhorias de Performance em Mobile */
@media (max-width: 768px) {
    /* Reduzir sombras complexas em mobile */
    .luxury-shadow {
        box-shadow: 0 10px 20px rgba(255, 215, 0, 0.1);
    }
    
    /* Simplificar gradientes em mobile */
    .gradient-gold {
        background: #FFD700;
    }
    
    /* Reduzir efeitos hover em mobile */
    *:hover {
        transform: none !important;
    }
    
    /* Otimizar fontes */
    body {
        font-size: 16px;
        line-height: 1.5;
    }
    
    /* Reduzir padding em mobile */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Melhorias de Performance em Conexões Lentas */
@media (prefers-reduced-data: reduce) {
    /* Desabilitar imagens de fundo */
    [data-bg-image] {
        background-image: none !important;
    }
    
    /* Reduzir animações */
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* Otimizações de Touch */
@media (hover: none) and (pointer: coarse) {
    /* Melhorar feedback visual em touch */
    button:active,
    a:active,
    .clickable:active {
        opacity: 0.7;
        transform: scale(0.98);
    }
    
    /* Remover hover em dispositivos touch */
    *:hover {
        transform: none;
    }
}

/* Melhorias de Acessibilidade Mobile */
@media (max-width: 768px) {
    /* Aumentar tamanho de fonte mínima */
    body {
        font-size: 16px;
    }
    
    /* Melhorar contraste */
    .text-gray-400 {
        color: rgba(255, 255, 255, 0.7);
    }
    
    /* Aumentar espaçamento entre elementos */
    .space-y-4 > * + * {
        margin-top: 1.5rem;
    }
}

/* Otimizações de Layout */
@media (max-width: 768px) {
    /* Stack vertical em mobile */
    .flex-row {
        flex-direction: column;
    }
    
    /* Full width em mobile */
    .w-auto {
        width: 100%;
    }
    
    /* Reduzir padding em mobile */
    .p-6 {
        padding: 1rem;
    }
    
    .px-6 {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .py-6 {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}

/* Melhorias de Performance de Fontes */
@font-face {
    font-display: swap;
}

/* Otimizações de CSS */
@media (max-width: 768px) {
    /* Desabilitar efeitos desnecessários */
    .backdrop-blur-sm {
        backdrop-filter: none;
        background: rgba(0, 0, 0, 0.9);
    }
}