/* ==========================================================================
   A Empresa (home) — abertura · filme "BVI" · o que a BVI entrega · fecho
   Folha escura que sobe sobre a linha de válvulas (clara), com o mesmo
   raio de canto dela. Mobile-first.

   O filme tem dois estados:
   - Estático (padrão, sem JS ou com movimento reduzido): pôster/vídeo aberto,
     texto e card visíveis, nada fixo na rolagem.
   - Cena (.about__film.is-live, ligada por about.js): o palco fica fixo
     enquanto a rolagem atravessa o "I" de BVI. about.js escreve no palco
     --zoom, --origin-x/y, --mask-o, --outline-o, --shade-o e --video-s, e
     liga .is-open quando o vídeo já ocupa a tela.
   ========================================================================== */

.about {
    position: relative;
    z-index: 1;                      /* acima da folha clara de válvulas */
    margin-top: calc(-1 * var(--radius-lg));
    background:
        radial-gradient(60% 40% at 100% 0%, rgba(var(--co-accent-rgb), 0.10), transparent 70%),
        var(--co-deep);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* --- Abertura ------------------------------------------------------------------ */
.about__intro {
    display: grid;
    gap: var(--space-5);
}

.about__heading {
    display: grid;
    gap: var(--space-5);
}

.about__heading .display-title__line:nth-child(1) { --reveal-delay: 80ms; }
.about__heading .display-title__line:nth-child(2) { --reveal-delay: 160ms; }

.about__lead {
    max-width: 30rem;
    color: var(--text-2);
    --reveal-delay: 240ms;
}

.about__timeline {
    display: grid;
    margin-top: var(--space-6);
    border-top: 1px solid var(--line);
}

.about__milestone {
    display: grid;
    grid-template-columns: 4.75rem minmax(0, 1fr);
    align-items: baseline;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--line);
}

.about__milestone:nth-child(2) { --reveal-delay: 80ms; }
.about__milestone:nth-child(3) { --reveal-delay: 160ms; }
.about__milestone:nth-child(4) { --reveal-delay: 240ms; }

.about__mark {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
    line-height: 1;
    color: var(--text);
}

/* "Hoje" fecha a linha no verde da marca. */
.about__milestone:last-child .about__mark {
    color: var(--co-accent-2);
}

.about__milestone-text {
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    color: var(--text-2);
}

/* --- Filme: estado estático ------------------------------------------------------- */
.about__film {
    --word-size: min(50vw, 40svh);

    position: relative;
    margin-top: clamp(var(--space-16), 9vw, 8rem);
}

.about__stage {
    position: relative;
    height: min(100svh, 52rem);
    min-height: 34rem;
    overflow: hidden;
    background: var(--co-abyss);
    isolation: isolate;               /* a máscara só mistura com o vídeo */
}

.about__poster,
.about__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: scale(var(--video-s, 1));
}

.about__poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about__video {
    z-index: 1;
    object-fit: cover;
    opacity: 0;
    transition: opacity var(--dur-slow) var(--ease-soft);
}

/* O vídeo só aparece com o primeiro quadro pronto: o pôster é o mesmo quadro. */
.about__stage.is-playing .about__video {
    opacity: 1;
}

/* Escurece topo e base para o header e o texto lerem sobre qualquer quadro. */
.about__shade {
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
        linear-gradient(180deg,
            rgba(var(--co-deep-rgb), 0.6) 0%,
            rgba(var(--co-deep-rgb), 0) 26%,
            rgba(var(--co-deep-rgb), 0) 42%,
            rgba(var(--co-deep-rgb), 0.92) 100%);
    opacity: var(--shade-o, 1);
    pointer-events: none;
}

/* Máscara, contorno e rótulo só existem na cena. */
.about__mask,
.about__outline,
.about__tag {
    display: none;
}

/* --- Botão de pausa ------------------------------------------------------------- */
.about__toggle {
    position: absolute;
    top: calc(var(--header-h) + var(--header-top) + var(--space-4));
    right: var(--gutter);
    z-index: 7;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    font-size: 1rem;
    color: var(--text);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    transition:
        background-color var(--dur-base) var(--ease-apple),
        border-color var(--dur-base) var(--ease-apple);
}

.about__toggle .icon {
    grid-area: 1 / 1;
}

.about__icon-play,
.about__toggle.is-paused .about__icon-pause {
    display: none;
}

.about__toggle.is-paused .about__icon-play {
    display: block;
    fill: currentColor;
    stroke: none;
}

@media (hover: hover) {
    .about__toggle:hover {
        background: var(--glass-bg-2);
        border-color: var(--line-strong);
    }
}

/* --- Texto e card sobre o vídeo -------------------------------------------------- */
.about__overlay {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 6;
    display: grid;
    gap: var(--space-5);
    width: min(100% - 2 * var(--gutter), var(--shell));
    margin-inline: auto;
    padding-bottom: calc(var(--space-8) + env(safe-area-inset-bottom));
}

.about__copy {
    display: grid;
    gap: var(--space-4);
}

.about__film-title {
    --fs-title: clamp(1.75rem, 1rem + 2.6vw, 3.5rem);
    --title-ghost: rgba(var(--white-rgb), 0.58);   /* sobre vídeo o tom fantasma precisa de mais contraste */
}

/* "pós-venda" nunca parte no hífen. */
.about__nowrap {
    white-space: nowrap;
}

.about__film-text {
    max-width: 28rem;
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    color: var(--text-2);
}

/* Card de vidro: uma frase só, quebrada em rótulo · número · complemento. */
.about__count {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "pre   pre"
        "value text";
    align-items: end;
    column-gap: var(--space-4);
    row-gap: var(--space-1);
    justify-self: start;
    width: min(100%, 22rem);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
}

.about__count-pre {
    grid-area: pre;
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-3);
}

.about__count-value {
    grid-area: value;
    font-family: var(--font-display);
    font-size: var(--fs-stat);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
    line-height: 0.85;
    color: var(--text);
}

.about__count-text {
    grid-area: text;
    padding-bottom: 0.2em;
    font-size: var(--fs-xs);
    line-height: 1.4;
    color: var(--text-2);
}

/* --- Filme: cena (about.js) ------------------------------------------------------- */
.about__film.is-live {
    height: 230svh;                   /* curso da rolagem: 130svh de cena */
}

.about__film.is-live .about__stage {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    min-height: 0;
}

.about__film.is-live .about__shade {
    opacity: var(--shade-o, 0);
}

.about__film.is-live .about__mask,
.about__film.is-live .about__outline {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
}

/* Fundo da cor da seção + letras brancas em darken: o vídeo só aparece nas letras. */
.about__film.is-live .about__mask {
    z-index: 3;
    background: var(--co-deep);
    mix-blend-mode: darken;
    opacity: var(--mask-o, 1);
}

.about__film.is-live .about__outline {
    z-index: 4;
    opacity: var(--outline-o, 1);
}

.about__word {
    display: block;
    font-family: var(--font-display);
    font-size: var(--word-size);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 0.8;
    white-space: nowrap;
    text-transform: uppercase;
    color: var(--text);
    transform-origin: var(--origin-x, 50%) var(--origin-y, 50%);
    transform: scale(var(--zoom, 1));
}

/* Contorno fino por cima das letras, na linguagem das palavras fantasma do site. */
.about__outline .about__word {
    color: transparent;
    -webkit-text-stroke: 1px rgba(var(--white-rgb), 0.3);
}

.about__film.is-live .about__tag {
    position: absolute;
    top: calc(50% - var(--word-size) * 0.36 - var(--space-10));
    left: 50%;
    z-index: 5;
    display: block;
    translate: -50% 0;
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--text-3);
    opacity: var(--outline-o, 1);
}

/* Depois de atravessar o "I", as camadas da palavra saem da composição. */
.about__stage.is-through .about__mask,
.about__stage.is-through .about__outline,
.about__stage.is-through .about__tag {
    visibility: hidden;
}

/* Texto e card entram quando o vídeo ocupa a tela; saem se a rolagem voltar. */
.about__film.is-live .about__copy > *,
.about__film.is-live .about__count {
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 24px, 0);
    transition:
        opacity var(--dur-slow) var(--ease-out-expo),
        transform var(--dur-slow) var(--ease-out-expo),
        visibility 0s linear var(--dur-slow);
}

.about__film.is-live .is-open .about__copy > *,
.about__film.is-live .is-open .about__count {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition:
        opacity var(--dur-reveal) var(--ease-out-expo),
        transform var(--dur-reveal) var(--ease-out-expo),
        visibility 0s;
}

.about__film.is-live .is-open .about__copy > :nth-child(2) { transition-delay: 90ms; }
.about__film.is-live .is-open .about__count { transition-delay: 180ms; }

/* --- O que a BVI entrega ------------------------------------------------------------ */
.about__deliver {
    margin-top: clamp(var(--space-16), 9vw, 8rem);
}

.about__kicker {
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    font-weight: 500;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-3);
}

.about__deliver .about__kicker {
    margin-bottom: var(--space-5);
}

/* Trilho que sangra até a borda da tela; o padding da lista alinha o primeiro
   card com o shell e deixa folga depois do último. */
.about__rail {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.about__rail::-webkit-scrollbar {
    display: none;
}

.about__rail:focus-visible {
    outline-offset: -2px;
}

.about__pillars {
    display: grid;
    grid-auto-columns: min(78vw, 21rem);
    grid-auto-flow: column;
    gap: var(--space-3);
    width: max-content;
    padding-inline: var(--gutter);
}

/* A lista só dispara o reveal; quem entra, em cascata, são os cards. */
html.js .about__pillars[data-reveal] {
    opacity: 1;
    transform: none;
}

html.js .about__pillars .pillar {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition:
        opacity var(--dur-reveal) var(--ease-out-expo),
        transform var(--dur-reveal) var(--ease-out-expo);
    transition-delay: var(--reveal-delay, 0ms);
}

html.js .about__pillars.is-revealed .pillar {
    opacity: 1;
    transform: none;
}

.pillar:nth-child(2) { --reveal-delay: 80ms; }
.pillar:nth-child(3) { --reveal-delay: 160ms; }
.pillar:nth-child(4) { --reveal-delay: 240ms; }

.pillar {
    position: relative;
    display: grid;
    align-items: end;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--co);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    scroll-snap-align: start;
    isolation: isolate;
}

.pillar__photo {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1200ms var(--ease-out-expo);
}

.pillar::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg,
        rgba(var(--co-deep-rgb), 0) 38%,
        rgba(var(--co-deep-rgb), 0.72) 70%,
        rgba(var(--co-deep-rgb), 0.95) 100%);
}

.pillar__body {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-5);
}

.pillar__index {
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    letter-spacing: var(--tracking-wider);
    color: var(--co-accent-2);
}

.pillar__title {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 700;
    letter-spacing: var(--tracking-snug);
    line-height: var(--lh-snug);
    color: var(--text);
}

.pillar__text {
    font-size: var(--fs-sm);
    line-height: 1.45;
    color: var(--text-2);
}

@media (hover: hover) {
    .pillar:hover .pillar__photo {
        transform: scale(1.04);
    }
}

/* --- Fecho: equipe · segmentos · contato -------------------------------------------- */
.about__close {
    display: grid;
    gap: var(--space-10);
    margin-top: clamp(var(--space-16), 9vw, 8rem);
}

.about__team {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--co);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
}

.about__team img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about__reach {
    display: grid;
    align-content: center;
    gap: var(--space-5);
}

.about__segments {
    display: flex;
    flex-wrap: wrap;
    row-gap: var(--space-1);
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    font-weight: 600;
    letter-spacing: var(--tracking-snug);
    line-height: 1.3;
    color: var(--text-2);
    --reveal-delay: 80ms;
}

/* A barra fecha o item (e não abre o próximo): quando a linha quebra, ela fica no fim. */
.about__segments li:not(:last-child)::after {
    content: "/";
    margin-inline: 0.4em;
    color: var(--co-accent);
}

.about__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-3);
    --reveal-delay: 160ms;
}

/* --- Celular ------------------------------------------------------------------------ */
@media (max-width: 767.98px) {
    .about__actions .btn {
        flex: 1 1 100%;
        justify-content: space-between;
    }

    .about__actions .btn--ghost {
        justify-content: center;
    }
}

/* --- Tablet ------------------------------------------------------------------------- */
@media (min-width: 768px) {
    .about {
        margin-top: calc(-1 * var(--radius-xl));
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    }

    .about__timeline {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        border-bottom: 1px solid var(--line);
    }

    .about__milestone {
        grid-template-columns: none;
        align-content: start;
        gap: var(--space-3);
        padding: var(--space-6) var(--space-5) var(--space-6) 0;
        border-bottom: 0;
    }

    .about__milestone + .about__milestone {
        padding-left: var(--space-5);
        border-left: 1px solid var(--line);
    }

    .about__mark {
        font-size: clamp(2rem, 1.2rem + 2vw, 3rem);
    }

    .about__film {
        --word-size: min(44vw, 46svh);
    }

    .about__overlay {
        grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
        align-items: end;
        column-gap: var(--space-10);
        padding-bottom: var(--space-12);
    }

    .about__count {
        justify-self: end;
    }

    .about__pillars {
        grid-auto-columns: min(42vw, 22rem);
        gap: var(--space-4);
    }
}

/* --- Desktop ------------------------------------------------------------------------ */
@media (min-width: 1024px) {
    .about__intro {
        grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
        align-items: end;
        column-gap: var(--space-12);
    }

    .about__timeline {
        grid-column: 1 / -1;
        margin-top: var(--space-10);
    }

    .about__film {
        --word-size: min(44vw, 64svh);
    }

    .about__film.is-live {
        height: 260svh;
    }

    /* Quatro cards cabem no shell: o trilho vira grade e para de rolar. */
    .about__rail {
        overflow: visible;
        scroll-snap-type: none;
    }

    .about__pillars {
        grid-auto-flow: row;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        width: min(100% - 2 * var(--gutter), var(--shell));
        margin-inline: auto;
        padding-inline: 0;
    }

    .about__close {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        align-items: center;
        gap: clamp(var(--space-12), 6vw, 7rem);
    }
}

/* --- Movimento reduzido: sem cascata nos cards --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html.js .about__pillars .pillar {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .pillar__photo {
        transition: none;
    }
}