/* ============================================================================
   AG SHOWCASE — Seção "Anthares 44 em ação" (estilo Antigravity)
   ----------------------------------------------------------------------------
   Sticky / scroll-driven zoom: o card preto fica PRESO na tela (pin) e cresce
   de forma contínua conforme o scroll (GSAP ScrollTrigger, scrub). No final o
   dashboard preenche o card e o usuário segue para a próxima seção.

   Estrutura (.agx*) apenas para o mecanismo sticky + zoom. O CONTEÚDO do card
   reutiliza os estilos .ag-dashboard / .ag-db-* já existentes em style.css
   (sem duplicar CSS). A animação está em assets/js/ag-showcase.js.
   ========================================================================== */

.agx {
    position: relative;
    background: var(--page-background);   /* continua o fundo da Home (= Navbar/Hero) */
    z-index: 15;
    margin-top: -3vw;                     /* aproxima a seção do fim do Hero (come o vão residual, sem cobrir os cards) */
}

/* wrapper preso na tela (pin do ScrollTrigger) — 1 viewport, card centralizado */
.agx-pin {
    height: 100vh;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;              /* card ancorado ao TOPO → sobe (sem grande vão) */
    justify-content: center;
    padding-top: clamp(26px, 3vh, 42px);  /* pequeno respiro Hero → card (~30–45px) */
    perspective: 1400px;                  /* profundidade p/ o leve rotateX do zoom */
    overflow: hidden;
    background: var(--page-background);
}

/* o card preto — alvo do zoom (scale / border-radius / rotateX via GSAP) */
.agx-card {
    position: relative;
    width: min(92vw, 1600px);
    height: min(84vh, 940px);
    background: #050505;
    border-radius: var(--r, 26px);        /* animado: grande (pequeno) → menor (cheio) */
    overflow: hidden;
    transform-origin: 50% 0%;             /* cresce a partir do topo → topo fica ancorado, gap constante e pequeno */
    transform: translateZ(0);             /* camada GPU dedicada — sem flicker */
    will-change: transform, border-radius;
    /* SEM box-shadow: o card não projeta nenhuma sombra/faixa cinza sobre o fundo.
       Assim, ao terminar o card, o fundo continua exatamente #f8f8f8 (= Hero),
       como uma única superfície contínua. */
    backface-visibility: hidden;
}

/* camada interna que recebe o blur do zoom (8px → 0) */
.agx-inner {
    position: absolute;
    inset: 0;
    filter: blur(var(--sb, 0px));
    will-change: filter;
    transform: translateZ(0);
}

/* o dashboard reutilizado (.ag-dashboard) preenche o card */
.agx-inner .ag-dashboard { position: absolute; inset: 0; border-radius: inherit; }

/* vinheta auxiliar — opacidade animada pelo scroll */
.agx-vignette {
    position: absolute;
    inset: 0;
    z-index: 45;
    pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(120% 90% at 50% 42%, transparent 52%, rgba(0, 0, 0, .55) 100%);
    will-change: opacity;
}

/* Sem GSAP (JS off / prefers-reduced-motion): card já no estado final, cheio. */
@media (prefers-reduced-motion: reduce) {
    .agx-card { transform: none; border-radius: 18px; }
    .agx-inner { filter: none; }
    .agx-vignette { opacity: .18; }
}

/* Responsivo — mesma experiência; ajusta apenas as proporções do card */
@media (max-width: 1024px) {
    .agx-card { width: 92vw; height: 78vh; }
}
@media (max-width: 760px) {
    .agx-card { width: 92vw; height: 74vh; border-radius: var(--r, 22px); }
}