/* ============================================================
   EFEITOS WEB — Growth X Digital
   Portado de Aceternity UI / React Bits / 21st.dev para HTML puro.
   Sem React. Sem build. Sem dependência. Cola e usa.

   Como plugar a marca (defina no seu :root):
     --fx-cor      cor principal da marca
     --fx-cor-2    cor secundaria (degrade)
     --fx-fundo    fundo da secao
   ============================================================ */

:root{
  --fx-cor:#1d4ed8;
  --fx-cor-2:#7c3aed;
  --fx-fundo:#05060a;
  --fx-texto:#e8eaf2;
  --fx-suave:rgba(255,255,255,.08);
}

/* Respeita quem desligou animacao no sistema. Obrigatorio. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ---------- 1. FUNDO AURORA (Aceternity: Aurora Background) ---------- */
.fx-aurora{position:relative;overflow:hidden;background:var(--fx-fundo);isolation:isolate}
.fx-aurora::before{
  content:"";position:absolute;inset:-40%;z-index:-1;
  background:
    radial-gradient(45% 45% at 20% 30%, color-mix(in srgb, var(--fx-cor) 55%, transparent) 0%, transparent 60%),
    radial-gradient(40% 40% at 80% 25%, color-mix(in srgb, var(--fx-cor-2) 50%, transparent) 0%, transparent 60%),
    radial-gradient(50% 50% at 55% 85%, color-mix(in srgb, var(--fx-cor) 35%, transparent) 0%, transparent 65%);
  filter:blur(70px) saturate(140%);
  animation:fx-aurora-flutua 18s ease-in-out infinite alternate;
}
@keyframes fx-aurora-flutua{
  0%{transform:translate3d(-4%,-2%,0) rotate(0deg) scale(1)}
  50%{transform:translate3d(4%,3%,0) rotate(8deg) scale(1.12)}
  100%{transform:translate3d(-2%,4%,0) rotate(-6deg) scale(1.05)}
}

/* ---------- 2. METEOROS (Aceternity: Meteor Effect) ---------- */
.fx-meteoros{position:relative;overflow:hidden}
.fx-meteoro{
  position:absolute;top:-10%;width:2px;height:2px;border-radius:50%;
  background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.12);
  animation:fx-meteoro-cai linear infinite;
  pointer-events:none;
}
.fx-meteoro::after{
  content:"";position:absolute;top:50%;left:2px;width:70px;height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,.55),transparent);
  transform:translateY(-50%);
}
@keyframes fx-meteoro-cai{
  0%{transform:rotate(215deg) translateX(0);opacity:1}
  70%{opacity:1}
  100%{transform:rotate(215deg) translateX(-800px);opacity:0}
}

/* ---------- 3. GRADE / PONTOS (Aceternity: Grid and Dot Backgrounds) ---------- */
.fx-grade{
  background-color:var(--fx-fundo);
  background-image:
    linear-gradient(var(--fx-suave) 1px,transparent 1px),
    linear-gradient(90deg,var(--fx-suave) 1px,transparent 1px);
  background-size:44px 44px;
}
.fx-pontos{
  background-color:var(--fx-fundo);
  background-image:radial-gradient(var(--fx-suave) 1px,transparent 1px);
  background-size:22px 22px;
}
/* vinheta: apaga a grade nas bordas */
.fx-vinheta{position:relative}
.fx-vinheta::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 35%,var(--fx-fundo) 100%);
}

/* ---------- 4. HOLOFOTE que segue o mouse (Aceternity: Spotlight) ---------- */
.fx-holofote{position:relative;overflow:hidden}
.fx-holofote::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(320px circle at var(--fx-mx,50%) var(--fx-my,50%),
    color-mix(in srgb, var(--fx-cor) 22%, transparent), transparent 70%);
  opacity:0;transition:opacity .35s ease;
}
.fx-holofote:hover::before{opacity:1}

/* ---------- 5. TEXTO QUE SURGE palavra a palavra (Aceternity: Text Generate) ---------- */
.fx-texto-surge .fx-palavra{
  display:inline-block;opacity:0;filter:blur(6px);
  transform:translateY(.35em);
  transition:opacity .6s ease,filter .6s ease,transform .6s ease;
}
.fx-texto-surge.fx-ativo .fx-palavra{opacity:1;filter:blur(0);transform:none}

/* ---------- 6. MAQUINA DE ESCREVER (Aceternity: Typewriter) ---------- */
.fx-maquina::after{
  content:"";display:inline-block;width:.08em;height:1em;
  background:var(--fx-cor);margin-left:.12em;vertical-align:-.12em;
  animation:fx-cursor .9s steps(1) infinite;
}
@keyframes fx-cursor{50%{opacity:0}}

/* ---------- 7. MARCA-TEXTO na palavra-chave (Aceternity: Hero Highlight) ---------- */
.fx-destaque{
  background-image:linear-gradient(90deg,var(--fx-cor),var(--fx-cor-2));
  background-repeat:no-repeat;background-size:0% .32em;background-position:0 .92em;
  padding:0 .12em;border-radius:.1em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  transition:background-size 1.1s cubic-bezier(.16,1,.3,1);
}
.fx-destaque.fx-ativo{background-size:100% .32em}

/* ---------- 8. CARD COM BRILHO no cursor (Aceternity: Card Spotlight) ---------- */
.fx-card-brilho{
  position:relative;overflow:hidden;border-radius:16px;
  border:1px solid var(--fx-suave);background:rgba(255,255,255,.03);
  transition:border-color .3s ease,transform .3s ease;
}
.fx-card-brilho::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity .3s ease;
  background:radial-gradient(240px circle at var(--fx-mx,50%) var(--fx-my,50%),
    color-mix(in srgb, var(--fx-cor) 26%, transparent), transparent 65%);
}
.fx-card-brilho:hover::before{opacity:1}
.fx-card-brilho:hover{border-color:color-mix(in srgb, var(--fx-cor) 45%, transparent)}

/* ---------- 9. CARD 3D que inclina (Aceternity: 3D Card Effect) ---------- */
.fx-card-3d{
  transform-style:preserve-3d;
  transition:transform .25s cubic-bezier(.16,1,.3,1);
  will-change:transform;
}
.fx-card-3d > *{transform:translateZ(35px)}

/* ---------- 10. GRADE BENTO (Aceternity: Bento Grid) ---------- */
.fx-bento{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
.fx-bento > .fx-largo{grid-column:span 2}
.fx-bento > .fx-alto{grid-row:span 2}
@media(max-width:820px){
  .fx-bento{grid-template-columns:1fr}
  .fx-bento > .fx-largo,.fx-bento > .fx-alto{grid-column:auto;grid-row:auto}
}

/* ---------- 11. CARROSSEL INFINITO (Aceternity: Infinite Moving Cards) ---------- */
.fx-carrossel{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.fx-carrossel-trilha{
  display:flex;gap:16px;width:max-content;
  animation:fx-desliza var(--fx-vel,38s) linear infinite;
}
.fx-carrossel:hover .fx-carrossel-trilha{animation-play-state:paused}
.fx-carrossel[data-sentido="direita"] .fx-carrossel-trilha{animation-direction:reverse}
@keyframes fx-desliza{to{transform:translateX(-50%)}}

/* ---------- 12. BOTAO COM BORDA VIVA (Aceternity: Moving Border) ---------- */
.fx-borda-viva{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:2px;border-radius:999px;overflow:hidden;isolation:isolate;
  text-decoration:none;
}
.fx-borda-viva::before{
  content:"";position:absolute;z-index:-1;inset:-150%;
  background:conic-gradient(from 0deg,transparent 0deg,var(--fx-cor) 60deg,var(--fx-cor-2) 120deg,transparent 180deg);
  animation:fx-gira 4s linear infinite;
}
.fx-borda-viva > span{
  display:block;border-radius:999px;background:var(--fx-fundo);
  padding:16px 34px;font-weight:700;color:var(--fx-texto);
  min-height:48px;display:flex;align-items:center;
}
@keyframes fx-gira{to{transform:rotate(360deg)}}

/* ---------- 13. REVELAR AO ROLAR ---------- */
.fx-revela{
  opacity:0;transform:translateY(26px);
  transition:opacity .75s cubic-bezier(.16,1,.3,1),transform .75s cubic-bezier(.16,1,.3,1);
}
.fx-revela.fx-ativo{opacity:1;transform:none}
.fx-revela[data-atraso="1"]{transition-delay:.12s}
.fx-revela[data-atraso="2"]{transition-delay:.24s}
.fx-revela[data-atraso="3"]{transition-delay:.36s}
.fx-revela[data-atraso="4"]{transition-delay:.48s}

/* ---------- 15. ANTES / DEPOIS (Aceternity: Compare) ---------- */
.fx-antes-depois{
  position:relative;overflow:hidden;border-radius:16px;
  user-select:none;touch-action:none;cursor:ew-resize;line-height:0;
}
.fx-antes-depois img{width:100%;display:block}
.fx-antes-depois .fx-ad-depois{
  position:absolute;inset:0;
  clip-path:inset(0 0 0 var(--fx-corte,50%));
}
.fx-antes-depois .fx-ad-alca{
  position:absolute;top:0;bottom:0;left:var(--fx-corte,50%);
  width:3px;background:#fff;transform:translateX(-50%);
  box-shadow:0 0 14px rgba(0,0,0,.5);
}
.fx-antes-depois .fx-ad-alca::after{
  content:"⇄";position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;
  background:#fff;color:#111;font-size:18px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 18px rgba(0,0,0,.35);
}
.fx-antes-depois .fx-ad-rotulo{
  position:absolute;bottom:14px;padding:6px 12px;border-radius:999px;
  background:rgba(0,0,0,.65);color:#fff;font-size:13px;font-weight:600;line-height:1;
}
.fx-antes-depois .fx-ad-rotulo.esq{left:14px}
.fx-antes-depois .fx-ad-rotulo.dir{right:14px}

/* ---------- 16. LINHA DO TEMPO (Aceternity: Tracing Beam / Timeline) ---------- */
.fx-linha-tempo{position:relative;padding-left:38px}
.fx-linha-tempo::before{
  content:"";position:absolute;left:11px;top:0;bottom:0;width:2px;
  background:var(--fx-suave);
}
.fx-linha-tempo::after{
  content:"";position:absolute;left:11px;top:0;width:2px;
  height:var(--fx-progresso,0%);
  background:linear-gradient(180deg,var(--fx-cor),var(--fx-cor-2));
  transition:height .15s linear;
}
.fx-lt-item{position:relative;padding-bottom:34px}
.fx-lt-item::before{
  content:"";position:absolute;left:-32px;top:6px;
  width:12px;height:12px;border-radius:50%;
  background:var(--fx-fundo);border:2px solid var(--fx-cor);
}