/* ==========================================================
   LB Scroll Story
   Production Version
   Part 1 - Base Layout
========================================================== */

:root{

    --story-bg:#EAF5FB;

    --story-text:#25549A;

    --story-progress:#5C89E6;

    --story-progress-bg:#BFD3F7;

    --story-circle:rgba(92,137,230,.15);

}

/* ==========================================================
   SECTION
========================================================== */

.lb-scroll-story{

    position:relative;

    width:100%;

    min-height:100vh;

    background:var(--story-bg);

    /* NOTE: no fixed height here on purpose. GSAP's ScrollTrigger pin
       automatically creates a "pin-spacer" sized to whatever `end` value
       we give it in scroll-story.js. Forcing a fixed height here (the old
       300vh) will drift out of sync with that spacer the moment the
       number of slides or the pin duration changes, and the next section
       starts overlapping the pinned content — that was the bug in image 4. */

}

.lb-scroll-pin{

    position:relative;

    width:100%;

    height:100vh;

    overflow:hidden;
    min-height: 100vh;
}

/* Added only while this section is actually pinned (see the
   onEnter/onLeave callbacks in scroll-story.js). This is the real
   fix for the Android-Chrome-only reverse-swipe bug: Chrome on
   Android can hand a touch gesture off to its own fast, separate
   compositor-thread scrolling before our JS preventDefault() call
   is even processed — unless `touch-action` tells it up front not
   to. iOS Safari doesn't have quite the same race, which is why it
   worked there already. Scoped to only apply while pinned, so normal
   touch-scrolling into/out of this section is completely unaffected. */
.lb-scroll-pin.lb-touch-locked{

    touch-action:none;

}

/* ==========================================================
   INNER
========================================================== */

.lb-story-inner{

    position:relative;

    width:100%;

    max-width:1600px;

    height:100%;

    margin:0 auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 clamp(40px,6vw,120px);

}

/* ==========================================================
   RESET
========================================================== */

.lb-scroll-story *{

    box-sizing:border-box;

}

.lb-scroll-story img{

    display:block;

    max-width:100%;

}

.lb-scroll-story h2{

    margin:0;

}

.lb-scroll-story p{

    margin:0;

}

/* ==========================================================
   LEFT
========================================================== */

.lb-story-left{

    position:relative;

    width:48%;

    height:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:visible;

}

/* ==========================================================
   IMAGE HOLDER
========================================================== */

.lb-main-image-wrapper{

    position:relative;

    width:100%;

    height:100%;

    display:flex;

    align-items:center;

    justify-content:center;

}

/* ==========================================================
   MAIN IMAGE
========================================================== */

.lb-main-image{

    position:absolute;

    top:50%;

    left:50%;

    width:min(920px,80vw);

    max-width:none;

    object-fit:contain;

    pointer-events:none;

    user-select:none;

    will-change:transform,filter;

    transform-origin:center center;

    /* Step changes are now driven purely by CSS classes (step-1/2/3) on
       .lb-scroll-story — see PART 2 below. This transition is what makes
       the size/position/blur/shape change smoothly between steps. */
    transition:
        transform 1s cubic-bezier(.65,0,.35,1),
        opacity .9s ease,
        filter .9s ease,
        border-radius .9s ease;

}

/* ==========================================================
   RIGHT
========================================================== */

.lb-story-right{

    position:relative;

    width:42%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:flex-start;

    z-index:20;

}

/* ==========================================================
   SLIDES
========================================================== */

.lb-story-slide{

    position:absolute;

    inset:0;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

}

.lb-story-slide.active{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    position:relative;

}

/* ==========================================================
   CONTENT WRAPPER
========================================================== */

.lb-story-slide>*{

    will-change:transform,opacity;

}
/* ==========================================================
   PART 2
   LEFT IMAGE
========================================================== */

/* Default / fallback state (before JS adds a step-N class, or if JS fails
   to load) — mirrors step-1 so nothing looks broken on first paint. */
.lb-main-image{

    opacity:.32;

    filter:blur(12px) drop-shadow(0 40px 80px rgba(0,0,0,.08));

    border-radius:0;

    transform:
        translate3d(-62%,-50%,0)
        scale(2.35);

}

/* ---------- STEP 1 : large, heavily blurred, shifted left ---------- */
.lb-scroll-story.step-1 .lb-main-image{

    opacity:.32;

    filter:blur(12px) drop-shadow(0 40px 80px rgba(0,0,0,.08));

    border-radius:0;

    transform:
        translate3d(-62%,-50%,0)
        scale(2.35);

}

/* ---------- STEP 2 : medium, softer blur, closer to center ---------- */
.lb-scroll-story.step-2 .lb-main-image{

    opacity:.5;

    filter:blur(5px) drop-shadow(0 35px 70px rgba(0,0,0,.09));

    border-radius:0;

    transform:
        translate3d(-58%,-50%,0)
        scale(1.55);

}

/* ---------- STEP 3 : small, crisp, centered, circular avatar ---------- */
.lb-scroll-story.step-3 .lb-main-image{

    opacity:1;

    filter:blur(0) drop-shadow(0 25px 40px rgba(0,0,0,.10));

    border-radius:50%;

    transform:
        translate3d(-50%,-50%,0)
        scale(.45);

}

/* Smooth GPU rendering */

.lb-main-image,
.lb-slide-icon,
.lb-story-slide,
.lb-story-slide h2,
.lb-description,
.lb-progress-fill,
.lb-circle{

    backface-visibility:hidden;

    transform-style:preserve-3d;

    will-change:transform,opacity,filter;

}

/* ==========================================================
   RIGHT PANEL
========================================================== */

.lb-story-right{

    min-height:620px;

    justify-content:center;

    padding-left:20px;

}

/* ==========================================================
   SLIDE
========================================================== */

.lb-story-slide{

    width:100%;

    max-width:560px;

}

.lb-story-slide.active{

    display:block;

}

/* ==========================================================
   ICON
========================================================== */

.lb-slide-icon{

    width:72px;

    height:72px;

    object-fit:contain;

    margin-bottom:42px;

    opacity:0;

    transform:translateY(20px);

}

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

.lb-story-slide h2{

    color:var(--story-text);

    font-size:clamp(38px,3vw,62px);

    line-height:1.05;

    font-weight:500;

    letter-spacing:-.02em;

    margin-bottom:34px;

    opacity:0;

    transform:translateY(30px);

}

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

.lb-description{

    color:var(--story-text);

    font-size:clamp(18px,1.1vw,22px);

    line-height:1.75;

    max-width:540px;

    opacity:0;

    transform:translateY(35px);

}

.lb-description p{

    margin-bottom:24px;

}

.lb-description p:last-child{

    margin-bottom:0;

}

/* ==========================================================
   CONTENT SPACING
========================================================== */

.lb-story-slide>*{

    position:relative;

}

/* ==========================================================
   INITIAL ACTIVE
========================================================== */

.lb-story-slide.active .lb-slide-icon{

    opacity:1;

    transform:translateY(0);

}

.lb-story-slide.active h2{

    opacity:1;

    transform:translateY(0);

}

.lb-story-slide.active .lb-description{

    opacity:1;

    transform:translateY(0);

}

/* ==========================================================
   GSAP HELPERS
========================================================== */

.lb-slide-icon,
.lb-story-slide h2,
.lb-description{

    transition:none;

}

/* ==========================================================
   BETTER VISUAL BALANCE
========================================================== */

.lb-story-right::before{

    content:"";

    position:absolute;

    left:-120px;

    top:50%;

    width:1px;

    height:1px;

    pointer-events:none;

}

/* ==========================================================
   IMAGE WRAPPER
========================================================== */

.lb-main-image-wrapper{

    isolation:isolate;

    overflow:visible;

}
/* ==========================================================
   PART 3
   BOTTOM AREA
========================================================== */

.lb-story-bottom{

    position:relative;

    width:100%;

    margin-top:70px;

    display:flex;

    align-items:center;

    gap:36px;

}

/* ==========================================================
   COUNTER
========================================================== */

.lb-counter{

    display:flex;

    align-items:center;

    gap:8px;

    min-width:74px;

    font-size:28px;

    font-weight:500;

    color:#6F8EC9;

    letter-spacing:.02em;

    flex-shrink:0;

}

.lb-counter span{

    display:inline-block;

    min-width:18px;

    text-align:center;

}

/* ==========================================================
   PROGRESS
========================================================== */

.lb-progress{

    position:relative;

    flex:1;

    height:3px;

    background:var(--story-progress-bg);

    border-radius:100px;

    overflow:hidden;

}

.lb-progress-fill{

    position:absolute;

    left:0;

    top:0;

    width:33.333%;

    height:100%;

    background:var(--story-progress);

    border-radius:100px;

    transform-origin:left center;

}

/* ==========================================================
   CIRCLE CONTAINER
========================================================== */

.lb-main-image-wrapper{

    position:relative;

    overflow:visible;

}

/* ==========================================================
   CIRCLES
========================================================== */

.lb-circle{

    position:absolute;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%) scale(.6);

    border-radius:50%;

    opacity:0;

    pointer-events:none;

    z-index:-1;

    border:1px solid rgba(74,132,246,.18);

    transition:transform .9s ease, opacity .9s ease;

}

/* Rings only appear once the logo has settled into the small circular
   avatar on the last step — staggered so they "pop" outward one by one. */
.lb-scroll-story.step-3 .lb-circle{

    opacity:1;

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

}

.lb-scroll-story.step-3 .circle-1{ transition-delay:0s; }
.lb-scroll-story.step-3 .circle-2{ transition-delay:.12s; }
.lb-scroll-story.step-3 .circle-3{ transition-delay:.24s; }

/* Small */

.circle-1{

    width:320px;

    height:320px;

}

/* Medium */

.circle-2{

    width:520px;

    height:520px;

}

/* Large */

.circle-3{

    width:760px;

    height:760px;

}

/* ==========================================================
   DEPTH
========================================================== */

.lb-story-left{

    z-index:1;

}

.lb-main-image-wrapper{

    z-index:2;

}

.lb-main-image{

    z-index:3;

}

.lb-circle{

    z-index:1;

}

.lb-story-right{

    z-index:10;

}

/* ==========================================================
   GPU HELPERS
========================================================== */

.lb-main-image,
.lb-circle,
.lb-progress-fill{

    transform-style:preserve-3d;

    backface-visibility:hidden;

}

/* ==========================================================
   PREVENT IMAGE SELECTION
========================================================== */

.lb-main-image{

    -webkit-user-drag:none;

    user-select:none;

}

/* ==========================================================
   PART 3B
   FINAL-STEP RECENTER (desktop only)

   Reference site (see screenshot): on the last slide the small
   circular logo + rings sit in the exact center of the WHOLE
   section, not just centered inside the left 48%/50% column like
   the other steps. Our .lb-main-image-wrapper is 100% of its
   .lb-story-left column, so its own center always sits at half of
   that column's width — which is left-of-page-center, not
   page-center (that's the "img4" bug — logo hugging the left side
   on the last slide instead of matching "img3").

   Fix: shift the WHOLE wrapper (image + rings together) to the
   right by the exact distance between "center of the left column"
   and "center of the full inner content box", expressed as a
   percentage of the wrapper's own width so it works at any screen
   size without JS/layout changes:

     offset% = (0.5 - leftColCenterFraction) / leftColWidthFraction * 100

   Desktop (left:48%, right:42%, space-between -> gap 10%):
     leftColCenterFraction = 0.24  ->  offset = (0.5-0.24)/0.48 = 54.17%

   "Desktop" breakpoint below 1400px (left becomes 50%, right 42%,
   gap 8%):
     leftColCenterFraction = 0.25  ->  offset = (0.5-0.25)/0.50 = 50%

   Only the wrapper's transform changes (position stays the same
   the whole time), so this animates smoothly alongside the image's
   own scale/blur transition instead of "jumping".
========================================================== */

@media (min-width:992px){

    .lb-main-image-wrapper{

        transform:translateX(0);

        transition:transform 1s cubic-bezier(.65,0,.35,1);

    }

}

@media (min-width:1401px){

    .lb-scroll-story.step-3 .lb-main-image-wrapper,
    .lb-scroll-story.is-last .lb-main-image-wrapper{

        transform:translateX(54.1667%);

    }

}

@media (max-width:1400px) and (min-width:992px){

    .lb-scroll-story.step-3 .lb-main-image-wrapper,
    .lb-scroll-story.is-last .lb-main-image-wrapper{

        transform:translateX(50%);

    }

}

/* ==========================================================
   PART 4
   RESPONSIVE
========================================================== */

/* ---------- Large Desktop ---------- */

@media (max-width:1600px){

    .lb-story-inner{

        max-width:1400px;

    }

    .lb-main-image{

        width:780px;

    }

}

/* ---------- Desktop ---------- */

@media (max-width:1400px){

    .lb-story-inner{

        padding:0 70px;

    }

    .lb-story-left{

        width:50%;

    }

    .lb-story-right{

        width:42%;

    }

    .lb-main-image{

        width:720px;

    }

    .circle-1{

        width:280px;
        height:280px;

    }

    .circle-2{

        width:460px;
        height:460px;

    }

    .circle-3{

        width:620px;
        height:620px;

    }

}

/* ---------- Laptop ---------- */

@media (max-width:1200px){

    .lb-story-inner{

        padding:0 50px;

    }

    .lb-main-image{

        width:620px;

    }

    .lb-slide-icon{

        width:60px;
        height:60px;

    }

    .lb-story-slide h2{

        font-size:48px;

    }

    .lb-description{

        font-size:18px;

        line-height:1.7;

    }

}

/* ---------- Tablet ---------- */

@media (max-width:991px){

    .lb-scroll-story{

        height:auto;

    }

    .lb-scroll-pin{

        height:auto;

        min-height:100vh;

    }

    .lb-story-inner{

        flex-direction:column;

        justify-content:flex-start;

        align-items:center;

        padding:80px 30px;

        gap:40px;

    }

    .lb-story-left{

        width:100%;

        height:320px;

    }

    .lb-main-image,
    .lb-scroll-story.step-1 .lb-main-image,
    .lb-scroll-story.step-2 .lb-main-image,
    .lb-scroll-story.step-3 .lb-main-image{

        width:480px;

        transform:
            translate3d(-50%,-50%,0)
            scale(1.4);

        opacity:.35;

        filter:blur(6px);

        border-radius:0;

    }

    /* Still let the final step become the small crisp circular avatar
       on tablet, just without the big desktop scale jump */
    .lb-scroll-story.step-3 .lb-main-image{

        transform:
            translate3d(-50%,-50%,0)
            scale(.6);

        opacity:1;

        filter:blur(0);

        border-radius:50%;

    }

    .lb-story-right{

        width:100%;

        min-height:auto;

        padding:0;

        align-items:center;

        text-align:center;

    }

    .lb-story-slide{

        max-width:100%;

    }

    .lb-story-bottom{

        justify-content:center;

    }

    .circle-1{

        width:220px;
        height:220px;

    }

    .circle-2{

        width:360px;
        height:360px;

    }

    .circle-3{

        width:500px;
        height:500px;

    }

}

/* ---------- Mobile ---------- */

@media (max-width:767px){

    .lb-story-inner{

        padding:60px 24px;

    }

    .lb-story-left{

        height:240px;

    }

    .lb-main-image{

        width:340px;

    }

    .lb-slide-icon{

        width:48px;

        height:48px;

        margin-bottom:22px;

    }

    .lb-story-slide h2{

        font-size:34px;

        margin-bottom:22px;

    }

    .lb-description{

        font-size:16px;

        line-height:1.65;

    }

    .lb-story-bottom{

        margin-top:40px;

        gap:20px;

    }

    .lb-counter{

        font-size:20px;

    }

    .lb-progress{

        height:2px;

    }

    .circle-1{

        width:180px;
        height:180px;

    }

    .circle-2{

        width:280px;
        height:280px;

    }

    .circle-3{

        width:380px;
        height:380px;

    }

}

/* ==========================================================
   ACCESSIBILITY
========================================================== */

@media (prefers-reduced-motion:reduce){

    .lb-main-image,
    .lb-circle,
    .lb-slide-icon,
    .lb-story-slide h2,
    .lb-description,
    .lb-progress-fill{

        transition:none !important;

        animation:none !important;

    }

}