/* =========================================================
   NIVI · efeitos.css
   Estilos dos efeitos de movimento. Funciona junto com js/efeitos.js.
   Cada bloco tem um número que bate com o GUIA-EFEITOS.md.
   ========================================================= */

/* 1. Barra de progresso de leitura (topo da página) */
.fx-progress{
  position:fixed;top:0;left:0;right:0;z-index:60;
  height:3px;
  background:var(--grad);
  transform-origin:0 50%;
  transform:scaleX(0);
  pointer-events:none;
}

/* 2. Luz que segue o mouse no topo (hero) */
.hero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(420px circle at var(--hx,70%) var(--hy,40%),rgba(139,123,255,.20),transparent 70%);
  transition:background .2s;
}

/* 3. Título do topo entrando palavra por palavra */
.fx-word{display:inline-block;opacity:0;transform:translateY(.6em) rotate(3deg);filter:blur(6px);
  animation:fxWord .9s var(--ease) forwards;animation-delay:calc(var(--i) * 70ms + 150ms)}
@keyframes fxWord{to{opacity:1;transform:none;filter:none}}

/* 4. Degradê andando dentro dos textos coloridos */
.g{background-size:220% auto;animation:fxShine 6s ease-in-out infinite alternate}
@keyframes fxShine{from{background-position:0% 50%}to{background-position:100% 50%}}

/* 5. Cards com inclinação 3D e brilho onde o mouse passa */
.fx-tilt{transform-style:preserve-3d;will-change:transform;position:relative}
.fx-tilt:not(.plan)::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.55),transparent 60%);
  opacity:0;transition:opacity .35s;mix-blend-mode:soft-light;
}
.fx-tilt:not(.hi):not(.plan)::after{background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),rgba(139,123,255,.14),transparent 60%);mix-blend-mode:normal}
.fx-tilt.is-hover:not(.plan)::after{opacity:1}

/* 6. Botões magnéticos + brilho passando no botão degradê */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn-grad::after{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);
  animation:fxSweep 3.8s var(--ease) infinite;
}
@keyframes fxSweep{0%,60%{left:-60%}100%{left:130%}}

/* 7. Linha que acompanha os passos do "Como funciona" */
@media (min-width:981px){
  .steps{--p:0}
  .steps::before,.steps::after{content:"";position:absolute;left:24px;right:24px;top:-26px;height:3px;border-radius:3px}
  .steps::before{background:rgba(255,255,255,.7)}
  .steps::after{background:var(--grad);transform-origin:0 50%;transform:scaleX(var(--p))}
  .step{transition:transform .6s var(--ease),box-shadow .6s var(--ease),background .6s}
  .step.is-lit{background:#fff;box-shadow:var(--shadow);transform:translateY(-6px)}
  .step .n{transition:transform .6s var(--ease);transform-origin:0 70%;justify-self:start}
  .step.is-lit .n{transform:scale(1.15)}
}

/* 8. Selo "Sem mensalidade" carimbando quando aparece */
.stamp.fx-stamp{animation:fxStamp .7s var(--ease) both}
@keyframes fxStamp{0%{opacity:0;transform:rotate(-8deg) scale(2.2)}60%{opacity:1;transform:rotate(10deg) scale(.92)}100%{opacity:.85;transform:rotate(8deg) scale(1)}}

/* Acessibilidade: quem pede menos movimento não vê nada disso */
@media (prefers-reduced-motion:reduce){
  .fx-progress,.hero::after{display:none}
  .fx-word{opacity:1;transform:none;filter:none;animation:none}
  .g,.btn-grad::after,.stamp.fx-stamp{animation:none}
}