/* AdiantaZap — motion.css
   Camada 3: movimento e microinteração da landing page.
   DS Coinbase: sutil, premium, leve. Nada de bounce, parallax ou loop.

   Regras de ouro (não quebrar):
   · anima só transform e opacity — nunca top/left/width/height/box-shadow
   · distância de entrada 12–16px, nunca mais que 20px
   · duração 120–520ms; nada além disso parece lentidão
   · QR do Pix NUNCA anima (é leitura de câmera)
   · sem JS o conteúdo aparece normal: o estado inicial só existe sob .js-motion

   Depende de: tokens.css (cores e tokens --motion-*) e components.css. */

/* Curvas e durações vivem em tokens.css (--motion-*) desde a v2: a home, o app
   e as páginas internas precisam do MESMO easing, e três arquivos definindo
   `ease` cada um por conta própria era a origem das transições desencontradas. */

/* ==========================================================================
   1. SCROLL REVEAL — "montagem" dos componentes
   JS adiciona .js-motion no <html>, marca .is-in quando o bloco entra em tela.
   O delay de cada irmão vem de --i (0,1,2…), definido pelo motion.js.
   ========================================================================== */

.js-motion [data-reveal]{
  opacity:0;
  transform:translate3d(0,72px,0) scale(.94);
  transition:
    opacity 560ms var(--motion-ease-out),
    transform 800ms cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i,0) * var(--motion-stagger));
}

/* anti-flash: enquanto .motion-ready não entra (1 frame depois de .js-motion),
   nada transiciona — senão o bloco faz fade-out de 320ms até sumir, em vez de
   já começar escondido */
.js-motion:not(.motion-ready) [data-reveal],
.js-motion:not(.motion-ready) [data-reveal] *{
  transition:none !important;
}

.js-motion [data-reveal].is-in{
  opacity:1;
  transform:none;
}

/* peças internas montam DEPOIS do corpo do card: é isso que lê como
   "montagem" e não como "fade genérico"
   Usa ANIMAÇÃO, não transition: assim o delay não fica pendurado no hover
   depois (com transition-delay, o :hover do .ico-box herdaria os 90ms + i*60ms).
   fill-mode backwards segura o estado inicial durante o delay e devolve o
   controle ao CSS no fim — o hover volta a responder normalmente. */
.js-motion [data-reveal]:not(.is-in) .chip,
.js-motion [data-reveal]:not(.is-in) .ico-box,
.js-motion [data-reveal]:not(.is-in) .step-dot{
  opacity:0;
  transform:scale(.86);
}

.js-motion [data-reveal].is-in .ico-box{
  animation:part-in var(--motion-dur-2) var(--motion-ease-out) backwards;
  animation-delay:calc(var(--i,0) * var(--motion-stagger) + 60ms);
}
.js-motion [data-reveal].is-in .chip,
.js-motion [data-reveal].is-in .step-dot{
  animation:part-in var(--motion-dur-2) var(--motion-ease-soft) backwards;
  animation-delay:calc(var(--i,0) * var(--motion-stagger) + 120ms);
}

@keyframes part-in{
  from{ opacity:0; transform:scale(.86); }
  to{ opacity:1; transform:none; }
}

/* bloco de cabeçalho de seção entra primeiro, sem deslocamento vertical
   grande: é título, não card */
.js-motion [data-reveal="fade"]{
  transform:scale(.992);
}

/* passo 1-2-3: a linha de montagem. O corpo sobe e a peça chega 90ms depois,
   de baixo para cima, como quem encaixa a peça na esteira. */
@keyframes dot-in{
  from{ opacity:0; transform:scale(.7) translate3d(0,6px,0); }
  to{ opacity:1; transform:none; }
}
.js-motion [data-reveal="step"]:not(.is-in) > .step-dot{
  opacity:0;
  transform:scale(.7) translate3d(0,6px,0);
}
.js-motion [data-reveal="step"].is-in > .step-dot{
  animation-name:dot-in;
}

/* ==========================================================================
   2. HERO — montagem única no carregamento (está acima da dobra,
   scroll reveal aqui seria invisível e o card apareceria "pulando")
   ========================================================================== */

.js-motion .hero-panel .mock > *{
  opacity:0;
  transform:translate3d(0,10px,0);
  animation:mock-in var(--motion-dur-3) var(--motion-ease-out) forwards;
}
.js-motion .hero-panel .mock > :nth-child(1){ animation-delay:80ms; }
.js-motion .hero-panel .mock > :nth-child(2){ animation-delay:200ms; }
.js-motion .hero-panel .mock > :nth-child(3){ animation-delay:300ms; }
.js-motion .hero-panel .mock > :nth-child(4){ animation-delay:380ms; }
.js-motion .hero-panel .mock > :nth-child(5){ animation-delay:440ms; }

@keyframes mock-in{
  to{ opacity:1; transform:none; }
}

/* o painel verde entra com um leve zoom-out, como se a peça fosse
   colocada na mesa — 1,5% é o máximo antes de virar "efeito" */
.js-motion .hero-panel{
  animation:panel-in var(--motion-dur-4) var(--motion-ease-out) both;
}
@keyframes panel-in{
  from{ opacity:0; transform:scale(.985); }
  to{ opacity:1; transform:none; }
}

/* ==========================================================================
   3. CARDS — hover sem mentir sobre o que é clicável
   Card informativo: só a borda esquenta e o ícone responde.
   Card acionável (.card--lift): sobe 2px, porque aí o lift é promessa de clique.
   ========================================================================== */

.card{
  transition:border-color var(--motion-dur-2) var(--motion-ease);
}
@media (hover:hover){
  .card:hover{ border-color:rgba(91,97,110,.34); }
  .card:hover .ico-box{
    background:var(--brand-soft);
    color:var(--brand-text);
    transform:scale(1.04);
  }
}

.ico-box{
  transition:
    background-color var(--motion-dur-2) var(--motion-ease),
    color var(--motion-dur-2) var(--motion-ease),
    transform var(--motion-dur-2) var(--motion-ease-soft);
}

.card--lift{
  transition:
    transform var(--motion-dur-2) var(--motion-ease),
    border-color var(--motion-dur-2) var(--motion-ease);
}
@media (hover:hover){
  .card--lift:hover{
    transform:translateY(-2px);
    border-color:var(--brand-line);
  }
}

/* selo numerado dos benefícios: reage ao hover do card, não do selo */
.chip-brand{
  transition:
    background-color var(--motion-dur-2) var(--motion-ease),
    color var(--motion-dur-2) var(--motion-ease);
}

/* na banda escura o hairline cinza do card some; o hover acende o verde */
.section--night .card:hover{ border-color:var(--brand-line); }

/* o card noturno não é clicável: nada de hover prometendo clique, e o
   hairline dele é branco translúcido, não o cinza do card claro */
.card--night:hover{ border-color:var(--night-line-strong); }

/* o halo do fundo é ESTÁTICO. Se um dia alguém pedir movimento aí, ele passa
   a competir com o reveal dos cards e derruba o frame em celular médio. */
.section--night,
.card--night{
  background-attachment:scroll;
}

/* ==========================================================================
   4. BOTÕES — 1px de subida no hover, pressão no toque
   ========================================================================== */

/* Botões: base, hover e active vivem em components.css §2 (todas as páginas
   precisam do mesmo gesto). Aqui fica só o que é específico da home. */

/* botão dentro do card em hover NÃO sobe junto: evita 2 movimentos */
.card:hover .btn{ transform:none; }
.card:hover .btn:active{ transform:scale(.98); }

.btn-primary{ position:relative; overflow:hidden; }
/* brilho que passa uma vez no hover do primário — 520ms, só em ponteiro fino */
@media (hover:hover) and (pointer:fine){
  .btn-primary:not(.btn--beam)::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.28) 50%,transparent 80%);
    transform:translate3d(-120%,0,0);
    opacity:0;
    pointer-events:none;
  }
  .btn-primary:not(.btn--beam):hover::after{
    animation:sheen var(--motion-dur-4) var(--motion-ease-out);
  }
  @keyframes sheen{
    0%{ opacity:0; transform:translate3d(-120%,0,0); }
    30%{ opacity:1; }
    100%{ opacity:0; transform:translate3d(120%,0,0); }
  }
}

/* ==========================================================================
   5. MINI-GERADOR — feedback tátil
   .seg: seleção com pop curto; valores recalculados piscam (ver PZMotion.flash)
   ========================================================================== */

.seg label{
  transition:
    background-color var(--motion-dur-2) var(--motion-ease),
    color var(--motion-dur-2) var(--motion-ease),
    box-shadow var(--motion-dur-2) var(--motion-ease),
    transform var(--motion-dur-1) var(--motion-ease);
}
.seg label:active{ transform:scale(.98); }
.seg input:checked + label{ animation:seg-pop var(--motion-dur-3) var(--motion-ease-soft); }
@keyframes seg-pop{
  0%{ transform:scale(.97); }
  60%{ transform:scale(1.015); }
  100%{ transform:scale(1); }
}

.js-motion .is-flash,
.is-flash{
  animation:value-flash 420ms var(--motion-ease-out);
}
@keyframes value-flash{
  0%{ transform:translate3d(0,0,0); }
  25%{ transform:translate3d(0,-2px,0); color:var(--brand-text); }
  100%{ transform:translate3d(0,0,0); }
}

/* o QR nunca anima — e o texto/payload também não pisca */
.pix-qr,
.pix-qr svg,
.pix-code,
[data-qr]{
  animation:none !important;
  transition:none !important;
  transform:none !important;
}

/* ==========================================================================
   6. FAQ — abre com fade curto do texto; o "+" já gira no landing.css
   (não animamos altura: <details> não anima barato e trava em mobile)
   ========================================================================== */

details.faq{
  transition:border-color var(--motion-dur-2) var(--motion-ease);
}
details.faq summary{
  transition:background-color var(--motion-dur-2) var(--motion-ease);
}
@media (hover:hover){
  details.faq summary:hover{ background:var(--bg-elev); }
}
details.faq[open]{ border-color:var(--brand-line); }
details.faq[open] .answer{
  animation:faq-in var(--motion-dur-2) var(--motion-ease-out) both;
}
@keyframes faq-in{
  from{ opacity:0; transform:translate3d(0,-4px,0); }
  to{ opacity:1; transform:none; }
}
/* o “+” pousa 120ms depois do card: detalhe que faz a lista parecer montada */
.js-motion details.faq.is-in summary .plus{
  animation:plus-pop 240ms var(--motion-spring) 120ms backwards;
}
@keyframes plus-pop{
  from{ opacity:0; transform:scale(.8); }
  to{ opacity:1; transform:none; }
}

/* ==========================================================================
   7. ACESSIBILIDADE — com movimento reduzido, tudo existe no lugar final
   ========================================================================== */

@media (prefers-reduced-motion: reduce){
  .js-motion [data-reveal],
  .js-motion [data-reveal] .chip,
  .js-motion [data-reveal] .ico-box,
  .js-motion [data-reveal] .step-dot{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
    animation:none !important;
  }
  .js-motion .hero-panel,
  .js-motion .hero-panel .mock > *{
    opacity:1 !important;
    transform:none !important;
    animation:none !important;
  }
  .btn-primary:hover::after,
  .seg input:checked + label,
  .is-flash,
  details.faq[open] .answer{
    animation:none !important;
  }
  .btn:hover,
  .card--lift:hover,
  .card:hover .ico-box{ transform:none !important; }
}