/* ─────────────────────────────────────────────────────────────────────────────
   VKX Pay — demonstração animada do fluxo de pagamento.

   Mostra a jornada real em três atos, em loop: o comprador no site do lojista,
   o checkout escolhendo a moeda, e a confirmação. É CSS puro (nenhum JS, nenhum
   vídeo) para não pesar na página nem depender de rede.

   O ciclo dura 12s e todo tempo abaixo é fração dele — mexer na duração da
   animação-mãe reajusta as três cenas juntas.

   Acessibilidade: quem pede menos movimento vê a cena final parada, que é a
   que comunica o resultado.
   ───────────────────────────────────────────────────────────────────────────── */

.vkxdemo {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  aspect-ratio: 4 / 3.4;
  perspective: 1200px;
  /* Contém o brilho de fundo, que sangra para fora da caixa: sem isto ele
     empurra a largura do documento e a página ganha rolagem lateral no
     celular — 2px que não aparecem em nenhuma inspeção de elemento, porque
     vêm de um pseudo-elemento. */
  isolation: isolate;
}

/* Brilho de fundo — dá profundidade sem imagem. */
.vkxdemo::before {
  content: '';
  position: absolute;
  inset: -12% 0 20% 30%;
  background: radial-gradient(circle at 60% 30%, rgb(108 92 255 / 32%), transparent 65%);
  filter: blur(38px);
  pointer-events: none;
}

/* ── Janela do navegador (cena 1) ───────────────────────────────────────── */
.vkxdemo-browser {
  position: absolute;
  inset: 0 12% 16% 0;
  background: #0d0f18;
  border: 1px solid #262a3d;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgb(0 0 0 / 70%);
  animation: vkxd-browser 12s cubic-bezier(.4, 0, .2, 1) infinite;
}

.vkxdemo-bar {
  height: 30px;
  background: #141726;
  border-bottom: 1px solid #262a3d;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 11px;
}
.vkxdemo-dot { width: 8px; height: 8px; border-radius: 50%; background: #2f3347; }
.vkxdemo-url {
  margin-left: 8px;
  flex: 1;
  height: 15px;
  border-radius: 7px;
  background: #0d0f18;
  font: 500 8.5px/15px var(--vkx-font-mono, monospace);
  color: #6b7288;
  padding: 0 8px;
  overflow: hidden;
  white-space: nowrap;
}

.vkxdemo-page { padding: 13px 16px 15px; }

.vkxdemo-shop {
  font: 700 9.5px/1 var(--vkx-font-body, sans-serif);
  color: #e8eaf2;
  padding-bottom: 10px;
  margin-bottom: 11px;
  border-bottom: 1px solid #1d2130;
}

.vkxdemo-prod {
  display: flex;
  gap: 10px;
  align-items: center;
  padding-bottom: 11px;
  border-bottom: 1px solid #1d2130;
}
.vkxdemo-thumb {
  width: 38px; height: 38px; border-radius: 9px; flex: none;
  background: linear-gradient(135deg, #2a2f45, #191d2c);
  border: 1px solid #2f3448;
  display: flex; align-items: center; justify-content: center;
}
.vkxdemo-thumb svg { width: 18px; height: 18px; }
.vkxdemo-item { font: 650 9px/1.3 var(--vkx-font-body, sans-serif); color: #e8eaf2; }
.vkxdemo-qty { font: 500 7.5px/1.3 var(--vkx-font-body, sans-serif); color: #6b7288; margin-top: 2px; }
.vkxdemo-price { font: 650 9px/1 var(--vkx-font-body, sans-serif); color: #c9cee0; white-space: nowrap; }

.vkxdemo-line {
  display: flex; justify-content: space-between; align-items: baseline; margin-top: 9px;
}
.vkxdemo-line span { font: 500 8px/1 var(--vkx-font-body, sans-serif); color: #6b7288; }
.vkxdemo-line b { font: 600 8px/1 var(--vkx-font-body, sans-serif); color: #a8aec2; }

.vkxdemo-total {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 10px 0 11px; padding-top: 9px; border-top: 1px solid #1d2130;
}
.vkxdemo-total span { font: 500 9px/1 var(--vkx-font-body, sans-serif); color: #6b7288; letter-spacing: .09em; text-transform: uppercase; }
.vkxdemo-total b { font: 800 18px/1 var(--vkx-font-body, sans-serif); color: #f2f4f8; letter-spacing: -.02em; }

.vkxdemo-safe {
  margin-top: 8px; text-align: center;
  font: 500 6.5px/1 var(--vkx-font-body, sans-serif); color: #565c72;
}

.vkxdemo-cta {
  height: 34px;
  border-radius: 9px;
  background: var(--vkx-violet-cta, #6C5CFF);
  color: #fff;
  font: 700 11.5px/34px var(--vkx-font-body, sans-serif);
  text-align: center;
  animation: vkxd-cta 12s ease-in-out infinite;
}

/* ── Cursor que clica ────────────────────────────────────────────────────── */
.vkxdemo-cursor {
  position: absolute;
  width: 17px; height: 17px;
  z-index: 6;
  left: 30%; top: 78%;
  animation: vkxd-cursor 12s cubic-bezier(.45, 0, .25, 1) infinite;
}
.vkxdemo-cursor svg { display: block; filter: drop-shadow(0 2px 5px rgb(0 0 0 / 65%)); }
.vkxdemo-ripple {
  position: absolute;
  left: 50%; top: 50%;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  border: 2px solid var(--vkx-violet-cta, #6C5CFF);
  opacity: 0;
  animation: vkxd-ripple 12s ease-out infinite;
}

/* ── Celular com o checkout (cenas 2 e 3) ────────────────────────────────── */
.vkxdemo-phone {
  position: absolute;
  right: 0; bottom: 0;
  width: 40%;
  aspect-ratio: 1 / 2.02;
  background: #0b0d15;
  border: 1px solid #2b3048;
  border-radius: 20px;
  overflow: hidden;
  z-index: 5;
  box-shadow: 0 26px 50px -14px rgb(0 0 0 / 80%);
  animation: vkxd-phone 12s cubic-bezier(.4, 0, .2, 1) infinite;
}
.vkxdemo-notch {
  position: absolute; left: 50%; top: 7px; transform: translateX(-50%);
  width: 34%; height: 4px; border-radius: 3px; background: #262a3d;
}

.vkxdemo-screen { position: absolute; inset: 0; padding: 20px 13px 13px; }

/* Cena 2 — escolher a moeda */
.vkxdemo-checkout { animation: vkxd-checkout 12s ease-in-out infinite; }
.vkxdemo-brand { font: 700 6.5px/1 var(--vkx-font-body, sans-serif); color: #6b7288; letter-spacing: .17em; margin-bottom: 9px; }
.vkxdemo-store { font: 500 8px/1 var(--vkx-font-body, sans-serif); color: #8b92a8; margin-bottom: 4px; }
.vkxdemo-amount { font: 800 20px/1.1 var(--vkx-font-body, sans-serif); color: #f2f4f8; letter-spacing: -.03em; margin-bottom: 12px; }
.vkxdemo-hint { font: 600 6px/1 var(--vkx-font-body, sans-serif); color: #6b7288; letter-spacing: .13em; margin-bottom: 7px; }

.vkxdemo-coin {
  display: flex; align-items: center; gap: 6px;
  height: 27px; padding: 0 8px; margin-bottom: 6px;
  background: #0a0c14; border: 1px solid #232838; border-radius: 8px;
}
.vkxdemo-coin i { width: 12px; height: 12px; border-radius: 50%; flex: none; }
/* Ícone oficial de cada moeda dentro da simulação do checkout. */
.vkxdemo-coin .tkn { width: 13px; height: 13px; flex: none; display: block; }
.vkxdemo-coin b { font: 650 8.5px/1 var(--vkx-font-body, sans-serif); color: #e8eaf2; }
.vkxdemo-coin span { margin-left: auto; font: 500 7px/1 var(--vkx-font-body, sans-serif); color: #6b7288; }
/* a primeira opção é selecionada durante a cena */
.vkxdemo-coin.pick { animation: vkxd-pick 12s ease-in-out infinite; }

.vkxdemo-pay {
  position: absolute; left: 13px; right: 13px; bottom: 34px;
  height: 30px; border-radius: 9px;
  background: var(--vkx-violet-cta, #6C5CFF);
  color: #fff;
  font: 700 9px/30px var(--vkx-font-body, sans-serif);
  text-align: center;
}
.vkxdemo-fine {
  position: absolute; left: 0; right: 0; bottom: 15px;
  text-align: center;
  font: 500 6px/1 var(--vkx-font-body, sans-serif); color: #565c72;
}

/* Cena 3 — confirmado */
.vkxdemo-done {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px; padding: 16px;
  background: #0b0d15;
  opacity: 0;
  animation: vkxd-done 12s ease-in-out infinite;
}
.vkxdemo-check {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgb(74 222 128 / 13%);
  border: 1.5px solid #4ade80;
  display: flex; align-items: center; justify-content: center;
  color: #4ade80; font-size: 19px; font-weight: 700;
}
.vkxdemo-done b { font: 700 9.5px/1.3 var(--vkx-font-body, sans-serif); color: #f2f4f8; text-align: center; }
.vkxdemo-done span { font: 500 7px/1.3 var(--vkx-font-body, sans-serif); color: #6b7288; text-align: center; }
.vkxdemo-wallet {
  margin-top: 3px; padding: 3px 8px; border-radius: 20px;
  background: rgb(108 92 255 / 15%);
  font: 650 6.5px/1.5 var(--vkx-font-body, sans-serif); color: #a99dff;
}

/* Selo "webhook enviado" que aparece no fim, ligando ao sistema do lojista */
.vkxdemo-hook {
  position: absolute;
  left: 0; bottom: 4%;
  padding: 6px 10px;
  background: #10131f;
  border: 1px solid #2b3048;
  border-radius: 9px;
  font: 600 8px/1.3 var(--vkx-font-mono, monospace);
  color: #8ff3d5;
  opacity: 0;
  z-index: 7;
  white-space: nowrap;
  animation: vkxd-hook 12s ease-out infinite;
}

/* ── Tempos ──────────────────────────────────────────────────────────────
   0-22%   cena 1: site do lojista, cursor indo até o botão
   22-30%  clique
   30-66%  cena 2: checkout, escolha da moeda, pagamento
   66-88%  cena 3: confirmado + webhook
   88-100% volta                                                            */

@keyframes vkxd-cursor {
  0%, 6%   { left: 30%; top: 82%; opacity: 0; }
  10%      { opacity: 1; }
  20%      { left: 40%; top: 62%; opacity: 1; }
  24%      { left: 40%; top: 63.5%; }
  27%      { left: 40%; top: 62%; opacity: 1; }
  34%, 100% { left: 46%; top: 58%; opacity: 0; }
}

@keyframes vkxd-ripple {
  0%, 22%  { opacity: 0; transform: scale(.3); }
  25%      { opacity: .9; transform: scale(.5); }
  33%      { opacity: 0; transform: scale(1.5); }
  100%     { opacity: 0; transform: scale(1.5); }
}

@keyframes vkxd-cta {
  0%, 19%  { transform: scale(1); filter: brightness(1); }
  24%      { transform: scale(.965); filter: brightness(1.25); }
  29%, 100% { transform: scale(1); filter: brightness(1); }
}

@keyframes vkxd-browser {
  0%, 26%   { transform: translateY(0) scale(1); opacity: 1; filter: blur(0); }
  38%, 82%  { transform: translateY(-10px) scale(.955); opacity: .34; filter: blur(1.5px); }
  96%, 100% { transform: translateY(0) scale(1); opacity: 1; filter: blur(0); }
}

@keyframes vkxd-phone {
  0%, 22%   { transform: translateY(30px) scale(.9); opacity: 0; }
  34%, 84%  { transform: translateY(0) scale(1); opacity: 1; }
  95%, 100% { transform: translateY(30px) scale(.9); opacity: 0; }
}

@keyframes vkxd-checkout {
  0%, 60%  { opacity: 1; }
  66%, 88% { opacity: 0; }
  100%     { opacity: 1; }
}

@keyframes vkxd-pick {
  0%, 40%   { border-color: #232838; background: #0a0c14; }
  46%, 88%  { border-color: var(--vkx-violet-cta, #6C5CFF); background: rgb(108 92 255 / 11%); }
  100%      { border-color: #232838; background: #0a0c14; }
}

@keyframes vkxd-done {
  0%, 62%   { opacity: 0; transform: scale(.97); }
  68%, 86%  { opacity: 1; transform: scale(1); }
  92%, 100% { opacity: 0; transform: scale(.97); }
}

@keyframes vkxd-hook {
  0%, 70%   { opacity: 0; transform: translateX(-8px); }
  76%, 86%  { opacity: 1; transform: translateX(0); }
  92%, 100% { opacity: 0; transform: translateX(-8px); }
}

/* Menos movimento: mostra o estado final, sem animar nada. */
@media (prefers-reduced-motion: reduce) {
  .vkxdemo-browser, .vkxdemo-phone, .vkxdemo-checkout, .vkxdemo-done,
  .vkxdemo-cursor, .vkxdemo-ripple, .vkxdemo-cta, .vkxdemo-hook, .vkxdemo-coin.pick {
    animation: none;
  }
  .vkxdemo-cursor, .vkxdemo-ripple { opacity: 0; }
  .vkxdemo-browser { opacity: .4; transform: translateY(-10px) scale(.955); }
  .vkxdemo-phone { opacity: 1; transform: none; }
  .vkxdemo-done { opacity: 0; }
  .vkxdemo-coin.pick { border-color: var(--vkx-violet-cta, #6C5CFF); background: rgb(108 92 255 / 11%); }
}

/* ── Celular ───────────────────────────────────────────────────────────────
   A demonstração é a primeira coisa que aparece depois do texto no celular.
   Reduz-se o conjunto para caber sem empurrar o resto da página, mantendo as
   três cenas legíveis. */
@media (max-width: 40rem) {
  .vkxdemo { max-width: 340px; aspect-ratio: 4 / 3.6; }
  .vkxdemo-page { padding: 11px 13px 13px; }
  .vkxdemo-shop { font-size: 8.5px; padding-bottom: 8px; margin-bottom: 9px; }
  .vkxdemo-thumb { width: 32px; height: 32px; }
  .vkxdemo-item { font-size: 8px; }
  .vkxdemo-qty { font-size: 6.8px; }
  .vkxdemo-price, .vkxdemo-line span, .vkxdemo-line b { font-size: 7.5px; }
  .vkxdemo-total b { font-size: 16px; }
  .vkxdemo-cta { height: 30px; font-size: 10.5px; line-height: 30px; }
  .vkxdemo-phone { width: 43%; }
  .vkxdemo-amount { font-size: 17px; }
  .vkxdemo-coin { height: 24px; margin-bottom: 5px; }
  .vkxdemo-hook { font-size: 7px; padding: 5px 8px; }
}