/* Criare FX — acabamentos premium reutilizáveis (inspirado no acervo: flux-motion, finex)
   Inclua: <link rel="stylesheet" href="fx/premium-fx.css">
   Pareie com fx/aurora.js (fundo shader) e ponha o conteúdo com position:relative; z-index:1. */

:root{
  --cv-cyan:#22D3EE; --cv-indigo:#6366F1; --cv-violet:#A855F7;
  --cv-grad:linear-gradient(120deg,#22D3EE,#6366F1,#A855F7);
  --cv-bg:#0a0a0c;
}

/* conteúdo sempre acima da aurora */
.fx-layer{position:relative;z-index:1}

/* grid sutil sobre o fundo */
.fx-grid{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 70% at 50% 0%,#000 0%,transparent 75%);
          mask-image:radial-gradient(120% 70% at 50% 0%,#000 0%,transparent 75%);}

/* grão fotográfico (textura premium) */
.fx-grain{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* texto que irradia luz */
.text-glow{text-shadow:0 0 30px rgba(255,255,255,.12)}
/* headline com gradiente de marca */
.text-grad{background:var(--cv-grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* botão neon (estilo finex VIEW ICONS) */
.btn-neon{position:relative;display:inline-flex;align-items:center;gap:.5rem;
  padding:.85rem 1.6rem;border-radius:999px;font-weight:600;letter-spacing:.01em;color:#fff;
  background:rgba(99,102,241,.12);border:1px solid var(--cv-indigo);
  box-shadow:0 0 20px rgba(99,102,241,.5),inset 0 0 12px rgba(99,102,241,.18);
  transition:transform .25s,box-shadow .25s,background .25s}
.btn-neon:hover{transform:translateY(-2px) scale(1.02);background:rgba(99,102,241,.2);
  box-shadow:0 0 38px rgba(99,102,241,.7),inset 0 0 18px rgba(34,211,238,.3)}

/* card com borda em gradiente (máscara) */
.card-grad{position:relative;border-radius:1.25rem;background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.07);transition:transform .25s,border-color .25s}
.card-grad:hover{transform:translateY(-4px)}
.card-grad::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--cv-grad);opacity:0;transition:opacity .3s;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.card-grad:hover::before{opacity:.9}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .btn-neon,.card-grad{transition:none}
}