/* CONFIGURAÇÕES DO FUNDO DINÂMICO */

:root {
    /* --- LAYER 1: DOT PATTERN (TIJOLO) --- */
    --dot-color: rgba(255, 255, 255, 0.06); 
    --dot-size: 8px;                 
    --dot-space: 40px;               
    
    /* --- LAYER 1: ANIMAÇÃO --- */
    --bg-speed: 3s;                 
    --bg-direction-x: 0px;          
    --bg-direction-y: -80px;          

    /* --- LAYER 0: DEGRADÊ 90º (CIMA -> BAIXO) --- */
    --grad-top: #c2c2c4;
    --grad-mid: #e6e6e7;
    --grad-bottom: #7d7d7d;
}

html {
    /* Cor de segurança para o fundo da raiz */
    background-color: var(--grad-bottom);
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    /* Removemos o fundo daqui para não conflitar */
    background: none !important;
}

/* A CAMADA QUE RESOLVE A FAIXA BRANCA */
body::before {
    content: "";
    position: fixed; /* Fixa na janela visual, ignorando o scroll do Chrome */
    top: 0;
    left: 0;
    width: 100%;
    height: 110%; /* Sobra de 10% para garantir cobertura total no mobile */
    
    /* Degradê e Pontos integrados aqui */
    background: 
        radial-gradient(var(--dot-color) var(--dot-size), transparent 0),
        radial-gradient(var(--dot-color) var(--dot-size), transparent 0),
        linear-gradient(180deg, var(--grad-top) 0%, var(--grad-mid) 50%, var(--grad-bottom) 100%);

    background-blend-mode: hard-light, hard-light, normal;
    background-size: var(--dot-space) var(--dot-space), var(--dot-space) var(--dot-space), 100% 100%;
    
    /* Fixação absoluta para evitar o movimento relativo ao conteúdo */
    background-attachment: fixed;
    
    animation: moveBackground var(--bg-speed) linear infinite;
    z-index: -1; /* Fica atrás de tudo */

    /* Aceleração de hardware para suavidade no Android */
    transform: translateZ(0);
    will-change: transform;
    pointer-events: none;
}



@keyframes moveBackground {
    from {
        background-position: 
            0 0, 
            calc(var(--dot-space) / 2) calc(var(--dot-space) / 2), 
            0 0;
    }
    to {
        background-position: 
            var(--bg-direction-x) var(--bg-direction-y), 
            calc(var(--bg-direction-x) + (var(--dot-space) / 2)) calc(var(--bg-direction-y) + (var(--dot-space) / 2)), 
            0 0;
    }
}