#stelle{
    position:fixed;
    inset:0;
    pointer-events:none;
    overflow:hidden;
    z-index:2;
}

/* ---------------- MICRO STELLE ---------------- */

.microStella{

    position:absolute;

    border-radius:50%;

    background:#ffffff;

    box-shadow:
        0 0 2px rgba(255,255,255,.95),
        0 0 5px rgba(255,255,255,.45);

    animation:respiroMicro 4s infinite ease-in-out;

}

/* ---------------- STELLE ---------------- */

.stella{

    position:absolute;

    animation:respiroStella 3.5s infinite ease-in-out;

}

/* Bianca */

.stellaBianca::before{

    content:"";

    position:absolute;

    inset:0;

    background:radial-gradient(circle,
        #ffffff 0%,
        #f4f4f4 55%,
        #d8d8d8 100%);

    clip-path:polygon(
        50% 0%,
        60% 40%,
        100% 50%,
        60% 60%,
        50% 100%,
        40% 60%,
        0% 50%,
        40% 40%
    );

}

/* Dorata */

.stellaOro::before{

    content:"";

    position:absolute;

    inset:0;

    background:radial-gradient(circle,
        #ffe7a0 0%,
        #d4af37 55%,
        #9a6b1f 100%);

    clip-path:polygon(
        50% 0%,
        60% 40%,
        100% 50%,
        60% 60%,
        50% 100%,
        40% 60%,
        0% 50%,
        40% 40%
    );

}

.stellaBianca,
.stellaOro{

    filter:
        drop-shadow(0 0 3px rgba(255,255,255,.85))
        drop-shadow(0 0 8px rgba(255,220,120,.45));

}

@keyframes respiroMicro{

    0%,100%{

        opacity:.25;
        transform:scale(.8);

    }

    50%{

        opacity:1;
        transform:scale(1.3);

    }

}

@keyframes respiroStella{

    0%,100%{

        opacity:.35;
        transform:scale(.75);

    }

    50%{

        opacity:1;
        transform:scale(1.25);

    }

}

/*--------------------------------
POLVERE
----------------------*/

#polvere{

    position:fixed;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:1;

}

/*---------------------
NUMERI DORATI
----------------------*/

#numeriFantasma{

    position:absolute;
    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:5;
}


/*---------------------
NUMERO
----------------------*/

.numeroFantasma{

    position:absolute;

    font-family:Georgia, serif;

    font-weight:400;
    font-style:normal;

    line-height:1;

    /* ORO PIÙ ELEGANTE, MENO GIALLO */
    color:#c9a85c;

    text-shadow:
        0 0 2px rgba(224,196,125,.75),
        0 0 5px rgba(196,157,72,.50),
        0 0 10px rgba(174,132,48,.28);

    animation:
        numeroSale 5s linear forwards,
        numeroScintilla 2s ease-in-out infinite;

    user-select:none;

}


/*---------------------
MOVIMENTO
----------------------*/

@keyframes numeroSale{

    0%{

        opacity:0;

        transform:
            translate(-50%,-50%)
            translateY(10px)
            scale(.90);

    }

    18%{

        opacity:.90;

    }

    80%{

        opacity:.90;

    }

    100%{

        opacity:0;

        transform:
            translate(-50%,-50%)
            translateY(-22px)
            scale(1);

    }

}


/*---------------------
SCINTILLIO ORO
----------------------*/

@keyframes numeroScintilla{

    0%,100%{

        color:#b9964c;

        text-shadow:
            0 0 2px rgba(213,181,105,.60),
            0 0 5px rgba(185,143,62,.35);

    }

    45%{

        color:#d8bd78;

        text-shadow:
            0 0 3px rgba(231,207,145,.85),
            0 0 7px rgba(205,169,86,.65),
            0 0 13px rgba(181,137,52,.35);

    }

    52%{

        color:#ead69e;

        text-shadow:
            0 0 4px rgba(239,220,165,.95),
            0 0 9px rgba(215,180,96,.75),
            0 0 17px rgba(187,140,48,.45);

    }

    60%{

        color:#d2b46d;

        text-shadow:
            0 0 3px rgba(224,196,128,.75),
            0 0 7px rgba(196,155,70,.50);

    }

}

/*--------------------------------*
* BAGLIORI CENTRALI NUMERALUA
*--------------------------------*/

#baglioriNumera{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:4;

}


/*---------------------*
* BAGLIORE
*----------------------*/

.bagliore{

    position:absolute;

    opacity:0;

    transform:
        translate(-50%,-50%)
        scale(.85);

    animation:
        baglioreNumera ease-in-out infinite;

}


/*---------------------*
* FORME DEL BAGLIORE
*----------------------*/

.bagliore::before,
.bagliore::after,
.bagliore span{

    content:"";

    position:absolute;

    border-radius:50%;

    filter:blur(35px);

}


/*---------------------*
* ORO
*----------------------*/

.bagliore.oro::before{

    width:170px;
    height:120px;

    left:0;
    top:10px;

    background:
        rgba(255,220,110,.18);

}

.bagliore.oro::after{

    width:120px;
    height:160px;

    left:30px;
    top:-10px;

    background:
        rgba(255,245,210,.13);

}

.bagliore.oro span{

    width:150px;
    height:140px;

    left:12px;
    top:18px;

    background:
        rgba(255,230,150,.10);

}


/*---------------------*
* BLU
*----------------------*/

.bagliore.blu::before{

    width:170px;
    height:120px;

    left:0;
    top:10px;

    background:
        rgba(80,150,255,.16);

}

.bagliore.blu::after{

    width:120px;
    height:160px;

    left:30px;
    top:-10px;

    background:
        rgba(190,220,255,.11);

}

.bagliore.blu span{

    width:150px;
    height:140px;

    left:12px;
    top:18px;

    background:
        rgba(110,180,255,.09);

}


/*---------------------*
* VIOLA
*----------------------*/

.bagliore.viola::before{

    width:170px;
    height:120px;

    left:0;
    top:10px;

    background:
        rgba(180,145,255,.16);

}

.bagliore.viola::after{

    width:120px;
    height:160px;

    left:30px;
    top:-10px;

    background:
        rgba(245,238,255,.11);

}

.bagliore.viola span{

    width:150px;
    height:140px;

    left:12px;
    top:18px;

    background:
        rgba(205,175,255,.09);

}


/*---------------------*
* ANIMAZIONE
*----------------------*/

@keyframes baglioreNumera{

    0%{

        opacity:0;

        transform:
            translate(-50%,-50%)
            rotate(var(--rotation,0deg))
            scale(.85);

    }

    30%{

        opacity:.42;

        transform:
            translate(-50%,-50%)
            rotate(var(--rotation,0deg))
            scale(1);

    }

    65%{

        opacity:.34;

    }

    100%{

        opacity:0;

        transform:
            translate(-50%,-50%)
            rotate(var(--rotation,0deg))
            scale(1.08);

    }

}

/*--------------------------------*
* NEBBIA LATERALE
*--------------------------------*/

#nebbiaNumera{

    position:fixed;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:1;

}


/*---------------------*
* NEBBIA
*----------------------*/

.nebbiaNumera{

    position:absolute;

    top:-20%;

    bottom:-20%;

    width:42%;

    pointer-events:none;

    filter:blur(45px);

    opacity:.85;

    animation:
        movimentoNebbia 18s ease-in-out infinite;

}


/*---------------------*
* SINISTRA
*----------------------*/

.nebbiaNumera.sinistra{

    left:-15%;

    background:

        radial-gradient(
            ellipse at 25% 25%,
            rgba(90,100,220,.38) 0%,
            transparent 62%
        ),

        radial-gradient(
            ellipse at 45% 55%,
            rgba(130,70,200,.30) 0%,
            transparent 60%
        ),

        radial-gradient(
            ellipse at 15% 80%,
            rgba(60,110,210,.25) 0%,
            transparent 65%
        );

}


/*---------------------*
* DESTRA
*----------------------*/

.nebbiaNumera.destra{

    right:-15%;

    background:

        radial-gradient(
            ellipse at 75% 25%,
            rgba(30,180,165,.35) 0%,
            transparent 62%
        ),

        radial-gradient(
            ellipse at 55% 55%,
            rgba(40,130,200,.30) 0%,
            transparent 60%
        ),

        radial-gradient(
            ellipse at 90% 80%,
            rgba(60,110,220,.25) 0%,
            transparent 65%
        );

    animation-delay:-9s;

}


/*---------------------*
* MOVIMENTO
*----------------------*/

@keyframes movimentoNebbia{

    0%,100%{

        transform:
            scale(1)
            translate(0,0);

    }

    50%{

        transform:
            scale(1.12)
            translate(4%,2%);

    }

}