/* ══════════════════════════════════════════════════════════════════
   BrAIXn Motion, sistema de movimento compartilhado
   Usado por vendas.html, index.html e construbraixn.html.
   Regra de ouro: nenhuma animação enfeita. Cada uma demonstra o
   produto, torna um número mais claro, ou orienta o olho.
   Só anima transform | opacity | filter | background-position.
   ══════════════════════════════════════════════════════════════════ */

:root{
  /* Motion tokens */
  --dur-fast:180ms; --dur-base:420ms; --dur-slow:820ms; --dur-cine:1400ms;
  --ease-out:cubic-bezier(.16,1,.3,1);        /* entradas */
  --ease-in-out:cubic-bezier(.45,0,.55,1);    /* sweeps   */
  --ease-spring:cubic-bezier(.34,1.56,.64,1); /* toques   */
  --stagger:70ms;

  /* Cores que o site ainda não define (as demais vêm das páginas) */
  --bx-purple:#B98AE0;   /* sob medida */
  --bx-blue:#6C9CF5;     /* pacote 02  */
  --bx-wa:#25D366;       /* whatsapp   */
  --bx-wa-dark:#052E16;
  --bx-red:#e06c75;      /* lead perdido */
  --bx-sec:#8b8b93;      /* texto secundário */
  --bx-ter:#5f5f68;      /* texto terciário  */
  --bx-surface-2:#101012;
  --bx-surface-3:#161618;
}

/* ── Reading progress (injetada por JS) ───────────────────────────── */
.bx-progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:2000;
  transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg, #C89A08, var(--color-accent,#E4B200), #FFE27A);
  will-change:transform; pointer-events:none;
}

/* ── Grão (injetado por JS): tira o "chapado" do preto ────────────── */
.bx-grain{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.028; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Aurora do hero (injetada por JS dentro de #hero) ─────────────── */
.bx-aurora{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.bx-aurora b{
  position:absolute; display:block; border-radius:50%;
  filter:blur(90px); will-change:transform; opacity:.08;
}
.bx-aurora b:nth-child(1){ width:46vw; height:46vw; left:-6vw; top:-8vw;
  background:var(--color-accent,#E4B200); }
.bx-aurora b:nth-child(2){ width:38vw; height:38vw; right:-6vw; top:4vw;
  background:var(--color-accent,#E4B200); opacity:.06; }
.bx-aurora b:nth-child(3){ width:34vw; height:34vw; left:26vw; bottom:-14vw;
  background:var(--bx-wa); opacity:.05; }

@media (prefers-reduced-motion: no-preference){
  .bx-aurora b:nth-child(1){ animation:bx-drift-a 22s ease-in-out infinite alternate; }
  .bx-aurora b:nth-child(2){ animation:bx-drift-b 26s ease-in-out infinite alternate; }
  .bx-aurora b:nth-child(3){ animation:bx-drift-c 18s ease-in-out infinite alternate; }
}
@keyframes bx-drift-a{ to{ transform:translate3d(4vw,3vw,0) scale(1.12); } }
@keyframes bx-drift-b{ to{ transform:translate3d(-5vw,4vw,0) scale(1.08); } }
@keyframes bx-drift-c{ to{ transform:translate3d(3vw,-4vw,0) scale(1.15); } }

/* ── Header que encolhe ao passar de 80px ─────────────────────────── */
#navbar.bx-shrink{
  background:rgba(5,5,5,.92);
  backdrop-filter:blur(22px) saturate(1.5);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);
  border-bottom-color:rgba(228,178,0,.18);
}
#navbar.bx-shrink .logo img{
  transform:scale(.8); transform-origin:left center;
  transition:transform var(--dur-base) var(--ease-out);
}
.logo img{ transition:transform var(--dur-base) var(--ease-out); }

/* ── Marquee de setores (CSS puro) ────────────────────────────────── */
.bx-marquee{
  position:relative; overflow:hidden; width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.bx-marquee-track{
  display:flex; width:max-content; gap:0;
  will-change:transform;
}
.bx-marquee-track span{
  display:inline-flex; align-items:center; gap:.65rem;
  padding:0 1.9rem; white-space:nowrap;
  font-family:var(--font-display,'Syne'),sans-serif; font-weight:700;
  font-size:clamp(1.1rem,2.4vw,1.7rem); letter-spacing:-.02em;
  color:var(--bx-ter);
}
.bx-marquee-track span::after{
  content:"·"; color:rgba(228,178,0,.45); margin-left:1.9rem;
}
@media (prefers-reduced-motion: no-preference){
  .bx-marquee-track{ animation:bx-marquee 42s linear infinite; }
  .bx-marquee:hover .bx-marquee-track{ animation-play-state:paused; }
}
@keyframes bx-marquee{ to{ transform:translateX(-50%); } }

/* ── Spotlight nos cards (só ponteiro fino) ───────────────────────── */
@media (hover:hover) and (pointer:fine){
  .bx-spot{ position:relative; }
  .bx-spot::after{
    content:""; position:absolute; inset:0; border-radius:inherit;
    background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%),
      rgba(228,178,0,.10), transparent 42%);
    opacity:0; transition:opacity var(--dur-base) var(--ease-out);
    pointer-events:none; z-index:0;
  }
  .bx-spot:hover::after{ opacity:1; }
  .bx-spot > *{ position:relative; z-index:1; }
}

/* ── Shimmer: o JS deixa o elemento inline-block; garante que frases
   longas quebrem dentro do container (não estourem no mobile) ─────── */
.gs{ max-width:100%; }
/* #hero é flex column; .hero-inner tem margin:0 auto, que desliga o
   stretch e faz o item crescer até o min-content do shimmer. width:100%
   fixa na viewport (idêntico no desktop: max-width:1200 continua valendo). */
.hero-inner{ min-width:0; width:100%; }

/* ── Botão magnético: JS move via transform ───────────────────────── */
.bx-magnetic{ will-change:transform; }
@media (prefers-reduced-motion: no-preference){
  .bx-magnetic{ transition:transform var(--dur-base) var(--ease-spring); }
}

/* ── Reveal com stagger entre irmãos (complementa .reveal do site) ── */
[data-stagger] > .reveal{ transition-delay:calc(var(--i,0) * var(--stagger)); }

/* ── Reduced motion: neutraliza qualquer resíduo de loop ──────────── */
@media (prefers-reduced-motion: reduce){
  .bx-aurora b{ animation:none !important; }
  .bx-marquee-track{ animation:none !important; transform:none !important; }
}