/* ============================================================
   Atlas Wealth, animações de reforço (build-up estilo scroll)
   Carregado depois de styles.css. Só camada visual, nada de layout.

   NOTA: estas animações rodam MESMO com prefers-reduced-motion.
   Pedido explícito do cliente e o movimento é suave (fade, leve
   subida, traço de gráfico). Por isso ficam fora de @media e
   reafirmam o reveal, sobrescrevendo o bloco "reduce" de styles.css.
   ============================================================ */

/* ---------- reveal: mais lento e escalonado, para dar tempo de perceber ---------- */
.reveal.will-animate{opacity:0;transform:translateY(26px);
  transition:opacity 1.35s var(--ease), transform 1.35s var(--ease)}
.reveal.will-animate.in{opacity:1;transform:none}
.reveal.will-animate[data-d="1"]{transition-delay:.18s}
.reveal.will-animate[data-d="2"]{transition-delay:.36s}
.reveal.will-animate[data-d="3"]{transition-delay:.54s}
.reveal.will-animate[data-d="4"]{transition-delay:.72s}
.reveal.will-animate[data-d="5"]{transition-delay:.90s}
.reveal.will-animate[data-d="6"]{transition-delay:1.08s}

/* ---------- hero: entrada bem gradual, um elemento de cada vez ---------- */
.hero .reveal.will-animate{transition-duration:1.45s;transform:translateY(32px)}
.hero .reveal.will-animate[data-d="1"]{transition-delay:.35s}
.hero .reveal.will-animate[data-d="2"]{transition-delay:.70s}
.hero .reveal.will-animate[data-d="3"]{transition-delay:1.05s}
/* os dois botões do hero entram em sequência */
.hero__cta.will-animate .btn{opacity:0;transform:translateY(12px);
  transition:opacity .9s var(--ease), transform .9s var(--ease)}
.hero__cta.will-animate.in .btn{opacity:1;transform:none;transition-delay:1.35s}
.hero__cta.will-animate.in .btn:last-child{transition-delay:1.6s}

/* ---------- quem atendemos ("Para cada perfil, uma estratégia"): cascata própria e mais lenta ---------- */
#publicos .reveal.will-animate{transition-duration:1.4s;transform:translateY(28px)}
#publicos > .wrap > .reveal.will-animate{transition-delay:.05s}
#publicos .tabs.reveal.will-animate{transition-delay:.35s}
#publicos .card.reveal.will-animate{transition-delay:.60s}
#publicos .card.reveal.will-animate[data-d="1"]{transition-delay:.85s}
#publicos .card.reveal.will-animate[data-d="2"]{transition-delay:1.10s}
#publicos .grid.reveal.will-animate{transition-delay:.60s}
#publicos > .wrap > div[style*="margin-top:40px"].reveal.will-animate{transition-delay:1.35s}

/* ---------- resumo vivo do wizard ("montando o seu perfil") ---------- */
.wiz-summary{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.wiz-sum{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 13px 6px 8px;border-radius:99px;
  background:var(--off);border:1px solid var(--line-panel);
  font-size:12.5px;color:var(--muted);line-height:1;
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease);
}
.wiz-sum__dot{
  width:17px;height:17px;border-radius:50%;flex:0 0 auto;
  border:1.5px solid var(--line);background:transparent;color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.wiz-sum__dot svg{width:10px;height:10px;opacity:0;transition:opacity .25s var(--ease)}
.wiz-sum__k{font-weight:600;letter-spacing:.02em}
.wiz-sum__v{display:none;font-weight:600;color:var(--ink)}
.wiz-sum.is-set{background:#fff;border-color:var(--green);box-shadow:0 0 0 3px rgba(46,107,71,.08)}
.wiz-sum.is-set .wiz-sum__dot{background:var(--green);border-color:var(--green)}
.wiz-sum.is-set .wiz-sum__dot svg{opacity:1}
.wiz-sum.is-set .wiz-sum__k{display:none}
.wiz-sum.is-set .wiz-sum__v{display:inline}

/* ---------- linha de contagem no resultado ---------- */
.wiz-res__count{margin-top:10px;font-size:14.5px;color:var(--muted);line-height:1.5}
.wiz-res__count b{font-family:'Lora',serif;font-weight:600;color:var(--green);font-size:17px}

/* ============================================================
   Animações
   ============================================================ */

/* ---- hero: gráfico que se levanta ---- */
.hero__chart.chart-anim .hc-area{opacity:0}
.hero__chart.chart-anim .hc-dash{opacity:0}
.hero__chart.chart-anim .hc-grid{opacity:0}
.hero__chart.chart-anim .hc-label{opacity:0;transform:translateX(-4px)}
.hero__chart.chart-anim .hc-bar{transform:scaleY(0);transform-box:fill-box;transform-origin:50% 100%}
.hero__chart.chart-anim .hc-dot{transform:scale(0);transform-box:fill-box;transform-origin:50% 50%;opacity:0}
.hero__chart.chart-anim.is-drawn .hc-area{opacity:1;transition:opacity 1.4s var(--ease) .6s}
.hero__chart.chart-anim.is-drawn .hc-dash{opacity:1;transition:opacity 1.2s var(--ease) 1.8s}
.hero__chart.chart-anim.is-drawn .hc-grid{opacity:1;transition:opacity 1.1s var(--ease) .3s}
.hero__chart.chart-anim.is-drawn .hc-label{opacity:1;transform:none;transition:opacity 1s var(--ease) 2s, transform 1s var(--ease) 2s}
.hero__chart.chart-anim.is-drawn .hc-bar{transform:scaleY(1)}
.hero__chart.chart-anim.is-drawn .hc-dot{transform:scale(1);opacity:1}
/* o ponto final chama atenção: um selo que pulsa, sutil e contínuo, depois que o gráfico termina de se desenhar */
.hero__chart.chart-anim.is-drawn .hc-dot--ring{
  animation:awChartPing 2.6s var(--ease) 2.6s infinite;
  transform-box:fill-box;transform-origin:50% 50%;
}
@keyframes awChartPing{
  0%{r:11;stroke-opacity:.32}
  70%{r:20;stroke-opacity:0}
  100%{r:20;stroke-opacity:0}
}

/* ---- wizard: opções entram em cascata ---- */
.wiz-anim .wiz__panel.is-active .wiz-opt{
  animation:awOptPop .55s var(--ease) backwards;
  animation-delay:calc(var(--i, 0) * 65ms);
}
@keyframes awOptPop{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* seleção com micro-resposta */
.wiz-anim .wiz-opt.is-on{animation:awSelPop .32s var(--ease)}
@keyframes awSelPop{0%{transform:translateY(-2px) scale(.99)}55%{transform:translateY(-2px) scale(1.015)}100%{transform:translateY(-2px) scale(1)}}
.wiz-opt.is-on .wiz-opt__check{animation:awCheckPop .38s var(--ease)}
@keyframes awCheckPop{0%{transform:scale(0)}60%{transform:scale(1.18)}100%{transform:scale(1)}}

/* chip do resumo que acabou de ser preenchido */
.wiz-sum.just-set{animation:awSumPop .42s var(--ease)}
@keyframes awSumPop{0%{transform:scale(.9)}50%{transform:scale(1.06)}100%{transform:scale(1)}}

/* barra de progresso com brilho sutil */
.wiz__bar-fill{position:relative;overflow:hidden}
.wiz-anim .wiz__bar-fill::after{
  content:"";position:absolute;inset:0;border-radius:99px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-120%);animation:awShimmer 2.6s var(--ease) infinite}
@keyframes awShimmer{0%{transform:translateX(-120%)}55%{transform:translateX(320%)}100%{transform:translateX(320%)}}

/* ---- método: a jornada do cliente descrita pela animação ---- */
/* setas com fluxo contínuo (o caminho entre as etapas) */
.method-flow .method-arrow line{animation:awArrowFlow 1.25s linear infinite}
@keyframes awArrowFlow{from{stroke-dashoffset:0}to{stroke-dashoffset:-16}}
.method-flow .method-arrow path{animation:awArrowTip 1.9s var(--ease) infinite}
@keyframes awArrowTip{0%,100%{transform:translateX(0);opacity:.7}50%{transform:translateX(3px);opacity:1}}
/* ao entrar na tela, as 3 etapas acendem em sequência (01 -> 02 -> 03) */
.method-card.in .method-step:nth-of-type(1) .method-circle{animation:awStepLight .7s var(--ease) .15s backwards}
.method-card.in .method-step:nth-of-type(2) .method-circle{animation:awStepLight .7s var(--ease) .70s backwards}
.method-card.in .method-step:nth-of-type(3) .method-circle{animation:awStepLight .7s var(--ease) 1.25s backwards}
.method-card.in .method-step:nth-of-type(1) .method-step__label,
.method-card.in .method-step:nth-of-type(1) .method-step__desc{animation:awFadeUp .7s var(--ease) .25s backwards}
.method-card.in .method-step:nth-of-type(2) .method-step__label,
.method-card.in .method-step:nth-of-type(2) .method-step__desc{animation:awFadeUp .7s var(--ease) .80s backwards}
.method-card.in .method-step:nth-of-type(3) .method-step__label,
.method-card.in .method-step:nth-of-type(3) .method-step__desc{animation:awFadeUp .7s var(--ease) 1.35s backwards}
@keyframes awStepLight{0%{transform:scale(.6);opacity:0}55%{transform:scale(1.12);opacity:1}100%{transform:scale(1);opacity:1}}

/* ---- resultado: soluções sobem em cascata ---- */
#wizResult.wiz-in .wiz-sol{
  animation:awSolRise .6s var(--ease) backwards;
  animation-delay:calc(var(--i, 0) * 70ms);
}
@keyframes awSolRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
#wizResult.wiz-in .wiz-res__count{animation:awFadeUp .7s var(--ease) backwards;animation-delay:.05s}
@keyframes awFadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---- botão flutuante do WhatsApp: chega depois que o hero se assenta ---- */
.wa{animation:awFloatIn .7s var(--ease) 1.7s backwards}
@keyframes awFloatIn{from{opacity:0;transform:translateY(18px) scale(.85)}to{opacity:1;transform:none}}

/* Movimento continuo (sem fim) deve parar para quem pediu menos animacao.
   As entradas suaves continuam, conforme pedido do cliente. */
@media (prefers-reduced-motion: reduce){
  .method-flow .method-arrow line,
  .method-flow .method-arrow path,
  .wiz-anim .wiz__bar-fill::after,
  .hero__chart.chart-anim.is-drawn .hc-dot--ring,
  .wa::after{ animation:none !important; }
}
