/* =========================================================
   DE LA NEVOIE LA SOLUȚIE
   CARUSEL CENTRAL
========================================================= */

.journey {
    --journey-blue: #4192ff;
    --journey-green: #46f484;
    --journey-gold: #e1ff58;

    position: relative;

    width: 100%;

    overflow: hidden;

    background: #101b22;
}


.journey *,
.journey *::before,
.journey *::after {
    box-sizing: border-box;
}


/* =========================================================
   CAROUSEL
========================================================= */

.journey__carousel {
    position: relative;

    width: 100%;

    height:
        clamp(
            680px,
            82vh,
            900px
        );

    min-height: 680px;

    overflow: hidden;

    outline: none;

    background: #12202a;
}


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

.journey__slide {
    position: absolute;

    inset: 0;

    z-index: 1;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 0.9s ease,
        visibility 0.9s ease;
}


.journey__slide.is-active {
    z-index: 2;

    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


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

.journey__media {
    position: absolute;

    inset: -12% -5%;

    display: block;

    overflow: hidden;

    pointer-events: none;

    transform:
        translate3d(
            0,
            var(--journey-parallax, 0px),
            0
        );

    will-change: transform;
}


.journey__media img {
    width: 100%;
    height: 124%;

    display: block;

    object-fit: cover;

    object-position: center center;

    transform: scale(1.04);

    transition:
        transform 9.5s
        cubic-bezier(.2, .65, .25, 1);

    will-change: transform;
}


.journey__slide.is-active
.journey__media img {
    transform: scale(1.065);
}


/* ajustări individuale desktop */

.journey__slide:nth-child(1)
.journey__media img {
    object-position: center center;
}


.journey__slide:nth-child(2)
.journey__media img {
    object-position: center center;
}


.journey__slide:nth-child(3)
.journey__media img {
    object-position: center center;
}


.journey__slide:nth-child(4)
.journey__media img {
    object-position: center center;
}


/* =========================================================
   OVERLAY PENTRU LIZIBILITATE
========================================================= */

.journey__overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;
}


/* NEVOIA */

.journey__slide--blue
.journey__overlay {
    background:
        linear-gradient(
            90deg,
            rgba(7, 20, 31, 0.82) 0%,
            rgba(8, 23, 35, 0.67) 31%,
            rgba(8, 23, 35, 0.25) 57%,
            rgba(8, 23, 35, 0.05) 78%
        ),
        linear-gradient(
            0deg,
            rgba(8, 18, 26, 0.30),
            transparent 45%
        );
}


/* PREGĂTIRE */

.journey__slide--green
.journey__overlay {
    background:
        linear-gradient(
            90deg,
            rgba(7, 23, 19, 0.83) 0%,
            rgba(8, 28, 22, 0.66) 31%,
            rgba(8, 28, 22, 0.23) 58%,
            rgba(8, 28, 22, 0.04) 80%
        );
}


/* SOLUȚIE */

.journey__slide--gold
.journey__overlay {
    background:
        linear-gradient(
            90deg,
            rgba(25, 22, 11, 0.80) 0%,
            rgba(28, 23, 10, 0.61) 32%,
            rgba(28, 23, 10, 0.19) 59%,
            rgba(28, 23, 10, 0.03) 80%
        );
}


/* SINTEZĂ */

.journey__slide--threec
.journey__overlay {
    background:
        linear-gradient(
            90deg,
            rgba(8, 20, 29, 0.82) 0%,
            rgba(9, 25, 27, 0.64) 33%,
            rgba(20, 28, 17, 0.22) 62%,
            transparent 82%
        );
}


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

.journey__inner {
    position: relative;

    z-index: 3;

    width:
        min(
            1220px,
            calc(100% - 80px)
        );

    height: 100%;

    margin: 0 auto;

    display: flex;
    align-items: center;
}


.journey__content {
    width: min(650px, 56%);

    padding:
        80px
        0
        120px;

    color: #fff;
}


/* =========================================================
   TEXT REVEAL
========================================================= */

.journey__content > * {
    opacity: 0;

    transform: translateY(26px);

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


.journey__slide.is-active
.journey__content > * {
    opacity: 1;

    transform: translateY(0);
}


.journey__slide.is-active
.journey__content > *:nth-child(1) {
    transition-delay: 0.16s;
}


.journey__slide.is-active
.journey__content > *:nth-child(2) {
    transition-delay: 0.24s;
}


.journey__slide.is-active
.journey__content > *:nth-child(3) {
    transition-delay: 0.32s;
}


.journey__slide.is-active
.journey__content > *:nth-child(4) {
    transition-delay: 0.40s;
}


.journey__slide.is-active
.journey__content > *:nth-child(5) {
    transition-delay: 0.48s;
}


.journey__slide.is-active
.journey__content > *:nth-child(6) {
    transition-delay: 0.55s;
}


/* =========================================================
   EYEBROW
========================================================= */

.journey__eyebrow {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 25px;

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

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.17em;

    text-transform: uppercase;
}


.journey__number {
    color:
        rgba(
            255,
            255,
            255,
            0.68
        );
}


.journey__eyebrow-line {
    width: 36px;
    height: 2px;

    border-radius: 20px;
}


.journey__slide--blue
.journey__eyebrow-line {
    background: var(--journey-blue);
}


.journey__slide--green
.journey__eyebrow-line {
    background: var(--journey-green);
}


.journey__slide--gold
.journey__eyebrow-line {
    background: var(--journey-gold);
}


.journey__slide--threec
.journey__eyebrow-line {
    background:
        linear-gradient(
            90deg,
            var(--journey-blue),
            var(--journey-green),
            var(--journey-gold)
        );
}


/* =========================================================
   TITLU
========================================================= */

.journey__title {
    margin: 0;

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

    font-size:
        clamp(
            44px,
            4.9vw,
            73px
        );

    font-weight: 620;

    line-height: 1.02;

    letter-spacing: -0.055em;

    text-wrap: balance;

    text-shadow:
        0 5px 28px
        rgba(0, 0, 0, 0.28);
}


.journey__title span {
    display: block;

    font-weight: 790;
}


/* =========================================================
   LEAD
========================================================= */

.journey__lead {
    width: min(585px, 100%);

    margin:
        28px
        0
        0;

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

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

    font-size: 16px;

    line-height: 1.72;

    text-shadow:
        0 3px 16px
        rgba(0, 0, 0, 0.28);
}


/* =========================================================
   QUESTIONS
========================================================= */

.journey__questions {
    display: flex;
    flex-direction: column;

    gap: 8px;

    margin-top: 27px;
}


.journey__questions span {
    width: fit-content;

    position: relative;

    padding-left: 18px;

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

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

    font-size: 13px;

    line-height: 1.5;
}


.journey__questions span::before {
    content: "";

    position: absolute;

    left: 0;
    top: 8px;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        var(--journey-blue);
}


/* =========================================================
   VERBS
========================================================= */

.journey__verbs {
    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: 11px;

    margin-top: 30px;
}


.journey__verbs span {
    font-family: "Manrope", sans-serif;

    font-size:
        clamp(
            18px,
            2vw,
            25px
        );

    font-weight: 700;
}


.journey__verbs i {
    color:
        var(--journey-green);

    font-size: 21px;
}


/* =========================================================
   RESULT
========================================================= */

.journey__result-intro {
    margin:
        24px
        0
        0;

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

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

    font-size: 13px;
}


.journey__pillars {
    display: flex;
    flex-wrap: wrap;

    gap: 9px;

    margin-top: 15px;
}


.journey__pillars span {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    padding:
        9px
        12px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.22
        );

    border-radius: 999px;

    background:
        rgba(
            13,
            20,
            23,
            0.18
        );

    backdrop-filter: blur(7px);

    -webkit-backdrop-filter: blur(7px);

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

    font-size: 11px;

    font-weight: 650;
}


.journey__pillars i {
    color: var(--journey-gold);

    font-size: 15px;
}


/* =========================================================
   CLOSING
========================================================= */

.journey__closing,
.journey__final-line {
    width: min(590px, 100%);

    margin:
        31px
        0
        0;

    padding:
        4px
        0
        4px
        17px;

    border-left:
        2px solid
        rgba(
            255,
            255,
            255,
            0.42
        );

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

    font-family: "Lora", serif;

    font-size: 14px;

    line-height: 1.65;
}


.journey__closing strong,
.journey__final-line strong {
    color: #fff;

    font-weight: 600;
}


/* =========================================================
   ROUTE — SLIDE 4
========================================================= */

.journey__route {
    width: min(640px, 100%);

    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr
        auto
        1fr;

    align-items: center;

    gap: 11px;

    margin-top: 32px;
}


.journey__route > div {
    min-width: 0;
}


.journey__route small {
    display: block;

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

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

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 0.12em;
}


.journey__route strong {
    display: block;

    margin-top: 5px;

    color: #fff;

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

    font-size: 17px;

    font-weight: 750;
}


.journey__route span {
    display: block;

    margin-top: 5px;

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

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

    font-size: 10px;

    line-height: 1.45;
}


.journey__route > i {
    color:
        rgba(
            255,
            255,
            255,
            0.53
        );

    font-size: 21px;
}


/* =========================================================
   CTA
========================================================= */

.journey__cta {
    display: flex;
    flex-wrap: wrap;

    align-items: center;

    gap: 17px;

    margin-top: 31px;
}


.journey__button {
    min-height: 49px;

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

    gap: 9px;

    padding:
        12px
        18px;

    border-radius: 10px;

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

    font-size: 12px;

    font-weight: 700;

    text-decoration: none;

    transition:
        transform 0.25s ease,
        background-color 0.25s ease,
        border-color 0.25s ease;
}


.journey__button--primary {
    background: #287be6;

    color: #fff;

    box-shadow:
        0 12px 30px
        rgba(19, 80, 158, 0.27);
}


.journey__button--primary:hover {
    transform: translateY(-2px);

    color: #fff;
}


.journey__button--ghost {
    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.31
        );

    color: #fff;

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


.journey__button--ghost:hover {
    border-color:
        rgba(
            255,
            255,
            255,
            0.60
        );

    color: #fff;
}


/* =========================================================
   CONTROLS
========================================================= */

.journey__controls {
    position: absolute;

    z-index: 10;

    left: 50%;
    bottom: 40px;

    transform: translateX(-50%);

    width:
        min(
            1220px,
            calc(100% - 80px)
        );

    display: flex;
    align-items: center;

    gap: 15px;

    color: #fff;
}


.journey__arrow {
    width: 44px;
    height: 44px;

    flex: 0 0 44px;

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

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.34
        );

    border-radius: 50%;

    background:
        rgba(
            8,
            17,
            23,
            0.18
        );

    backdrop-filter: blur(7px);

    -webkit-backdrop-filter: blur(7px);

    color: #fff;

    font-size: 22px;

    cursor: pointer;

    transition:
        transform 0.22s ease,
        background-color 0.22s ease;
}


.journey__arrow:hover {
    transform: scale(1.07);

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


/* STATUS */

.journey__status {
    display: flex;
    align-items: baseline;

    gap: 4px;

    min-width: 48px;

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

    font-size: 10px;

    letter-spacing: 0.07em;
}


.journey__current {
    font-size: 14px;

    font-weight: 800;
}


.journey__separator {
    opacity: 0.45;
}


/* DOTS */

.journey__pagination {
    flex: 1;

    display: flex;
    align-items: center;

    gap: 8px;
}


.journey__dot {
    position: relative;

    width: 54px;
    height: 17px;

    padding: 0;

    border: 0;

    background: transparent;

    cursor: pointer;
}


.journey__dot span {
    position: absolute;

    left: 0;
    top: 50%;

    width: 100%;
    height: 2px;

    transform: translateY(-50%);

    border-radius: 100px;

    background:
        rgba(
            255,
            255,
            255,
            0.26
        );

    overflow: hidden;
}


.journey__dot.is-active span {
    background:
        rgba(
            255,
            255,
            255,
            0.92
        );
}


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

.journey__progress {
    position: absolute;

    z-index: 12;

    left: 0;
    right: 0;
    bottom: 0;

    height: 3px;

    background:
        rgba(
            255,
            255,
            255,
            0.12
        );

    pointer-events: none;
}


.journey__progress span {
    display: block;

    width: 100%;
    height: 100%;

    transform:
        scaleX(
            var(
                --journey-progress,
                0
            )
        );

    transform-origin: left center;

    background:
        linear-gradient(
            90deg,
            var(--journey-blue),
            var(--journey-green),
            var(--journey-gold)
        );

    will-change: transform;
}


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

.journey__mobile-hint {
    display: none;
}


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

@media (max-width: 991.98px) {

    .journey__carousel {
        height:
            min(
                900px,
                92svh
            );

        min-height: 760px;
    }


    .journey__media {
        inset: 0% 0%;
    }


    .journey__media img {
        height: 100%;

        object-position: center center;

        transform: scale(1.14);
    }


    .journey__slide.is-active
    .journey__media img {
        transform: scale(1.175);
    }


    /*
       Pe portret:
       text sus, persoana mai jos.
    */

    .journey__overlay,
    .journey__slide--blue .journey__overlay,
    .journey__slide--green .journey__overlay,
    .journey__slide--gold .journey__overlay,
    .journey__slide--threec .journey__overlay {
        background:
            linear-gradient(
                180deg,
                rgba(7, 17, 24, 0.86) 0%,
                rgba(7, 17, 24, 0.72) 29%,
                rgba(7, 17, 24, 0.22) 55%,
                rgba(7, 17, 24, 0.20) 75%,
                rgba(7, 17, 24, 0.65) 100%
            );
    }


    .journey__inner {
        width:
            min(
                720px,
                calc(100% - 46px)
            );

        align-items: flex-start;
    }


    .journey__content {
        width: 100%;

        padding:
            72px
            0
            155px;
    }


    .journey__title {
        width: min(650px, 100%);

        font-size:
            clamp(
                40px,
                7vw,
                60px
            );
    }


    .journey__lead {
        width: min(600px, 100%);
    }


    .journey__controls {
        width:
            calc(100% - 46px);

        bottom: 40px;
    }

}


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

@media (max-width: 575.98px) {

    .journey__carousel {
        min-height: 760px;

        height:
            max(
                790px,
                92svh
            );
    }


    .journey__media {
        inset:  -9% -10%;
    }


    .journey__media img {
        height: 118%;

        object-position: center center;
    }


    .journey__inner {
        width:
            calc(
                100% - 34px
            );
    }


    .journey__content {
        padding:
            55px
            0
            150px;
    }


    .journey__eyebrow {
        margin-bottom: 18px;

        gap: 9px;

        font-size: 9px;
    }


    .journey__eyebrow-line {
        width: 24px;
    }


    .journey__title {
        font-size:
            clamp(
                33px,
                10.5vw,
                44px
            );

        line-height: 1.04;

        letter-spacing: -0.045em;
    }


    .journey__lead {
        margin-top: 20px;

        font-size: 13px;

        line-height: 1.64;
    }


    .journey__questions {
        margin-top: 20px;
    }


    .journey__questions span {
        font-size: 11px;
    }


    .journey__verbs {
        gap: 7px;

        margin-top: 21px;
    }


    .journey__verbs span {
        font-size: 17px;
    }


    .journey__verbs i {
        font-size: 16px;
    }


    .journey__result-intro {
        margin-top: 19px;

        font-size: 11px;
    }


    .journey__pillars {
        flex-direction: column;

        align-items: flex-start;

        gap: 6px;

        margin-top: 12px;
    }


    .journey__pillars span {
        font-size: 10px;

        padding:
            7px
            10px;
    }


    .journey__closing,
    .journey__final-line {
        margin-top: 22px;

        font-size: 12px;

        line-height: 1.55;
    }


    /* Route verticală */

    .journey__route {
        grid-template-columns:
            1fr;

        gap: 8px;

        margin-top: 22px;
    }


    .journey__route > i {
        transform: rotate(90deg);

        margin-left: 8px;

        font-size: 16px;
    }


    .journey__route strong {
        font-size: 14px;
    }


    .journey__route span {
        font-size: 9px;
    }


    /* CTA */

    .journey__cta {
        flex-direction: column;

        align-items: stretch;

        gap: 8px;

        margin-top: 22px;
    }


    .journey__button {
        width: 100%;

        min-height: 45px;

        font-size: 10px;
    }


    /* Controls */

    .journey__controls {
        width:
            calc(
                100% - 34px
            );

        bottom: 47px;

        gap: 8px;
    }


    .journey__arrow {
        width: 38px;
        height: 38px;

        flex-basis: 38px;

        font-size: 19px;
    }


    .journey__status {
        display: none;
    }


    .journey__pagination {
        justify-content: center;

        gap: 5px;
    }


    .journey__dot {
        width: 35px;
    }


    .journey__mobile-hint {
        position: absolute;

        z-index: 10;

        left: 50%;
        bottom: 19px;

        transform:
            translateX(-50%);

        width: 100%;

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

        gap: 6px;

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

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

        font-size: 8px;

        letter-spacing: 0.04em;
    }

}


/* =========================================================
   TELEFOANE MICI
========================================================= */

@media (max-width: 360px) {

    .journey__carousel {
        min-height: 770px;

        height:
            max(
                790px,
                94svh
            );
    }


    .journey__inner {
        width:
            calc(
                100% - 28px
            );
    }


    .journey__content {
        padding-top: 48px;
    }


    .journey__title {
        font-size:
            clamp(
                30px,
                10vw,
                38px
            );
    }


    .journey__controls {
        width:
            calc(
                100% - 28px
            );
    }

}

/* =========================================================
   POZIȚIONAREA IMAGINILOR ÎN PARALLAX
   Arătăm mai mult din partea de jos a fotografiei
========================================================= */
/* =========================================================
   PARALLAX - ANCORARE ÎN PARTEA DE JOS
========================================================= */

.journey__media img {
    position: absolute;
    left: 0;
    bottom: 0;

    width: 100%;

    object-fit: cover;
    object-position: center bottom;

    transform-origin: center bottom;
}


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

@media (min-width: 992px) {

    .journey__media {
        inset: -1% 0%;
    }

    .journey__media img {
        height: 130%;

        transform: scale(1.02);
    }

    .journey__slide.is-active
    .journey__media img {
        transform: scale(1.045);
    }

}


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

@media (min-width: 576px) and (max-width: 991.98px) {

    .journey__media {
        inset: 0% 0%;
    }

    .journey__media img {
        height: 172%;

        transform: scale(1.025);
    }

    .journey__slide.is-active
    .journey__media img {
        transform: scale(1.05);
    }

}


/* =========================================================
   TELEFON
========================================================= */

@media (max-width: 575.98px) {

    .journey__media {
        inset: 0% 0%;
    }

    .journey__media img {
        height: 140%;

        transform: scale(1.02);
    }

    .journey__slide.is-active
    .journey__media img {
        transform: scale(1.045);
    }

}


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

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

    .journey__media,
    .journey__media img,
    .journey__slide,
    .journey__content > * {
        transition: none !important;

        transform: none !important;
    }


    .journey__content > * {
        opacity: 1 !important;
    }

}