/* Cena do celular (página inicial e /demo): celular estilizado, personagem e o total do ano.
   Medidas pensadas para 330 px de largura; no computador a cena inteira cresce com zoom. */

.cena { display: flex; justify-content: center; min-height: 480px; }
.cena-palco {
  position: relative; width: min(100%, 340px); height: 480px; flex: none;
}
.cena-palco::before {
  content: ""; position: absolute; inset: 6% -6% 0 10%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(139, 132, 255, .34), rgba(196, 125, 255, .12) 60%, transparent);
  filter: blur(8px);
}

/* ---------- celular ---------- */
.celular { position: absolute; right: 0; top: 0; width: 228px; height: 462px; }
.celular-vibra { width: 100%; height: 100%; }
.celular-corpo {
  position: relative; width: 100%; height: 100%; padding: 7px;
  border-radius: 40px; background: linear-gradient(160deg, #3a3560, #17142d 40%, #0c0a1a);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12) inset, 0 0 0 1.5px #0a0816, var(--sombra-3), 0 30px 80px -30px rgba(139, 132, 255, .55);
}
.celular-ilha { position: absolute; z-index: 3; top: 15px; left: 50%; width: 64px; height: 18px; margin-left: -32px; border-radius: 12px; background: #05040b; }
.celular-tela {
  position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 33px;
  background:
    radial-gradient(120% 70% at 15% 0%, #4b3fb0 0%, transparent 55%),
    radial-gradient(90% 60% at 100% 100%, #13656f 0%, transparent 60%),
    linear-gradient(180deg, #1a1544, #0d0b20);
  color: #fff; font-family: var(--fonte-texto);
}
.ct-tela {
  position: absolute; inset: 0; padding: 40px 8px 12px;
  opacity: 0; transform: scale(.97); pointer-events: none;
  transition: opacity 360ms var(--curva-padrao), transform 480ms var(--curva-entrada);
}
.celular[data-tela="bloqueio"] .tela-bloqueio,
.celular[data-tela="app"] .tela-app,
.celular[data-tela="busca"] .tela-busca,
.celular[data-tela="resultado"] .tela-resultado { opacity: 1; transform: none; }

/* tela de bloqueio */
.bl-status { position: absolute; top: 15px; left: 20px; right: 18px; display: flex; justify-content: space-between; align-items: center; font-size: 10px; font-weight: 700; opacity: .85; }
.bl-status span:first-child { visibility: hidden; }
.bl-icones { display: inline-flex; gap: 3px; align-items: flex-end; }
.bl-icones i { display: block; width: 3px; border-radius: 1px; background: #fff; }
.bl-icones i:nth-child(1) { height: 5px; } .bl-icones i:nth-child(2) { height: 7px; } .bl-icones i:nth-child(3) { width: 16px; height: 8px; border-radius: 2px; }
.bl-relogio { display: grid; justify-items: center; margin: 0 0 10px; line-height: 1; }
.bl-data { font-size: 11px; font-weight: 600; opacity: .85; }
.bl-hora { font: 600 46px/1 var(--fonte-titulo); letter-spacing: -0.03em; margin-top: 3px; }
.tela-bloqueio .nt-pilha { gap: 5px; clip-path: inset(0 -16px -48px -16px); }   /* a notificação nasce debaixo de uma linha logo abaixo do relógio: nunca passa por cima dele */
.tela-bloqueio .nt { padding: 7px 8px; border-radius: 14px; grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: 7px; }
.tela-bloqueio .nt-icone { width: 24px; height: 24px; border-radius: 7px; }
.tela-bloqueio .nt-icone svg { width: 15px; height: 15px; }
.tela-bloqueio .nt-app, .tela-bloqueio .nt-hora { font-size: 9.5px; }
.tela-bloqueio .nt-corpo { font-size: 10.5px; }
.tela-bloqueio .nt-corpo b { font-size: 11px; }

/* total do ano (fora do celular, na coluna da esquerda) */
.bl-total {
  position: absolute; left: 0; top: 18px; z-index: 4; width: 128px;
  display: grid; gap: 2px; padding: 12px 12px 11px; border-radius: 18px;
  background: var(--cor-superficie); border: 1px solid color-mix(in srgb, var(--cor-marca) 45%, transparent);
  box-shadow: var(--sombra-2), 0 10px 30px -12px var(--cor-brilho);
  opacity: 0; transform: translateY(8px) scale(.94);
  transition: opacity 320ms var(--curva-padrao), transform 520ms var(--curva-mola);
}
.bl-total span, .bl-total small { font-size: 11px; line-height: 1.25; color: var(--cor-texto-suave); font-weight: 600; }
.bl-total-valor { font: 800 22px/1.1 var(--fonte-numero); letter-spacing: -0.02em; color: var(--cor-perigo); font-variant-numeric: tabular-nums; }
.bl-total-visivel { opacity: 1; transform: none; }
.cena-palco:not([data-tela="bloqueio"]) .bl-total { opacity: 0; transform: translateY(8px) scale(.94); }

/* tela do app: promessa + botão */
.tela-app { display: grid; align-content: center; justify-items: center; gap: 10px; text-align: center; padding: 40px 16px 24px; }
.ap-logo { width: 52px; height: 52px; border-radius: 15px; box-shadow: 0 10px 26px -8px rgba(139, 132, 255, .8); }
.ap-titulo { margin: 4px 0 0; font: 800 19px/1.15 var(--fonte-titulo); letter-spacing: -0.02em; }
.ap-sub { margin: 0; font-size: 11.5px; opacity: .8; }
.ap-botao {
  position: relative; overflow: hidden; display: block; width: 100%; margin-top: 8px; padding: 11px 8px;
  border-radius: 999px; background: var(--gradiente-marca); color: #0c0a1a; font: 800 12.5px/1.2 var(--fonte-texto);
  box-shadow: 0 10px 26px -10px rgba(139, 132, 255, .9);
}
.ap-botao-tocado { animation: anim-contador-pop 420ms var(--curva-mola); }
.ap-nota { margin: 0; font-size: 10px; opacity: .7; }

/* tela da varredura dentro do celular */
.tela-busca { display: grid; align-content: center; padding: 34px 10px 12px; }
.tela-busca .vr { gap: 8px; }
.tela-busca .vr-frase { font-size: 13.5px; max-width: 18ch; min-height: 3.9em; color: #fff; }
.tela-busca .vr-contagem { font-size: 11px; color: rgba(255, 255, 255, .78); }
.tela-busca .vr-contagem b { color: #fff; }

/* tela do resultado: total por ano, sem preço do produto e sem cadeado */
.tela-resultado { padding: 44px 12px 12px; }
.rs-rotulo { margin: 0; font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #b4adff; }
.rs-total { margin: 4px 0 2px; display: grid; }
.rs-total-valor { font: 800 26px/1.05 var(--fonte-numero); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.rs-total span { font-size: 11px; opacity: .78; }
.rs-qtd { margin: 6px 0 10px; font-size: 13px; }
.rs-qtd b { color: #b4adff; }
.rs-item {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; align-items: center;
  padding: 8px 9px; border-radius: 13px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .1);
  font-size: 11.5px; line-height: 1.2;
}
.rs-av { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; font: 800 13px/1 var(--fonte-titulo); background: hsl(var(--h) 85% 80%); color: hsl(var(--h) 60% 18%); }
.rs-nome { font-weight: 700; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs-nome small { display: block; font-weight: 500; font-size: 9.5px; opacity: .7; margin-top: 2px; }
.rs-item b { font-size: 11.5px; white-space: nowrap; }
.rs-aberta-rotulo { margin: 0 0 6px; font-size: 10px; font-weight: 700; opacity: .72; }
.rs-aberta { padding: 10px 10px 9px; row-gap: 3px; background: rgba(255, 255, 255, .12); border-color: rgba(180, 173, 255, .45); box-shadow: 0 12px 26px -16px rgba(139, 132, 255, .9); }
.rs-ano { grid-column: 2 / 4; font-size: 10.5px; font-weight: 700; color: #ff9fb0; }

/* ---------- botão de pausar a cena (fora do aria-hidden; WCAG 2.2.2) ---------- */
.cena-caixa { position: relative; }
.cena-pausa {
  position: absolute; top: 0; right: 0; z-index: 6; display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border-radius: 50%; border: 1px solid var(--cor-linha-forte); background: color-mix(in srgb, var(--cor-superficie) 88%, transparent);
  color: var(--cor-texto-suave); cursor: pointer; box-shadow: var(--sombra-1);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.cena-pausa:hover { color: var(--cor-texto); border-color: var(--cor-marca); }
.cena-pausa svg { width: 16px; height: 16px; }
.cena-pausa .icone-continuar, .cena-pausa[aria-pressed="true"] .icone-pausar { display: none; }
.cena-pausa[aria-pressed="true"] .icone-continuar { display: block; }
.cena-pausada, .cena-pausada * { animation-play-state: paused !important; }

/* ---------- personagem ---------- */
.personagem { position: absolute; left: -8px; bottom: -4px; z-index: 5; width: 170px; }
.personagem::before {
  content: ""; position: absolute; inset: 18% 8% 0; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(139, 132, 255, .45), transparent);
}
.personagem .re-rosto img { filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .45)); }
.personagem .re-fala {
  left: 4px; bottom: calc(100% - 6px); max-width: 124px; white-space: normal;
}
.personagem .re-fala::after {
  content: ""; position: absolute; left: 22px; bottom: -7px; width: 14px; height: 14px;
  background: inherit; transform: rotate(45deg); border-radius: 0 0 3px 0;
}
.personagem .re-fumaca { inset: 0; }

@media (min-width: 400px) {
  .cena-palco { width: 356px; }
  .celular { width: 234px; height: 474px; }
  .personagem { width: 178px; }
}
@media (min-width: 960px) {
  .cena { min-height: 586px; }
  .cena-palco { zoom: 1.22; }
}
@media (prefers-reduced-motion: reduce) {
  .ct-tela, .bl-total { transition: none; }
}