/* ==========================================================
   DESKTOP: اقفل السيكوانس والنص خالص فوق 900px
   (المساحة هنا سايبها فاضية عشان تحط السيكوانس الجديدة بتاعتك)
========================================================== */

@media (orientation:landscape){

    .lb-sequence-wrapper #lbSequenceImage,
    .lb-stage-one,
    .lb-stage-two{
        display:none !important;
    }

}

/* ==========================================================
   MOBILE ONLY — كل حاجة تحت الـ 900px بس
========================================================== */

@media (orientation:portrait){

    html, body{
        overflow-x:hidden;
    }

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

    .lb-stage-one{
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        z-index:35;
        overflow:hidden;
        pointer-events:none;
        box-sizing:border-box;
        display:flex;
        align-items:flex-start;
        justify-content:flex-start;
        padding:110px 24px 0;
        direction:ltr; /* عشان الموقع RTL، من غيرها الفلكس بيبدأ من اليمين */
        transition:opacity .5s ease, transform .5s ease;
    }

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

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

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

    .lb-stage-one::before{
        content:"";
        position:absolute;
        top:-10vh;
        left:-10vw;
        width:85vw;
        height:85vw;
        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(60px);
        opacity:.85;
        z-index:0;
        pointer-events:none;
        animation:lbSmokeDrift 9s ease-in-out infinite alternate;
    }

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

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

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

    .lb-stage-one__content{
        position:static;
        width:100%;
        max-width:200px;
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        text-align:left;
        z-index:5;
    }

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

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

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

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

    .lb-stage-one__title{
        margin:0;
        font-family:"Cormorant Garamond",serif;
        font-size:46px;
        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 8px 22px rgba(109,4,130,.08);
    }

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

    .lb-stage-one__desc{
        margin:14px 0 24px;
        max-width:100%;
        color:#544A58;
        font-size:12px;
        line-height:1.6;
        font-weight:400;
        opacity:.9;
    }

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

    .lb-stage-one__btn{
        position:relative;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        gap:12px;
        min-width:130px;
        height:42px;
        padding:0 18px;
        border-radius:999px;
        background:linear-gradient(180deg,#7B1597 0%,#64047B 100%);
        border:1px solid rgba(216,191,122,.45);
        color:#DCC07B;
        font-size:9px;
        font-weight:700;
        letter-spacing:.2em;
        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 16px 34px rgba(109,4,130,.20),
            inset 0 1px 0 rgba(255,255,255,.14);
    }

    .lb-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-stage-one__btn:hover{
        transform:translateY(-3px);
        box-shadow:
            0 24px 46px rgba(109,4,130,.32),
            inset 0 1px 0 rgba(255,255,255,.18);
    }

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

    /* ==================== SMALL DETAILS ==================== */

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

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

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

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

    .lb-stage-two{
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        z-index:35;
        overflow:hidden;
        pointer-events:none;
        box-sizing:border-box;
        display:flex;
        align-items:flex-start;
        justify-content:flex-start;
        padding:110px 24px 0;
        direction:ltr;
    }

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

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

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

    .lb-stage-two::before{
        content:"";
        position:absolute;
        top:-10vh;
        left:-10vw;
        width:85vw;
        height:85vw;
        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(60px);
        opacity:.85;
        z-index:0;
        pointer-events:none;
        animation:lbSmokeDrift 9s ease-in-out infinite alternate;
    }

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

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

    .lb-stage-two__content{
        position:static;
        width:100%;
        max-width:200px;
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        text-align:left;
        z-index:5;
    }

    /* ==================== ENTRANCE ANIMATION (STAGE TWO) ====================
       كل عنصر بيدخل من عكس اتجاه اللي قبله، بتأخير متدرج
    ============================================================== */

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

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

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

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

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

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

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

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

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

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

    .lb-stage-two__title{
        margin:0;
        font-family:"Cormorant Garamond",serif;
        font-size:40px;
        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 8px 22px rgba(109,4,130,.08);
    }

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

    .lb-stage-two__desc{
        margin:14px 0 24px;
        max-width:100%;
        color:#544A58;
        font-size:12px;
        line-height:1.6;
        font-weight:400;
    }

    /* ==================== BUTTON (STAGE TWO) ====================
       lb-stage-two__btn-wrap = الـ <a> نفسها (مسؤولة عن أنيميشن الدخول)
       lb-stage-two__btn = الـ <span> جواها (مسؤول عن شكل الزرار والـ hover)
    ============================================================== */

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

    .lb-stage-two__btn{
        position:relative;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        gap:12px;
        min-width:150px;
        height:42px;
        padding:0 18px;
        border-radius:999px;
        background:linear-gradient(180deg,#7B1597 0%,#64047B 100%);
        border:1px solid rgba(216,191,122,.45);
        color:#DCC07B;
        font-size:9px;
        font-weight:700;
        letter-spacing:.2em;
        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 16px 34px rgba(109,4,130,.20),
            inset 0 1px 0 rgba(255,255,255,.14);
    }

    .lb-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-stage-two__btn-wrap:hover .lb-stage-two__btn{
        transform:translateY(-3px);
        box-shadow:
            0 24px 46px rgba(109,4,130,.32),
            inset 0 1px 0 rgba(255,255,255,.18);
    }

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

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

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

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

}