/* ============================================================================
   MAI — animations.css
   Keyframes e estados de animação. Regra do projeto: só `transform`, `opacity`,
   `filter` e `stroke-dashoffset` são animados — nada que dispare layout, para
   manter CLS zero e 60 FPS.
   O bloco final desliga tudo em prefers-reduced-motion.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · KEYFRAMES
   -------------------------------------------------------------------------- */

/* Marquee dos sistemas: a trilha é duplicada, então -50% fecha o laço. */
@keyframes mai-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Flutuação dos chips do hero — só para cima, longe do card. */
@keyframes mai-drift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -14px, 0); }
}

/* Tracejado em movimento nas rotas e conexões. */
@keyframes mai-dash {
  to { stroke-dashoffset: -1000; }
}

/* Auroras de fundo: deriva lenta, quase imperceptível. */
@keyframes mai-aurora {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1);       opacity: 0.5; }
  50%      { transform: translate3d(4%, -3%, 0) scale(1.12); opacity: 0.8; }
}

/* Varredura de brilho nos botões primários. */
@keyframes mai-sheen {
  0%   { transform: translate3d(-120%, 0, 0) skewX(-20deg); }
  100% { transform: translate3d(220%, 0, 0) skewX(-20deg); }
}

/* Rotação lenta do ícone de ciclo fechado no Motor de IA. */
@keyframes mai-spin {
  to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------------
   2 · CLASSES DE ANIMAÇÃO
   -------------------------------------------------------------------------- */
.anim-marquee     { animation: mai-marquee 44s linear infinite; }
.anim-drift       { animation: mai-drift 7s var(--ease-in-out) infinite; }
.anim-drift--delay{ animation-delay: -2.4s; }
.anim-dash        { animation: mai-dash 14s linear infinite; }
.anim-aurora      { animation: mai-aurora 16s var(--ease-in-out) infinite; }
.anim-spin-slow   { animation: mai-spin 6s linear infinite; }

/* --------------------------------------------------------------------------
   3 · ESTADOS DE REVEAL
   O estado inicial vive aqui; o GSAP anima a partir dele. `.js-on` só é
   aplicado quando o JS assume — sem JS, o conteúdo aparece normalmente.
   -------------------------------------------------------------------------- */
.js-on [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(6px);
  will-change: transform, opacity;
}

.js-on [data-hero-item],
.js-on [data-hero-chip],
.js-on [data-hero-insight],
.js-on [data-pipeline-step] {
  opacity: 0;
}

/* Cabeçalho desce junto com a entrada do hero. Sem JS ele já nasce no lugar. */
.js-on .nav {
  opacity: 0;
  transform: translateY(-80px);
}

.js-on [data-stage] {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(6px);
}

/* Depois do reveal: filtro zerado e will-change solto.
   Precisa vencer as regras `.js-on [data-reveal]` acima — daí a especificidade
   maior e o !important no filtro. */
.js-on [data-reveal].is-revealed,
.js-on [data-stage].is-revealed {
  filter: none !important;
  will-change: auto;
}

/* Traço desenhado por scroll (sparkline do hero, entre outros). */
.js-on [data-draw] {
  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
}

/* --------------------------------------------------------------------------
   4 · MOVIMENTO REDUZIDO
   Corta toda a animação decorativa e garante que nada fique invisível —
   o JS também respeita a mesma media query (ver js/animations.js).
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .js-on [data-reveal],
  .js-on [data-stage],
  .js-on [data-hero-item],
  .js-on [data-hero-chip],
  .js-on [data-hero-insight],
  .js-on [data-pipeline-step] {
    opacity: 1;
    transform: none;
    filter: none;
  }

  .js-on [data-draw] { stroke-dashoffset: 0; }
}