/* =========================
   نيازك خفيفة جداً بالخلفية
========================= */

body::before{
    content:"";
    position:fixed;
    inset:-40vh -20vw;
    width:140vw;
    height:180vh;

    pointer-events:none;
    z-index:99999;

    opacity:.18;

    background-image:
        linear-gradient(
            to bottom,
            transparent,
            rgba(255,255,255,.7),
            transparent
        ),
        linear-gradient(
            to bottom,
            transparent,
            rgba(255,255,255,.5),
            transparent
        ),
        linear-gradient(
            to bottom,
            transparent,
            rgba(255,255,255,.55),
            transparent
        ),
        linear-gradient(
            to bottom,
            transparent,
            rgba(255,255,255,.4),
            transparent
        ),
        linear-gradient(
            to bottom,
            transparent,
            rgba(255,255,255,.5),
            transparent
        ),
        linear-gradient(
            to bottom,
            transparent,
            rgba(255,255,255,.4),
            transparent
        );

    background-repeat:no-repeat;

    background-size:
        1px 14px,
        1px 9px,
        1px 12px,
        1px 8px,
        1px 11px,
        1px 7px;

    background-position:
        8% 4%,
        29% 21%,
        48% 8%,
        68% 33%,
        84% 14%,
        95% 39%;

    transform:rotate(-18deg) translateY(-50%);

    animation:
        f5rMeteorFall 13s linear infinite;
}


body::after{
    content:"";
    position:fixed;
    inset:-40vh -20vw;

    width:140vw;
    height:180vh;

    pointer-events:none;
    z-index:99999;

    opacity:.11;

    background-image:
        linear-gradient(
            to bottom,
            transparent,
            rgba(255,255,255,.6),
            transparent
        ),
        linear-gradient(
            to bottom,
            transparent,
            rgba(255,255,255,.5),
            transparent
        ),
        linear-gradient(
            to bottom,
            transparent,
            rgba(255,255,255,.55),
            transparent
        ),
        linear-gradient(
            to bottom,
            transparent,
            rgba(255,255,255,.45),
            transparent
        );

    background-repeat:no-repeat;

    background-size:
        1px 10px,
        1px 7px,
        1px 12px,
        1px 8px;

    background-position:
        18% 12%,
        41% 36%,
        73% 4%,
        91% 27%;

    transform:rotate(-18deg) translateY(-60%);

    animation:
        f5rMeteorFall2 18s linear infinite 4s;
}


@keyframes f5rMeteorFall{

    0%{
        transform:
            rotate(-18deg)
            translateY(-60%);
    }

    100%{
        transform:
            rotate(-18deg)
            translateY(60%);
    }

}


@keyframes f5rMeteorFall2{

    0%{
        transform:
            rotate(-18deg)
            translateY(-70%);
    }

    100%{
        transform:
            rotate(-18deg)
            translateY(70%);
    }

}


/* الجوال */

@media(max-width:600px){

    body::before{
        opacity:.16;
        animation-duration:14s;
    }

    body::after{
        opacity:.09;
        animation-duration:19s;
    }

}


/* احترام إعداد تقليل الحركة */

@media(prefers-reduced-motion:reduce){

    body::before,
    body::after{
        animation:none;
    }

}