/* =====================================================================
   Orbita — النسخة العربية: تعديلات RTL خاصة بصفحة who-we-are
   بيتحمّل في who-we-are.html (العربي) بس، بعد style.css و rtl.css.
   كل القواعد لازم تبدأ بـ html[dir="rtl"] عشان ماتأثرش على الإنجليزي.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1) الهيرو — العنوان المفرّغ الكبير «من نحن»
   --------------------------------------------------------------------- */

/* Cairo فيه حروف متداخلة (الوصلات بين الحروف)، فالـ text-stroke العادي كان
   بيرسم خطوط جوه الحروف عند كل وصلة. الحل: نرسم الـ stroke الأول وبعده
   الحشو (paint-order) بلون غامق، فالحشو بيغطي النص الداخلي من الـ stroke
   والخطوط اللي جوه، ويفضل الحد الخارجي بس نضيف — بنفس سُمك الإنجليزي (1.8px)
   لأن الـ stroke بقى ضعف السُمك ونصه مستخبي تحت الحشو.
   والوزن 800 بدل 400 عشان الحروف تبان قوية زي «WE ARE». */
html[dir="rtl"] .animArea h1 {
    font-weight: 800;
    font-size: 215px;
    line-height: 200px;
    margin-top: -15px;
    color: #040404 !important;
    -webkit-text-stroke: 3.6px #fff !important;
    paint-order: stroke fill;
}

/* في الإنجليزي الرائد واقف في الفراغ اللي بين WE و ARE. في العربي «نحن»
   أعرض من «من»، فالفراغ كان بيقع يمين الرائد ورجله كانت مغطية أول «نحن».
   بنوسّع المسافة بين الكلمتين (rtl.css مصفّرها لكل الصفحة، فمحتاجين أولوية
   أعلى منه) ونزحزح العنوان سنة للشمال عشان الرائد يقف بين الكلمتين بالظبط.
   (word-spacing بيأثر على المسافة بس، مش على اتصال الحروف) */
@media only screen and (min-width: 1025px) {
    html[dir="rtl"] body .animArea h1:not(#_) {
        word-spacing: 0.3em !important;
    }

    html[dir="rtl"] .animArea h1 {
        padding-right: calc(0.29em + 4vw);
    }
}

@media only screen and (max-width: 1024px) {
    html[dir="rtl"] .animArea h1 {
        font-size: 125px;
        line-height: 125px;
        margin-top: 0;
    }
}

@media only screen and (max-width: 820px) {
    html[dir="rtl"] .animArea h1 {
        font-size: 110px;
        line-height: 130px;
    }
}

/* الموبايل: 50px بتاعة الإنجليزي بتطلع العربي صغير وباهت، فبنكبّره سنة */
@media only screen and (max-width: 600px) {
    html[dir="rtl"] .animArea h1 {
        font-size: 66px;
        line-height: 80px;
        -webkit-text-stroke: 2px #fff !important;
    }
}


/* ---------------------------------------------------------------------
   2) سكشن «نحن أوربيتا» (الكلام اللي بينوّر كلمة كلمة)
   --------------------------------------------------------------------- */

/* الكتلة بتقف على اليمين بنفس المسافة اللي كانت على الشمال في الإنجليزي */
html[dir="rtl"] .ai-reveal-text-container {
    margin-left: 0;
    margin-right: 10%;
}

/* الشَّرطة الحمرا تروح يمين العنوان الصغير + نكبّره سنة لأن العربي بيبان أصغر */
html[dir="rtl"] .ai-reveal-sub-header {
    border-left: none;
    border-right: 3px solid #ff5a54;
    padding-left: 0;
    padding-right: 12px;
    font-size: 1rem;
}

/* محاذاة يمين + سطر أوسع شوية عشان النقط والهمزات ماتلزقش في السطر اللي فوقها */
html[dir="rtl"] .ai-reveal-text {
    text-align: right;
    line-height: 1.6;
}

/* التدرج يبدأ بالأحمر من ناحية بداية الكلمة (اليمين) زي الإنجليزي.
   والـ padding بيدّي مساحة للحروف النازلة (ي، ن، ع) عشان الـ background-clip
   مايقصّهاش، والـ margin السالب بيرجّع السطر لمقاسه. */
html[dir="rtl"] .ai-reveal-word {
    background-image: linear-gradient(270deg, #ff4d47 0, #fff 50%, #E10600);
    padding: 0.08em 0 0.12em;
    margin: -0.08em 0 -0.12em;
}

@media (max-width: 1440px) {
    html[dir="rtl"] .ai-reveal-text-container {
        margin-left: 0;
        margin-right: 8%;
    }
}

@media (max-width: 768px) {
    html[dir="rtl"] .ai-reveal-text-container {
        margin-left: 0;
        margin-right: 5%;
    }

    html[dir="rtl"] .ai-reveal-sub-header {
        font-size: 0.85rem;
    }

    html[dir="rtl"] .ai-reveal-text {
        line-height: 1.55;
    }
}


/* ---------------------------------------------------------------------
   3) سكشن «فلسفتنا»
   --------------------------------------------------------------------- */

/* التدرج بيبدأ بالأحمر من اليمين (أول الكلمة في العربي) + سطر أعلى عشان
   الـ background-clip مايقصّش راس الفاء ونقطها */
html[dir="rtl"] .wb-gradient-title {
    background-image: linear-gradient(260deg, #E10600 0%, #ff4d47 55%, #eef1ff 112%);
    line-height: 1.4;
    padding-bottom: 0.05em;
}

/* السطر الفرعي كان صغير أوي في العربي */
html[dir="rtl"] .wb-desc {
    font-size: 1.3rem;
    line-height: 1.8;
}

html[dir="rtl"] .wb-item h3 {
    line-height: 1.6;
}

/* المسافة بين الكلمات تبقى على شمال الكلمة (آخرها في العربي) بدل يمينها */
html[dir="rtl"] .wb-word-span {
    margin-right: 0;
    margin-left: 0.25em;
}

/* الخط اللي تحت كل قيمة بيتمد من اليمين للشمال */
html[dir="rtl"] .wb-line {
    left: auto;
    right: 0;
}


/* ---------------------------------------------------------------------
   4) سكشن «قوتنا والتزامنا» (الفيديو)
   style.css فيه تعديلات RTL للديسكتوب (الفيديو شمال والكلام يمين)،
   هنا بنكمّل الباقي.
   --------------------------------------------------------------------- */

/* التوهج الأحمر والبنفسجي ورا الفيديو يتنقل معاه للشمال، عشان الكلام
   يفضل على خلفية غامقة ومقروء زي الإنجليزي (ده تدرج ضبابي مش رسمة) */
html[dir="rtl"] .core-bg-svg {
    right: auto;
    left: 0;
    transform: scaleX(-1);
}

html[dir="rtl"] .core-glow-effect {
    right: auto;
    left: -20%;
}

/* سطر أعلى للعربي + التدرج بيبدأ من اليمين */
html[dir="rtl"] .core-reveal-area {
    line-height: 1.55;
}

html[dir="rtl"] .core-word-span {
    background-image: linear-gradient(260deg, #E10600 0%, #ff4d47 55%, #eef1ff 112%);
    padding: 0.08em 0 0.12em;
    margin: -0.08em 0 -0.12em;
}

html[dir="rtl"] .core-subtitle {
    font-size: 1rem;
}

@media (max-width: 1440px) and (min-width: 769px) {
    html[dir="rtl"] .core-text-wrapper {
        margin-left: 0;
        margin-right: 5%;
    }
}

/* الموبايل: style.css مافيهوش RTL للموبايل، فالكتلة كانت لازقة في الحافة
   والشَّرطة على الشمال والكلام محاذي شمال */
@media (max-width: 768px) {
    html[dir="rtl"] .core-text-wrapper {
        margin-left: 0;
        margin-right: 5%;
    }

    html[dir="rtl"] .core-subtitle {
        border-left: none;
        border-right: 3px solid #ff5a54;
        padding-left: 0;
        padding-right: 12px;
        font-size: 0.85rem;
        text-align: right;
    }

    html[dir="rtl"] .core-reveal-area {
        text-align: right;
        line-height: 1.5;
    }

    html[dir="rtl"] .core-bg-svg {
        transform: none;
    }
}


/* ---------------------------------------------------------------------
   5) سكشن «نهتم» المثبّت
   --------------------------------------------------------------------- */

/* التدرج يبدأ بالأحمر من اليمين، وسطر أعلى + padding عشان ذيل الميم
   والنون مايتقصّش من الـ background-clip */
html[dir="rtl"] .wc-big-title {
    background-image: linear-gradient(250deg, #ff5a54 0%, #ff8a86 25%, #FFFFFF 50%, #C4C4FF 100%);
    line-height: 1.45;
    padding: 0 0 0.1em;
}

/* الـ padding الجانبي يروح للناحية التانية */
html[dir="rtl"] .wc-text-item {
    padding-right: 0;
    padding-left: 20px;
}

html[dir="rtl"] .wc-item-title {
    line-height: 1.4;
}

/* الوصف كان صغير ومزنوق في العربي */
html[dir="rtl"] .wc-description {
    font-size: 1.3rem;
    line-height: 1.9;
}

@media (max-width: 768px) {
    html[dir="rtl"] .wc-text-item {
        padding-left: 0;
    }

    html[dir="rtl"] .wc-big-title {
        font-size: 3.75rem;
    }

    html[dir="rtl"] .wc-description {
        font-size: 1.05rem;
        line-height: 1.9;
    }
}


/* ---------------------------------------------------------------------
   6) سكشن الزوم الأخير
   --------------------------------------------------------------------- */
html[dir="rtl"] .zoom-hero-text h2 {
    line-height: 1.35;
}

html[dir="rtl"] .zoom-hero-text p {
    font-size: 1.7rem;
    margin-top: 4px;
}

/* الشكل الأحمر ورا فقرة «نحن أوربيتا» (ملاحظة صاحب الموقع):
   في الإنجليزي الكلام شمال والشكل يمين. في العربي الكلام بقى يمين فكان
   قاعد فوق الشكل — بنعكس التكوين: الشكل يروح الشمال. الإنجليزي بيقلب الصورة
   (scaleX(-1))، فهنا بنلغي القلب عشان تبقى مراية حقيقية (من غير تعديل الصورة) */
html[dir="rtl"] .ai-reveal-bg-image {
    right: auto;
    left: 0;
    transform: none;
}

@media (max-width: 768px) {
    html[dir="rtl"] .ai-reveal-bg-image {
        right: auto;
        left: -15%;
    }
}