/* ============================================================
   SHAPE SHIFT ENERGIES
   OUR PROCESS SECTION
   ============================================================ */


/* ============================================================
   01. SECTION VARIABLES
   ============================================================ */

.shapeshift-process {
    --process-light: #f6f6f3;
    --process-dark: #111312;
    --process-text: #111312;
    --process-white: #ffffff;
    --process-accent: #fe5b2c;

    position: relative;

    width: 100%;
    margin: 0;
    padding: 0;

    overflow: visible;
}


/* ============================================================
   02. SHARED TYPOGRAPHY
   ============================================================ */

.shapeshift-process-eyebrow {
    margin: 0;

    font-family: var(--font-primary);
    font-size: 10px;
    font-weight: 600;
    line-height: 1;

    letter-spacing: 0.18em;
    text-transform: uppercase;
}


.shapeshift-process-heading,
.shapeshift-process-title,
.shapeshift-process-mobile-title {
    margin: 0;

    font-family: var(--font-secondary);
    font-weight: 500;

    letter-spacing: -0.035em;
}


/* Keeps "End-of-Life" intact as one unbreakable phrase so it
   never splits awkwardly across lines. */

.shapeshift-process-nowrap {
    white-space: nowrap;
}


/* ============================================================
   02B. PROCESS STEP ICON (shared by desktop + mobile)
   ============================================================ */

.shapeshift-process-icon {
    display: block;

    width: 80px;
    height: 80px;

    margin: 0 0 16px;

    object-fit: contain;
}


/* ============================================================
   03. DESKTOP PROCESS IMAGE SYSTEM
   ============================================================ */

.shapeshift-process-images {
    position: relative;

    width: 100%;

    aspect-ratio: 1080 / 589;

    overflow: visible;
}


.shapeshift-process-image {
    position: absolute;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    max-width: 100%;

    object-fit: contain;
    object-position: center;

    opacity: 0;

    pointer-events: none;
    user-select: none;

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


/* ============================================================
   ACTIVE PROCESS IMAGE
   ============================================================ */

.shapeshift-process-images[data-active-step="0"]
.shapeshift-process-image[data-step="0"],

.shapeshift-process-images[data-active-step="1"]
.shapeshift-process-image[data-step="1"],

.shapeshift-process-images[data-active-step="2"]
.shapeshift-process-image[data-step="2"],

.shapeshift-process-images[data-active-step="3"]
.shapeshift-process-image[data-step="3"],

.shapeshift-process-images[data-active-step="4"]
.shapeshift-process-image[data-step="4"] {
    opacity: 1;
}


/* ============================================================
   04. MOBILE BASE
   ============================================================ */

.shapeshift-process-desktop {
    display: none;
}


.shapeshift-process-mobile {
    display: block;

    width: 100%;

    background: var(--process-light);
    color: var(--process-text);
}


/* ============================================================
   05. MOBILE INTRO
   ============================================================ */

.shapeshift-process-mobile-intro {
    width: 100%;

    padding:
        52px
        20px
        68px;
}


/* Eyebrow */

.shapeshift-process-mobile
.shapeshift-process-eyebrow {
    margin: 0 0 18px;

    color: rgba(17, 19, 18, 0.48);

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

    letter-spacing: 0.20em;
}


/* Main Process Heading */

.shapeshift-process-mobile-intro
.shapeshift-process-heading {
    width: 100%;
    max-width: 360px;

    margin: 0;

    color: var(--process-text);

    font-size: clamp(32px, 8.8vw, 42px);
    line-height: 1.02;

    letter-spacing: -0.035em;

    text-wrap: balance;
}


/* ============================================================
   06. MOBILE PROCESS STEP
   ============================================================ */

.shapeshift-process-mobile-step {
    position: relative;

    width: 100%;

    padding:
        0
        20px
        90px;

    /* Hardware acceleration & initial inactive styling */
    opacity: 0.40;
    filter: blur(2.5px);
    transform: translateY(8px) scale(0.985);
    backface-visibility: hidden;
    will-change: opacity, filter, transform;

    /* Smooth cinematic transitions */
    transition: 
        opacity 450ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 450ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 450ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Active Mobile Step States */
.shapeshift-process-mobile-step.is-active {
    opacity: 1;
    filter: blur(0px);
    transform: translateY(0) scale(1);
}


/* Steps after the first */

.shapeshift-process-mobile-step +
.shapeshift-process-mobile-step {
    padding-top: 60px;

    border-top: 1px solid rgba(17, 19, 18, 0.08);
}


/* Small accent line */

.shapeshift-process-mobile-step +
.shapeshift-process-mobile-step::before {
    display: block;

    width: 30px;
    height: 2px;

    margin-bottom: 28px;

    background: var(--process-accent);
}


/* ============================================================
   07. MOBILE STEP INDEX
   ============================================================ */

.shapeshift-process-mobile-index {
    display: flex;
    align-items: center;

    gap: 5px;

    margin: 0 0 13px;

    color: var(--process-accent);

    font-family: var(--font-primary);
    font-size: 10px;
    font-weight: 600;
    line-height: 1;

    letter-spacing: 0.13em;
    text-transform: uppercase;
}


.shapeshift-process-mobile-index span {
    color: rgba(17, 19, 18, 0.34);
}


/* ============================================================
   07B. MOBILE STEP ICON
   ============================================================ */

.shapeshift-process-mobile-step
.shapeshift-process-icon {
    width: 30px;
    height: 30px;

    margin: 0 0 14px;
}


/* ============================================================
   08. MOBILE STEP TITLE
   ============================================================ */

.shapeshift-process-mobile-title {
    width: 100%;
    max-width: 370px;

    color: var(--process-text);

    font-size: clamp(18px, 4.4vw, 34px);
    line-height: 1.04;

    letter-spacing: -0.03em;

    text-wrap: balance;
}


/* ============================================================
   09. MOBILE PROCESS VISUAL
   ============================================================ */

.shapeshift-process-mobile-visual {
    position: relative;

    width: 100%;

    margin-top: 30px;
    margin-bottom: 20px;

    overflow: visible;
}


.shapeshift-process-mobile-image {
    position: relative;

    display: block;

    width: 100%;
    height: auto;

    max-width: 100%;

    margin: 0 auto;

    object-fit: contain;
    object-position: center;

    pointer-events: none;
    user-select: none;
}


/* ============================================================
   10. MOBILE DESCRIPTION
   ============================================================ */

.shapeshift-process-mobile-description {
    width: 100%;
    max-width: 365px;

    margin: 30px 0 0;

    color: rgb(17, 19, 18);

    font-family: var(--font-primary);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.75;

    letter-spacing: 0;
}


/* ============================================================
   11. SMALL MOBILE
   ============================================================ */

@media (max-width: 390px) {

    .shapeshift-process-mobile-intro {
        padding:
            48px
            18px
            64px;
    }


    .shapeshift-process-mobile-step {
        padding-left: 18px;
        padding-right: 18px;
    }


    .shapeshift-process-mobile-intro
    .shapeshift-process-heading {
        max-width: 320px;

        font-size: clamp(33px, 9.4vw, 38px);
    }


    .shapeshift-process-mobile-title {
        font-size: clamp(27px, 7.5vw, 32px);
    }


    .shapeshift-process-mobile-description {
        font-size: 14px;
    }

}


/* ============================================================
   12. VERY SMALL MOBILE
   ============================================================ */

@media (max-width: 360px) {

    .shapeshift-process-mobile-intro,
    .shapeshift-process-mobile-step {
        padding-left: 16px;
        padding-right: 16px;
    }


    .shapeshift-process-mobile-intro
    .shapeshift-process-heading {
        font-size: 33px;
    }


    .shapeshift-process-mobile-title {
        font-size: 28px;
    }


    .shapeshift-process-mobile-description {
        font-size: 13.5px;
        line-height: 1.72;
    }

}


/* ============================================================
   13. TABLET
   ============================================================ */

@media (min-width: 600px) and (max-width: 991px) {

    .shapeshift-process-mobile-intro {
        padding:
            70px
            clamp(32px, 6vw, 56px)
            85px;
    }


    .shapeshift-process-mobile-step {
        padding-left: clamp(32px, 6vw, 56px);
        padding-right: clamp(32px, 6vw, 56px);
        padding-bottom: 110px;
    }


    .shapeshift-process-mobile-intro
    .shapeshift-process-heading {
        max-width: 580px;

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


    .shapeshift-process-mobile-title {
        max-width: 520px;

        font-size: clamp(36px, 5vw, 46px);
    }


    .shapeshift-process-mobile-visual {
        max-width: 680px;

        margin-top: 38px;
        margin-left: auto;
        margin-right: auto;
    }


    .shapeshift-process-mobile-description {
        max-width: 570px;

        margin-top: 38px;

        font-size: 16px;
        line-height: 1.7;
    }

}


/* ============================================================
   14. DESKTOP
   ============================================================ */

@media (min-width: 992px) {

    /* ========================================================
       DISPLAY
       ======================================================== */

    .shapeshift-process-mobile {
        display: none;
    }


    .shapeshift-process-desktop {
        display: block;
    }


    /* ========================================================
       MAIN SPLIT LAYOUT
       ======================================================== */

    .shapeshift-process-layout {
        display: grid;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);

        width: 100%;
    }


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

    .shapeshift-process-visual {
        position: relative;

        min-width: 0;

        background: var(--process-light);
    }


    .shapeshift-process-visual-inner {
        position: sticky;

        top: 0;

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

        width: 100%;
        height: 100vh;

        padding: 28px 18px;

        overflow: visible;
    }


    /* ========================================================
       DESKTOP LEFT PANEL STEP COUNTER
       ======================================================== */

    .shapeshift-process-counter {
        position: absolute;
        top: calc(var(--shapeshift-header-height, 100px) + 16px);
        right: clamp(20px, 3vw, 40px);
        z-index: 2;

        display: flex;
        align-items: baseline;

        gap: 6px;
        margin: 0;

        font-family: var(--font-primary);
        font-size: 13px;
        font-weight: 600;
        line-height: 1;

        letter-spacing: 0.06em;

        pointer-events: none;
        user-select: none;
    }


    .shapeshift-process-counter-current {
        color: var(--process-text);
    }


    .shapeshift-process-counter-sep,
    .shapeshift-process-counter-total {
        color: rgba(17, 19, 18, 0.35);
    }


    /* ========================================================
       DESKTOP PROCESS IMAGE
       ======================================================== */

    .shapeshift-process-images {
        width: min(95%, 820px);
        max-width: none;

        aspect-ratio: 1080 / 589;

        overflow: visible;
    }


    .shapeshift-process-image {
        width: 100%;
        height: 100%;

        max-width: 100%;

        object-fit: contain;
        object-position: center;
    }


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

    .shapeshift-process-content {
        position: relative;

        min-width: 0;

        background: var(--process-dark);
        color: var(--process-white);
    }


    /* ========================================================
       DESKTOP INTRO
       ======================================================== */

    .shapeshift-process-intro {
        display: flex;
        flex-direction: column;
        justify-content: center;

        min-height: 85vh;

        padding:
            clamp(60px, 8vh, 90px)
            clamp(48px, 5vw, 90px);
    }


    .shapeshift-process-intro-body {
        width: 100%;
        max-width: 590px;
    }


    .shapeshift-process-content
    .shapeshift-process-eyebrow {
        margin: 0 0 24px;

        color: var(--process-accent);

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

        letter-spacing: 0.19em;
    }


    .shapeshift-process-content
    .shapeshift-process-heading {
        width: 100%;
        max-width: 17ch;

        margin: 0;

        color: var(--process-white);

        font-size: clamp(48px, 4vw, 72px);
        line-height: 0.97;

        letter-spacing: -0.045em;

        text-wrap: balance;
    }


    /* ========================================================
       DESKTOP PROCESS STEPS
       ======================================================== */

    .shapeshift-process-step {
        display: flex;
        flex-direction: column;
        justify-content: center;

        width: 100%;

        min-height: 72vh;

        padding:
            clamp(52px, 6vh, 76px)
            clamp(48px, 5vw, 90px);

        opacity: 0.3;
        filter: blur(0.6px);

        transition:
            opacity 0.4s ease,
            filter 0.4s ease;
    }


    .shapeshift-process-step.is-active {
        opacity: 1;
        filter: none;
    }


    /* ========================================================
       DESKTOP STEP TITLE
       ======================================================== */

    .shapeshift-process-content
    .shapeshift-process-title {
        width: 100%;
        max-width: 11ch;

        margin: 0 0 28px;

        color: var(--process-white);

        font-size: clamp(44px, 3.6vw, 64px);
        line-height: 0.98;

        letter-spacing: -0.04em;

        text-wrap: balance;
    }


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

    .shapeshift-process-content
    .shapeshift-process-description {
        width: 100%;
        max-width: 500px;

        margin: 0;

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

        font-family: var(--font-primary);
        font-size: clamp(16px, 1.1vw, 18px);
        font-weight: 400;
        line-height: 1.68;

        letter-spacing: 0;
    }

}


/* ============================================================
   15. MEDIUM DESKTOP
   ============================================================ */

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

    .shapeshift-process-images {
        width: 96%;
    }


    .shapeshift-process-intro,
    .shapeshift-process-step {
        padding-left: 46px;
        padding-right: 46px;
    }


    .shapeshift-process-content
    .shapeshift-process-heading {
        font-size: clamp(46px, 5vw, 60px);
    }


    .shapeshift-process-content
    .shapeshift-process-title {
        font-size: clamp(40px, 4.5vw, 54px);
    }

}


/* ============================================================
   16. LARGE DESKTOP
   ============================================================ */

@media (min-width: 1200px) {

    .shapeshift-process-visual-inner {
        padding-left: 20px;
        padding-right: 20px;
    }


    .shapeshift-process-images {
        width: min(95%, 860px);
    }


    .shapeshift-process-intro-body {
        max-width: 610px;
    }


    .shapeshift-process-content
    .shapeshift-process-description {
        max-width: 510px;
    }

}


/* ============================================================
   17. EXTRA LARGE DESKTOP
   ============================================================ */

@media (min-width: 1400px) {

    .shapeshift-process-images {
        width: min(95%, 900px);
    }


    .shapeshift-process-intro,
    .shapeshift-process-step {
        padding-left: clamp(70px, 5vw, 96px);
        padding-right: clamp(70px, 5vw, 96px);
    }


    .shapeshift-process-content
    .shapeshift-process-heading {
        font-size: clamp(58px, 4vw, 76px);
    }


    .shapeshift-process-content
    .shapeshift-process-title {
        font-size: clamp(50px, 3.7vw, 66px);
    }

}


/* ============================================================
   18. VERY LARGE DESKTOP
   ============================================================ */

@media (min-width: 1700px) {

    .shapeshift-process-images {
        width: min(94%, 940px);
    }


    .shapeshift-process-intro,
    .shapeshift-process-step {
        padding-left: 96px;
        padding-right: 96px;
    }


    .shapeshift-process-intro-body {
        max-width: 740px;
    }


    .shapeshift-process-content
    .shapeshift-process-description {
        max-width: 520px;

        font-size: 18px;
    }

}


/* ============================================================
   19. SHORT DESKTOP SCREENS
   ============================================================ */

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

    .shapeshift-process-intro {
        min-height: 88vh;
    }


    .shapeshift-process-step {
        min-height: 76vh;

        padding-top: 48px;
        padding-bottom: 48px;
    }


    .shapeshift-process-content
    .shapeshift-process-heading {
        font-size: clamp(44px, 4vw, 62px);
    }


    .shapeshift-process-content
    .shapeshift-process-title {
        font-size: clamp(40px, 3.6vw, 56px);
    }


    .shapeshift-process-content
    .shapeshift-process-description {
        font-size: 16px;
        line-height: 1.62;
    }

}


/* ============================================================
   20. REDUCED MOTION / ACCESSIBILITY
   ============================================================ */

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

    .shapeshift-process-image,
    .shapeshift-process-step,
    .shapeshift-process-mobile-step {
        transition: none;
    }


    .shapeshift-process-step,
    .shapeshift-process-mobile-step {
        filter: none;
    }

}