/* ==========================================================================
   Andréia Freitas — INTERAÇÕES / MOVIMENTO
   Carregado depois das seções. Clima calmo: nada pisca, salta ou gira rápido.
   O estado "escondido" só vale com a classe .js no <html> (sem JS, tudo aparece).
   Com prefers-reduced-motion, nada se mexe: tudo já aparece pronto.
   ========================================================================== */

@property --sweep{ syntax:'<angle>'; inherits:false; initial-value:360deg; }

/* 1. surgir ao rolar (uma vez só; 90ms entre um item e o próximo) */
.js .rv{
  transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--d, 0) * 90ms);
}
/* escondido só até entrar; ao entrar, volta à opacidade e posição naturais
   do elemento (alguns têm opacidade própria, como o subtítulo de "Como ajudo") */
.js .rv:not(.in){ opacity:0; transform:translateY(18px); }

/* 2. anel de pincel da Hero se desenhando (o do "Quem é" não anima).
   Sem suporte a @property, o anel simplesmente aparece pronto. */
.af-stage .af-brush{
  -webkit-mask:conic-gradient(from 150deg, #000 var(--sweep), transparent 0);
          mask:conic-gradient(from 150deg, #000 var(--sweep), transparent 0);
  animation:af-ring-draw 2.2s cubic-bezier(.45,.05,.25,1) .35s both;
}
@keyframes af-ring-draw{ from{ --sweep:0deg; } to{ --sweep:360deg; } }

/* 3. borboletas de fundo "respirando" (translate/scale se somam à rotação delas) */
.af-quem__deco,
.af-acol__deco{ animation:af-breathe 14s ease-in-out infinite; }
.af-quem__deco--r{ animation-duration:17s; animation-delay:-6s; }
@keyframes af-breathe{
  0%, 100%{ translate:0 0; scale:1; }
  50%     { translate:8px -12px; scale:1.04; }
}

/* 4. rastro da trajetória se desenhando com a rolagem (desktop) */
.js .af-traj__mask{ stroke-dashoffset:1; }
.js .af-traj__pt{
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
  scale:.6;
  transition:opacity .6s ease, scale .6s cubic-bezier(.3,1.4,.5,1);
}
.js .af-traj__pt.on{ opacity:1; scale:1; }

/* 5. passos acendendo em sequência: a linha avança e os números acendem
   (acesos = a cor de hoje, o dourado de texto) */
.js .af-passo__steps::before{
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 1.8s cubic-bezier(.4,0,.2,1) .2s;
}
.js .af-passo__steps.lit::before{ transform:scaleX(1); }
.js .af-passo__num{
  color:rgba(138,124,58,.28);
  transition:color .7s ease, text-shadow .7s ease;
}
.js .af-passo__steps.lit li:nth-child(1) .af-passo__num{ transition-delay:.2s; }
.js .af-passo__steps.lit li:nth-child(2) .af-passo__num{ transition-delay:.85s; }
.js .af-passo__steps.lit li:nth-child(3) .af-passo__num{ transition-delay:1.5s; }
.js .af-passo__steps.lit .af-passo__num{
  color:var(--gold-text);
  text-shadow:0 0 22px rgba(181,169,100,.35);
}

/* 6. destaque leve ao passar o mouse (só em quem tem mouse) */
@media (hover:hover){
  /* (o JS tira .rv/.in de cada elemento quando ele termina de surgir,
     para estes transforms e transições valerem) */
  .af-passo__steps li > *,
  .af-traj__list li > *,
  .af-rec__list span,
  .af-acol__list li{ transition:transform .45s cubic-bezier(.2,.7,.2,1), color .3s; }

  .af-passo__steps li:hover > *{ transform:translateY(-4px); }
  .af-passo__steps li:hover h3{ color:var(--gold-text); }
  .af-traj__list li:hover > *{ transform:translateY(-4px); }

  .af-rec__list li:hover span{ transform:translateX(6px); }
  .af-rec__list li:hover::before{ color:var(--ink); }

  .af-acol__list li:hover{ transform:translateX(6px); }
  .af-acol__check{ transition:background .3s, color .3s, border-color .3s; }
  .af-acol__list li:hover .af-acol__check{ background:var(--gold); color:var(--slate); border-color:var(--gold); }

  .af-hero__cta,
  .af-cta__btn{ transition:background .25s, transform .3s, box-shadow .3s; }
  .af-hero__cta:hover,
  .af-cta__btn:hover{ transform:translateY(-2px); box-shadow:0 18px 30px -14px rgba(34,51,63,.55); }
}

/* movimento reduzido: tudo aparece no lugar, desenhado e aceso, e parado */
@media (prefers-reduced-motion:reduce){
  .js .rv{ transition:none; }   /* o JS já marca tudo como .in: aparece no lugar */
  .af-stage .af-brush{ animation:none; -webkit-mask:none; mask:none; }
  .af-quem__deco,
  .af-acol__deco{ animation:none; }
  .js .af-traj__mask{ stroke-dashoffset:0; }
  .js .af-traj__pt{ opacity:1; scale:1; }
  .js .af-passo__steps::before{ transform:none; transition:none; }
  .js .af-passo__num{ color:var(--gold-text); transition:none; }
}