/* ============================================================ GAPZONE — FUNDO ANIMADO GAMING Arquivo: gapzone-background.css ============================================================ Este CSS posiciona o canvas do fundo de forma fixa, ocupando toda a tela e ficando atrás de todo o conteúdo. ============================================================ */ /* Container do fundo: fica fixo na tela, atrás de tudo */ .gz-background { position: fixed; /* sempre visível ao rolar */ inset: 0; /* ocupa tela inteira (top/right/bottom/left = 0) */ z-index: 0; /* paint acima do body bg, conteudo fica em z-index:1 */ overflow: hidden; pointer-events: none; /* não bloqueia cliques no site */ /* Fade controlado pelo JS ao se aproximar do fim da página. A transição deixa a variação de opacidade suave durante o scroll. */ /* Cor sólida em vez de radial-gradient: gradientes muito escuros sofrem "banding" (faixas/ruído) em telas 8-bit e davam aquele aspecto de preto granulado nas áreas vazias. Uma cor chapada elimina o problema. Além disso, esta camada é OPACA de ponta a ponta — ela cobre a textura de ruído do body (body::before), que era o que aparecia granulado no final. */ background: #080b0e; } /* O canvas onde os ícones são desenhados */ .gz-background__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: auto; /* só o canvas captura o mouse (pra reagir) */ /* O fade do final da página atua SÓ aqui (nos ícones), via JS. Assim a cor de fundo sólida continua até o rodapé e só a animação some. */ opacity: 1; transition: opacity 150ms linear; will-change: opacity; } /* O fundo (.gz-background) e' position:fixed com z-index:0 e e' o PRIMEIRO filho do . Os demais filhos (header, sections, footer) ja possuem position:relative/sticky ou paint depois no DOM, entao ficam por cima naturalmente — nao precisamos forcar z-index aqui (forcar quebraria o position:sticky da navbar). */ /* ============================================================ ACESSIBILIDADE: respeita "reduzir movimento" do sistema ============================================================ Se o usuário ativou "reduzir movimento" no Windows/Mac/celular, o JavaScript detecta isso e desativa as animações. Este CSS garante que o fundo ainda fique visível, só parado. ============================================================ */ @media (prefers-reduced-motion: reduce) { .gz-background__canvas { opacity: 0.5; } }