/* AlfabetizIA FX
   Efeitos portados da landing consultordeia.busiabr.com para HTML estático.
   Aurora WebGL, rastro pixelado, reveal no scroll, botão magnético,
   tilt 3D, count-up e barra de progresso de scroll. */

/* Aurora WebGL: fica atrás de todo o conteúdo (.page usa z-index 1).
   O .bg-aurora em CSS continua por baixo como fallback. */
#fx-aurora{
  position:fixed; inset:0; z-index:0;
  width:100%; height:100%;
  display:block; pointer-events:none;
  opacity:.18; mix-blend-mode:screen;
}

/* Rastro de mouse pixelado */
#fx-spotlight{
  position:fixed; inset:0; z-index:2;
  width:100%; height:100%;
  display:block; pointer-events:none;
  mix-blend-mode:screen;
}

/* Barra de progresso de scroll */
#fx-progress{
  position:fixed; top:0; left:0; z-index:60;
  height:3px; width:100%;
  transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,#3E8EFF 0%,#8CC0FF 60%,#3E8EFF 100%);
  box-shadow:0 0 14px -2px rgba(62,142,255,.7);
  pointer-events:none; will-change:transform;
}

/* Reveal no scroll
   Seletor de atributo duplicado só para ganhar especificidade das regras
   de classe das próprias páginas (.btn, .hero h1, etc). */
[data-reveal][data-reveal]{
  opacity:0;
  transform:translate3d(0,20px,0);
  filter:blur(5px);
  transition:opacity .72s cubic-bezier(.22,.61,.36,1),
             transform .72s cubic-bezier(.22,.61,.36,1),
             filter .72s cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}
[data-reveal][data-reveal].fx-in{
  opacity:1;
  transform:none;
  filter:blur(0);
}
[data-reveal][data-reveal].fx-done{
  will-change:auto; filter:none;
}

/* Tilt 3D nos cards. A transição é aplicada inline pelo JS,
   para não conflitar com a transição do reveal. */
[data-tilt]{
  transform-style:preserve-3d;
}

/* Botão magnético */
[data-magnetic]{
  will-change:transform;
}

/* Count-up: evita o texto pulando de largura durante a animação */
[data-countup]{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* Acessibilidade: sem movimento */
@media (prefers-reduced-motion:reduce){
  [data-reveal],[data-reveal][data-reveal]{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    transition:none !important;
  }
  [data-tilt]{transition:none !important; transform:none !important;}
  #fx-spotlight{display:none !important;}
  #fx-progress{transition:none !important;}
}