/* =====================================================================================
   Sem Assinatura · animações nomeadas (usar junto com tokens.css e animacoes.js)
   varredura · frases · contador · revelar · desbloquear · notificacao · reacao · surgir · toque
   Só transform/opacity nas partes contínuas (rodam no compositor, leves no celular).
   Movimento reduzido: tudo vira estado final, sem deslocamento (bloco no fim do arquivo).
   ===================================================================================== */

/* ---------- varredura: a cena da busca (radar + recibos voando + anel de progresso real) ---------- */
.vr {
  --vr-tam: 220px;
  display: grid;
  justify-items: center;
  gap: var(--espaco-3);
  text-align: center;
  overflow-x: clip;
  padding: var(--espaco-2) 0;
}
.vr-palco { position: relative; width: var(--vr-tam); height: var(--vr-tam); }
.vr-halo {
  position: absolute; inset: -18%; border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 132, 255, .30), rgba(196, 125, 255, .10) 45%, transparent 70%);
  animation: anim-respira 3.2s ease-in-out infinite;
}
.vr-radar {
  position: absolute; inset: 11%; border-radius: 50%; overflow: hidden;
  border: 1px solid rgba(139, 132, 255, .32);
  background:
    radial-gradient(circle, transparent 0 32%, rgba(139, 132, 255, .2) 32.5% 33.2%, transparent 33.7% 64%, rgba(139, 132, 255, .2) 64.5% 65.2%, transparent 65.7%),
    linear-gradient(transparent calc(50% - .5px), rgba(139, 132, 255, .16) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(139, 132, 255, .16) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)),
    radial-gradient(circle, rgba(139, 132, 255, .14), rgba(20, 15, 58, .55) 72%);
}
.vr-feixe {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg 280deg, rgba(139, 132, 255, .08) 300deg, rgba(196, 125, 255, .55) 359deg, transparent 360deg);
  animation: anim-varredura-giro var(--dur-giro) linear infinite;
  transition: opacity var(--dur-lenta) var(--curva-padrao);
}
.vr-anel { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.vr-anel circle { fill: none; stroke-width: 5; }
.vr-trilho { stroke: rgba(139, 132, 255, .16); }
.vr-progresso {
  stroke-linecap: round;
  stroke-dasharray: 339.292;
  stroke-dashoffset: 339.292;
  transition: stroke-dashoffset 420ms var(--curva-padrao);
  filter: drop-shadow(0 0 6px rgba(139, 132, 255, .7));
}
.vr[data-etapa="conectando"] .vr-progresso,
.vr[data-etapa="buscando"] .vr-progresso { stroke-dashoffset: 254.469; transition: none; }
.vr[data-etapa="conectando"] .vr-anel,
.vr[data-etapa="buscando"] .vr-anel { animation: anim-anel-giro 1.15s linear infinite; }
.vr[data-etapa="conectando"] .vr-anel { opacity: .45; }

.vr-nucleo {
  position: absolute; inset: 33%; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #2b2560, #17142d 70%);
  box-shadow: 0 0 0 1px rgba(139, 132, 255, .35), 0 10px 30px -8px rgba(139, 132, 255, .6);
  color: #f1effc;
}
.vr-nucleo > * { grid-area: 1 / 1; transition: opacity var(--dur-media) var(--curva-padrao), transform var(--dur-lenta) var(--curva-mola); }
.vr-icone { width: 38%; height: 38%; }
.vr-pct { font: var(--peso-extra) calc(var(--vr-tam) * .115)/1 var(--fonte-numero); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.vr-pct small { font-size: .55em; font-weight: var(--peso-negrito); margin-left: 1px; opacity: .8; }
.vr-icone-ok, .vr-pct { opacity: 0; transform: scale(.6); }
.vr[data-etapa="lendo"] .vr-pct, .vr[data-etapa="somando"] .vr-pct { opacity: 1; transform: none; }
.vr[data-etapa="lendo"] .vr-icone-envelope, .vr[data-etapa="somando"] .vr-icone-envelope,
.vr[data-etapa="pronto"] .vr-icone-envelope { opacity: 0; transform: scale(.6); }
.vr[data-etapa="pronto"] .vr-icone-ok { opacity: 1; transform: none; color: #b4adff; }
.vr[data-etapa="pronto"] .vr-feixe { opacity: 0; }
.vr[data-etapa="pronto"] .vr-progresso { stroke-dashoffset: 0; }
.vr[data-etapa="pronto"] .vr-nucleo { animation: anim-contador-pop 520ms var(--curva-mola); }
.vr[data-etapa="somando"] .vr-nucleo { animation: anim-respira 1.1s ease-in-out infinite; }

.vr-voo { position: absolute; inset: 0; pointer-events: none; }
.vr-recibo {
  position: absolute; left: 50%; top: 50%;
  width: 24px; height: 30px; margin: -15px 0 0 -12px;
  border-radius: 4px 4px 2px 2px;
  background:
    linear-gradient(#8b84ff, #8b84ff) 5px 7px / 9px 3px no-repeat,
    linear-gradient(rgba(22, 19, 43, .28), rgba(22, 19, 43, .28)) 5px 13px / 14px 2px no-repeat,
    linear-gradient(rgba(22, 19, 43, .28), rgba(22, 19, 43, .28)) 5px 18px / 11px 2px no-repeat,
    linear-gradient(rgba(22, 19, 43, .5), rgba(22, 19, 43, .5)) 5px 23px / 8px 2px no-repeat,
    #f4f3ff;
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .6);
  opacity: 0;
  animation: anim-recibo-voa 1050ms var(--curva-entrada) forwards;
  will-change: transform, opacity;
}
.vr-ping {
  position: absolute; inset: 33%; border-radius: 50%;
  border: 2px solid rgba(180, 173, 255, .8);
  opacity: 0;
  animation: anim-ping 700ms var(--curva-padrao) forwards;
}

.vr-frase {
  margin: 0; max-width: 30ch; min-height: 2.6em;
  font: var(--peso-negrito) var(--texto-xl)/1.3 var(--fonte-titulo);
  letter-spacing: -0.01em; color: var(--cor-texto);
}
.vr-contagem {
  margin: 0; font-size: var(--texto-sm); color: var(--cor-texto-suave);
  font-variant-numeric: tabular-nums; min-height: 1.6em;
}
.vr-contagem b { color: var(--cor-texto); font-weight: var(--peso-negrito); }

/* ---------- frases: revezamento das frases de efeito ---------- */
.fr { display: grid; align-items: center; justify-items: center; }
.fr > .fr-item { grid-area: 1 / 1; }
.fr-entra { animation: anim-frase-entra var(--dur-lenta) var(--curva-entrada) both; }
.fr-sai { animation: anim-frase-sai var(--dur-media) var(--curva-saida) both; }

/* ---------- contador: valor em R$ subindo até o total ---------- */
.ct { display: inline-block; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ct-fim { animation: anim-contador-pop 560ms var(--curva-mola); }

/* ---------- revelar: cartões entrando em sequência ---------- */
.js-anim .rv-espera { opacity: 0; }
.rv-entra { animation: anim-revelar var(--dur-lenta) var(--curva-entrada) both; animation-delay: var(--rv-atraso, 0ms); }

/* ---------- desbloquear: o cadeado abrindo e o borrado sumindo ---------- */
.db-cadeado { overflow: visible; }
.db-alca { transform-box: fill-box; transform-origin: 100% 100%; transition: transform var(--dur-lenta) var(--curva-mola); }
.db-treme { animation: anim-cadeado-treme 380ms ease-in-out; }
.db-aberto .db-alca, .db-aberto.db-alca { transform: translateY(-3px) rotate(32deg); }
.db-explode { position: relative; }
.db-explode::after {
  content: ""; position: absolute; inset: -40%; border-radius: 50%;
  border: 2px solid var(--cor-marca); opacity: 0;
  animation: anim-ping 640ms var(--curva-padrao) forwards;
}
.db-desborra { animation: anim-desborrar 620ms var(--curva-entrada) both; animation-delay: var(--db-atraso, 0ms); }

/* ---------- notificacao: banner do banco descendo no topo do celular ---------- */
.nt-pilha { display: grid; gap: 6px; align-content: start; }
.nt {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; column-gap: 9px; align-items: center;
  padding: 9px 11px; border-radius: 16px;
  background: rgba(244, 243, 250, .9); color: #16132b;
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .65);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  text-align: left; line-height: 1.25;
}
.nt-icone {
  position: relative; width: 30px; height: 30px; border-radius: 8px; grid-row: span 2;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #1fb5a3, #0e7f86);
}
.nt-icone svg { width: 18px; height: 18px; }
.nt-app { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #5d5a70; }
.nt-hora { font-size: 10.5px; color: #6b6880; justify-self: end; }
.nt-corpo { grid-column: 2 / 4; font-size: 12px; min-width: 0; }
.nt-corpo b, .nt-corpo span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nt-corpo b { font-weight: 700; font-size: 12.5px; }
.nt-entra { animation: anim-notificacao-desce 640ms var(--curva-mola) both; }
.nt-plim .nt-icone::after {
  content: ""; position: absolute; inset: -3px; border-radius: 11px;
  border: 2px solid #1fb5a3; opacity: 0;
  animation: anim-ping 720ms 120ms var(--curva-padrao) forwards;
}
.nt-desloca { transition: transform 420ms var(--curva-entrada); }
.nt-sai { animation: anim-notificacao-sai 300ms var(--curva-saida) forwards; }
.anim-vibrar { animation: anim-vibrar 460ms linear; }

/* ---------- reacao: o personagem muda de expressão ---------- */
.re { position: relative; }
.re-rosto { position: relative; width: 100%; aspect-ratio: 1; }
.re-rosto > img, .re-rosto > svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 160ms linear; }
.re[data-expressao="neutra"] [data-expressao="neutra"],
.re[data-expressao="surpresa"] [data-expressao="surpresa"],
.re[data-expressao="irritada"] [data-expressao="irritada"] { opacity: 1; }
.re-pop { animation: anim-reacao-pop 420ms var(--curva-mola); }
.re[data-expressao="surpresa"] .re-rosto.re-pop { animation: anim-pulo 560ms var(--curva-mola); }
.re[data-expressao="irritada"] .re-rosto.re-pop { animation: anim-tremor 80ms linear 7; }
.re-fala {
  position: absolute; z-index: 2;
  padding: 8px 12px; border-radius: 16px 16px 16px 4px;
  background: #ffffff; color: #16132b;
  font: var(--peso-extra) 13.5px/1.2 var(--fonte-titulo);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .55);
  white-space: nowrap; opacity: 0; transform-origin: 0% 100%;
  pointer-events: none;
}
.re-fala-ativa { animation: anim-fala 460ms var(--curva-mola) both; }
/* fumacinha (vapor saindo da cabeça) e o símbolo de raiva dos quadrinhos; posições em % da imagem */
.re-fumaca { position: absolute; inset: 0; pointer-events: none; }
.re-vapor {
  position: absolute; top: -6%; width: 9%; height: 17%; overflow: visible;
  fill: none; stroke: rgba(255, 255, 255, .9); stroke-width: 2.4; stroke-linecap: round; opacity: 0;
}
.re-vapor:nth-child(1) { left: 34%; transform: rotate(-14deg); }
.re-vapor:nth-child(2) { left: 47%; top: -9%; }
.re-vapor:nth-child(3) { left: 60%; transform: rotate(14deg); }
.re-raiva {
  position: absolute; left: 64%; top: 12%; width: 15%; height: 15%; overflow: visible;
  fill: none; stroke: #ff4d6d; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0;
}
.re[data-expressao="irritada"] .re-vapor { animation: anim-vapor 1.25s ease-out infinite; }
.re[data-expressao="irritada"] .re-vapor:nth-child(2) { animation-delay: .4s; }
.re[data-expressao="irritada"] .re-vapor:nth-child(3) { animation-delay: .8s; }
.re[data-expressao="irritada"] .re-raiva { opacity: 1; animation: anim-raiva 520ms var(--curva-mola) infinite alternate; }
.anim-tremor { animation: anim-tremor 80ms linear 6; }

/* ---------- surgir: blocos entrando ao rolar a página ---------- */
.js-anim [data-surgir] {
  opacity: 0; transform: translateY(22px);
  transition: opacity var(--dur-lenta) var(--curva-entrada), transform var(--dur-cena) var(--curva-entrada);
  transition-delay: var(--sg-atraso, 0ms);
}
.js-anim [data-surgir].sg-visivel { opacity: 1; transform: none; }

/* ---------- toque: onda do dedo tocando um botão ---------- */
.anim-toque-onda {
  position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
  background: rgba(255, 255, 255, .55); pointer-events: none;
  animation: anim-toque 620ms var(--curva-padrao) forwards;
}

/* ---------- quadros-chave ---------- */
@keyframes anim-varredura-giro { to { transform: rotate(360deg); } }
@keyframes anim-anel-giro { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }
@keyframes anim-respira { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes anim-recibo-voa {
  0% { transform: translate(var(--dx), var(--dy)) rotate(var(--giro)) scale(1); opacity: 0; }
  14% { opacity: 1; }
  78% { opacity: .95; }
  100% { transform: translate(0, 0) rotate(0deg) scale(.18); opacity: 0; }
}
@keyframes anim-ping { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(1.65); opacity: 0; } }
@keyframes anim-frase-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes anim-frase-sai { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-12px); } }
@keyframes anim-contador-pop { 0% { transform: scale(1); } 40% { transform: scale(1.07); } 100% { transform: scale(1); } }
@keyframes anim-revelar { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes anim-faixa { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes anim-cadeado-treme {
  0%, 100% { transform: rotate(0); } 20% { transform: rotate(-12deg); } 40% { transform: rotate(10deg); }
  60% { transform: rotate(-7deg); } 80% { transform: rotate(4deg); }
}
@keyframes anim-desborrar { from { filter: blur(6px); opacity: .55; } to { filter: blur(0); opacity: 1; } }
@keyframes anim-notificacao-desce {
  0% { transform: translateY(-130%) scale(.94); opacity: 0; }
  55% { opacity: 1; }
  100% { transform: none; opacity: 1; }
}
@keyframes anim-notificacao-sai { to { transform: scale(.92); opacity: 0; } }
@keyframes anim-vibrar {
  0%, 100% { transform: translateX(0) rotate(0); }
  10%, 50%, 90% { transform: translateX(-3px) rotate(-.7deg); }
  30%, 70% { transform: translateX(3px) rotate(.7deg); }
}
@keyframes anim-reacao-pop { 0% { transform: scale(.94); } 100% { transform: scale(1); } }
@keyframes anim-pulo { 0% { transform: translateY(0) scale(.96); } 40% { transform: translateY(-10px) scale(1.03); } 100% { transform: none; } }
@keyframes anim-tremor { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-2.5px) rotate(-.8deg); } 75% { transform: translateX(2.5px) rotate(.8deg); } }
@keyframes anim-fala { 0% { opacity: 0; transform: scale(.5) translateY(8px); } 100% { opacity: 1; transform: none; } }
@keyframes anim-vapor {
  0% { translate: 0 10px; opacity: 0; }
  30% { opacity: .95; }
  100% { translate: 0 -18px; opacity: 0; }
}
@keyframes anim-raiva { from { scale: .78; } to { scale: 1.12; } }
@keyframes anim-toque { from { transform: scale(.2); opacity: .9; } to { transform: scale(2.2); opacity: 0; } }

/* ---------- movimento reduzido: estado final, sem deslocamento ---------- */
@media (prefers-reduced-motion: reduce) {
  .vr-halo, .vr-feixe, .vr-anel, .vr-nucleo, .vr-recibo, .vr-ping,
  .fr-entra, .fr-sai, .ct-fim, .rv-entra, .db-treme, .db-explode::after, .db-desborra,
  .nt-entra, .nt-plim .nt-icone::after, .nt-sai, .anim-vibrar, .re-pop, .re-rosto.re-pop,
  .re-fala-ativa, .re-vapor, .re-raiva, .anim-tremor, .anim-toque-onda { animation: none !important; }
  .re[data-expressao="irritada"] .re-vapor { opacity: .9; }
  .vr[data-etapa] .vr-anel { animation: none !important; }
  .vr-progresso, .db-alca, .nt-desloca, .re-rosto > img, .re-rosto > svg { transition: none !important; }
  .vr-recibo, .vr-ping, .anim-toque-onda { display: none; }
  .re-fala-ativa { opacity: 1; transform: none; }
  .db-desborra { filter: none; opacity: 1; }
  .js-anim [data-surgir] { opacity: 1; transform: none; transition: none; }
}