/**
 * BS GLOBAL BG V38 — Atmosfera ciano em todo o site
 * =====================================================================
 * Move o background visual do hero para o body inteiro:
 *  - body bg base #050a14 matching com --bs-bg.
 *  - body::before  — glow radial cyan FIXO no topo (não scroll, GPU friendly).
 *  - body::after   — grid pattern 56x56 com mask radial fade fixo.
 *
 * Performance:
 *  - position: fixed para não recalcular em scroll
 *  - will-change: opacity (não transform → paint cheap)
 *  - mobile com glow menor + grid mais compacto + opacity reduzida
 *  - prefers-reduced-motion desliga breath
 */

html, body {
    background: #050a14 !important;
}

/* Glow radial cyan no topo (visível mesmo em scroll, dá profundidade) */
body::before {
    content: "";
    position: fixed;
    top: -180px;
    left: 50%;
    width: 1200px;
    height: 600px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(0, 195, 226, 0.16) 0%, transparent 70%);
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
    will-change: opacity;
    animation: bs-global-bg-breath 9s ease-in-out infinite;
}

@keyframes bs-global-bg-breath {
    0%, 100% { opacity: 0.85; }
    50%      { opacity: 1; }
}

/* Grid sutil com mask radial — fixo, GPU compositor lida bem */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    background:
        linear-gradient(rgba(0, 195, 226, 0.045) 1px, transparent 1px) 0 0 / 56px 56px,
        linear-gradient(90deg, rgba(0, 195, 226, 0.045) 1px, transparent 1px) 0 0 / 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 90% 75% at 50% 30%, #000 0%, transparent 85%);
    mask-image: radial-gradient(ellipse 90% 75% at 50% 30%, #000 0%, transparent 85%);
    pointer-events: none;
    z-index: 0;
    opacity: 0.55;
}

/* Garante que conteúdo do site fique acima dos pseudo-elements */
#wrapper, #topo, #footer-pro, .pro-footer, header, main, footer {
    position: relative;
    z-index: 1;
}

/* ============================================================
   MOBILE — glow menor, grid mais leve
   ============================================================ */
@media (max-width: 720px) {
    body::before {
        width: 700px;
        height: 380px;
        filter: blur(32px);
    }
    body::after {
        background-size: 40px 40px, 40px 40px;
        opacity: 0.4;
    }
}

@media (max-width: 480px) {
    body::before {
        width: 480px;
        height: 280px;
        filter: blur(28px);
    }
    body::after { opacity: 0.32; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    body::before { animation: none; }
}