/* =========================================================
   SCPR JOURNEY
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: #020817;
    color: #ffffff;
    font-family: "Montserrat", sans-serif;
    overflow-x: hidden;
}


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

.scpr-journey {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 800px;
    overflow: hidden;
    background: #020817;
}


/* =========================================================
   BACKGROUND
========================================================= */

.journey-background {
    position: absolute;
    inset: 0;
    z-index: 0;

    background:
        radial-gradient(circle at 15% 40%,
            rgba(25, 87, 220, 0.20),
            transparent 32%),
        radial-gradient(circle at 85% 30%,
            rgba(35, 93, 190, 0.13),
            transparent 35%),
        linear-gradient(125deg,
            #020817 0%,
            #04142d 48%,
            #020817 100%);
}


/* =========================================================
   GRID
========================================================= */

.journey-grid {
    position: absolute;
    inset: 0;
    z-index: 1;

    opacity: 0.08;

    background-image:
        linear-gradient(rgba(100, 150, 255, 0.15) 1px,
            transparent 1px),
        linear-gradient(90deg,
            rgba(100, 150, 255, 0.15) 1px,
            transparent 1px);

    background-size: 100px 100px;

    mask-image:
        linear-gradient(to right,
            transparent,
            black 20%,
            black 80%,
            transparent);

    pointer-events: none;
}


/* =========================================================
   GLOW
========================================================= */

.journey-glow {
    position: absolute;
    z-index: 1;

    width: 550px;
    height: 550px;

    border-radius: 50%;

    filter: blur(130px);

    opacity: 0.25;

    pointer-events: none;
}

.journey-glow-one {
    left: -260px;
    top: 30%;
    background: #165eff;
}

.journey-glow-two {
    right: -260px;
    bottom: -180px;
    background: #0744aa;
}


/* =========================================================
   BRAND
========================================================= */

.journey-brand {
    position: absolute;
    z-index: 20;

    top: 42px;
    left: 6.5vw;

    display: flex;
    flex-direction: column;
}

.journey-brand span {
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 6px;
    color: #7da7ef;
}

.journey-brand strong {
    margin-top: 5px;

    font-family: "Cormorant Garamond", serif;

    font-size: 26px;
    font-weight: 600;

    letter-spacing: 4px;

    color: #ffffff;
}


/* =========================================================
   HEADER
========================================================= */

.journey-header {
    position: absolute;
    z-index: 10;

    top: 105px;
    left: 6.5vw;
}

.journey-header-line {
    display: inline-block;

    width: 35px;
    height: 1px;

    margin-right: 12px;

    vertical-align: middle;

    background: #397cff;
}

.journey-header>span:not(.journey-header-line) {
    font-size: 9px;
    font-weight: 600;

    letter-spacing: 5px;

    color: #6e9bea;
}

.journey-header h1 {
    margin-top: 12px;

    font-family: "Cormorant Garamond", serif;

    font-size: 39px;
    font-weight: 500;

    line-height: 0.95;

    color: #ffffff;
}

.journey-header h1 em {
    font-style: normal;
    color: #4c87ff;
}


/* =========================================================
   MAIN AREA
========================================================= */

.journey-main {
    position: absolute;
    z-index: 5;

    top: 51%;
    left: 0;

    width: 100%;

    padding: 0 7vw;

    transform: translateY(-46%);

    display: grid;

    grid-template-columns: 39% 61%;

    align-items: center;
}


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

.journey-content {
    position: relative;
    z-index: 10;

    padding-right: 65px;
}


/* =========================================================
   YEAR
========================================================= */

.journey-year {
    font-family: "Cormorant Garamond", serif;

    font-size: clamp(100px,
            9vw,
            145px);

    font-weight: 400;

    line-height: 0.75;

    letter-spacing: -4px;

    color: #ffffff;

    text-shadow:
        0 0 60px rgba(70, 130, 255, 0.10);

    transition:
        opacity 0.35s ease,
        transform 0.35s ease;
}


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

.journey-content h2 {
    max-width: 570px;

    margin-top: 32px;
    margin-bottom: 22px;

    font-family: "Cormorant Garamond", serif;

    font-size: 24px !important;
    /* 
    font-size: clamp(38px,
            4vw,
            57px); */

    font-weight: 500;

    line-height: 1.03;

    color: #ffffff;

    transition:
        opacity 0.35s ease,
        transform 0.35s ease;
}


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

.journey-description {
    max-width: 570px;
}

.journey-description p {
    margin: 0;

    font-family: "Cormorant Garamond", serif;

    font-size: 18px !important;

    line-height: 1.52;

    color:
        rgba(226,
            235,
            249,
            0.72);

    transition:
        opacity 0.35s ease,
        transform 0.35s ease;
}


/* =========================================================
   MULTIPLE EVENT BUTTONS
========================================================= */

.event-navigation {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 28px;
}


/*
   Only appears for years having
   multiple milestones.
*/

.event-button {
    padding: 7px 13px;

    border:
        1px solid rgba(100,
            145,
            220,
            0.22);

    border-radius: 2px;

    background:
        rgba(10,
            28,
            58,
            0.55);

    color: #8da4c8;

    font-family: "Montserrat", sans-serif;

    font-size: 8px;

    font-weight: 600;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    cursor: pointer;

    transition: all 0.3s ease;
}

.event-button:hover {
    border-color: #4383ff;
    color: #ffffff;
}

.event-button.active {
    background: #2768e8;
    border-color: #2768e8;
    color: #ffffff;
}


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

.journey-counter {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-top: 28px;

    font-size: 9px;

    letter-spacing: 3px;

    color: #7085a9;

    display: none;
}

.journey-counter span:first-child {
    color: #ffffff;
}

.journey-counter i {
    display: block;

    width: 45px;
    height: 1px;

    background:
        rgba(255,
            255,
            255,
            0.22);
}


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

.journey-visual {
    position: relative;
    width: 100%;
}

.journey-image-frame {
    position: relative;

    width: 100%;
    height: 570px;

    overflow: hidden;

    background: #07172f;

    border:
        1px solid rgba(100,
            145,
            220,
            0.15);

    box-shadow:
        0 30px 90px rgba(0,
            0,
            0,
            0.28);
}


/* =========================================================
   IMAGE
========================================================= */
.journey-image-frame {
    position: relative;
    width: 100%;
    height: 570px;
    overflow: hidden;
    background: #07172f;

    display: flex;
    align-items: center;
    justify-content: center;
}

.journey-image-frame img {
    position: relative;
    z-index: 1;

    width: 100%;
    height: 100%;

    display: block;

    /* Shows the complete image */
    object-fit: contain;
    object-position: center;

    opacity: 0.92;

    /* IMPORTANT: no scale */
    transform: none;

    transition: opacity 0.45s ease;
}

.journey-image-frame:hover img {
    transform: none;
}

/* =========================================================
   IMAGE OVERLAY
========================================================= */

.journey-image-overlay {
    position: absolute;
    z-index: 2;

    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(2,
                8,
                23,
                0.42),
            transparent 55%),
        linear-gradient(180deg,
            rgba(2,
                8,
                23,
                0.02),
            rgba(2,
                8,
                23,
                0.48));

    pointer-events: none;
}


/* =========================================================
   IMAGE BLUE GLOW
========================================================= */

.image-blue-glow {
    position: absolute;
    z-index: 3;

    left: -100px;
    bottom: -180px;

    width: 450px;
    height: 300px;

    border-radius: 50%;

    background: #075cff;

    filter: blur(120px);

    opacity: 0.15;

    pointer-events: none;
}


/* =========================================================
   IMAGE CORNERS
========================================================= */

.image-corner {
    position: absolute;
    z-index: 6;

    width: 75px;
    height: 75px;

    pointer-events: none;
}

.image-corner-top {
    top: 18px;
    left: 18px;

    border-top:
        1px solid rgba(95,
            150,
            255,
            0.60);

    border-left:
        1px solid rgba(95,
            150,
            255,
            0.60);
}

.image-corner-bottom {
    right: 18px;
    bottom: 18px;

    border-right:
        1px solid rgba(95,
            150,
            255,
            0.60);

    border-bottom:
        1px solid rgba(95,
            150,
            255,
            0.60);
}


/* =========================================================
   IMAGE YEAR
========================================================= */

.image-year {
    position: absolute;
    z-index: 7;

    right: 30px;
    bottom: 20px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 100px;

    font-weight: 500;

    line-height: 0.8;

    color:
        rgba(255,
            255,
            255,
            0.13);
}


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

.image-label {
    position: absolute;
    z-index: 8;

    top: 30px;
    right: 30px;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 3px;
}

.image-label span {
    font-size: 10px;

    font-weight: 700;

    letter-spacing: 5px;

    color: #ffffff;
}

.image-label small {
    font-size: 7px;

    letter-spacing: 4px;

    color: #6797ed;
}


/* =========================================================
   CONTENT TRANSITION
========================================================= */

.journey-main.changing .journey-year,

.journey-main.changing .journey-content h2,

.journey-main.changing .journey-description {
    opacity: 0;

    transform:
        translateY(18px);
}


.journey-main.changing .journey-image-frame img {
    opacity: 0;

    transform:
        scale(1.035);
}


/* =========================================================
   ARROWS
========================================================= */

.journey-arrow {
    position: absolute;
    z-index: 25;

    top: 55%;

    width: 50px;
    height: 50px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid rgba(95,
            140,
            220,
            0.25);

    border-radius: 50%;

    background:
        rgba(4,
            16,
            39,
            0.75);

    backdrop-filter: blur(8px);

    color: #ffffff;

    cursor: pointer;

    transition: all 0.3s ease;
}

.journey-arrow span {
    font-size: 18px;
}

.journey-arrow:hover {
    background: #276bea;

    border-color: #276bea;

    box-shadow:
        0 8px 25px rgba(39,
            107,
            234,
            0.35);
}

.journey-prev {
    left: 2%;
}

.journey-next {
    right: 2%;
}


/* =========================================================
   SCROLL
========================================================= */

.journey-scroll {
    position: absolute;
    z-index: 20;

    left: 50%;
    bottom: 145px;

    transform:
        translateX(-50%);

    display: flex;

    align-items: center;

    gap: 17px;

    font-size: 8px;

    font-weight: 500;

    letter-spacing: 4px;

    color:
        rgba(189,
            207,
            238,
            0.60);
}

.scroll-animation {
    position: relative;

    width: 65px;
    height: 1px;

    overflow: hidden;

    background:
        rgba(255,
            255,
            255,
            0.15);
}

.scroll-animation i {
    position: absolute;

    top: 0;
    left: -25px;

    width: 22px;
    height: 1px;

    background: #3e7eff;

    animation:
        journeyScroll 2s infinite ease-in-out;
}

@keyframes journeyScroll {

    0% {
        left: -25px;
    }

    100% {
        left: 65px;
    }

}


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

.journey-timeline-wrap {
    position: absolute;
    z-index: 50;

    left: 1.5%;
    bottom: 25px;

    width: 97%;
    height: 86px;

    padding: 0 45px;

    display: flex;

    align-items: center;

    border-radius: 50px;

    background:
        linear-gradient(90deg,
            #0a1735,
            #111f42,
            #0a1735);

    border:
        1px solid rgba(100,
            145,
            220,
            0.10);

    box-shadow:
        0 20px 55px rgba(0,
            0,
            0,
            0.30);
}


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

.journey-timeline {
    position: relative;

    width: 100%;
    height: 70px;

    display: flex;

    align-items: center;

    overflow-x: auto;
    overflow-y: hidden;

    scrollbar-width: none;

    cursor: grab;
}

.journey-timeline::-webkit-scrollbar {
    display: none;
}

.journey-timeline.dragging {
    cursor: grabbing;
}


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

.journey-timeline::before {
    content: "";

    position: absolute;

    top: 42px;

    left: 0;
    right: 0;

    height: 1px;

    background:
        rgba(147,
            168,
            207,
            0.30);
}


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

.timeline-item {
    position: relative;

    flex: 0 0 auto;

    min-width: 72px;
    height: 70px;

    display: flex;

    flex-direction: column;

    align-items: center;

    cursor: pointer;

    color: #91a1bf;

    transition:
        color 0.3s ease;
}

.timeline-item span {
    position: relative;
    z-index: 4;

    height: 30px;

    padding-top: 5px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: 14px;

    line-height: 1;

    white-space: nowrap;

    color: inherit;
}


/* =========================================================
   MARKER
========================================================= */

.timeline-item::after {
    content: "";

    position: absolute;

    z-index: 5;

    top: 35px;
    left: 50%;

    width: 2px;
    height: 18px;

    transform:
        translateX(-50%);

    background: #56647f;

    transition:
        all 0.3s ease;
}


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

.timeline-item.active {
    color: #4382ff;
}

.timeline-item.active span {
    color: #4c89ff;
    font-weight: 600;
}

.timeline-item.active::after {
    width: 5px;
    height: 21px;

    border-radius: 3px;

    background: #3378ff;

    box-shadow:
        0 0 15px rgba(51,
            120,
            255,
            0.85);
}


/* =========================================================
   HOVER
========================================================= */

.timeline-item:hover {
    color: #ffffff;
}

.timeline-item:hover::after {
    background: #ffffff;
}


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

.timeline-arrow {
    position: absolute;
    z-index: 20;

    top: 50%;

    width: 32px;
    height: 32px;

    transform:
        translateY(-50%);

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background:
        rgba(28,
            50,
            91,
            0.95);

    color: #9bb8ec;

    font-size: 23px;

    cursor: pointer;

    transition:
        all 0.3s ease;
}

.timeline-arrow:hover {
    background: #2b6be8;
    color: #ffffff;
}

.timeline-left {
    left: 10px;
}

.timeline-right {
    right: 10px;
}


/* =========================================================
   EDGE FADE
========================================================= */

.journey-timeline-wrap::before,
.journey-timeline-wrap::after {
    content: "";

    position: absolute;

    z-index: 10;

    top: 0;

    width: 60px;
    height: 100%;

    pointer-events: none;
}

.journey-timeline-wrap::before {
    left: 0;

    border-radius:
        50px 0 0 50px;

    background:
        linear-gradient(90deg,
            #0a1735,
            transparent);
}

.journey-timeline-wrap::after {
    right: 0;

    border-radius:
        0 50px 50px 0;

    background:
        linear-gradient(270deg,
            #0a1735,
            transparent);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .journey-main {
        grid-template-columns:
            42% 58%;

        padding:
            0 6vw;
    }

    .journey-content {
        padding-right: 40px;
    }

    .journey-image-frame {
        height: 500px;
    }

    .journey-content h2 {
        font-size: 45px;
    }

    .journey-description p {
        font-size: 18px;
    }

}


/* =========================================================
   TABLET PORTRAIT
========================================================= */

@media (max-width: 850px) {

    .scpr-journey {
        height: auto;

        min-height: 1000px;

        padding:
            100px 0 145px;
    }

    .journey-brand {
        top: 30px;
    }

    .journey-header {
        position: relative;

        top: auto;
        left: auto;

        width: 88%;

        margin:
            0 auto 45px;
    }

    .journey-main {
        position: relative;

        top: auto;
        left: auto;

        transform: none;

        padding:
            0 6%;

        display: flex;

        flex-direction: column-reverse;

        gap: 35px;
    }

    .journey-content {
        padding: 0;
    }

    .journey-image-frame {
        height: 440px;
    }

    .journey-scroll {
        position: relative;

        left: auto;
        bottom: auto;

        transform: none;

        width: 88%;

        margin:
            45px auto 0;

        justify-content: center;
    }

    .journey-timeline-wrap {
        position: fixed;

        left: 2%;
        bottom: 12px;

        width: 96%;

        height: 74px;
    }

    .journey-arrow {
        top: 35%;
    }

}


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

@media (max-width: 600px) {

    .scpr-journey {
        padding:
            75px 0 130px;
    }

    .journey-brand {
        left: 20px;
        top: 25px;
    }

    .journey-brand span {
        font-size: 6px;
        letter-spacing: 3px;
    }

    .journey-brand strong {
        font-size: 20px;
    }

    .journey-header {
        margin-top: 20px;
    }

    .journey-header h1 {
        font-size: 34px;
    }

    .journey-header>span:not(.journey-header-line) {
        font-size: 7px;
        letter-spacing: 3px;
    }

    .journey-main {
        padding:
            0 20px;

        gap: 25px;
    }

    .journey-image-frame {
        height: 300px;
    }

    .journey-year {
        font-size: 68px;
    }

    .journey-content h2 {
        margin-top: 25px;

        font-size: 34px;

        line-height: 1.05;
    }

    .journey-description p {
        font-size: 17px;
        line-height: 1.5;
    }

    .event-navigation {
        margin-top: 20px;
    }

    .event-button {
        font-size: 7px;

        padding:
            6px 9px;
    }

    .image-year {
        font-size: 75px;
    }

    .image-label {
        top: 20px;
        right: 20px;
    }

    .image-corner {
        width: 45px;
        height: 45px;
    }

    .journey-scroll {
        font-size: 6px;
        letter-spacing: 3px;
    }

    .journey-timeline-wrap {
        height: 66px;

        padding:
            0 32px;

        border-radius: 40px;
    }

    .journey-timeline {
        height: 56px;
    }

    .timeline-item {
        min-width: 58px;
        height: 56px;
    }

    .timeline-item span {
        font-size: 12px;
    }

    .timeline-item::after {
        top: 30px;
        height: 16px;
    }

    .timeline-arrow {
        display: none;
    }

    .journey-arrow {
        display: none;
    }

}


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

@media (max-width: 400px) {

    .journey-header h1 {
        font-size: 30px;
    }

    .journey-image-frame {
        height: 260px;
    }

    .journey-year {
        font-size: 60px;
    }

    .journey-content h2 {
        font-size: 29px;
    }

    .journey-description p {
        font-size: 16px;
    }

}