/* =========================
   Magical Snow Scene
========================= */

.snow-scene{
    position:fixed;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:9999;
}

/* ---------- BACK LAYER ---------- */

.snow-back,
.snow-mid,
.snow-front{
    position:absolute;
    inset:-200px;
}

.snow-back::before{
    content:"";
    position:absolute;
    inset:0;

    background-image:
        radial-gradient(circle, rgba(255,255,255,.9) 1px, transparent 2px),
        radial-gradient(circle, rgba(180,220,255,.7) 1px, transparent 2px);

    background-size:
        160px 160px,
        230px 230px;

    animation:
        snowFallBack 30s linear infinite,
        twinkle 6s ease-in-out infinite;

    opacity:.35;
    filter:blur(1px);
}

/* ---------- MID LAYER ---------- */

.snow-mid::before{
    content:"";
    position:absolute;
    inset:0;

    background-image:
        radial-gradient(circle, rgba(255,255,255,.95) 2px, transparent 3px),
        radial-gradient(circle, rgba(200,235,255,.8) 2px, transparent 4px);

    background-size:
        120px 120px,
        180px 180px;

    animation:
        snowFallMid 20s linear infinite,
        twinkle 4s ease-in-out infinite;

    opacity:.65;
}

/* =========================
   ANIMATIONS
========================= */

@keyframes snowFallBack{

    from{
        transform:
            translateY(-200px)
            translateX(0);
    }

    to{
        transform:
            translateY(120vh)
            translateX(80px);
    }
}

@keyframes snowFallMid{

    0%{
        transform:
            translateY(-200px)
            translateX(0);
    }

    25%{
        transform:
            translateY(30vh)
            translateX(-40px);
    }

    50%{
        transform:
            translateY(60vh)
            translateX(20px);
    }

    75%{
        transform:
            translateY(90vh)
            translateX(-30px);
    }

    100%{
        transform:
            translateY(120vh)
            translateX(40px);
    }
}

@keyframes snowFallFront{

    0%{
        transform:
            translateY(-200px)
            translateX(0);
    }

    20%{
        transform:
            translateY(25vh)
            translateX(-80px);
    }

    40%{
        transform:
            translateY(50vh)
            translateX(60px);
    }

    60%{
        transform:
            translateY(75vh)
            translateX(-50px);
    }

    100%{
        transform:
            translateY(120vh)
            translateX(90px);
    }
}

/* =========================
   MAGICAL GLOW
========================= */

@keyframes sparkle{

    0%,100%{
        opacity:.8;
        filter:
            drop-shadow(0 0 4px white)
            drop-shadow(0 0 10px rgba(180,220,255,.5));
    }

    50%{
        opacity:1;
        filter:
            drop-shadow(0 0 10px white)
            drop-shadow(0 0 20px rgba(200,240,255,.9));
    }
}

@keyframes twinkle{

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

    50%{
        opacity:1;
    }
}

@keyframes float{

    0%{
        opacity:0;
        transform:translateY(-60px);
    }

    30%{
        opacity:1;
    }

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