/* =====================================================
   APERTURA FINESTRA
   ===================================================== */

@keyframes animFinestra {

    0%{
        opacity:0;
        transform:translateY(25px) scale(.97);
    }

    100%{
        opacity:1;
        transform:translateY(0) scale(1);
    }

}

.anim-finestra{

    animation:animFinestra .6s ease-out forwards;
    position: relative;
    z-index: 2;

}

/* =====================================================
   RESPIRAZIONE
   ===================================================== */

@keyframes animRespira{

    0%,100%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.005);
    }

}

.anim-respira{

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

    transform-origin:center center;

}


/* ===== STELLE ===== */

@keyframes stellaBrilla {

    0%,100%{
        opacity:.25;
    }

    50%{
        opacity:1;
    }

}

.anim-stella{

    position:absolute;

    width:3px;
    height:3px;

    background:#fff;

    border-radius:50%;

    box-shadow:0 0 8px #fff;

    animation:stellaBrilla 3s ease-in-out infinite;

}

/* ===== METEORA ===== */

@keyframes animMeteora{

    0%{
        opacity:0;
        transform:translate(0,0) rotate(-35deg);
    }

    10%{
        opacity:1;
    }

    100%{
        opacity:0;
        transform:translate(-700px,700px) rotate(-35deg);
    }

}

.anim-meteora{

    position:absolute;

    width:180px;
    height:2px;

    background:linear-gradient(to left,#fff,rgba(255,255,255,.4),transparent);

    box-shadow:0 0 12px #fff;

    pointer-events:none;

}

/* =====================================================
   PARTICELLE DI LUCE
   ===================================================== */

@keyframes animParticella{

    0%{
        transform:translateY(0) scale(.8);
        opacity:.2;
    }

    50%{
        transform:translateY(-18px) scale(1.3);
        opacity:.9;
    }

    100%{
        transform:translateY(0) scale(.8);
        opacity:.2;
    }

}

.anim-particella{

    position:absolute;

    width:4px;
    height:4px;

    border-radius:50%;

    background:white;

    box-shadow:
        0 0 6px rgba(255,255,255,.9),
        0 0 12px rgba(255,255,255,.6),
        0 0 20px rgba(255,255,255,.3);

    opacity:.5;

    animation:animParticella ease-in-out infinite;

    pointer-events:none;

}

/* =====================================================
   STELLE SPECIALI SVG
   ===================================================== */

@keyframes animStellaSpeciale {

    0%,100%{
        transform:scale(.8);
        opacity:.35;
    }

    50%{
        transform:scale(1.3);
        opacity:1;
    }

}

.anim-stella-speciale{

    position:absolute;

    pointer-events:none;

    filter:drop-shadow(0 0 6px white);

    animation:animStellaSpeciale ease-in-out infinite;

}

.anim-stella-speciale svg{

    width:100%;
    height:100%;

    display:block;

}

/* =====================================================
   BAGLIORI COSMICI
   ===================================================== */

#bagliore{

    position:fixed;

    top:0;
    left:0;
    right:0;
    bottom:0;

    pointer-events:none;

    z-index:1;

    background:

        radial-gradient(
            circle at 25% 20%,
            rgba(255,220,150,.35),
            transparent 35%
        ),

        radial-gradient(
            circle at 90% 45%,
            rgba(120,170,255,.35),
            transparent 35%
        ),

        radial-gradient(
            circle at 15% 75%,
            rgba(190,120,220,.30),
            transparent 35%
        );

    filter:blur(90px);

    animation:animBagliori 10s ease-in-out infinite;

}


@keyframes animBagliori{

    0%,100%{

        opacity:.55;

    }

    50%{

        opacity:1;

    }

}

@keyframes animBagliori{

    0%,100%{

        opacity:.45;

    }

    50%{

        opacity:.85;

    }

}

/* =====================================================
   LUCCICHII
   ===================================================== */
#luccichii{

    position:absolute;
    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:6;

}

.luccichio{

    position:absolute;

    opacity:0;

    transform-origin:center;

    animation:luccichio 3s linear infinite;
    
    /* Fonde perfettamente la luce del testo con la nebulosa sottostante */
    mix-blend-mode: screen; 

}

.luccichio::before{

    content:"✦";

}

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

.luccichio.oro{

    color:#ffe08a;

    text-shadow:
        0 0 1px #ffffff,
        0 0 3px #fff2bf,
        0 0 6px #ffd76d,
        /* Ridotta leggermente l'espansione per non impastare lo schermo */
        0 0 8px rgba(255,215,109,.45);

}

/* ---------------- VERDE SMERALDO ---------------- */

.luccichio.verde{

    color:#8ef7d4;

    text-shadow:
        0 0 1px #ffffff,
        0 0 3px #d9fff5,
        0 0 6px #5ce8b8,
        0 0 8px rgba(92,232,184,.45);

}

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

.luccichio.viola{

    color:#d9c3ff;

    text-shadow:
        0 0 1px #ffffff,
        0 0 3px #f2e9ff,
        0 0 6px #b58cff,
        0 0 8px rgba(181,140,255,.45);

}

@keyframes luccichio{

    0%{
        opacity:0;
        transform: scale(.2) rotate(0deg);
    }

    20%{
        opacity:1;
        transform: scale(1);
    }

    70%{
        opacity:.85;
    }

    100%{
        opacity:0;
        transform: scale(.2) rotate(35deg);
    }

}

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

#nebbia{

    position:fixed;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:1;

}


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

.nebbia{

    position:absolute;

    top:-20%;

    bottom:-20%;

    width:42%;

    pointer-events:none;

    filter:blur(45px);

    opacity:.85;

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

}


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

.nebbia.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
*----------------------*/

.nebbia.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%);

    }

}