/**
 * Correção Final do Background Infinito
 * GAMESOFT BR
 * 
 * Este arquivo corrige definitivamente o problema do background
 * que se estendia por toda a página, limitando-o apenas às seções hero.
 */

/* ===== CORREÇÃO GLOBAL DO BACKGROUND INFINITO ===== */

/* Garantir que body e main tenham background sólido */
body {
    background: var(--bg) !important;
    background-attachment: fixed !important;
}

main {
    background-color: var(--bg) !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Correção específica para páginas com .page-hero */
.page-hero {
    position: relative !important;
    overflow: hidden !important;
}

/* Limitar background responsivo apenas às seções hero */
.responsive-background-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: -1 !important;
    pointer-events: none !important;
}

/* Garantir que o container não se estenda além do hero */
body > .responsive-background-container {
    display: none !important;
}

/* Apenas permitir dentro das seções hero */
.hero .responsive-background-container,
.page-hero .responsive-background-container {
    display: block !important;
}

/* Garantir que todas as seções tenham background sólido */
section:not(.hero):not(.page-hero) {
    background-color: var(--bg, #0d0d0f) !important;
    background-image: none !important;
    position: relative;
    z-index: 1;
}

/* Correção específica para páginas de jogos, atualizações, sobre e contato */
.games-page,
.updates-page,
.about-page,
.contact-page {
    background-color: var(--bg, #0d0d0f) !important;
    background-image: none !important;
}

/* Garantir que backgrounds responsivos não vazem para outras seções */
.responsive-background-svg {
    display: none !important;
}

.hero .responsive-background-svg,
.page-hero .responsive-background-svg {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: -1 !important;
}

/* ===== CORREÇÃO PARA SEÇÕES HERO ===== */

/* Melhorar o fade-out do hero para transição mais suave */
.hero-fade-out {
    height: 60px !important;
    background: linear-gradient(
        to bottom, 
        transparent 0%, 
        rgba(13, 13, 15, 0.2) 30%,
        rgba(13, 13, 15, 0.6) 70%,
        var(--bg, #0d0d0f) 100%
    ) !important;
}

/* ===== CORREÇÃO PARA MOBILE ===== */
@media (max-width: 768px) {
    
    /* Corrigir altura das seções hero em mobile */
    .hero,
    .page-hero {
        min-height: 100vh !important;
        min-height: 100dvh !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        position: relative !important;
        overflow: hidden !important;
    }
    
    /* Garantir que backgrounds animados fiquem apenas no hero */
    .press-kit-background,
    .press-particles {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: -10 !important;
        pointer-events: none !important;
    }
    
    /* Limitar backgrounds apenas às seções hero */
    .press-kit-background:not(.hero .press-kit-background):not(.page-hero .press-kit-background),
    .press-particles:not(.hero .press-particles):not(.page-hero .press-particles) {
        display: none !important;
    }
    
    /* Ocultar backgrounds fora das seções hero */
    body > .press-kit-background,
    body > .press-particles,
    body > .responsive-background-container {
        display: none !important;
    }
    
    /* Apenas permitir dentro das seções hero */
    .hero .press-kit-background,
    .hero .press-particles,
    .page-hero .press-kit-background,
    .page-hero .press-particles {
        display: block !important;
    }
    
    /* Reduzir opacidade das partículas para não competir com o conteúdo */
    .hero .press-particles,
    .page-hero .press-particles {
        opacity: 0.1 !important;
    }
    
    /* Fade-out mais suave e maior em mobile */
    .hero-fade-out,
    .page-hero-fade-out {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 120px !important;
        background: linear-gradient(to bottom, 
            transparent 0%, 
            rgba(13, 13, 15, 0.3) 30%,
            rgba(13, 13, 15, 0.7) 60%,
            var(--bg, #0d0d0f) 100%) !important;
        z-index: 1 !important;
        pointer-events: none !important;
    }
    
    /* Garantir que o conteúdo após o hero tenha background sólido */
    .container,
    .main-content-wrapper,
    .main-content-area {
        background-color: var(--bg, #0d0d0f) !important;
        background-image: none !important;
        position: relative !important;
        z-index: 10 !important;
        margin-top: 0 !important;
        padding-top: 40px !important;
    }
    
    /* Correções específicas para páginas sobre e contato */
    .page-hero {
        position: relative !important;
        overflow: hidden !important;
    }

    /* Fade-out suave para páginas sobre e contato */
    .page-hero::after {
        content: '' !important;
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100px !important;
        background: linear-gradient(to bottom, 
            transparent 0%, 
            rgba(13, 13, 15, 0.1) 10%,
            rgba(13, 13, 15, 0.3) 30%,
            rgba(13, 13, 15, 0.6) 60%,
            rgba(13, 13, 15, 0.9) 90%,
            var(--bg, #0d0d0f) 100%) !important;
        z-index: 2 !important;
        pointer-events: none !important;
    }
    
    /* Garantir que o botão não fique sobre a listra preta */
    .hero .btn,
    .page-hero .btn {
        position: relative !important;
        z-index: 5 !important;
        margin-bottom: 60px !important;
    }
    
    /* Corrigir SVG do hero em mobile */
    #hero-background-svg {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: -1 !important;
        object-fit: cover !important;
    }
}

/* ===== CORREÇÃO PARA DESKTOP ===== */
@media (min-width: 769px) {
    
    /* Desabilitar completamente o background responsivo que se estendia */
    .responsive-background-container {
        display: none !important;
    }
    
    /* Garantir que o SVG do hero fique limitado à seção */
    #hero-background-svg {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 0 !important;
        object-fit: cover !important;
    }
    
    /* Fade-out suave para páginas sobre e contato - Desktop */
    .page-hero::after {
        content: '' !important;
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 80px !important;
        background: linear-gradient(to bottom, 
            transparent 0%, 
            rgba(13, 13, 15, 0.1) 15%,
            rgba(13, 13, 15, 0.4) 40%,
            rgba(13, 13, 15, 0.7) 70%,
            var(--bg, #0d0d0f) 100%) !important;
        z-index: 2 !important;
        pointer-events: none !important;
    }
}

/* ===== CORREÇÃO PARA TRANSIÇÕES SUAVES ===== */

/* Garantir transição suave entre seções */
.hero + section,
.page-hero + section {
    position: relative;
    z-index: 2;
    background-color: var(--bg, #0d0d0f) !important;
    margin-top: -1px; /* Sobrepor ligeiramente para evitar gaps */
}

/* Melhorar a transição visual */
.hero,
.page-hero {
    position: relative;
    overflow: hidden;
}

/* Garantir que o conteúdo das seções tenha background sólido */
.main-content-wrapper,
.container {
    background-color: transparent;
    position: relative;
    z-index: 1;
}

/* ===== FALLBACKS DE SEGURANÇA ===== */

/* Remover qualquer background global indesejado */
* {
    background-attachment: scroll !important;
}

/* Garantir que elementos com background animado não vazem */
[style*="background"] {
    background-clip: padding-box !important;
}

/* Transições suaves entre seções */
.hero,
.page-hero {
    transition: all 0.3s ease !important;
}

section {
    transition: background-color 0.3s ease !important;
}

/* ===== CORREÇÃO FINAL PARA BACKGROUND INFINITO ===== */

/* Bloquear qualquer elemento de background fora das seções hero */
body > div[class*="background"],
body > div[class*="particles"],
body > canvas,
body > svg:not(#hero-background-svg) {
    display: none !important;
}

/* Garantir que apenas SVGs dentro do hero sejam exibidos */
.hero svg,
.page-hero svg {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: -1 !important;
}

/* Forçar background sólido em todas as páginas */
html {
    background-color: var(--bg, #0d0d0f) !important;
    background-image: none !important;
}

/* Garantir que o conteúdo principal sempre tenha background sólido */
.container,
.main-content-wrapper,
.content-wrapper,
.page-content {
    background-color: var(--bg, #0d0d0f) !important;
    background-image: none !important;
    position: relative !important;
    z-index: 10 !important;
}

/* Correção final para garantir que não há backgrounds infinitos */
.responsive-background-svg,
.press-kit-background:not(.hero *):not(.page-hero *),
.press-particles:not(.hero *):not(.page-hero *) {
    display: none !important;
}