/**
 * t-lead — founding families scroll hero (Etch Custom CSS @import)
 * Layout: o-track / o-flex / u-col-* (_layout.css, _utility.css) · Motion: js/gsap/modules/t_lead_scroll.js
 */

.t-lead {
    --lead-track-vh: 400;
    --lead-step-min-height: clamp(18rem, 52vh, 32rem);
    --lead-copy-form-gap: var(--gap-6);
    --lead-copy-stack-height: clamp(10rem, 28vh, 14rem);
    isolation: isolate;
    overflow: hidden;
    position: relative;
}

.t-lead__track {
    block-size: calc(var(--lead-track-vh) * 1vh);
    position: relative;
}

.t-lead__stage {
    align-items: stretch;
    block-size: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-block-size: 100dvh;
    overflow: visible;
    padding-block: var(--section-top) var(--section-bottom);
    padding-inline: var(--grid-margin);
    position: relative;
    width: 100%;
    z-index: 1;
}

.t-lead__stack {
    align-items: center;
    align-self: stretch;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    min-block-size: 0;
    overflow: visible;
    position: relative;
    width: 100%;
    z-index: 2;
}

.t-lead__step {
    pointer-events: none;
    text-align: center;
    width: var(--section-wrap);
}

/* Hide scroll slots until JS; keep intro paintable for LCP (PageSpeed / CrUX). */
.t-lead:not([data-lead-ready]):not([data-lead-static]) .t-lead__step--slot {
    visibility: hidden;
}

.t-lead[data-lead-static] .t-lead__step {
    visibility: visible;
}

.t-lead__step--slot {
    inset: 0;
    margin-inline: 0;
    max-inline-size: none;
    position: absolute;
    width: 100%;
}

.t-lead__step--slot.is-active {
    pointer-events: auto;
    z-index: 2;
}

.t-lead[data-lead-live] .t-lead__step[data-lead-step='copy-1']:not(.is-active),
.t-lead[data-lead-live] .t-lead__step[data-lead-step='copy-2']:not(.is-active),
.t-lead[data-lead-live] .t-lead__step--intro:not(.is-active) {
    visibility: hidden;
}

.t-lead__step--intro {
    overflow: visible;
}

.t-lead__intro {
    inline-size: min(100%, var(--col-5));
    left: 50%;
    margin: 0;
    pointer-events: none;
    position: absolute;
    top: 50%;
    translate: -50% -50%;
    z-index: 3;
}

.t-lead__step--slot[data-lead-step='copy-1'],
.t-lead__step--slot[data-lead-step='copy-2'] {
    align-items: center;
    justify-content: center;
}

.t-lead__step[data-lead-step='copy-1'] .t-lead__copy,
.t-lead__step[data-lead-step='copy-2'] .t-lead__copy {
    left: 50%;
    max-inline-size: var(--col-5);
    position: absolute;
    top: calc(50% - var(--lead-copy-body-offset, 4rem));
    translate: -50% 0;
    width: 100%;
}

.t-lead__copy {
    inline-size: 100%;
    justify-items: center;
    margin-inline: auto;
    text-align: center;
}

.t-lead__body .text-progressive__word {
    vertical-align: top;
}

.t-lead__meta {
    align-items: center;
    background: var(--dark-o-5);
    border-radius: var(--radius-btn);
    display: inline-flex;
    font-size: var(--h-s);
    gap: var(--gap-15);
    line-height: var(--line-height-body);
    margin-inline: auto;
    padding-block: var(--gap-1);
    padding-inline: var(--gap-15) var(--gap-2);
}

/* Cosmos background + avatar field (component base: css/c-cosmos.css) */

.t-lead .c-cosmos--bg {
    --cosmos-arc-width: 0.18rem;
    --cosmos-dot-size: 2rem;
    --cosmos-size: var(--section-wrap);
    block-size: var(--cosmos-size);
    display: block;
    inline-size: var(--cosmos-size);
    inset: auto;
    left: 50%;
    margin: 0;
    pointer-events: none;
    position: absolute;
    top: 50%;
    translate: -50% -50%;
    z-index: 0;
}

.t-lead .c-cosmos--bg .c-cosmos__dot {
    filter: drop-shadow(0 0 1px color-mix(in oklch, currentColor 40%, transparent));
}

.t-lead .c-cosmos--bg .c-cosmos__stage {
    block-size: 100%;
    inline-size: 100%;
    position: relative;
}

.t-lead .c-cosmos--bg .c-cosmos__glow {
    --lead-glow-inset: 8%;
    --lead-glow-blur: var(--blur-control);
    --lead-glow-red-size: 58% 52%;
    --lead-glow-red-pos: 42% 38%;
    --lead-glow-red-fade: 72%;
    --lead-glow-pink-size: 54% 48%;
    --lead-glow-pink-pos: 62% 58%;
    --lead-glow-pink-fade: 70%;

    filter: var(--blur-gradient);
    inset: var(--lead-glow-inset);
    opacity: 0.8 !important;
    z-index: 0;
}

.t-lead .c-cosmos--bg .c-cosmos__glow-layer {
    filter: var(--lead-glow-blur);
}

.t-lead .c-cosmos--bg .c-cosmos__glow-layer--red {
    background: radial-gradient(ellipse var(--lead-glow-red-size) at var(--lead-glow-red-pos),
            var(--red) 0%,
            var(--red-t) var(--lead-glow-red-fade));
}

.t-lead .c-cosmos--bg .c-cosmos__glow-layer--pink {
    background: radial-gradient(ellipse var(--lead-glow-pink-size) at var(--lead-glow-pink-pos),
            var(--pink) 0%,
            var(--pink-t) var(--lead-glow-pink-fade));
}

.t-lead .c-cosmos--bg .c-cosmos__svg {
    block-size: 100%;
    display: block;
    inline-size: 100%;
    overflow: visible;
    position: relative;
    z-index: 1;
}

.t-lead__avatars-field {
    --cosmos-avatar-orbit-peak: calc((var(--col-5) - var(--cosmos-avatar-size)) / 2);
    --cosmos-avatar-size: clamp(4rem, 20vmin, 12rem);
    --cosmos-avatar-orbit: 0px;

    block-size: var(--col-5);
    inset: auto;
    left: 50%;
    margin: 0;
    pointer-events: none;
    position: absolute;
    top: 50%;
    translate: -50% -50%;
    width: var(--col-5);
    z-index: 2;
}

.t-lead__avatars-field.c-cosmos__avatars {
    inset: auto;
    pointer-events: none;
    transform-origin: 50% 50%;
}

.t-lead__avatars-field [data-cosmos-avatars-spin] {
    pointer-events: none;
    transform-origin: 50% 50%;
}

.t-lead__avatars-field .c-cosmos__avatar {
    pointer-events: auto;
}

/* Tooltips: stay clickable on the active step; copy slot must not clip the card */
.t-lead[data-lead-live] .t-lead__step.is-active [data-etch-tooltip] {
    pointer-events: auto;
    position: relative;
    z-index: 6;
}

.t-lead[data-lead-live] .t-lead__step.is-active .t-lead__copy,
.t-lead[data-lead-live] .t-lead__step.is-active .t-lead__meta,
.t-lead[data-lead-live] .t-lead__step.is-active .t-lead__body {
    overflow: visible;
}


/* Form below copy — anchored to copy top + stack height + gap */
.t-lead__step[data-lead-step='copy-2'] .t-lead__form {
    inset-inline: 0;
    margin-inline: auto;
    max-inline-size: var(--col-5);
    position: absolute;
    top: calc(50% - var(--lead-copy-body-offset, 4rem) + var(--lead-copy-stack-height) + var(--lead-copy-form-gap));
    width: 100%;
}

.t-lead__form {
    opacity: 0;
    visibility: hidden;
    will-change: transform, opacity;

    & p {
        margin-block-end: var(--gap-2);
        margin-block-start: 0;
        text-align: center;
    }
    & .c-form{
        width: 100%;
    }
}

.t-lead__hint {
    align-items: center;
    backdrop-filter: var(--blur-control);
    background: var(--dark-o-5);
    border-radius: var(--radius-btn);
    bottom: var(--gap-5);
    display: inline-flex;
    font-size: var(--c-micro);
    gap: var(--gap-15);
    inset-inline: 0;
    justify-content: center;
    line-height: var(--line-height-body);
    margin-inline: auto;
    padding: 2px var(--gap-3);
    position: absolute;
    width: fit-content;
    white-space: nowrap;
    z-index: 3;

    & span {
        align-items: center;
        align-items: center;
        background: var(--mode);
        border-radius: var(--radius-btn);
        display: inline-flex;
        flex-shrink: 0;
        height: var(--btn-m-height);
        justify-content: center;
        width: var(--btn-m-height);

        & svg {
            height: var(--list-icon-xs);
        }
    }
}

.t-lead[data-lead-ready] .t-lead__hint {
    visibility: visible;
}

@media (max-width: 1024px) {

    .t-lead__step[data-lead-step='copy-1'] .t-lead__copy,
    .t-lead__step[data-lead-step='copy-2'] .t-lead__copy,
    .t-lead__step[data-lead-step='copy-2'] .t-lead__form {
        max-inline-size: var(--col-7);
    }
}

@media (max-width: 740px) {
    .t-lead {
        --lead-track-vh: 380;
        --lead-copy-stack-height: clamp(9rem, 32vh, 12rem);
        --lead-copy-form-gap: var(--gap-5);
    }

    .t-lead__step[data-lead-step='copy-1'] .t-lead__copy,
    .t-lead__step[data-lead-step='copy-2'] .t-lead__copy,
    .t-lead__step[data-lead-step='copy-2'] .t-lead__form {
        max-inline-size: var(--col-10);
    }

    .t-lead__hint {
        bottom: var(--grid-margin);
        max-width: calc(100% - var(--grid-margin) * 2);
        white-space: normal;
    }

    .t-lead__avatars-field {
        --cosmos-avatar-size: clamp(5rem, 20vmin, 7rem);
        --cosmos-avatar-orbit-peak: calc((var(--col-12) - var(--cosmos-avatar-size)) / 2);
        block-size: var(--col-12);
        width: var(--col-12);
    }

    .t-lead__intro {
        inline-size: min(100%, var(--col-12));
    }
}

@media (prefers-reduced-motion: reduce) {
    .t-lead__stage {
        block-size: auto;
        min-block-size: 0;
        position: relative;
    }

    .t-lead__track {
        block-size: auto;
    }

    .t-lead__step--slot {
        position: relative;
    }

    .t-lead__form {
        opacity: 1;
        visibility: visible;
    }
}