/*
 * "Why we win" section (front page).
 *
 * Desktop: a tall track holds a sticky, viewport-high stage. Scrolling through
 * the track opens the three cards one after another (driven by why-scroll.js,
 * which sets data-active on each card and data-why-idx on the section).
 * Mobile (<= 991px): the cards are sticky, so each one slides over the last.
 *
 * Type, spacing and theme colours come from main.css (heading-style-*,
 * text-size-*, .theme-dark variables). Only the brand glow colours are local.
 * Without JS (no .is-enabled) every card simply shows open.
 */

.section_why {
    --why-blue: 59, 91, 255;
    --why-violet: 132, 60, 204;
    --why-pink: 240, 7, 111;
    --why-line: rgba(255, 255, 255, .12);
    --why-card-bg: #131319;
    position: relative;
}

.why-scroll_track {
    position: relative;
}

.why-scroll_stage {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 6rem;
    padding-bottom: 3rem;
}

.why-scroll_inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    min-height: 0;
}

/* Backdrop glow that follows the open card */
.why-scroll_glows {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.why-scroll_glows i {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1s;
}

.why-scroll_glows i:nth-child(1) {
    background:
        radial-gradient(55% 70% at 15% 100%, rgba(var(--why-blue), .35), transparent 70%),
        radial-gradient(40% 50% at 90% 0%, rgba(var(--why-violet), .2), transparent 70%);
}

.why-scroll_glows i:nth-child(2) {
    background:
        radial-gradient(55% 70% at 50% 100%, rgba(var(--why-violet), .24), transparent 70%),
        radial-gradient(40% 50% at 90% 0%, rgba(169, 54, 182, .13), transparent 70%);
}

.why-scroll_glows i:nth-child(3) {
    background:
        radial-gradient(55% 70% at 85% 100%, rgba(var(--why-pink), .19), transparent 70%),
        radial-gradient(40% 50% at 10% 0%, rgba(var(--why-violet), .11), transparent 70%);
}

.section_why[data-why-idx="0"] .why-scroll_glows i:nth-child(1),
.section_why[data-why-idx="1"] .why-scroll_glows i:nth-child(2),
.section_why[data-why-idx="2"] .why-scroll_glows i:nth-child(3) {
    opacity: 1;
}

/* Heading + lede */
.why-scroll_head {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 1rem 4rem;
    align-items: end;
}

.why-scroll_head .heading-style-h3 {
    text-wrap: balance;
}

.why-scroll_lede {
    max-width: 38ch;
    margin: 0;
    justify-self: end;
    color: var(--_theme---text-color--text-secondary);
}

/* Cards */
.why-scroll_cards {
    display: flex;
    gap: .75rem;
    height: min(32.5rem, 62vh);
    min-height: 23.75rem;
}

.why-card {
    position: relative;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-width: 0;
    padding: 1.625rem 1.625rem 1.875rem;
    overflow: hidden;
    border: 1px solid var(--why-line);
    background-color: rgba(255, 255, 255, .03);
}

.why-card::before {
    content: "";
    position: absolute;
    top: -10rem;
    right: -8.75rem;
    width: 23.75rem;
    height: 23.75rem;
    background: radial-gradient(circle, var(--why-glow), transparent 65%);
    opacity: 0;
    transition: opacity .7s;
    pointer-events: none;
}

.why-card:nth-child(1) { --why-glow: rgba(var(--why-blue), .7); }
.why-card:nth-child(2) { --why-glow: rgba(var(--why-violet), .4); }
.why-card:nth-child(3) { --why-glow: rgba(var(--why-pink), .4); }

.why-card_top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.why-card_tag {
    font-size: var(--_typography---font-size--small);
    letter-spacing: var(--_typography---letter-spacing--0-02em);
    text-transform: uppercase;
    color: var(--_theme---text-color--text-secondary);
}

.why-card_logo {
    display: block;
    width: 8.5rem;
    height: auto;
}

.why-card_title {
    margin: auto 0 0;
    padding-top: 1.5rem;
    text-wrap: balance;
}

.why-card_more-inner {
    min-height: 0;
    overflow: hidden;
}

.why-card_body {
    max-width: 46ch;
    margin: 1.125rem 0 0;
    line-height: 1.65;
    opacity: .8;
}

/* The four stages of the marketing cycle, lit one after another */
.why-card_stages {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin: 1.125rem 0 0;
    padding: 0;
    list-style: none;
}

.why-card_stages li {
    padding: .375rem .625rem;
    border: 1px solid rgba(255, 255, 255, .2);
    font-size: var(--_typography---font-size--small);
    animation: why-stage-pulse 6s infinite;
}

.why-card_stages li:nth-child(2) { animation-delay: 1.5s; }
.why-card_stages li:nth-child(3) { animation-delay: 3s; }
.why-card_stages li:nth-child(4) { animation-delay: 4.5s; }

@keyframes why-stage-pulse {
    0%, 30%, 100% { background-color: transparent; border-color: rgba(255, 255, 255, .2); }
    8%, 22% { background-color: rgba(var(--why-blue), .35); border-color: rgb(var(--why-blue)); }
}

.why-card_count {
    display: none;
}

.why-card_bar {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: var(--why-progress, 0%);
    background-color: rgba(255, 255, 255, .75);
}

.why-card[data-active="true"]::before {
    opacity: .55;
}

/* Scroll-driven state: only once why-scroll.js has switched it on */
@media screen and (min-width: 992px) {
    .section_why.is-enabled .why-scroll_track {
        height: 340svh;
    }

    .section_why.is-enabled .why-scroll_stage {
        position: sticky;
        top: 0;
        height: 100svh;
        overflow: hidden;
        padding-top: clamp(4.5rem, 12vh, 7rem);
        padding-bottom: clamp(1.5rem, 5vh, 3rem);
    }

    .section_why.is-enabled .why-scroll_inner {
        gap: clamp(1.25rem, 4vh, 2.75rem);
    }

    /* The heading shrinks on short screens so the cards always fit the pinned view */
    .section_why.is-enabled .why-scroll_head .heading-style-h3 {
        font-size: min(var(--_typography---font-size--h3), 6.4vh);
    }

    .section_why.is-enabled .why-card {
        cursor: pointer;
        transition: flex-grow .7s cubic-bezier(.2, .8, .2, 1), background-color .5s, border-color .5s;
    }

    .section_why.is-enabled .why-card[data-active="true"] {
        flex-grow: 2.4;
        border-color: rgba(255, 255, 255, .28);
        background-color: rgba(255, 255, 255, .06);
    }

    .section_why.is-enabled .why-card_title {
        transition: font-size .7s cubic-bezier(.2, .8, .2, 1);
    }

    .section_why.is-enabled .why-card[data-active="true"] .why-card_title {
        font-size: var(--_typography---font-size--h5);
    }

    .section_why.is-enabled .why-card_more {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows .7s cubic-bezier(.2, .8, .2, 1);
    }

    .section_why.is-enabled .why-card_more-inner {
        opacity: 0;
        transition: opacity .3s;
    }

    .section_why.is-enabled .why-card[data-active="true"] .why-card_more {
        grid-template-rows: 1fr;
    }

    .section_why.is-enabled .why-card[data-active="true"] .why-card_more-inner {
        opacity: 1;
        transition: opacity .5s .3s;
    }

    .section_why:not(.is-enabled) .why-card_bar {
        display: none;
    }
}

/* Mobile and tablet: cards pile up as you scroll */
@media screen and (max-width: 991px) {
    .why-scroll_stage {
        padding-top: 4.5rem;
        padding-bottom: 6rem;
    }

    .why-scroll_inner {
        gap: 2.5rem;
    }

    .why-scroll_head {
        grid-template-columns: 1fr;
    }

    .why-scroll_lede {
        justify-self: start;
    }

    .why-scroll_glows {
        display: none;
    }

    .why-scroll_cards {
        display: block;
        height: auto;
        min-height: 0;
    }

    .why-card {
        position: sticky;
        top: calc(1rem + var(--why-i, 0) * 1rem);
        height: min(74svh, 37.5rem);
        margin-bottom: 1.75rem;
        padding: 1.5rem 1.375rem 1.625rem;
        border-color: rgba(255, 255, 255, .2);
        background-color: var(--why-card-bg);
        transform-origin: 50% 0;
        will-change: transform;
    }

    .why-card:nth-child(1) { --why-i: 0; }
    .why-card:nth-child(2) { --why-i: 1; }
    .why-card:nth-child(3) { --why-i: 2; margin-bottom: 0; }

    .why-card::before {
        top: -8.75rem;
        right: -7.5rem;
        opacity: .55;
    }

    /* Titles use the h3 step of the site's type scale on small screens */
    .why-card_title {
        font-size: var(--_typography---font-size--h3);
    }

    .why-card_bar {
        display: none;
    }

    .why-card_count {
        display: block;
        position: absolute;
        right: 1.375rem;
        bottom: 1.5rem;
        font-size: var(--_typography---font-size--small);
        letter-spacing: var(--_typography---letter-spacing--0-02em);
        color: rgba(255, 255, 255, .55);
    }
}

@media (prefers-reduced-motion: reduce) {
    .why-card,
    .why-card::before,
    .why-card_title,
    .why-card_more,
    .why-card_more-inner,
    .why-scroll_glows i {
        transition: none !important;
    }

    .why-card_stages li {
        animation: none;
    }
}