/* =========================================================
   ZZW SNOW — INFINITO EM TODA A TELA
   ========================================================= */

body::before,
body::after {
    content: "";

    position: fixed;

    inset: 0;

    width: 100vw;
    height: 100vh;

    pointer-events: none;

    z-index: 0;

    background-repeat: repeat;

    will-change: background-position;

    user-select: none;
}


/* =========================================================
   CAMADA 1 — ZZW MENORES
   ========================================================= */

body::before {

    opacity: .32;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='240' viewBox='0 0 320 240'%3E%3Cg fill='white' fill-opacity='.22' font-family='Arial,sans-serif' font-weight='900'%3E%3Ctext x='20' y='35' font-size='13'%3EZZW%3C/text%3E%3Ctext x='175' y='80' font-size='11'%3EZZW%3C/text%3E%3Ctext x='75' y='135' font-size='14'%3EZZW%3C/text%3E%3Ctext x='245' y='170' font-size='10'%3EZZW%3C/text%3E%3Ctext x='145' y='220' font-size='12'%3EZZW%3C/text%3E%3C/g%3E%3C/svg%3E");

    background-size:
        320px 240px;

    animation:
        zzwSnowFront 12s linear infinite;
}


/* =========================================================
   CAMADA 2 — ZZW MAIORES E MAIS DISTANTES
   ========================================================= */

body::after {

    opacity: .18;

    filter:
        blur(.2px);

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='320' viewBox='0 0 420 320'%3E%3Cg fill='white' fill-opacity='.20' font-family='Arial,sans-serif' font-weight='900'%3E%3Ctext x='45' y='55' font-size='18'%3EZZW%3C/text%3E%3Ctext x='275' y='110' font-size='14'%3EZZW%3C/text%3E%3Ctext x='145' y='185' font-size='17'%3EZZW%3C/text%3E%3Ctext x='350' y='245' font-size='12'%3EZZW%3C/text%3E%3Ctext x='30' y='290' font-size='15'%3EZZW%3C/text%3E%3C/g%3E%3C/svg%3E");

    background-size:
        420px 320px;

    animation:
        zzwSnowBack 19s linear infinite;
}


/* =========================================================
   MOVIMENTO INFINITO
   ========================================================= */

@keyframes zzwSnowFront {

    from {
        background-position:
            0 0;
    }

    to {
        background-position:
            320px 240px;
    }

}


@keyframes zzwSnowBack {

    from {
        background-position:
            0 0;
    }

    to {
        background-position:
            -420px 320px;
    }

}


/* =========================================================
   CONTEÚDO ACIMA DOS ZZW
   ========================================================= */

body>* {
    position: relative;
    z-index: 1;
}