/* Movimento da página. Tudo que esconde algo pra depois mostrar fica atrás de
   html.anima (posta no head só sem "reduzir movimento" e com IntersectionObserver).
   Só transform, opacity e clip-path: nada que force o celular a refazer o layout. */

/* ---------------------------------------------------------------- resposta ao toque */
.btn {
  --mx: 0px;
  --my: 0px;
  --ly: 0px;
  transform: translate3d(var(--mx), calc(var(--my) + var(--ly)), 0);
  transition: background-color var(--rapido) var(--curva), transform var(--medio) var(--curva), box-shadow var(--medio) var(--curva);
}
@media (hover: hover) {
  .btn:hover { --ly: -2px; box-shadow: var(--sombra-btn); }
  .etiqueta:hover { transform: translateY(-1px); }
  .btn-sec:hover { transform: translateY(-1px); }
}
.btn:active { --ly: 1px; transform: translate3d(var(--mx), calc(var(--my) + var(--ly)), 0) scale(.985); box-shadow: none; transition-duration: 80ms; }
.btn[disabled] { transform: none; box-shadow: none; }
.etiqueta, .btn-sec { transition: border-color var(--rapido) var(--curva), background-color var(--rapido) var(--curva), transform var(--medio) var(--mola); }
.etiqueta:active { transform: scale(.96); }
.etiqueta[aria-pressed="true"] { animation: escolhe 320ms var(--mola); }
@keyframes escolhe { 40% { transform: scale(1.06); } }

.fixo:not([hidden]) { animation: sobe-baixo 320ms var(--curva); }
.cookies:not([hidden]) { animation: sobe-baixo 420ms var(--curva) 600ms backwards; }
@keyframes sobe-baixo { from { transform: translateY(100%); opacity: 0; } }

/* Perguntas abrem com altura animada (Chrome e Edge recentes; nos outros, abre direto) */
.faq { interpolate-size: allow-keywords; }
.pergunta::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size 380ms var(--curva), content-visibility 380ms allow-discrete;
}
.pergunta[open]::details-content { block-size: auto; }
.pergunta[open] .resposta { animation: aparece 380ms var(--curva) 60ms backwards; }
@keyframes aparece { from { opacity: 0; transform: translateY(-6px); } }

/* ---------------------------------------------------------------- abertura do topo */
.anima .topo .sub,
.anima .topo .frase,
.anima .topo .envio-topo,
.anima .topo .alt-busca,
.anima .topo .pra,
.anima .topo .garantias { animation: sobe 640ms var(--curva) backwards; }

/* título: cada palavra sobe da sua máscara, 70ms depois da anterior */
.anima .topo h1 .pal > span { animation: palavra 720ms var(--curva) calc(80ms + var(--w, 0) * 70ms) backwards; }
@keyframes palavra { from { transform: translate3d(0, 108%, 0); } }
.anima .topo .pra { animation-delay: 0ms; }
.anima .topo .sub { animation-delay: 420ms; }
.anima .topo .frase,
.anima .topo .envio-topo { animation-delay: 500ms; }
.anima .topo .alt-busca { animation-delay: 580ms; }
.anima .topo .garantias { animation-delay: 660ms; }
@keyframes sobe { from { opacity: 0; transform: translate3d(0, 20px, 0); } }

/* Um chamado só, depois que tudo chegou: um anel verde sai do botão. */
.anima .topo .frase-btn { animation: chama 1100ms var(--curva) 1900ms 1; }
@keyframes chama {
  from { box-shadow: 0 0 0 0 rgba(11, 122, 75, .5); }
  to { box-shadow: 0 0 0 16px rgba(11, 122, 75, 0); }
}

/* ---------------------------------------------------------------- entradas ao rolar */
.anima [data-revela],
.anima [data-revela-grupo] > *,
.anima [data-revela-perguntas] .pergunta {
  transition:
    opacity var(--entrada) var(--curva) calc(var(--i, 0) * 90ms),
    transform var(--entrada) var(--curva) calc(var(--i, 0) * 90ms);
}
.anima [data-revela]:not(.visto),
.anima [data-revela-grupo] > :not(.visto),
.anima [data-revela-perguntas] .pergunta:not(.visto) {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
}
/* Folha: sobe um pouco mais e chega no tamanho certo */
.anima [data-revela="folha"] {
  transition:
    opacity 520ms var(--curva) calc(120ms + var(--i, 0) * 80ms),
    transform 700ms var(--curva) calc(120ms + var(--i, 0) * 80ms);
}
.anima [data-revela="folha"]:not(.visto) { transform: translate3d(0, 24px, 0) scale(.985); }

/* ---------------------------------------------------------------- a folha do topo sendo lida */
.anima .topo-exemplo .cartao { overflow: hidden; }
.anima .topo-exemplo .cartao::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -56px;
  height: 56px;
  background: linear-gradient(180deg, rgba(11, 122, 75, 0), rgba(11, 122, 75, .16));
  border-bottom: 2px solid var(--verde);
  opacity: 0;
  pointer-events: none;
}
.anima .topo-exemplo.visto .cartao::after { animation: varre 1300ms cubic-bezier(.45, 0, .55, 1) 450ms backwards; }
@keyframes varre {
  0% { top: -56px; opacity: 1; }
  85% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

.topo-exemplo .reqs .req:nth-child(1) { --k: 0; }
.topo-exemplo .reqs .req:nth-child(2) { --k: 1; }
.topo-exemplo .reqs .req:nth-child(3) { --k: 2; }
.topo-exemplo .reqs .req:nth-child(4) { --k: 3; }

/* marca-texto: corre da esquerda pra direita */
.anima .topo-exemplo:not(.visto) .req-ok { background-size: 0% 100%; border-color: var(--linha); }
.anima .topo-exemplo:not(.visto) .req-ok .ico { opacity: 0; }
.anima .topo-exemplo.visto .req-ok { animation: marca 480ms var(--curva) calc(950ms + var(--k, 0) * 220ms) backwards; }
.anima .topo-exemplo.visto .req-ok .ico { animation: surge 240ms var(--curva) calc(1250ms + var(--k, 0) * 220ms) backwards; }
@keyframes marca { from { background-size: 0% 100%; border-color: var(--linha); } }
@keyframes surge { from { opacity: 0; transform: scale(.4); } }

/* caneta: o risco vermelho embaixo do que falta */
.anima .topo-exemplo:not(.visto) .req-falta { background-size: 0 2px; }
.anima .topo-exemplo.visto .req-falta { animation: risco 420ms var(--curva) calc(1500ms + var(--k, 0) * 220ms) backwards; }
@keyframes risco { from { background-size: 0 2px; } }

/* medidor: enche segmento por segmento, depois o "3 de 9" */
.topo-exemplo .medidor-segs i:nth-child(1) { --k: 0; }
.topo-exemplo .medidor-segs i:nth-child(2) { --k: 1; }
.topo-exemplo .medidor-segs i:nth-child(3) { --k: 2; }
.topo-exemplo .medidor-segs i:nth-child(4) { --k: 3; }
.topo-exemplo .medidor-segs i:nth-child(5) { --k: 4; }
.anima .topo-exemplo:not(.visto) .medidor-segs i.cheio { background: var(--linha); }
.anima .topo-exemplo.visto .medidor-segs i.cheio { animation: enche 260ms var(--mola) calc(1950ms + var(--k, 0) * 120ms) backwards; }
@keyframes enche { from { background: var(--linha); } 60% { transform: scaleY(1.25); } }
.anima .topo-exemplo:not(.visto) .medidor-txt { opacity: 0; }
.anima .topo-exemplo.visto .medidor-txt { animation: sobe 420ms var(--curva) 2350ms backwards; }

/* ---------------------------------------------------------------- funil */
/* cada tela nova entra em cascata; as vagas e os planos caem como folhas */
.anima .tela > * { animation: sobe 520ms var(--curva) backwards; }
.anima .tela > :nth-child(2) { animation-delay: 70ms; }
.anima .tela > :nth-child(3) { animation-delay: 140ms; }
.anima .tela > :nth-child(4) { animation-delay: 210ms; }
.anima .tela > :nth-child(n+5) { animation-delay: 280ms; }
.anima .vagas-lista > li,
.anima .planos > *,
.anima .res-grade > *,
.anima .msgs > * { animation: cai 760ms var(--mola) backwards; }
.anima .vagas-lista > li:nth-child(1), .anima .planos > :nth-child(1), .anima .res-grade > :nth-child(1), .anima .msgs > :nth-child(1) { animation-delay: 260ms; }
.anima .vagas-lista > li:nth-child(2), .anima .planos > :nth-child(2), .anima .res-grade > :nth-child(2), .anima .msgs > :nth-child(2) { animation-delay: 380ms; --rot: 2deg; }
.anima .vagas-lista > li:nth-child(3), .anima .planos > :nth-child(3), .anima .res-grade > :nth-child(3), .anima .msgs > :nth-child(3) { animation-delay: 500ms; }
@keyframes cai { from { opacity: 0; transform: translateY(40px) rotate(var(--rot, -2deg)) scale(.97); } }
.anima .etapas li { animation: entra-lado 420ms var(--curva) backwards; }
@keyframes entra-lado { from { opacity: 0; transform: translateX(-16px); } }
.anima .etapa-marca .ico { animation: surge 320ms var(--mola) 120ms backwards; }

/* palavras: o botão dá um pulinho quando troca */
.palco-btn[aria-pressed="true"] { animation: escolhe 360ms var(--mola); }

/* ---------------------------------------------------------------- ícones que se desenham */
/* Cada traço tem pathLength=1: o ícone aparece desenhado quando o bloco entra na tela. */
.ico-d { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 760ms var(--curva) calc(180ms + var(--i, 0) * 90ms); }
.anima [data-revela]:not(.visto) .ico-d,
.anima [data-revela-grupo] > :not(.visto) .ico-d { stroke-dashoffset: 1; }
.anima .topo .garantias .ico-d { animation: desenha 760ms var(--curva) calc(900ms + var(--k, 0) * 120ms) backwards; }
.anima .topo .garantias li:nth-child(2) .ico-d { --k: 1; }
.anima .topo .garantias li:nth-child(3) .ico-d { --k: 2; }
@keyframes desenha { from { stroke-dashoffset: 1; } }
.anima .passos3:not(:has(> .visto))::before { transform: scaleX(0); }
.anima .passos3::before { transition: transform 1100ms var(--curva) 300ms; }
@media (prefers-reduced-motion: reduce) {
  .ico-d { stroke-dashoffset: 0 !important; transition: none; }
}

/* ---------------------------------------------------------------- links: o sublinhado se desenha de novo no hover */
.link-btn,
.rodape-links a,
.autoriza-link a {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1.5px;
}
@media (hover: hover) {
  .link-btn:hover,
  .rodape-links a:hover,
  .autoriza-link a:hover { animation: sublinha 520ms var(--curva); }
}
@keyframes sublinha { from { background-size: 0% 1.5px; } }

@media (prefers-reduced-motion: reduce) {
  .btn { --mx: 0px; --my: 0px; }
  .link-btn:hover, .rodape-links a:hover, .autoriza-link a:hover { animation: none; }
}