/* =========================================================
   HERO TEXT — RTL
========================================================= */

html[dir="rtl"] .hero h1{
    letter-spacing:0;

    line-height:1.02;
}


.hero h1 .gradient-text{
    overflow:visible;
}


html[dir="rtl"] .gradient-text{
    padding-bottom:.34em;

    margin-bottom:-.18em;

    padding-inline:.07em;

    margin-inline:-.07em;
}


/* =========================================================
   HERO VISUAL — RTL
========================================================= */

html[dir="rtl"] .hero-person{
    right:auto;

    left:0;

    animation-name:
        heroFloatRtl;
}


@keyframes heroFloatRtl{

    0%,
    100%{
        transform:
            scaleX(-1)
            translateY(0);
    }

    50%{
        transform:
            scaleX(-1)
            translateY(-7px);
    }

}


/* =========================================================
   HERO BUBBLE — RTL
========================================================= */

html[dir="rtl"] .hero-bubble{
    left:auto;

    right:0;

    text-align:right;
}


html[dir="rtl"] .hero-bubble:after{
    right:auto;

    left:54px;

    bottom:-8px;

    transform:
        rotate(45deg);

    border-radius:
        0 0 0 4px;
}


/* =========================================================
   ANYDESK — RTL
========================================================= */

html[dir="rtl"] .anydesk-card{
    left:auto;

    right:2%;
}


/*
 * نبقي بطاقة AnyDesk نفسها LTR
 * لأن رقم الـID والعلامة التجارية
 * يجب أن يظلا بنفس ترتيب الواجهة الأصلية.
 */
.anydesk-card{
    direction:ltr;
}


/* =========================================================
   HERO NOTE — RTL
========================================================= */

.hero-note{
    white-space:nowrap;
}


html[dir="rtl"] .hero-note{
    right:auto;

    left:10%;

    top:118px;

    transform:
        rotate(5deg);
}


/* =========================================================
   HERO — RTL TABLET / MOBILE
========================================================= */

@media(max-width:760px){

    /*
     * الإنجليزي يستخدم right:-7%.
     * لذلك العربي يجب أن يكون المرآة:
     * left:-7%.
     *
     * هذا يمنع الصورة من الدخول أكثر
     * نحو منتصف الشاشة في العربية.
     */
    html[dir="rtl"] .hero-person{
        right:auto;

        left:-7%;
    }


    /*
     * مطابقة موضع البطاقة مع
     * النسخة الإنجليزية على الجوال.
     */
    html[dir="rtl"] .anydesk-card{
        left:auto;

        right:1%;
    }


    html[dir="rtl"] .hero-bubble{
        left:auto;

        right:0;
    }

}


/* =========================================================
   HERO — RTL SMALL MOBILE
========================================================= */

@media(max-width:500px){

    /*
     * الإنجليزي في هذا المقاس:
     * right:-15%.
     *
     * العربي يأخذ الإزاحة المعكوسة
     * حتى يكون الـbehavior متطابقًا.
     */
    html[dir="rtl"] .hero-person{
        right:auto;

        left:-15%;
    }


    html[dir="rtl"] .anydesk-card{
        left:auto;

        right:1%;
    }

}


/* =========================================================
   PROJECTS
========================================================= */

.project-type{
    left:14px;

    right:auto;
}


html[dir="rtl"] .project-type{
    right:14px;

    left:auto;
}


/* =========================================================
   EXPERIENCE
========================================================= */

html[dir="rtl"] .experience-head{
    text-align:right;
}


html[dir="rtl"] .experience-timeline{
    padding-left:0;

    padding-right:28px;
}


html[dir="rtl"] .experience-timeline:before{
    left:auto;

    right:6px;
}


html[dir="rtl"] .experience-item{
    padding-left:0;

    padding-right:34px;

    text-align:right;
}


html[dir="rtl"] .experience-dot{
    left:auto;

    right:0;

    transform:
        translateX(50%);
}


html[dir="rtl"] .experience-points li{
    padding-left:0;

    padding-right:18px;
}


html[dir="rtl"] .experience-points li:before{
    left:auto;

    right:0;
}


/* =========================================================
   ABOUT PEEK
========================================================= */

.peek-speech{
    direction:ltr;
}


html[dir="rtl"] .peek-speech{
    direction:rtl;

    text-align:right;
}


/* =========================================================
   FOOTER
========================================================= */

.footer-note{
    text-align:end;
}


/* =========================================================
   ACCENT POPOVER
========================================================= */

.accent-popover{
    right:170px;
}


html[dir="rtl"] .accent-popover{
    right:auto;

    left:170px;
}


/* =========================================================
   MODAL
========================================================= */

.modal-close{
    right:16px;
}


html[dir="rtl"] .modal-close{
    right:auto;

    left:16px;
}