/* =========================================================
   TIMELINE
========================================================= */

.timeline {
    --timeline-bg: #003b72;
    --timeline-white: #ffffff;
    --timeline-green-text: #D1EAA8;

    --timeline-sticky-offset: 88px;
    --timeline-step-count: 1;

    position: relative;

    width: 100%;

    /*
     * Desktop scroll distance.
     */
    min-height: calc(
        100vh +
        (
            (
                var(--timeline-step-count) - 1
            ) * 72vh
        )
    );

    background-color:
        var(--timeline-bg);

    background-image:
        url(
            "/wp-content/themes/semarchy2024/assets/images/scroll_module.png"
        );

    background-repeat:
        no-repeat;

    background-position:
        center center;

    background-size:
        cover;

    background-attachment:
        fixed;
}


/* =========================================================
   STICKY CONTAINER
========================================================= */

.timeline__sticky {
    position:
        sticky;

    top:
        var(--timeline-sticky-offset);

    width:
        100%;

    height:
        calc(
            100vh -
            var(--timeline-sticky-offset)
        );

    min-height:
        580px;

    overflow:
        hidden;

    background:
        transparent;
}


/* =========================================================
   MAIN STAGE
========================================================= */

.timeline__stage {
    position:
        relative;

    display:
        grid;

    grid-template-columns:
        minmax(300px, 36%)
        minmax(0, 64%);

    width:
        100%;

    height:
        100%;

    min-height:
        0;

    overflow:
        hidden;

    background:
        transparent;
}


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

.timeline__intro {
    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        flex-start;

    min-width:
        0;

    padding:
        0;

    background:
        transparent;
}


/* =========================================================
   HEADING
========================================================= */

.timeline__heading {
    position:
        relative;

    z-index:
        3;

    max-width:
        416px;

    color:
        var(--timeline-white);

    line-height:
        1.15;

    letter-spacing:
        -0.025em;

    text-wrap:
        balance;
}


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

.timeline__content {
    position:
        relative;

    z-index:
        5;

    display:
        flex;

    align-items:
        center;

    min-width:
        0;

    height:
        100%;

    padding:
        clamp(24px, 4vh, 44px)
        clamp(32px, 5vw, 80px)
        clamp(24px, 4vh, 44px)
        clamp(65px, 8vw, 125px);
}


/* =========================================================
   ITEMS
========================================================= */

.timeline__items {
    position:
        relative;

    display:
        grid;

    grid-template-rows:
        repeat(
            var(--timeline-step-count),
            minmax(0, 1fr)
        );

    gap:
        48px;

    width:
        100%;

    height:
        100%;

    max-height:
        650px;

    min-width:
        0;
}


/* =========================================================
   ITEM
========================================================= */

.timeline__item {
    position:
        relative;

    z-index:
        1;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    min-height:
        0;

    color:
        var(--timeline-white);

    opacity:
        var(
            --item-opacity,
            0.18
        );

    transform:
        translate3d(
            0,
            0,
            0
        )
        scale(
            var(
                --item-scale,
                1
            )
        );

    transform-origin:
        left center;

    transition:
        opacity
        800ms
        cubic-bezier(
            .22,
            1,
            .36,
            1
        ),

        transform
        1000ms
        cubic-bezier(
            .22,
            1,
            .36,
            1
        );

    will-change:
        opacity,
        transform;
}


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

.timeline__item.is-active {
    z-index:
        10;
}


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

.timeline__item-title {
    min-width:
        0;

    margin:
        0;

    color:
        var(--timeline-white);

    line-height:
        1.12;

    letter-spacing:
        -0.025em;
}


/* =========================================================
   TITLE WORD WRAPPER
========================================================= */

.timeline__title-words {
    display:
        flex;

    flex-wrap:
        wrap;

    column-gap:
        0.26em;

    row-gap:
        0.05em;

    min-width:
        0;
}


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

.timeline__title-word {
    position:
        relative;

    display:
        inline-block;

    /*
     * White -> lime sweep.
     */
    background-image:
        linear-gradient(
            90deg,
            var(--timeline-green-text) 0%,
            var(--timeline-green-text) 48%,
            #ffffff 52%,
            #ffffff 100%
        );

    background-size:
        205% 100%;

    background-position:
        100% 0;

    background-repeat:
        no-repeat;

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        #ffffff;

    -webkit-text-fill-color:
        transparent;

    transform:
        translate3d(
            0,
            2px,
            0
        );

    transition:
        background-position
        1050ms
        cubic-bezier(
            .22,
            1,
            .36,
            1
        ),

        transform
        800ms
        cubic-bezier(
            .22,
            1,
            .36,
            1
        );

    transition-delay:
        0ms;

    will-change:
        background-position,
        transform;
}


/* =========================================================
   ACTIVE WORD SWEEP
========================================================= */

.timeline__item.is-active
.timeline__title-word {
    background-position:
        0 0;

    /*
     * Desktop enlargement only.
     * Mobile overrides below.
     */
    font-size:
        32px;

    transform:
        translate3d(
            0,
            0,
            0
        );

    transition-delay:
        calc(
            var(--word-index) *
            135ms
        );
}


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

.timeline__item-description {
    max-width:
        720px;

    font-family:
        Inter,
        sans-serif;

    margin:
        10px
        0
        0;

    color:
        rgba(
            255,
            255,
            255,
            0.74
        );

    line-height:
        1.45;

    transform:
        translate3d(
            0,
            3px,
            0
        );

    transition:
        color
        700ms
        cubic-bezier(
            .22,
            1,
            .36,
            1
        ),

        transform
        850ms
        cubic-bezier(
            .22,
            1,
            .36,
            1
        );

    will-change:
        color,
        transform;
}


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

.timeline__item-description p {
    font-family:
        Inter,
        sans-serif;

    margin:
        0;
}


.timeline__item-description p + p {
    font-family:
        Inter,
        sans-serif;

    margin-top:
        8px;
}


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

.timeline__item.is-active
.timeline__item-description {
    font-family:
        Inter,
        sans-serif;

    color:
        rgba(
            255,
            255,
            255,
            0.98
        );

    transform:
        translate3d(
            0,
            0,
            0
        );

    transition-delay:
        180ms;
}


/* =========================================================
   FOUR ITEMS
========================================================= */

.timeline[data-step-count="4"]
.timeline__items {
    gap:
        48px;
}


/* =========================================================
   FIVE ITEMS
========================================================= */

.timeline[data-step-count="5"]
.timeline__items {
    gap:
        36px;
}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1200px) {

    .timeline {
        --timeline-sticky-offset:
            82px;
    }


    .timeline__stage {
        grid-template-columns:
            minmax(270px, 37%)
            minmax(0, 63%);
    }


    .timeline__content {
        padding:
            26px
            36px
            26px
            72px;
    }


    .timeline__heading {
        margin-left:
            28px;
    }

}


/* =========================================================
   SHORT DESKTOP
========================================================= */

@media
(min-width: 768px)
and
(max-height: 760px) {

    .timeline__content {
        padding-top:
            18px;

        padding-bottom:
            18px;
    }


    .timeline__items {
        gap:
            56px;
    }

}


/* =========================================================
   TABLET
   No scaling below desktop.
========================================================= */

@media (max-width: 1023px) {

    .timeline__item {
        opacity:
            var(
                --item-opacity,
                0.18
            );

        transform:
            translate3d(
                0,
                0,
                0
            )
            scale(1) !important;

        transform-origin:
            left center;

        transition:
            opacity
            800ms
            cubic-bezier(
                .22,
                1,
                .36,
                1
            );
    }


    .timeline__title-word {
        transform:
            translate3d(
                0,
                0,
                0
            ) !important;
    }


    .timeline__item.is-active
    .timeline__title-word {
        transform:
            translate3d(
                0,
                0,
                0
            ) !important;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .timeline {
        --timeline-sticky-offset:
            72px;

        /*
         * Mobile height comes from the content.
         */
        min-height:
            auto;

        background-color:
            var(--timeline-bg);

        background-image:
            url(
                "/wp-content/themes/semarchy2024/assets/images/scroll_module.png"
            );

        background-repeat:
            no-repeat;

        background-position:
            center center;

        background-size:
            cover;

        /*
         * Fixed backgrounds can be jerky on
         * some mobile browsers.
         */
        background-attachment:
            scroll;
    }


    /* =====================================================
       MOBILE STICKY
    ====================================================== */

    .timeline__sticky {
        position:
            relative;

        top:
            auto;

        width:
            100%;

        height:
            auto;

        min-height:
            0;

        overflow:
            visible;

        background:
            transparent;
    }


    /* =====================================================
       MOBILE STAGE
    ====================================================== */

    .timeline__stage {
        display:
            flex;

        flex-direction:
            column;

        width:
            100%;

        height:
            auto;

        min-height:
            0;

        overflow:
            visible;

        background:
            transparent;
    }


    /* =====================================================
       MOBILE INTRO
    ====================================================== */

    .timeline__intro {
        flex:
            0 0 auto;

        width:
            100%;

        padding:
            0;

        background:
            transparent;
    }


    /* =====================================================
       MOBILE HEADLINE
    ====================================================== */

    .timeline__heading {
        max-width:
            100%;

        margin:
            20px
            0
            24px;

        line-height:
            1.12;
    }


    /* =====================================================
       MOBILE CONTENT
    ====================================================== */

    .timeline__content {
        flex:
            1 1 auto;

        display:
            flex;

        align-items:
            stretch;

        width:
            100%;

        height:
            auto;

        min-height:
            0;

        padding:
            12px
            0
            28px;
    }


    /* =====================================================
       MOBILE ITEMS

       More scroll distance between states.
    ====================================================== */

    .timeline__items {
        display:
            flex;

        flex-direction:
            column;

        gap:
            0;

        width:
            100%;

        height:
            auto;

        max-height:
            none;
    }


    /*
     * Every timeline item has enough physical
     * vertical space that one normal finger
     * scroll does not move through several
     * active states.
     */
    .timeline__item {
        display:
            flex;

        flex-direction:
            column;

        justify-content:
            center;

        min-height:
            clamp(
                210px,
                34vh,
                300px
            );

        padding:
            22px
            0;

        opacity:
            var(
                --item-opacity,
                0.18
            );

        transform:
            none !important;

        transform-origin:
            left center;

        transition:
            opacity
            850ms
            cubic-bezier(
                .22,
                1,
                .36,
                1
            );
    }


    .timeline__item.is-active {
        opacity:
            1;

        transform:
            none !important;
    }


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

    .timeline__item-title {
        width:
            100%;

        max-width:
            none;
    }


    /*
     * No title scale/size jump.
     */
    .timeline__item.is-active
    .timeline__title-word {
        font-size:
            inherit;

        transform:
            none !important;

        background-position:
            0 0;
    }


    /*
     * Keep color sweep animation.
     */
    .timeline__title-word {
        transform:
            none !important;

        transition:
            background-position
            1050ms
            cubic-bezier(
                .22,
                1,
                .36,
                1
            );

        transition-delay:
            0ms;
    }


    .timeline__item.is-active
    .timeline__title-word {
        transition-delay:
            calc(
                var(--word-index) *
                135ms
            );
    }


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

    .timeline__item-description {
        max-width:
            none;

        font-family:
            Inter,
            sans-serif;

        margin-top:
            8px;

        line-height:
            1.4;

        color:
            rgba(
                255,
                255,
                255,
                0.68
            );

        transform:
            none !important;

        transition:
            color
            700ms
            cubic-bezier(
                .22,
                1,
                .36,
                1
            );
    }


    .timeline__item.is-active
    .timeline__item-description {
        color:
            rgba(
                255,
                255,
                255,
                1
            );

        transform:
            none !important;

        transition-delay:
            180ms;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .timeline {
        --timeline-sticky-offset:
            68px;
    }


    .timeline__heading {
        margin-top:
            16px;

        margin-bottom:
            18px;
    }


    .timeline__content {
        padding-bottom:
            20px;
    }


    /*
     * Still keep enough vertical distance
     * for each active state.
     */
    .timeline__item {
        min-height:
            clamp(
                200px,
                32vh,
                270px
            );

        padding:
            18px
            0;
    }


    .timeline__item-description {
        font-family:
            Inter,
            sans-serif;

        margin-top:
            6px;
    }

}


/* =========================================================
   SHORT MOBILE HEIGHT
========================================================= */

@media
(max-width: 767px)
and
(max-height: 700px) {

    .timeline__heading {
        margin-top:
            12px;

        margin-bottom:
            14px;
    }


    .timeline__content {
        padding-top:
            4px;

        padding-bottom:
            16px;
    }


    /*
     * Don't shrink these too far or
     * the timeline will race again.
     */
    .timeline__item {
        min-height:
            clamp(
                180px,
                30vh,
                230px
            );

        padding:
            16px
            0;
    }


    .timeline__item-description {
        margin-top:
            4px;

        font-family:
            Inter,
            sans-serif;

        line-height:
            1.3;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

    .timeline__item,
    .timeline__title-word,
    .timeline__item-description {
        animation:
            none !important;

        transition:
            none !important;
    }

}