/* ==========================================================
   DESKTOP STAGE ONE / STAGE TWO
   نفس نص وهوية الموبايل (lb-stage-one / lb-stage-two) بس:
   - classes مستقلة تمامًا (lb-desktop-stage-one/two)
   - متحطوطين في التلت اليمين من الشاشة
   - مقاسات مكبّرة تناسب شاشة الديسك توب
   شغالة بس فوق 900px، عشان محدش يتلخبط مع نسخة الموبايل
========================================================== */

@media (min-width:901px){

    /* ==================== STAGE ONE ==================== */

    .lb-desktop-stage-one{
        position:absolute;
        top:0;
        right:0;
        width:100%;
        height:100%;
        z-index:35;
        overflow:hidden;
        pointer-events:none;
        box-sizing:border-box;
        display:flex;
        align-items:center;
        justify-content:flex-end;
        padding:0 6vw;
        direction:ltr; /* الموقع RTL، من غيرها الكونتنت بيتحط شمال بدل يمين */
        transition:opacity .5s ease, transform .5s ease;
    }

    .lb-desktop-stage-one.lb-desktop-stage-one--out{
        opacity:0;
        transform:translateY(-24px);
        pointer-events:none;
    }

    .lb-desktop-stage-one *{
        box-sizing:border-box;
    }

    /* ==================== LUXURY AURA ==================== */

    .lb-desktop-stage-one::before{
        content:"";
        position:absolute;
        top:-15vh;
        right:-10vw;
        width:45vw;
        height:45vw;
        border-radius:50%;
        background:
            radial-gradient(
                circle,
                rgba(123,21,151,.30) 0%,
                rgba(109,4,130,.20) 22%,
                rgba(155,60,180,.10) 45%,
                rgba(155,60,180,.04) 65%,
                transparent 80%
            );
        filter:blur(80px);
        opacity:.85;
        z-index:0;
        pointer-events:none;
        animation:lbDesktopSmokeDrift 9s ease-in-out infinite alternate;
    }

    .lb-desktop-stage-one::after{
        content:"";
        position:absolute;
        bottom:-10vh;
        right:10vw;
        width:30vw;
        height:30vw;
        border-radius:50%;
        background:
            radial-gradient(
                circle,
                rgba(216,191,122,.10) 0%,
                rgba(155,60,180,.06) 35%,
                transparent 70%
            );
        filter:blur(100px);
        opacity:.7;
        z-index:0;
        pointer-events:none;
        animation:lbDesktopSmokeDrift 12s ease-in-out infinite alternate-reverse;
    }

    @keyframes lbDesktopSmokeDrift{
        0%{
            transform:translate(0,0) scale(1);
        }
        100%{
            transform:translate(-2vw,3vh) scale(1.08);
        }
    }

    /* ==================== CONTENT WRAP ==================== */

    .lb-desktop-stage-one__content{
        position:relative;
        width:100%;
        max-width:30vw;
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        text-align:left;
        z-index:5;
    }

    /* ==================== LABEL ==================== */

    .lb-desktop-stage-one__label{
        display:flex;
        align-items:center;
        gap:16px;
        margin:0 0 18px;
        color:#C9A45A;
        font-size:13px;
        font-weight:600;
        letter-spacing:.25em;
        text-transform:uppercase;
        white-space:normal;
        opacity:.92;
        width:100%;
        min-width:0;
    }

    .lb-desktop-stage-one__label::before{
        content:"";
        width:44px;
        height:1px;
        background:rgba(216,191,122,.65);
        flex-shrink:0;
    }

    /* ==================== TITLE ==================== */

    .lb-desktop-stage-one__title{
        margin:0;
        font-family:"Cormorant Garamond",serif;
        font-size:clamp(56px,5vw,88px);
        font-weight:500;
        line-height:.9;
        letter-spacing:-.03em;
        color:#6D0482;
        text-wrap:balance;
        word-break:keep-all;
        overflow-wrap:break-word;
        text-shadow:0 10px 30px rgba(109,4,130,.10);
    }

    /* ==================== DESCRIPTION ==================== */

    .lb-desktop-stage-one__desc{
        margin:22px 0 34px;
        max-width:100%;
        color:#544A58;
        font-size:16px;
        line-height:1.65;
        font-weight:400;
        opacity:.9;
    }

    /* ==================== BUTTON ==================== */

    .lb-desktop-stage-one__btn{
        position:relative;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        gap:14px;
        min-width:170px;
        height:54px;
        padding:0 28px;
        border-radius:999px;
        background:linear-gradient(180deg,#7B1597 0%,#64047B 100%);
        border:1px solid rgba(216,191,122,.45);
        color:#DCC07B;
        font-size:12px;
        font-weight:700;
        letter-spacing:.22em;
        text-transform:uppercase;
        text-decoration:none;
        pointer-events:auto;
        overflow:hidden;
        transition:
            transform .45s cubic-bezier(.19,1,.22,1),
            box-shadow .45s cubic-bezier(.19,1,.22,1);
        box-shadow:
            0 18px 40px rgba(109,4,130,.20),
            inset 0 1px 0 rgba(255,255,255,.14);
    }

    .lb-desktop-stage-one__btn::before{
        content:"";
        position:absolute;
        inset:1px;
        border-radius:999px;
        background:linear-gradient(180deg,rgba(255,255,255,.08),transparent);
        pointer-events:none;
    }

    .lb-desktop-stage-one__btn:hover{
        transform:translateY(-4px);
        box-shadow:
            0 28px 54px rgba(109,4,130,.32),
            inset 0 1px 0 rgba(255,255,255,.18);
    }

    .lb-desktop-stage-one__btn:active{
        transform:translateY(-1px);
    }

    .lb-desktop-stage-one__title,
    .lb-desktop-stage-one__desc,
    .lb-desktop-stage-one__label{
        user-select:none;
    }

    .lb-desktop-stage-one__btn{
        cursor:pointer;
        -webkit-tap-highlight-color:transparent;
    }

    .lb-desktop-stage-one__btn:focus{
        outline:none;
    }

    /* ==================== STAGE TWO ==================== */

    .lb-desktop-stage-two{
        position:absolute;
        top:0;
        right:0;
        width:100%;
        height:100%;
        z-index:35;
        overflow:hidden;
        pointer-events:none;
        box-sizing:border-box;
        display:flex;
        align-items:center;
        justify-content:flex-end;
        padding:0 6vw;
        direction:ltr; /* نفس سبب lb-desktop-stage-one */
    }

    .lb-desktop-stage-two.lb-desktop-stage-two--in{
        pointer-events:auto;
    }

    .lb-desktop-stage-two *{
        box-sizing:border-box;
    }

    /* ==================== LUXURY AURA (STAGE TWO) ==================== */

    .lb-desktop-stage-two::before{
        content:"";
        position:absolute;
        top:-15vh;
        right:-10vw;
        width:45vw;
        height:45vw;
        border-radius:50%;
        background:
            radial-gradient(
                circle,
                rgba(123,21,151,.30) 0%,
                rgba(109,4,130,.20) 22%,
                rgba(155,60,180,.10) 45%,
                rgba(155,60,180,.04) 65%,
                transparent 80%
            );
        filter:blur(80px);
        opacity:.85;
        z-index:0;
        pointer-events:none;
        animation:lbDesktopSmokeDrift 9s ease-in-out infinite alternate;
    }

    .lb-desktop-stage-two::after{
        content:"";
        position:absolute;
        bottom:-10vh;
        right:10vw;
        width:30vw;
        height:30vw;
        border-radius:50%;
        background:
            radial-gradient(
                circle,
                rgba(216,191,122,.10) 0%,
                rgba(155,60,180,.06) 35%,
                transparent 70%
            );
        filter:blur(100px);
        opacity:.7;
        z-index:0;
        pointer-events:none;
        animation:lbDesktopSmokeDrift 12s ease-in-out infinite alternate-reverse;
    }

    /* ==================== CONTENT WRAP (STAGE TWO) ==================== */

    .lb-desktop-stage-two__content{
        position:relative;
        width:100%;
        max-width:30vw;
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        text-align:left;
        z-index:5;
    }

    /* ==================== ENTRANCE ANIMATION (STAGE TWO) ==================== */

    .lb-desktop-stage-two__label,
    .lb-desktop-stage-two__title,
    .lb-desktop-stage-two__desc,
    .lb-desktop-stage-two__btn-wrap{
        opacity:0;
        transition:opacity .5s ease, transform .5s ease;
    }

    .lb-desktop-stage-two__label{
        transform:translateX(-50px);
        transition-delay:0s;
    }

    .lb-desktop-stage-two__title{
        transform:translateX(50px);
        transition-delay:.1s;
    }

    .lb-desktop-stage-two__desc{
        transform:translateX(-50px);
        transition-delay:.2s;
    }

    .lb-desktop-stage-two__btn-wrap{
        transform:translateX(50px);
        transition-delay:.3s;
    }

    .lb-desktop-stage-two--in .lb-desktop-stage-two__label,
    .lb-desktop-stage-two--in .lb-desktop-stage-two__title,
    .lb-desktop-stage-two--in .lb-desktop-stage-two__desc,
    .lb-desktop-stage-two--in .lb-desktop-stage-two__btn-wrap{
        opacity:1;
        transform:translateX(0);
    }

    /* ==================== LABEL (STAGE TWO) ==================== */

    .lb-desktop-stage-two__label{
        display:flex;
        align-items:center;
        gap:16px;
        margin:0 0 18px;
        color:#C9A45A;
        font-size:13px;
        font-weight:600;
        letter-spacing:.25em;
        text-transform:uppercase;
        white-space:normal;
        width:100%;
        min-width:0;
    }

    .lb-desktop-stage-two__label::before{
        content:"";
        width:44px;
        height:1px;
        background:rgba(216,191,122,.65);
        flex-shrink:0;
    }

    /* ==================== TITLE (STAGE TWO) ==================== */

    .lb-desktop-stage-two__title{
        margin:0;
        font-family:"Cormorant Garamond",serif;
        font-size:clamp(48px,4.2vw,76px);
        font-weight:500;
        line-height:.95;
        letter-spacing:-.03em;
        color:#6D0482;
        text-wrap:balance;
        word-break:keep-all;
        overflow-wrap:break-word;
        text-shadow:0 10px 30px rgba(109,4,130,.10);
    }

    /* ==================== DESCRIPTION (STAGE TWO) ==================== */

    .lb-desktop-stage-two__desc{
        margin:22px 0 34px;
        max-width:100%;
        color:#544A58;
        font-size:16px;
        line-height:1.65;
        font-weight:400;
    }

    /* ==================== BUTTON (STAGE TWO) ==================== */

    .lb-desktop-stage-two__btn-wrap{
        display:inline-block;
        text-decoration:none;
        pointer-events:auto;
    }

    .lb-desktop-stage-two__btn{
        position:relative;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        gap:14px;
        min-width:190px;
        height:54px;
        padding:0 28px;
        border-radius:999px;
        background:linear-gradient(180deg,#7B1597 0%,#64047B 100%);
        border:1px solid rgba(216,191,122,.45);
        color:#DCC07B;
        font-size:12px;
        font-weight:700;
        letter-spacing:.22em;
        text-transform:uppercase;
        overflow:hidden;
        transition:
            transform .45s cubic-bezier(.19,1,.22,1),
            box-shadow .45s cubic-bezier(.19,1,.22,1);
        box-shadow:
            0 18px 40px rgba(109,4,130,.20),
            inset 0 1px 0 rgba(255,255,255,.14);
    }

    .lb-desktop-stage-two__btn::before{
        content:"";
        position:absolute;
        inset:1px;
        border-radius:999px;
        background:linear-gradient(180deg,rgba(255,255,255,.08),transparent);
        pointer-events:none;
    }

    .lb-desktop-stage-two__btn-wrap:hover .lb-desktop-stage-two__btn{
        transform:translateY(-4px);
        box-shadow:
            0 28px 54px rgba(109,4,130,.32),
            inset 0 1px 0 rgba(255,255,255,.18);
    }

    .lb-desktop-stage-two__btn-wrap:active .lb-desktop-stage-two__btn{
        transform:translateY(-1px);
    }

    .lb-desktop-stage-two__title,
    .lb-desktop-stage-two__desc,
    .lb-desktop-stage-two__label{
        user-select:none;
    }

    .lb-desktop-stage-two__btn-wrap{
        cursor:pointer;
        -webkit-tap-highlight-color:transparent;
    }

    .lb-desktop-stage-two__btn-wrap:focus{
        outline:none;
    }

}

/* ==========================================================
   تعديل مكان السيكشنين بس على الشاشات الرأسية (9:16 تقريبًا)
   زي الشاشة المقلوبة - من غير ما يأثر على الديسك توب العادي
========================================================== */
@media (min-width:901px) and (min-aspect-ratio: 1/2) and (max-aspect-ratio: 3/4){

    .lb-desktop-stage-one,
    .lb-desktop-stage-two{
        padding-right:2vw; /* كل ما الرقم يقل، كل ما الكونتنت يقرب من حافة الشاشة اليمين */
    }

    .lb-desktop-stage-one__content,
    .lb-desktop-stage-two__content{
        transform:translateY(12vh); /* بينزل الكونتنت لتحت شوية */
    }

}