/* ==========================================================================
   Animações do site institucional (index, manual e whitepaper).

   Carregado DEPOIS do style_home.css e sem substituir nada dele: tudo aqui
   é acréscimo, e remover a linha do <link> devolve as páginas ao estado
   anterior. Não há biblioteca externa — o movimento é CSS e, no núcleo de
   IA da home, SMIL dentro do próprio SVG.

   Todo seletor novo começa com `ag-` para não esbarrar nas classes que já
   existem no style_home.css.

   Quem navega com "reduzir movimento" ligado no sistema vê a página inteira
   parada: o bloco no fim do arquivo desliga tudo.

   Author: Dario C Oliveira
   ========================================================================== */

html { scroll-behavior: smooth; }

/* O cabeçalho é sticky: sem isto o link do índice para logo abaixo dele. */
[id] { scroll-margin-top: 84px; }


/* ==========================================================================
   1. FUNDO VIVO — aurora e grade
   ========================================================================== */

.hero { position: relative; overflow: hidden; }

.ag-aurora,
.ag-grade {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ag-aurora {
    background:
        radial-gradient(38rem 26rem at 18% 20%, rgba(163, 119, 247, 0.20), transparent 65%),
        radial-gradient(34rem 24rem at 82% 30%, rgba(88, 166, 255, 0.18), transparent 65%),
        radial-gradient(30rem 22rem at 55% 88%, rgba(45, 212, 191, 0.13), transparent 65%);
    animation: ag-aurora 17s ease-in-out infinite alternate;
}

@keyframes ag-aurora {
    from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
    to   { transform: translate3d(2%, 2%, 0) scale(1.07); }
}

.ag-grade {
    background-image:
        linear-gradient(rgba(88, 166, 255, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(88, 166, 255, 0.055) 1px, transparent 1px);
    background-size: 58px 58px;
    -webkit-mask-image: radial-gradient(70% 60% at 50% 35%, #000 30%, transparent 100%);
    mask-image: radial-gradient(70% 60% at 50% 35%, #000 30%, transparent 100%);
    animation: ag-grade 22s linear infinite;
}

@keyframes ag-grade { to { background-position: 58px 58px; } }


/* ==========================================================================
   2. HERO EM DUAS COLUNAS (só no desktop)
   ========================================================================== */

.ag-hero-grid {
    position: relative;
    z-index: 1;
    /* 1100px é a mesma largura do .header-inner: assim o texto do hero nasce
       alinhado com a logo do cabeçalho. */
    max-width: 1100px;
    margin: 0 auto;
}

@media (min-width: 901px) {
    .ag-hero-grid {
        display: grid;
        grid-template-columns: 1.05fr 0.95fr;
        gap: 54px;
        align-items: center;
        text-align: left;
    }
    .ag-hero-grid .hero-content { margin: 0; max-width: none; }
    .ag-hero-grid p             { margin-left: 0; margin-right: 0; }
    .ag-hero-grid .hero-buttons { justify-content: flex-start; }
}

.hero-stats { position: relative; z-index: 1; }

/* o ponto que pulsa no selo do topo */
.hero-badge .ag-pulso {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2dd4bf;
    animation: ag-pulso 2.4s infinite;
}

@keyframes ag-pulso {
    0%   { box-shadow: 0 0 0 0 rgba(45, 212, 191, 0.6); }
    70%  { box-shadow: 0 0 0 10px rgba(45, 212, 191, 0); }
    100% { box-shadow: 0 0 0 0 rgba(45, 212, 191, 0); }
}

/* o papel que a Agatha assume, trocando sozinho */
.ag-papel  { color: #2dd4bf; font-weight: 600; }
.ag-cursor {
    display: inline-block;
    width: 2px;
    height: 1.05em;
    background: #2dd4bf;
    vertical-align: -0.16em;
    margin-left: 2px;
    animation: ag-cintila 1s steps(2, start) infinite;
}

@keyframes ag-cintila { to { visibility: hidden; } }


/* ==========================================================================
   3. O NÚCLEO DE IA — arte do hero
   ========================================================================== */

.ag-arte {
    position: relative;
    /* As fichas se posicionam em relação a esta caixa. Sem o teto elas se
       afastariam da arte na medida em que a coluna do grid cresce. */
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ag-arte svg {
    width: 100%;
    max-width: 460px;
    height: auto;
    overflow: visible;
}

.ag-gira-lento  { transform-origin: 250px 250px; animation: ag-gira 44s linear infinite; }
.ag-gira-rapido { transform-origin: 250px 250px; animation: ag-gira 26s linear infinite reverse; }
@keyframes ag-gira { to { transform: rotate(360deg); } }

.ag-respira { transform-origin: 250px 250px; animation: ag-respira 4.6s ease-in-out infinite; }
@keyframes ag-respira {
    0%, 100% { transform: scale(1);     opacity: 0.9; }
    50%      { transform: scale(1.045); opacity: 1; }
}

/* o contorno do núcleo se desenha ao carregar */
.ag-desenha {
    stroke-dasharray: var(--traco);
    stroke-dashoffset: var(--traco);
    animation: ag-desenha 2.4s ease-out 0.25s forwards;
}
@keyframes ag-desenha { to { stroke-dashoffset: 0; } }

.ag-no { animation: ag-no 3.2s ease-in-out infinite; }
@keyframes ag-no { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

.ag-varre { animation: ag-varre 3.8s ease-in-out infinite; }
@keyframes ag-varre {
    0%, 100%  { transform: translateY(-96px); opacity: 0; }
    12%, 88%  { opacity: 0.75; }
    50%       { transform: translateY(96px);  opacity: 0.75; }
}

/* fichas de vidro flutuando sobre a arte */
.ag-ficha {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    background: rgba(22, 27, 34, 0.82);
    border: 1px solid var(--border);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    border-radius: 13px;
    padding: 10px 13px;
    /* O teto impede que a frase mais longa estique a ficha por cima da arte. */
    max-width: 210px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.42);
    animation: ag-flutua 6.5s ease-in-out infinite;
}
@keyframes ag-flutua {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-11px); }
}

.ag-ficha i     { color: #2dd4bf; font-size: 1.05rem; }
.ag-ficha b     { display: block; font-size: 0.9rem; line-height: 1.2; color: var(--text-primary); }
.ag-ficha small { color: var(--text-secondary); font-size: 0.72rem; }

/* As fichas ficam nas quatro pontas, a maior parte do corpo para fora da
   arte: sobrepor o núcleo esconderia justamente o que se quer mostrar. */
.ag-f1 { top: -2%;    left: -20%;  animation-delay: -0.8s; }
.ag-f2 { bottom: 10%; right: -22%; animation-delay: -3.1s; }
.ag-f3 { bottom: -8%; left: -12%;  animation-delay: -5s; }

@media (max-width: 900px) {
    .ag-ficha { display: none; }
    .ag-arte  { margin-bottom: 32px; }
}


/* ==========================================================================
   3.1 CARTÕES — brilho que acompanha o cursor
   O --mx/--my vem do JS; sem ele o brilho simplesmente fica no meio do topo.
   ========================================================================== */

.feature {
    position: relative;
    overflow: hidden;
}

.feature::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
    background: radial-gradient(
        22rem 12rem at var(--mx, 50%) var(--my, 0%),
        rgba(88, 166, 255, 0.13),
        transparent 70%
    );
}

.feature:hover::before { opacity: 1; }

.feature > * { position: relative; z-index: 1; }

.feature-icon-wrap { transition: transform 0.22s ease; }
.feature:hover .feature-icon-wrap { transform: scale(1.09) rotate(-5deg); }


/* ==========================================================================
   4. APARECER AO ROLAR
   As classes entram pelo JS, nunca pelo HTML: sem JS nada fica escondido.
   ========================================================================== */

.ag-revela {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.ag-revela.ag-visivel { opacity: 1; transform: none; }


/* ==========================================================================
   5. MANUAL E WHITEPAPER
   ========================================================================== */

/* 5.1 barra de leitura, presa no topo acima do cabeçalho */
.ag-barra {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    z-index: 200;
    background: linear-gradient(90deg, #58a6ff, #a371f7 55%, #2dd4bf);
    box-shadow: 0 0 12px rgba(88, 166, 255, 0.55);
    pointer-events: none;
}

/* 5.2 voltar ao topo */
.ag-topo {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 150;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: rgba(22, 27, 34, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--accent);
    font-size: 0.95rem;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.ag-topo.ag-visivel { opacity: 1; visibility: visible; transform: none; }
.ag-topo:hover {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
    transform: translateY(-3px);
}

/* 5.3 o índice acompanha onde você está na página */
.indice a {
    border-left: 2px solid transparent;
    padding-left: 10px;
    margin-left: -12px;
}
.indice a.ag-aqui {
    color: var(--text-primary);
    border-left-color: var(--accent);
    background: var(--accent-soft);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* 5.4 um respiro de cor atrás do cabeçalho das páginas de leitura */
.ag-doc header { overflow: hidden; }
.ag-doc header::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(22rem 8rem at 15% 120%, rgba(88, 166, 255, 0.30), transparent 72%),
        radial-gradient(18rem 7rem at 85% -20%, rgba(163, 119, 247, 0.26), transparent 72%);
    animation: ag-aurora 19s ease-in-out infinite alternate;
}
.ag-doc .header-inner { position: relative; z-index: 1; }

/* 5.5 blocos de código com um toque de destaque ao passar o mouse */
.ag-doc pre {
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.ag-doc pre:hover {
    border-color: rgba(88, 166, 255, 0.4);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
    transform: translateY(-2px);
}


/* ==========================================================================
   6. QUEM PREFERE A PÁGINA PARADA
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .ag-aurora, .ag-grade, .ag-gira-lento, .ag-gira-rapido, .ag-respira,
    .ag-desenha, .ag-no, .ag-varre, .ag-ficha, .ag-cursor,
    .hero-badge .ag-pulso, .ag-doc header::after {
        animation: none !important;
    }
    .ag-desenha { stroke-dashoffset: 0; }
    .ag-revela  { opacity: 1; transform: none; transition: none; }
    .ag-topo    { transition: none; }
    .ag-doc pre:hover { transform: none; }
    .feature:hover .feature-icon-wrap { transform: none; }
}