/* ===== SISTEMA DE BACKGROUND RESPONSIVO ===== */
/* Este arquivo implementa backgrounds diferentes para mobile e desktop */

/* ===== BACKGROUND SVG ANIMADO (DESKTOP) ===== */
@media (min-width: 769px) {
    /* Container do SVG animado - DESABILITADO para evitar background infinito */
    .responsive-background-container {
        display: none !important;
    }

    /* SVG de background animado */
    .responsive-background-svg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        object-fit: cover;
        pointer-events: none;
        opacity: 0.3; /* Reduzir opacidade para não competir com o hero */
    }

    /* Fade-out gradual do SVG - removido para evitar conflitos */
    .responsive-background-container::after {
        display: none;
    }

    /* Ocultar background minimalista em desktop */
    .press-kit-background,
    .press-particles {
        display: none;
    }
}

/* ===== BACKGROUND MINIMALISTA (MOBILE) ===== */
@media (max-width: 768px) {
    /* Ocultar SVG animado em mobile */
    .responsive-background-container {
        display: none;
    }

    /* Background principal minimalista - CORRIGIDO PARA SEÇÃO HERO APENAS */
    .press-kit-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -10;
        pointer-events: none;
        background:
            linear-gradient(135deg,
                var(--bg, #0a0a0a) 0%,
                #1a1a2e 50%,
                var(--bg, #0a0a0a) 100%
            );

        /* REMOVIDO: Gradiente de fade-out que estava causando problemas */
        /* Agora o background fica limitado à seção hero */
    }

    /* Camada de glow sutil - MELHORADA */
    .press-kit-background::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background:
            radial-gradient(ellipse at 30% 40%, rgba(0, 224, 255, 0.06) 0%, transparent 50%),
            radial-gradient(ellipse at 70% 60%, rgba(255, 0, 102, 0.06) 0%, transparent 50%);
    }

    /* Camada de padrões removida para design minimalista */
    .press-kit-background::after {
        display: none;
    }

    /* Container de partículas minimalistas - CORRIGIDO PARA SEÇÃO HERO APENAS */
    .press-particles {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -5;
        pointer-events: none;
        overflow: hidden;
        opacity: 0.2; /* REDUZIDO: Menos opacidade para não competir com o conteúdo */

        /* REMOVIDO: Fade-out gradual que estava causando problemas */
        /* Agora as partículas ficam limitadas à seção hero */
    }

    /* Estilos das partículas minimalistas */
    .particle {
        position: absolute;
        border-radius: 50%;
        opacity: 0;
        will-change: transform, opacity;
    }

    .particle.cyan {
        background: var(--cyan, #00e0ff);
        box-shadow: 0 0 2px rgba(0, 224, 255, 0.3);
        animation: particleFloatCyan 30s linear infinite;
    }

    .particle.magenta {
        background: var(--magenta, #ff0066);
        box-shadow: 0 0 2px rgba(255, 0, 102, 0.3);
        animation: particleFloatMagenta 35s linear infinite;
    }

    .particle.small {
        width: 1px;
        height: 1px;
    }

    .particle.medium {
        width: 1.5px;
        height: 1.5px;
    }

    /* Animações das partículas minimalistas */
    @keyframes particleFloatCyan {
        0% {
            transform: translateY(80vh) scale(0);
            opacity: 0;
        }
        10% {
            opacity: 0.3;
            transform: translateY(75vh) scale(1);
        }
        90% {
            opacity: 0.3;
        }
        100% {
            transform: translateY(-5vh) scale(0);
            opacity: 0;
        }
    }

    @keyframes particleFloatMagenta {
        0% {
            transform: translateY(80vh) scale(0);
            opacity: 0;
        }
        15% {
            opacity: 0.3;
            transform: translateY(70vh) scale(1);
        }
        85% {
            opacity: 0.3;
        }
        100% {
            transform: translateY(-5vh) scale(0);
            opacity: 0;
        }
    }
}

/* ===== ESTILOS COMUNS ===== */
/* Overlay de transição para fundo padrão - removido para evitar conflitos */
.press-background-transition {
    display: none;
}

/* Overlay de conteúdo para melhor legibilidade */
.container {
    position: relative;
    z-index: 1;
    background: transparent;
}

/* Reset para body */
body {
    position: relative;
    overflow-x: hidden;
    min-height: 100vh;
}