/* ============================================================================
   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;
    /* -9vh (era -3vw): sobe a seção para dentro do vão vazio que sobra no fim
       do Hero. Como o .agx-pin usa o MESMO fundo da página, essa sobreposição
       é invisível — só encurta a distância até o card. */
    margin-top: -9vh;
}

/* wrapper preso na tela (pin do ScrollTrigger) — 1 viewport, card centralizado */
.agx-pin {
    height: 100vh;
    box-sizing: border-box;
    display: flex;
    align-items: center;                  /* cresce a partir do CENTRO, como o da Antigravity */
    justify-content: center;
    padding-top: 0;
    /* sem perspective: o zoom virou escala pura, sem inclinacao 3D */
    overflow: hidden;
    background: var(--page-background);
}

/* o card preto — alvo do zoom (scale / border-radius / rotateX via GSAP) */
.agx-card {
    position: relative;
    /* O card ocupa a TELA INTEIRA no fim do zoom (full bleed), como o da
       Antigravity: a escala parte de 0.52 (card pequeno e arredondado) e chega
       a 1, quando ele encosta nas quatro bordas e o raio vai a zero.
       Antes ele parava em min(92vw,1600px) — nunca chegava na borda. */
    width: 100%;
    height: 100vh;
    height: 100svh;                       /* mobile: altura estável, ignora a barra do browser */
    background: #050505;
    border-radius: var(--r, 26px);        /* animado: 54px (pequeno) → 26px (cheio) */
    overflow: hidden;
    transform-origin: 50% 50%;            /* cresce a partir do centro em direção às 4 bordas */
    transform: translateZ(0);             /* camada GPU dedicada — sem flicker */
    will-change: transform;               /* border-radius nao e compositavel: declarar aqui so criava camada a toa */
    /* 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;
    transform: translateZ(0);
}

/* a cena preenche o card */
.agx-inner .ag-scene { 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) {
    /* raio 0 e nao 18px: sem zoom o card ja nasce em tela cheia, e cantos
       arredondados encostando na borda da tela ficariam estranhos.
       A regra de .agx-inner saiu junto com o desfoque animado. */
    /* sem GSAP o card nao anima: ja nasce na escala FINAL (0.92), senao
       ficaria maior aqui do que com a animacao rodando. */
    .agx-card { transform: scale(0.92); border-radius: 26px; }
    .agx-vignette { opacity: 0; }
}

/* Responsivo — mesma experiência; ajusta apenas as proporções do card */
/* Nada de travar a largura aqui: o card precisa alcançar as bordas em
   qualquer tela. Só a altura muda no mobile. */
@media (max-width: 760px) {
    .agx-card { height: 86vh; height: 86svh; }
}

/* ============================================================================
   CENA — loop de 18s dentro do card, em 3 momentos:
     1)  0 → 6s   painéis de UI inclinados em 3D
     2)  6 → 12s  tiles dos nossos serviços
     3) 12 → 18s  alertas da plataforma
   Referência: filme de produto da Luminovo. Os elementos deles (PDF, Excel,
   gbr, CSV e fornecedores de eletrônica) foram trocados pelos nossos serviços.
   Nada do arquivo original foi usado — só a linguagem visual.

   POR QUE CSS E NÃO VÍDEO: o card faz zoom no scroll (escala 0.52 → 1). Vídeo
   raster borraria justo no ponto de maior destaque; aqui a GPU resolve em
   qualquer escala e o download é zero.

   A linha do tempo é uma só: TODOS os elementos animam em 18s e cada um só
   aparece na sua fatia de porcentagem. Assim os momentos nunca dessincronizam
   — não há timer em JS para sair de fase.
   ========================================================================== */
.ag-scene {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: radial-gradient(70% 70% at 50% 40%, #0d1220 0%, #050505 72%);
    font-family: 'Inter', -apple-system, sans-serif;
    perspective: 1400px;              /* profundidade compartilhada pela cena */
}
/* brilhos de fundo (azul + violeta + lima), girando bem devagar */
.ag-scene-glow {
    position: absolute; inset: -30%;
    background:
        radial-gradient(28% 28% at 22% 30%, rgba(74,163,240,.30) 0%, transparent 70%),
        radial-gradient(26% 26% at 78% 34%, rgba(160,107,255,.26) 0%, transparent 70%),
        radial-gradient(24% 24% at 52% 78%, rgba(204,255,0,.10) 0%, transparent 70%);
    filter: blur(30px);
    animation: agGlow 40s linear infinite;
}

/* Cada momento: wrapper que controla entrada e saída na sua fatia do ciclo. */
.ag-beat {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    opacity: 0;
    /* perspective AQUI: a do .ag-scene só alcança os filhos diretos (os .ag-beat).
       Sem esta, o rotateX/rotateY dos painéis e tiles renderiza achatado.
       Nao da pra usar transform-style: preserve-3d porque opacity < 1 (que
       animamos) forca o contexto de volta para flat. */
    perspective: 1200px;
}

/* ---------------- 1) painéis inclinados (0 → 6s = 0% → 33%) -------------- */
/* opacity:1 aqui é PROPOSITAL: se a animação não rodar (falha, extensão,
   navegador antigo), o card mostra os painéis em vez de ficar PRETO. A
   animação assume a partir daí. */
.ag-beat--panels { opacity: 1; animation: agBeat1 18s ease-in-out infinite; }
.ag-panel {
    position: absolute;
    top: 50%; left: 50%;          /* âncora central; o translate abaixo desloca a partir daí */
    width: min(46%, 420px);
    padding: clamp(14px, 1.5vw, 24px);
    border-radius: clamp(12px, 1.2vw, 20px);
    background: #fff;
    box-shadow: 0 40px 80px -30px rgba(0,0,0,.75);
    display: flex; flex-direction: column; gap: 6px;
}
.ag-panel--a { transform: translate(-86%, -72%) rotateX(9deg) rotateY(-13deg); }
.ag-panel--b { transform: translate(-14%, -18%) rotateX(9deg) rotateY(-13deg); }
.ag-p-h   { font-size: clamp(11px, .95vw, 15px); color: #6b7280; font-weight: 500; }
.ag-p-big { font-size: clamp(26px, 3vw, 48px); font-weight: 800; letter-spacing: -.03em; color: #0a0a0a; line-height: 1; }
.ag-p-up  { align-self: flex-start; font-size: clamp(10px, .85vw, 13px); font-weight: 700; color: #16a34a;
            background: rgba(22,163,74,.10); padding: 3px 9px; border-radius: 99px; }
.ag-p-spark { width: 100%; height: clamp(38px, 4.5vw, 70px); margin-top: 4px; }
.ag-bar   { display: grid; grid-template-columns: 1fr; font-size: clamp(10px, .85vw, 13px); color: #4b5563; gap: 5px; margin-top: 8px; }
.ag-bar i { display: block; height: clamp(5px, .5vw, 8px); border-radius: 99px; background: var(--c); width: var(--w); }

/* ------------- 2) tiles dos serviços (6 → 12s = 33% → 66%) -------------- */
.ag-beat--tiles { animation: agBeat2 18s ease-in-out infinite; gap: clamp(10px, 1.4vw, 26px); grid-auto-flow: column; }
.ag-tile {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    /* atraso por tile: escalona a entrada sem precisar de keyframes separados */
    animation: agTile 18s ease-in-out infinite;
    animation-delay: calc(var(--i) * .11s);
}
.ag-tile-ic {
    display: grid; place-items: center;
    width: clamp(52px, 6.4vw, 104px); aspect-ratio: 1;
    border-radius: clamp(13px, 1.5vw, 24px);
    background: linear-gradient(160deg, #ffffff 0%, #eef1f6 100%);
    box-shadow: 0 22px 44px -18px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.9);
}
.ag-tile-ic svg { width: 52%; height: 52%; }
.ag-tile b  { font-size: clamp(10px, .9vw, 14px); font-weight: 700; color: #e9ecf3; }
.ag-tile em {
    font-style: normal; font-size: clamp(8px, .72vw, 11px); color: rgba(233,236,243,.55);
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08);
    padding: 2px 8px; border-radius: 99px;
}

/* -------------------- 3) alertas (12 → 18s = 66% → 100%) ---------------- */
.ag-beat--toasts { opacity: 1; align-content: center; gap: clamp(10px, 1.1vw, 18px); }
.ag-toast {
    display: flex; align-items: center; gap: clamp(9px, .9vw, 14px);
    width: min(58%, 520px);
    padding: clamp(11px, 1.1vw, 18px) clamp(14px, 1.4vw, 22px);
    border-radius: 99px;
    background: rgba(20,22,30,.86);
    border: 1px solid rgba(255,255,255,.09);
    box-shadow: 0 24px 50px -22px rgba(0,0,0,.9);
    animation: agToast 18s ease-in-out infinite;
    animation-delay: calc(var(--i) * .3s);    /* entram um depois do outro */
    opacity: 0;
}
.ag-toast-d { width: clamp(8px, .8vw, 12px); aspect-ratio: 1; border-radius: 50%; background: var(--c);
              box-shadow: 0 0 14px var(--c); flex: 0 0 auto; }
.ag-toast span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ag-toast b  { font-size: clamp(11px, 1vw, 16px); font-weight: 600; color: #f2f4f8; }
.ag-toast em { font-style: normal; font-size: clamp(9px, .8vw, 12.5px); color: rgba(233,236,243,.5); }

/* ------------------------------ keyframes ------------------------------- */
@keyframes agGlow { to { transform: rotate(360deg); } }

/* momento 1: entra do fundo, respira, sai para a frente */
@keyframes agBeat1 {
    0%   { opacity: 0; transform: translateZ(-190px); }
    6%   { opacity: 1; transform: translateZ(0); }
    27%  { opacity: 1; transform: translateZ(26px); }
    33%  { opacity: 0; transform: translateZ(120px); }
    100% { opacity: 0; transform: translateZ(-190px); }
}
/* momento 2: só visível entre 33% e 66% */
@keyframes agBeat2 {
    0%, 33%   { opacity: 0; }
    39%       { opacity: 1; }
    60%       { opacity: 1; }
    66%, 100% { opacity: 0; }
}
/* cada tile sobe girando ao entrar e volta a descer ao sair */
@keyframes agTile {
    0%, 33%   { opacity: 0; transform: translateY(46px) rotateX(26deg) rotateY(-18deg) scale(.9); }
    40%       { opacity: 1; transform: translateY(0)    rotateX(9deg)  rotateY(-7deg)  scale(1); }
    59%       { opacity: 1; transform: translateY(-8px) rotateX(6deg)  rotateY(4deg)   scale(1); }
    66%, 100% { opacity: 0; transform: translateY(-40px) rotateX(0deg) rotateY(12deg)  scale(.94); }
}
/* alertas deslizam da direita */
@keyframes agToast {
    0%, 66%   { opacity: 0; transform: translateX(52px) scale(.96); }
    73%       { opacity: 1; transform: translateX(0)    scale(1); }
    90%       { opacity: 1; transform: translateX(0)    scale(1); }
    96%, 100% { opacity: 0; transform: translateX(-26px) scale(.98); }
}

/* Movimento reduzido: congela num quadro composto, sem nenhuma animação. */
@media (prefers-reduced-motion: reduce) {
    .ag-scene-glow, .ag-beat, .ag-tile, .ag-toast { animation: none; }
    .ag-beat--panels { opacity: 1; }
    .ag-beat--tiles, .ag-beat--toasts { opacity: 0; }
}