/* ==========================================================================
   Hero — cena 3D · atmosfera · copy em camadas
   Camadas (de trás para frente): atmosfera → palavra fantasma → cena 3D →
   barra técnica → conteúdo → indicador de scroll.
   ========================================================================== */

.hero {
    /* Enquadramento do modelo, lido por hero-scene.js:
       --model-x/--model-y: deslocamento (-1..1) a partir do centro do stage;
       --model-size: fração da altura visível (0 = ajustar ao stage); --model-scale: multiplicador. */
    --model-x: 0;
    --model-y: 0;
    --model-size: 0;
    --model-scale: 1;
    --hero-top: calc(var(--header-h) + var(--header-top) + var(--space-6));

    position: relative;
    display: grid;
    grid-template-rows: auto 1fr auto;  /* barra técnica · palco · conteúdo */
    min-height: 100svh;
    padding: var(--hero-top) var(--gutter) calc(var(--space-16) + env(safe-area-inset-bottom));
    overflow: hidden;
    background: var(--co-deep);
    isolation: isolate;
}

/* --- Atmosfera ----------------------------------------------------------------- */
.hero__atmosphere {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background:
        radial-gradient(120% 80% at 50% 110%, rgba(var(--co-rgb), 0.55) 0%, transparent 60%),
        linear-gradient(180deg, var(--co-abyss) 0%, var(--co-deep) 45%, #07281B 100%);
}

.hero__glow,
.hero__mist {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform;
}

.hero__glow--a {
    top: -20%;
    right: -10%;
    width: 60vmax;
    height: 60vmax;
    background: radial-gradient(closest-side, rgba(var(--co-accent-rgb), 0.28), transparent 70%);
    animation: glow-breathe 14s var(--ease-cinema) infinite;
}

.hero__glow--b {
    bottom: -30%;
    left: -15%;
    width: 70vmax;
    height: 70vmax;
    background: radial-gradient(closest-side, rgba(var(--co-rgb), 0.9), transparent 70%);
    animation: glow-breathe 18s var(--ease-cinema) infinite reverse;
}

.hero__mist--a,
.hero__mist--b {
    background: radial-gradient(closest-side, rgba(255, 255, 255, 0.10), transparent 72%);
    filter: blur(40px);
    mix-blend-mode: screen;
}

.hero__mist--a {
    top: 30%;
    left: 5%;
    width: 90vmax;
    height: 28vmax;
    animation: mist-drift 32s ease-in-out infinite;
}

.hero__mist--b {
    top: 55%;
    left: 20%;
    width: 80vmax;
    height: 22vmax;
    opacity: 0.7;
    animation: mist-drift 40s ease-in-out infinite reverse;
}

.hero__grain {
    position: absolute;
    inset: -4%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.07;
    mix-blend-mode: overlay;
    animation: grain-shift 1.2s steps(4) infinite;
    pointer-events: none;
}

.hero__vignette {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(90% 90% at 50% 50%, transparent 55%, rgba(3, 21, 14, 0.75) 100%),
        linear-gradient(180deg, rgba(3, 21, 14, 0.55) 0%, transparent 22%);
    pointer-events: none;
}

/* --- Barra técnica: identificação da peça + controle de abertura --------------------- */
.hero__meta {
    position: relative;
    z-index: 4;                 /* acima da cena, para o controle receber o clique */
    grid-row: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    /* Altura do controle reservada desde o início: o pouso não desloca a página. */
    min-height: 40px;
}

.hero__code {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    font-weight: 500;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--text-3);
    --reveal-delay: 250ms;
}

.hero__code-sep {
    color: var(--co-accent);
}

.hero__code-extra {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
}

/* --- Controle de abertura da válvula ------------------------------------------------- */
.valve-toggle {
    /* 0 = fechada, 1 = aberta. hero-scene.js escreve o valor a cada quadro. */
    --valve-progress: 0;

    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0.25rem 0.95rem 0.25rem 0.25rem;
    font-family: var(--font-mono);
    font-size: var(--fs-2xs);
    font-weight: 500;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--text-2);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-pill);
    -webkit-backdrop-filter: blur(var(--glass-blur));
    backdrop-filter: blur(var(--glass-blur));
    opacity: 0;
    transform: translate3d(0, 10px, 0);
    transition:
        opacity var(--dur-slow) var(--ease-out-expo),
        transform var(--dur-slow) var(--ease-out-expo),
        color var(--dur-base) var(--ease-apple),
        background-color var(--dur-base) var(--ease-apple),
        border-color var(--dur-base) var(--ease-apple);
}

/* hero-scene.js só liga o controle depois que a válvula pousa. */
.valve-toggle.is-ready {
    opacity: 1;
    transform: none;
}

.valve-toggle__dial {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    /* Anel que acompanha o curso real da haste. */
    background: conic-gradient(
        var(--co-accent-2) calc(var(--valve-progress) * 360deg),
        rgba(255, 255, 255, 0.14) 0deg
    );
}

.valve-toggle__dial::after {
    content: "";
    grid-area: 1 / 1;
    width: 26px;
    height: 26px;
    background: var(--co-deep);
    border-radius: 50%;
}

.valve-toggle__wheel {
    position: relative;   /* sobe acima do disco interno */
    grid-area: 1 / 1;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    /* Duas voltas e um quarto, como o volante real. */
    transform: rotate(calc(var(--valve-progress) * -810deg));
}

.hero.is-open .valve-toggle {
    color: var(--text);
    border-color: rgba(var(--co-accent-rgb), 0.45);
}

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

/* --- Palco: área livre do modelo; a válvula é centrada nela pelo JS ------------------- */
.hero__stage {
    position: relative;
    z-index: 1;
    grid-row: 2;
    display: grid;
    place-items: center;
    /* Mesma caixa do conteúdo: a palavra fantasma alinha com o título e o card. */
    width: min(100%, var(--shell));
    margin-inline: auto;
    min-height: 38svh;
    container-type: inline-size;   /* a palavra fantasma se mede por este bloco */
    pointer-events: none;
    user-select: none;
}

.hero__ghost {
    /* Largura de "GAVETA" em ems na Archivo 800 (medido: 4.05; arredondado para
       cima para suportar a fonte de fallback sem estourar). */
    --ghost-ratio: 4.2;

    /* Centrada no palco — e só nele. Acompanhar o --model-y jogava a palavra
       para dentro da faixa do conteúdo, onde o card de vidro cobria o "A". */
    /* Três tetos: a escala de marca, a largura do palco e a altura dele — o
       palco nunca é menor que 38svh, então 40svh mantém a palavra contida
       mesmo em janelas largas e baixas. */
    font-size: min(var(--fs-ghost), calc(100cqw / var(--ghost-ratio)), 40svh);
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 0.8;
    white-space: nowrap;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.03);
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.11);
    --reveal-delay: 450ms;
}

@supports not (container-type: inline-size) {
    .hero__ghost {
        font-size: min(var(--fs-ghost), calc((100vw - 2 * var(--gutter)) / var(--ghost-ratio)), 40vh);
    }
}

html.js .hero__ghost[data-reveal] {
    /* Em vez de subir, a palavra é revelada de baixo para cima como uma máscara.
       Os recuos laterais negativos são obrigatórios: com letter-spacing negativo
       a tinta da última letra passa da caixa do elemento, e uma máscara colada
       na caixa cortaria o "A" final. Só o valor do topo é animado. */
    transform: none;
    clip-path: inset(100% -0.25em -0.1em -0.25em);
    transition:
        opacity var(--dur-reveal) var(--ease-out-expo),
        clip-path 1400ms var(--ease-out-expo);
}

html.js .hero__ghost.is-revealed {
    clip-path: inset(0% -0.25em -0.1em -0.25em);
}

/* --- Cena 3D ----------------------------------------------------------------- */
.hero__scene {
    /* Ponto de apoio e tamanho do modelo em px; o JS atualiza a cada resize. */
    --anchor-x: 50%;
    --anchor-y: 40%;
    --anchor-size: 42vmin;

    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.hero__canvas {
    position: absolute;
    inset: 0;
    width: 100% !important;  /* three.js escreve width/height inline; a caixa é sempre a da cena */
    height: 100% !important;
    /* Só a válvula reage ao ponteiro; a rolagem vertical no toque continua livre. */
    pointer-events: auto;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    will-change: opacity;
}

.hero.is-grabbable .hero__canvas { cursor: grab; }
.hero.is-grabbing  .hero__canvas { cursor: grabbing; }

.hero__fallback {
    position: absolute;
    left: var(--anchor-x);
    top: var(--anchor-y);
    width: auto;
    height: var(--anchor-size);
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.55));
    opacity: 0;
    transition: opacity var(--dur-reveal) var(--ease-out-expo);
}

html.no-js .hero__fallback,
.hero.is-fallback .hero__fallback {
    opacity: 1;
}

/* Sombra suave sob a válvula; segue o ponto de apoio (--anchor-*) escrito pelo JS. */
.hero__shadow {
    position: absolute;
    left: var(--anchor-x);
    top: calc(var(--anchor-y) + var(--anchor-size) * 0.42);
    width: calc(var(--anchor-size) * 1.1);
    height: calc(var(--anchor-size) * 0.18);
    background: radial-gradient(closest-side, rgba(3, 21, 14, 0.85), transparent 72%);
    transform: translateX(-50%);
    filter: blur(6px);
    opacity: 0;
    transition: opacity 1600ms var(--ease-soft);
}

/* Durante a montagem o corpo já está no lugar: a sombra chega com ele, mais discreta. */
.hero.is-assembling .hero__shadow {
    opacity: 0.3;
}

.hero.is-landed .hero__shadow {
    opacity: 0.55;
    /* A respiração espera a transição terminar: animação sobrepõe transição, e
       começando junto a sombra saltaria direto para o 0.55 do primeiro quadro. */
    animation: shadow-breathe 6s ease-in-out 1600ms infinite;
}

/* --- Conteúdo ----------------------------------------------------------------- */
.hero__content {
    position: relative;
    z-index: 3;
    grid-row: 3;
    display: grid;
    gap: var(--space-8);
    width: min(100%, var(--shell));
    margin-inline: auto;
    align-items: end;
}

.hero__copy {
    display: grid;
    gap: var(--space-6);
    max-width: 34rem;
}

.hero__title {
    display: grid;
    font-family: var(--font-display);
    font-size: var(--fs-hero);
    font-weight: 800;
    letter-spacing: var(--tracking-tight);
    line-height: var(--lh-tight);
    text-transform: uppercase;
    color: var(--text-ghost);
}

.hero__line {
    display: block;
}

.hero__line:nth-child(1) { --reveal-delay: 300ms; }
.hero__line:nth-child(2) { --reveal-delay: 400ms; }
.hero__line:nth-child(3) { --reveal-delay: 500ms; }

.hero__line--solid {
    color: var(--text);
    text-shadow: 0 0 40px rgba(255, 255, 255, 0.15);
}

.hero__lead {
    display: flex;
    align-items: flex-start;
    gap: var(--space-5);
    --reveal-delay: 650ms;
}

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

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    --reveal-delay: 760ms;
}

/* --- Card glass -------------------------------------------------------------- */
.hero__card {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    --reveal-delay: 850ms;
}

.hero__card-title {
    font-family: var(--font-text);
    font-size: var(--fs-md);
    font-weight: 600;
    letter-spacing: var(--tracking-snug);
    line-height: var(--lh-snug);
    color: var(--text);
}

.hero__card-body {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--line);
}

.hero__card-text {
    font-size: var(--fs-xs);
    line-height: var(--lh-base);
    color: var(--text-3);
}

.hero__stat {
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
    font-family: var(--font-display);
    line-height: 0.85;
}

.hero__stat-value {
    font-size: var(--fs-stat);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
    color: var(--text);
}

.hero__stat-value::after {
    content: "+";
    margin-left: 0.04em;
    font-size: 0.5em;
    font-weight: 600;
    color: var(--co-accent-2);
    vertical-align: top;
}

.hero__stat-label {
    padding-bottom: 0.15em;
    font-family: var(--font-text);
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    line-height: 1.25;
    color: var(--text-3);
}

.hero__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
}

/* --- Indicador de scroll ------------------------------------------------------- */
.hero__scroll {
    position: absolute;
    bottom: max(var(--space-6), env(safe-area-inset-bottom));
    left: 50%;
    z-index: 3;
    display: none;
    padding: var(--space-2);
    transform: translateX(-50%);
    --reveal-delay: 1150ms;
}

html.js .hero__scroll[data-reveal] {
    /* Mantém a centralização enquanto anima a entrada. */
    transform: translate3d(-50%, 20px, 0);
}

html.js .hero__scroll.is-revealed {
    transform: translate3d(-50%, 0, 0);
}

.hero__mouse {
    display: block;
    width: 22px;
    height: 34px;
    border: 1.5px solid var(--line-strong);
    border-radius: 12px;
    transition: border-color var(--dur-base) var(--ease-apple);
}

.hero__mouse span {
    display: block;
    width: 3px;
    height: 6px;
    margin: 6px auto 0;
    background: var(--text);
    border-radius: 2px;
    animation: mouse-wheel 1.8s var(--ease-cinema) infinite;
}

.hero__scroll:hover .hero__mouse {
    border-color: var(--text);
}

/* --- Tablet ------------------------------------------------------------------- */
@media (min-width: 768px) {
    .hero {
        --model-scale: 0.9;
    }

    .hero__card {
        padding: var(--space-6);
    }

    .hero__scroll {
        display: block;
    }
}

/* --- Duas colunas: copy à esquerda, card à direita ---------------------------------- */
@media (min-width: 900px) {
    .hero {
        --card-col: 360px;
    }

    .hero__content {
        grid-template-columns: minmax(0, 1fr) minmax(280px, var(--card-col));
        gap: var(--space-10);
    }

}

/* --- Desktop ------------------------------------------------------------------- */
@media (min-width: 1024px) {
    .hero {
        --model-x: 0.02;
        --model-y: -0.28;
        --model-size: 0.52;
        --model-scale: 1;
        --card-col: 380px;
        padding-bottom: var(--space-12);
    }

    /* No desktop o modelo é dimensionado pela viewport; o stage só define o centro. */
    .hero__stage {
        min-height: 0;
    }

    .hero__content {
        grid-template-columns: minmax(0, 1fr) minmax(300px, var(--card-col));
    }

    .hero__copy {
        gap: var(--space-8);
    }

    .hero__card {
        border-radius: var(--radius-xl);
    }
}

@media (min-width: 1440px) {
    .hero {
        --model-size: 0.54;
    }
}

/* Notebooks baixos (≤ 780px de altura): tudo mais compacto para caber na dobra. */
@media (min-width: 1024px) and (max-height: 780px) {
    .hero {
        --model-size: 0.5;
        --fs-hero: clamp(2rem, 1rem + 2.6vw, 3rem);
        padding-bottom: var(--space-8);
    }

    .hero__copy {
        gap: var(--space-5);
    }

    .hero__card {
        padding: var(--space-5);
    }

    .hero__card-text {
        display: none;
    }
}

/* --- Mobile: a válvula é a protagonista; o texto fica no essencial ------------------- */
@media (max-width: 767.98px) {
    .hero {
        /* A válvula ocupa quase todo o palco sem encostar na barra técnica. */
        --model-size: 0.30;
        --model-y: -0.06;
        --hero-top: calc(var(--header-h) + var(--header-top) + var(--space-3));
        padding-bottom: calc(var(--space-8) + env(safe-area-inset-bottom));
    }

    .hero__meta {
        gap: var(--space-3);
    }

    /* A barra cabe em uma linha só: a qualificação da peça sai no celular. */
    .hero__code-extra {
        display: none;
    }

    .hero__stage {
        /* Palco e conteúdo somados cabem em uma tela de celular típica (≈844px). */
        min-height: 36svh;
    }

    .hero__content {
        gap: var(--space-4);
    }

    .hero__copy {
        gap: var(--space-4);
    }

    /* O complemento da frase sai: no celular a válvula e o título já contam a história. */
    .hero__text-more {
        display: none;
    }

    .hero__lead .icon-btn {
        display: none;
    }

    .hero__text {
        max-width: 34ch;
        font-size: var(--fs-xs);
    }

    .hero__actions {
        gap: var(--space-2);
    }

    .hero__actions .btn {
        flex: 1 1 100%;
        justify-content: space-between;
    }

    /* Um único botão sólido: a ação secundária vira link e a tela respira. */
    .hero__actions .btn--ghost {
        justify-content: center;
        min-height: 38px;
        padding-inline: 0;
        color: var(--text-3);
        background: none;
        border-color: transparent;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        text-decoration: underline;
        text-underline-offset: 5px;
    }

    .hero__card-title,
    .hero__card-text {
        display: none;
    }

    /* O cartão vira uma faixa fina: número em destaque + dois selos. */
    .hero__card {
        display: flex;
        align-items: center;
        gap: var(--space-4);
        padding: var(--space-3) var(--space-4);
        border-radius: var(--radius-lg);
    }

    .hero__card-body {
        display: contents;
    }

    .hero__stat-value {
        font-size: 2.25rem;
    }

    .hero__chips {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-1);
    }

    .hero__chips .chip {
        padding: 0.2rem 0.65rem;
        font-size: var(--fs-2xs);
        white-space: nowrap;
    }
}

/* --- Movimento reduzido: sem névoa animada, sem grão, tudo visível ---------------------- */
@media (prefers-reduced-motion: reduce) {
    .hero__glow,
    .hero__mist,
    .hero__grain,
    .hero__mouse span,
    .hero__shadow {
        animation: none;
    }

    .hero__shadow {
        opacity: 0.55;
    }

    .valve-toggle {
        opacity: 1;
        transform: none;
        transition: none;
    }
}