/*
|--------------------------------------------------------------------------
| Five Pillars
|--------------------------------------------------------------------------
*/

.pillars {
    position: relative;
    isolation: isolate;

    min-height: 500vh;

    background:
        radial-gradient(
            circle at 50% 48%,
            rgba(255, 101, 0, 0.055),
            transparent 42%
        ),
        #050505;
}

.pillars::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: -2;

    opacity: 0.16;

    background-image:
        radial-gradient(
            rgba(255, 255, 255, 0.08) 0.55px,
            transparent 0.55px
        );

    background-size: 5px 5px;
}

.pillars__stage {
    position: sticky;
    top: 0;

    display: grid;
    place-items: center;

    min-height: 100svh;

    padding:
        7rem
        clamp(1.25rem, 5vw, 5rem)
        5rem;

    overflow: hidden;
}

.pillars__introduction {
    position: absolute;
    top: clamp(6.5rem, 10vh, 8.5rem);
    left: 50%;

    width: min(48rem, calc(100% - 2.5rem));

    text-align: center;

    transform: translateX(-50%);
}

.pillars__introduction h2 {
    margin: 0;

    color: var(--color-tempered-steel);

    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 500;
    line-height: 1.1;
    text-wrap: balance;
}

.pillars__sequence {
    position: relative;

    width: min(72rem, 100%);
    min-height: 31rem;

    margin: 9rem 0 0;
    padding: 0;

    list-style: none;
}

.pillars__pillar {
    position: absolute;
    inset: 0;

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

    text-align: center;

    opacity: 0;

    transform:
        translateY(3rem)
        scale(0.975);

    filter: blur(0.35rem);

    transition:
        opacity 900ms ease,
        transform 1.15s
        cubic-bezier(0.22, 1, 0.36, 1),
        filter 900ms ease;

    pointer-events: none;
}

.pillars__pillar.is-active {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);

    filter: blur(0);

    pointer-events: auto;
}

.pillars__pillar.is-cooling {
    opacity: 0;

    transform:
        translateY(-2.5rem)
        scale(0.985);

    filter:
        blur(0.3rem)
        brightness(0.55);
}

.pillars__number {
    margin: 0 0 1.35rem;

    color: var(--color-molten);

    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.pillars__pillar h3 {
    margin: 0;

    color: var(--color-forged-ivory);

    font-family: var(--font-display);
    font-size: clamp(4.5rem, 12vw, 10rem);
    font-weight: 500;
    line-height: 0.88;
    letter-spacing: -0.045em;

    text-shadow:
        0 0 3rem
        rgba(255, 101, 0, 0.09);
}

.pillars__forge-line {
    display: block;

    width: 0;
    height: 2px;

    margin: 2rem 0;

    background:
        linear-gradient(
            to right,
            transparent,
            #ff7a00 18%,
            #ffd08a 50%,
            #ff7a00 82%,
            transparent
        );

    box-shadow:
        0 0 1rem
        rgba(255, 101, 0, 0.85);

    transition:
        width 1.1s
        cubic-bezier(0.22, 1, 0.36, 1)
        320ms;
}

.pillars__pillar.is-active
.pillars__forge-line {
    width: 6rem;
}

.pillars__question {
    width: min(54rem, 100%);

    margin: 0;

    color: var(--color-forged-ivory);

    font-family: var(--font-display);
    font-size: clamp(1.9rem, 4.5vw, 4rem);
    line-height: 1.05;
    text-wrap: balance;
}

.pillars__description {
    width: min(38rem, 100%);

    margin: 1.5rem auto 0;

    color: var(--color-ash);

    font-size: clamp(1rem, 1.8vw, 1.25rem);
    line-height: 1.65;
    text-wrap: balance;
}

/*
|--------------------------------------------------------------------------
| Progress
|--------------------------------------------------------------------------
*/

.pillars__progress {
    position: absolute;
    right: clamp(1.25rem, 3vw, 3rem);
    top: 50%;

    width: 1px;
    height: min(18rem, 38vh);

    overflow: hidden;

    background:
        rgba(213, 164, 79, 0.16);

    transform: translateY(-50%);
}

.pillars__progress-fill {
    display: block;

    width: 100%;
    height: 20%;

    background:
        linear-gradient(
            to bottom,
            #ffd08a,
            var(--color-ember)
        );

    box-shadow:
        0 0 0.75rem
        rgba(255, 101, 0, 0.8);

    transform-origin: top;
    transition: height 650ms ease;
}

.pillars__markers {
    position: absolute;
    left: clamp(1.25rem, 3vw, 3rem);
    top: 50%;

    display: grid;
    gap: 1.1rem;

    transform: translateY(-50%);
}

.pillars__markers span {
    width: 0.45rem;
    height: 0.45rem;

    border: 1px solid
        rgba(213, 164, 79, 0.32);

    border-radius: 50%;

    background: transparent;

    transition:
        background 500ms ease,
        border-color 500ms ease,
        box-shadow 500ms ease,
        transform 500ms ease;
}

.pillars__markers span.is-active {
    background: var(--color-molten);
    border-color: var(--color-molten);

    box-shadow:
        0 0 1rem
        rgba(255, 101, 0, 0.78);

    transform: scale(1.35);
}

/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media (max-width: 46rem) {
    .pillars {
        min-height: 450vh;
    }

    .pillars__stage {
        padding:
            6.5rem
            1.25rem
            4rem;
    }

    .pillars__introduction {
        position: absolute;
        top: clamp(5.75rem, 8vh, 7rem);
        left: 50%;

        width: min(48rem, calc(100% - 2.5rem));

        text-align: center;

        transform: translateX(-50%);
    }

    .pillars__sequence {
        min-height: 28rem;
        margin-top: 6.5rem;
    }

    .pillars__pillar h3 {
        font-size: clamp(
            4rem,
            22vw,
            7rem
        );
    }

    .pillars__question {
        font-size: clamp(
            1.8rem,
            9vw,
            3rem
        );
    }

    .pillars__description {
        font-size: 1rem;
    }

    .pillars__progress {
        right: 0.7rem;
    }

    .pillars__markers {
        left: 0.7rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pillars {
        min-height: auto;
    }

    .pillars__stage {
        position: relative;
        min-height: auto;
    }

    .pillars__sequence {
        display: grid;
        gap: 8rem;

        min-height: auto;
        margin:
            12rem
            0
            4rem;
    }

    .pillars__pillar {
        position: relative;

        opacity: 1;
        transform: none;
        filter: none;
    }

    .pillars__forge-line {
        width: 6rem;
    }

    .pillars__progress,
    .pillars__markers {
        display: none;
    }
}