/* ================================================
   BEMFICA MACHADO - ESTILOS PRINCIPAIS
   Arquivo: main.css
   Descrição: Variáveis globais, reset e estilos base
   ================================================ */

/* Reset Global */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Variáveis CSS */
:root {
    --gold: #d4af37;
    --gold-dark: #b8941f;
    --gold-light: #E4C57A;
    --dark: #0a0a0a;
    --dark-light: #1a1a1a;
    --dark-secondary: #2a2a2a;
    --dark-soft: #0A0A0A;
    --light: #F5F5F5;
    --text-light: rgba(255, 255, 255, 0.9);
    --text-muted: rgba(255, 255, 255, 0.6);
    --glass-bg: rgba(26, 26, 26, 0.98);
    --glass-border: rgba(255, 255, 255, 0.1);
}

/* Background escuro permanente no HTML para evitar flash branco */
html {
    background: #0a0a0a;
    min-height: 100vh;
    /* iPhone Pro Max: Safe area support for notch/Dynamic Island */
    min-height: -webkit-fill-available;
}

/* Estilos Base do Body */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
    color: var(--light);
    overflow-x: hidden;
    overflow-y: auto;
    line-height: 1.6;
    /* iPhone Pro Max: Respect safe areas (Dynamic Island, home indicator) */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}

/* Controle de Scroll por Página */
body.page-home {
    overflow: hidden !important;
}

/* GPU Acceleration para Performance */
.page, .slide, .timeline-event, .catalog-card,
.event-content, .event-image-wrapper, .visual-card,
.metric-item, .product-card, .catalog-card-content,
.home-logo-img, .nossa-essencia-title, .future-title,
.minas-title, .contato-title, .category-page-title {
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform, opacity;
}

/* Animation Cleanup */
.animation-complete {
    will-change: auto;
}

/* Sistema de Páginas */
.page {
    min-height: 100vh;
    width: 100%;
    position: relative;
    opacity: 0;
    visibility: hidden;
    display: none;
    z-index: 1;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.5s;
}

.page.active {
    opacity: 1;
    visibility: visible;
    display: block;
}

/* Elementos Comuns */
video {
    object-fit: cover;
}

/* Scrollbar Personalizada */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-thumb {
    background: var(--gold);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gold-dark);
}

/* ========================================
   MOBILE PERFORMANCE OPTIMIZATION
   ======================================== */

@media (max-width: 768px) {
    /* Transições mais rápidas em mobile para melhor UX */
    .page {
        transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
    }

    /* Smooth scroll otimizado */
    html {
        scroll-behavior: auto; /* Instant scroll em mobile é mais rápido */
    }

    /* Esconder scrollbar em mobile para design limpo */
    *::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }

    * {
        -ms-overflow-style: none;  /* IE e Edge */
        scrollbar-width: none;  /* Firefox */
    }

    /* Garantir que scroll ainda funciona */
    body, html, .page, .catalog-level {
        overflow-y: auto;
        overflow-x: hidden;
    }
}