/* =========================================================
‎‏   🇸🇦 BLACK SAUDI BACKGROUND — SALLA
   ========================================================= */

html,
body {
    background: #000 !important;
}

/* نخلي خلفية الصفحة شفافة عشان الطبقات تظهر */
body {
    position: relative !important;
    isolation: isolate !important;
    background: transparent !important;
    overflow-x: hidden !important;
}

/* =========================================================
   🟢 الدائرة المتوهجة العملاقة — دائرة واحدة فقط
   ========================================================= */

body::before {
    content: "";
    position: fixed;
    width: 700px;
    height: 700px;

    /* تبدأ من الوسط */
    left: 50%;
    top: 48%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(170, 60, 255, 0.30) 0%,
            rgba(170, 60, 255, 0.18) 22%,
            rgba(150, 50, 230, 0.10) 42%,
            rgba(130, 40, 200, 0.045) 58%,
            transparent 74%
        );

    filter: blur(35px);

    pointer-events: none;

    z-index: -2;

    animation: ramzHugeGlow 18s ease-in-out infinite;
}


/* حركة ناعمة وملحوظة للدائرة */
@keyframes ramzHugeGlow {

    0% {
        transform: translate(-50%, -50%) translate(-18vw, -8vh);
    }

    20% {
        transform: translate(-50%, -50%) translate(12vw, -12vh);
    }

    40% {
        transform: translate(-50%, -50%) translate(20vw, 8vh);
    }

    60% {
        transform: translate(-50%, -50%) translate(-8vw, 15vh);
    }

    80% {
        transform: translate(-50%, -50%) translate(-20vw, 5vh);
    }

    100% {
        transform: translate(-50%, -50%) translate(-18vw, -8vh);
    }
}


/* =========================================================
   🇸🇦 النقش السعودي — على الأطراف فقط
   ========================================================= */

body::after {
    content: "";

    position: fixed;
    inset: 0;

    pointer-events: none;

    z-index: -1;

    opacity: 0.55;

    /* نقوش مثلثية / هندسية */
    background-image:

        /* خطوط مائلة */
        linear-gradient(
            135deg,
            transparent 46%,
            rgba(255,255,255,0.055) 47%,
            rgba(255,255,255,0.055) 49%,
            transparent 50%
        ),

        linear-gradient(
            45deg,
            transparent 46%,
            rgba(255,255,255,0.055) 47%,
            rgba(255,255,255,0.055) 49%,
            transparent 50%
        ),

        /* مثلثات ناعمة */
        linear-gradient(
            30deg,
            transparent 42%,
            rgba(255,255,255,0.035) 43%,
            rgba(255,255,255,0.035) 48%,
            transparent 49%
        ),

        linear-gradient(
            150deg,
            transparent 42%,
            rgba(255,255,255,0.035) 43%,
            rgba(255,255,255,0.035) 48%,
            transparent 49%
        );

    background-size:
        52px 52px,
        52px 52px,
        70px 70px,
        70px 70px;

    /* نخلي النقش أقوى عند اليمين واليسار
       ومختفي تقريبًا من المنتصف */
    mask-image:
        linear-gradient(
            to right,
            #000 0%,
            rgba(0,0,0,0.8) 10%,
            transparent 27%,
            transparent 73%,
            rgba(0,0,0,0.8) 90%,
            #000 100%
        );

    -webkit-mask-image:
        linear-gradient(
            to right,
            #000 0%,
            rgba(0,0,0,0.8) 10%,
            transparent 27%,
            transparent 73%,
            rgba(0,0,0,0.8) 90%,
            #000 100%
        );
}


/* =========================================================
   ☄️ زخات شهب خفيفة
   ========================================================= */

.ramz-meteors {
    display: none !important;
}

body {
    background-image:
        radial-gradient(
            2px 2px at 12% 20%,
            rgba(255,255,255,0.75),
            transparent
        ),
        radial-gradient(
            2px 2px at 82% 16%,
            rgba(255,255,255,0.65),
            transparent
        ),
        radial-gradient(
            1px 1px at 72% 68%,
            rgba(255,255,255,0.55),
            transparent
        ),
        radial-gradient(
            2px 2px at 25% 78%,
            rgba(255,255,255,0.6),
            transparent
        ) !important;

    background-size:
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%;
}


/* =========================================================
   ☄️ شهب متحركة
   ========================================================= */

body {
    --meteor-color: rgba(255,255,255,0.8);
}


/* =========================================================
   📱 الجوال
   ========================================================= */

@media (max-width: 768px) {

    body::before {
        width: 520px;
        height: 520px;
        filter: blur(28px);
    }

    body::after {
        opacity: 0.42;
    }
}


/* =========================================================
   💻 الشاشات الكبيرة
   ========================================================= */

@media (min-width: 1400px) {

    body::before {
        width: 850px;
        height: 850px;
    }
}