/* Mobile Performance CSS - Otimizado para celular */
/* Reduz CLS e melhora font-display para mobile */

/* Font Display - Fontes carregadas via Google Fonts API */
/* Removido @font-face hardcoded para evitar erro 404 */
/* As fontes são carregadas automaticamente pelo link do Google Fonts no HTML */

/* Prevenir CLS em Mobile */
@media (max-width: 768px) {
    /* Hero Section Mobile */
    .hero {
        min-height: 60vh; /* Altura consistente */
        contain: layout style paint;
    }
    
    .hero-content {
        min-height: 350px; /* Prevenir CLS */
        padding: 40px 15px;
        contain: layout style paint;
    }
    
    h1 {
        font-size: 1.8rem; /* Tamanho consistente */
        line-height: 1.2;
        min-height: 2.2em; /* Reserva espaço */
    }
    
    .subtitle {
        font-size: 1rem;
        line-height: 1.4;
        min-height: 2.8em; /* Reserva espaço */
    }
    
    /* Cards Mobile */
    .personagem-cards-container {
        min-height: 600px; /* Altura garantida */
        padding: 10px;
        contain: layout style paint;
    }
    
    .babalorixa-card {
        width: 100%;
        max-width: 320px;
        min-height: 450px;
        contain: layout style paint;
        will-change: auto;
    }
    
    /* Container Fluid Mobile */
    .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    /* Navbar Mobile */
    .navbar {
        min-height: 60px; /* Altura consistente */
    }
    
    /* Font sizes consistentes */
    body {
        font-size: 16px; /* Base consistente */
    }
    
    /* Prevenir imagens de causar CLS */
    img {
        background-color: #1a1a2e; /* Placeholder */
    }
    
    /* Loading states */
    .loading-placeholder {
        background: linear-gradient(90deg, #1a1a2e 25%, #2d2d4a 50%, #1a1a2e 75%);
        background-size: 200% 100%;
        animation: loading-shimmer 1.5s infinite;
        min-height: 100px;
        border-radius: 8px;
    }
}

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

/* Otimizações para touch */
@media (pointer: coarse) {
    .babalorixa-card {
        transition: transform 0.2s ease; /* Reduzido para mobile */
    }
    
    .babalorixa-card:hover {
        transform: translateY(-2px); /* Reduzido para mobile */
    }
}

/* Reduzir reflows forçados */
.no-layout-shift {
    contain: layout style paint;
}

/* Performance para scroll em mobile */
@media (max-width: 768px) {
    html {
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Evitar overflow horizontal */
    body {
        overflow-x: hidden;
    }
}