/* =========================================================
   AKMAL PORTFOLIO — AMBITION
   ========================================================= */


/* ---------------------------------------------------------
   SECTION
   --------------------------------------------------------- */

.ambition-section {

    position: relative;

    min-height: 100vh;

    padding:
        150px 8vw;

    background: transparent;

    overflow: hidden;

}


/* ---------------------------------------------------------
   TOP
   --------------------------------------------------------- */

.ambition-top {

    display: grid;

    grid-template-columns:
        0.7fr 1.3fr;

    gap: 8vw;

    align-items: start;

}


.ambition-label {

    display: flex;

    align-items: center;

    gap: 20px;

}


.ambition-intro {

    max-width: 430px;

}


.ambition-intro p {

    color:
        var(--text-muted);

    font-size:
        14px;

    line-height:
        1.8;

}


/* ---------------------------------------------------------
   MAIN
   --------------------------------------------------------- */

.ambition-main {

    display: grid;

    grid-template-columns:
        1.2fr 0.8fr;

    gap: 8vw;

    align-items: end;

    margin-top:
        100px;

}


/* ---------------------------------------------------------
   TITLE
   --------------------------------------------------------- */

.ambition-title {

    margin: 0;

    font-size:
        clamp(
            65px,
            10vw,
            150px
        );

    line-height:
        0.82;

    letter-spacing:
        -7px;

    text-transform:
        uppercase;

}


.ambition-title span {

    display: block;

    color:
        transparent;

    -webkit-text-stroke:
        1px var(--gold);

}


/* ---------------------------------------------------------
   STATEMENT
   --------------------------------------------------------- */

.ambition-statement {

    position: relative;

    padding:
        30px 0 30px 35px;

    border-left:
        1px solid
        var(--gold);

}


.quote-mark {

    position: absolute;

    top:
        -35px;

    left:
        -5px;

    color:
        var(--gold);

    font-family:
        Georgia,
        serif;

    font-size:
        80px;

    line-height:
        1;

}


.ambition-statement p {

    margin: 0;

    max-width:
        380px;

    color:
        var(--white);

    font-size:
        clamp(
            20px,
            2vw,
            30px
        );

    line-height:
        1.35;

}


/* ---------------------------------------------------------
   PATH
   --------------------------------------------------------- */

.ambition-path {

    position: relative;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    margin-top:
        130px;

    border-top:
        1px solid
        rgba(
            212,
            175,
            55,
            0.25
        );

}


/* ---------------------------------------------------------
   STEP
   --------------------------------------------------------- */

.ambition-step {

    position: relative;

    min-height:
        240px;

    padding:
        30px 30px 30px 0;

    border-right:
        1px solid
        rgba(
            255,
            255,
            255,
            0.08
        );

    transition:
        background 0.4s ease,
        padding 0.4s ease;

}


.ambition-step:not(:first-child) {

    padding-left:
        30px;

}


.ambition-step:last-child {

    border-right:
        none;

}


/* ---------------------------------------------------------
   STEP NUMBER
   --------------------------------------------------------- */

.step-number {

    display: block;

    margin-bottom:
        50px;

    color:
        var(--gold);

    font-family:
        "Courier New",
        monospace;

    font-size:
        10px;

    letter-spacing:
        2px;

}


/* ---------------------------------------------------------
   STEP TITLE
   --------------------------------------------------------- */

.ambition-step h3 {

    margin: 0 0 15px;

    font-size:
        25px;

    letter-spacing:
        -1px;

    transition:
        color 0.3s ease;

}


.ambition-step p {

    max-width:
        200px;

    margin: 0;

    color:
        var(--text-muted);

    font-size:
        11px;

    line-height:
        1.7;

}


/* ---------------------------------------------------------
   HOVER
   --------------------------------------------------------- */

.ambition-step:hover {

    background:
        rgba(
            212,
            175,
            55,
            0.035
        );

    padding-top:
        40px;

}


.ambition-step:hover h3 {

    color:
        var(--gold);

}


/* ---------------------------------------------------------
   GOLD MARKER
   --------------------------------------------------------- */

.ambition-step::before {

    content: "";

    position: absolute;

    top:
        -4px;

    left:
        0;

    width:
        7px;

    height:
        7px;

    background:
        var(--gold);

    border-radius:
        50%;

    box-shadow:
        0 0 0 5px
        var(--navy);

}


.ambition-step:not(:first-child)::before {

    left:
        30px;

}


/* ---------------------------------------------------------
   REVEAL ANIMATION
   --------------------------------------------------------- */

.ambition-top,
.ambition-main,
.ambition-path {

    opacity: 0;

    transform:
        translateY(35px);

    transition:
        opacity 0.8s ease,
        transform 0.8s
        cubic-bezier(
            0.16,
            1,
            0.3,
            1
        );

}


.ambition-section.visible
.ambition-top {

    opacity: 1;

    transform:
        translateY(0);

}


.ambition-section.visible
.ambition-main {

    opacity: 1;

    transform:
        translateY(0);

    transition-delay:
        0.15s;

}


.ambition-section.visible
.ambition-path {

    opacity: 1;

    transform:
        translateY(0);

    transition-delay:
        0.3s;

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 800px) {

    .ambition-section {

        padding:
            110px 7vw;

    }


    .ambition-top {

        grid-template-columns:
            1fr;

        gap:
            35px;

    }


    .ambition-main {

        grid-template-columns:
            1fr;

        gap:
            60px;

        margin-top:
            80px;

    }


    .ambition-title {

        font-size:
            19vw;

        letter-spacing:
            -4px;

    }


    .ambition-statement {

        padding-left:
            25px;

    }


    .ambition-path {

        grid-template-columns:
            1fr 1fr;

        margin-top:
            90px;

    }


    .ambition-step {

        min-height:
            220px;

        border-bottom:
            1px solid
            rgba(
                255,
                255,
                255,
                0.08
            );

    }


    .ambition-step:nth-child(2) {

        border-right:
            none;

    }


    .ambition-step:nth-child(3) {

        padding-left:
            0;

    }


    .ambition-step:nth-child(3)::before {

        left:
            0;

    }

}


@media (max-width: 500px) {

    .ambition-path {

        grid-template-columns:
            1fr;

    }


    .ambition-step,
    .ambition-step:not(:first-child) {

        padding-left:
            0;

        border-right:
            none;

    }


    .ambition-step:not(:first-child)::before {

        left:
            0;

    }


    .ambition-step {

        min-height:
            180px;

    }


    .step-number {

        margin-bottom:
            30px;

    }

}