/* tokn.id | o que vem depois do topo: faixa em movimento, manifesto que acende palavra por palavra
   e o "como funciona" em quatro cenas de tela cheia que se empilham (sem cartões). Cada cena é
   uma foto de verdade com parallax, um título grande que sobe de dentro de uma máscara e um
   pedaço vivo do produto, não uma caixa com ícone. O progresso de cada cena vem do js/cenas.js
   nas variáveis --e (a cena entrando, 0 a 1) e --o (a próxima cobrindo ela, 0 a 1). */

/* === FAIXA EM MOVIMENTO (sólida na cor da marca, levemente inclinada) === */
/* o wrapper corta o que a inclinação joga pra fora: a página nunca passa da largura da tela */
.faixa-wrap { overflow: hidden; padding-block: 40px; margin-block: 16px 0; }
.faixa-mq {
  position: relative; z-index: 3; width: 108vw; margin-left: -4vw; padding: 16px 0; overflow: hidden;
  background: var(--pink); transform: rotate(-1.4deg);
}
.mq-pista { display: flex; width: max-content; animation: mq 42s linear infinite; }
.mq-grupo { display: flex; flex: none; align-items: center; }
.mq-item { display: flex; align-items: center; gap: 30px; padding-right: 30px; font-size: clamp(24px, 3.6vw, 52px); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: #fff; white-space: nowrap; }
.mq-item i { flex: none; width: .26em; height: .26em; border-radius: 50%; background: #fff; }
@keyframes mq { to { transform: translateX(-50%); } }

/* === MANIFESTO (as palavras acendem conforme a rolagem) === */
.manifesto { padding-block: calc(var(--sec-y) * 1.05); }
.manifesto-in { display: grid; gap: 40px; }
.manifesto-t { max-width: 22ch; font-size: clamp(30px, 4.6vw, 72px); font-weight: 800; line-height: 1.04; letter-spacing: -.04em; }
.manifesto-t em { font-style: normal; color: var(--pink); }
.manifesto-p { max-width: 560px; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; color: var(--ink-soft); }
.manifesto-p strong { color: var(--ink); }
.js .mw { opacity: .2; transition: opacity .4s ease; }
.js .mw.on { opacity: 1; }
/* a moeda que gira dentro da frase */
.moeda-mini { display: inline-block; vertical-align: -.1em; margin-left: .12em; --d: .84em; }
.moeda-mini .moeda-brilho { display: none; }

/* === CENAS === */
.cenas { position: relative; }
/* uma cena fixa no topo; a próxima sobe por cima dela (a pausa entre elas é o .cena-folga) */
.cena { --e: 1; --o: 0; position: sticky; top: 0; height: 100svh; min-height: 620px; overflow: hidden; background: var(--bg); }
.cena-folga { height: 52svh; }
.cena::after { content: ''; position: absolute; inset: 0; z-index: 5; background: #000; opacity: calc(var(--o) * .6); pointer-events: none; }
.cena-foto { position: absolute; inset: -5% 0; z-index: 0; transform: translate3d(0, calc((1 - var(--e)) * -5%), 0) scale(calc(1.12 - var(--e) * .08 + var(--o) * .05)); will-change: transform; }
.cena-foto picture { display: block; width: 100%; height: 100%; }
.cena-foto img { width: 100%; height: 100%; object-fit: cover; }
/* celular: o texto e o visual ocupam a tela toda, então o véu é mais fechado (o rosa sobre foto clara lia mal) */
.cena-veu { position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(9, 9, 10, .9) 0%, rgba(9, 9, 10, .68) 46%, rgba(9, 9, 10, .78) 100%); }
@media (min-width: 1024px) {
  .cena-veu { background: linear-gradient(90deg, rgba(9, 9, 10, .94) 0%, rgba(9, 9, 10, .78) 38%, rgba(9, 9, 10, .34) 100%), linear-gradient(0deg, rgba(9, 9, 10, .5), transparent 36%); }
}
.cena-in { position: relative; z-index: 2; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 26px; padding-block: calc(var(--nav-h) + 8px) 36px; }
@media (min-width: 1024px) { .cena-in { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 56px; padding-block: calc(var(--nav-h) + 12px) 48px; } }
.cena-txt { transform: translate3d(0, calc(var(--o) * -40px), 0); opacity: calc(1 - var(--o) * .85); }
.cena-vis { position: relative; justify-self: stretch; transform: translate3d(0, calc((1 - var(--e)) * 90px - var(--o) * 60px), 0); opacity: calc(1 - var(--o) * .9); }
@media (min-width: 1024px) { .cena-vis { justify-self: end; width: min(100%, 480px); } }

/* número (sólido, na cor da marca) e título que sobe de dentro de uma máscara */
.cena-n { margin-bottom: 18px; font-size: clamp(54px, 7vw, 112px); font-weight: 800; line-height: .8; letter-spacing: -.05em; color: var(--pink); font-variant-numeric: tabular-nums; }
.cena-t { font-size: clamp(40px, 6.2vw, 100px); font-weight: 800; line-height: .98; letter-spacing: -.04em; }
.cena-t em { font-style: normal; color: var(--pink); }
.cena-t .lin { display: block; overflow: hidden; padding-bottom: .08em; }
.cena-t .lin > span { display: block; }
.cena-p { max-width: 470px; margin-top: 20px; font-size: clamp(16px, 1.45vw, 19px); line-height: 1.6; color: var(--ink-soft); text-shadow: 0 1px 16px rgba(0, 0, 0, .55); }
/* sem script tudo já está à vista; com script, entra quando a cena aparece */
.js .cena-t .lin > span { transform: translate3d(0, 112%, 0); transition: transform 1.15s var(--curva); }
.js .cena-t .lin:nth-child(2) > span { transition-delay: .12s; }
.js .cena.on .cena-t .lin > span { transform: none; }
.js .cena-n, .js .cena-p { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity .9s .3s ease, transform .9s .3s var(--curva); }
.js .cena.on .cena-n, .js .cena.on .cena-p { opacity: 1; transform: none; }

/* === PEDAÇOS DO PRODUTO (sem caixa: tipografia e linhas finas sobre a foto) === */
.f-rot { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 14.5px; font-weight: 600; color: var(--ink-soft); }
.f-ao-vivo { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--pink); }
.f-ao-vivo::after { content: ''; position: absolute; inset: -1px; border-radius: 50%; border: 1.5px solid var(--pink); animation: ao-vivo 1.8s ease-out infinite; }
@keyframes ao-vivo { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(3); } }
/* sem o aviso "Cena ilustrativa" (pedido dele, 16/10): o site é uma apresentação, o aviso fica pros posts */

/* 1. fluxo de quem está interagindo agora */
.f-feed ul { display: flex; flex-direction: column; justify-content: flex-end; height: 230px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 46%); mask-image: linear-gradient(to bottom, transparent 0, #000 46%); }
.f-feed li { display: flex; align-items: baseline; gap: 12px; flex: none; padding: 14px 0; border-bottom: 1px solid var(--line-2); font-size: 16.5px; font-weight: 500; color: var(--ink-muted); }
.f-feed li b { color: var(--ink); font-weight: 700; white-space: nowrap; }
.f-feed li em { margin-left: auto; padding-left: 10px; font-style: normal; font-size: 26px; font-weight: 800; line-height: 1; color: var(--pink); font-variant-numeric: tabular-nums; }
@media (min-width: 1024px) { .f-feed ul { height: 340px; } .f-feed li { font-size: 18px; padding: 17px 0; } .f-feed li em { font-size: 30px; } }

/* 2. regras: controles de verdade (mexem de verdade) */
.f-regras { display: grid; gap: 14px; }
@media (min-width: 1024px) { .f-regras { gap: 22px; } }
.f-dica { display: inline-flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 600; color: var(--ink-soft); transition: opacity .5s ease; }
.f-dica svg { width: 20px; height: 20px; flex: none; animation: arrasta 1.8s ease-in-out infinite; }
.f-dica.some { opacity: 0; }
@keyframes arrasta { 0%, 100% { transform: translateX(-4px); } 50% { transform: translateX(5px); } }
.regra { display: grid; gap: 4px; }
.regra-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; font-size: 16px; font-weight: 700; line-height: 1.2; color: var(--ink); }
.regra-topo output { font-size: 24px; font-weight: 800; color: var(--pink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.regra input { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; margin: 0; background: transparent; cursor: pointer; touch-action: pan-y; }
.regra input::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(to right, var(--pink) var(--v, 50%), rgba(255, 255, 255, .3) var(--v, 50%)); }
.regra input::-moz-range-track { height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .3); }
.regra input::-moz-range-progress { height: 3px; border-radius: 3px; background: var(--pink); }
.regra input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; margin-top: -10.5px; border-radius: 50%; background: var(--pink); border: 3px solid #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .55); }
.regra input::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--pink); border: 3px solid #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .55); }
.regra input:focus-visible { outline-offset: 4px; }

/* 3. a troca: a tela de verdade do app (reta) e o voucher de papel com QR Code */
.f-troca { display: grid; justify-items: center; }
.f-troca-cena { display: flex; align-items: flex-end; justify-content: center; }
.f-troca .celular { width: min(40vw, 150px); animation: none; }
.f-troca .tela img { width: 100%; height: 100%; object-fit: cover; }
.ticket {
  position: relative; z-index: 2; flex: none; width: clamp(104px, 31vw, 190px); margin: 0 -26px 22px 0; padding: 12px 12px 10px;
  border-radius: 10px; background: var(--light); color: var(--light-ink); transform: rotate(-4deg);
  box-shadow: 0 26px 44px -18px rgba(0, 0, 0, .85);
}
.ticket-t { font-size: 12.5px; font-weight: 800; line-height: 1.2; color: var(--light-ink); }
.ticket-s { margin-top: 2px; font-size: 11px; font-weight: 600; line-height: 1.3; color: var(--light-muted); }
.ticket-qr { width: 66%; margin: 10px auto 2px; padding-top: 10px; border-top: 1.5px dashed var(--light-line); color: var(--light-ink); }
.ticket-qr svg { width: 100%; height: auto; }
@media (min-width: 1024px) {
  .f-troca { justify-items: end; }
  .f-troca .celular { width: 262px; }
  .ticket { margin: 0 -44px 40px 0; padding: 16px 16px 12px; }
  .ticket-t { font-size: 15px; }
  .ticket-s { font-size: 12.5px; }
}

/* 4. o radar: quem sumiu volta quando a casa chama */
.f-radar { display: grid; justify-items: center; gap: 14px; }
.rd-palco { position: relative; width: min(100%, clamp(190px, 33svh, 440px)); aspect-ratio: 1; }
@media (min-width: 1024px) { .rd-palco { width: min(100%, 440px); } }
.rd-aneis i { position: absolute; left: 50%; top: 50%; translate: -50% -50%; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2); }
.rd-aneis i:nth-child(1) { width: 32%; height: 32%; }
.rd-aneis i:nth-child(2) { width: 64%; height: 64%; }
.rd-aneis i:nth-child(3) { width: 98%; height: 98%; }
.rd-pontos { position: absolute; inset: 0; animation: rd-gira 150s linear infinite; }
@keyframes rd-gira { to { rotate: 360deg; } }
.rd-pt {
  position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: #fff;
  transition: transform 1.6s cubic-bezier(.2, .8, .2, 1), background .7s ease; transition-delay: var(--atraso, 0s);
}
.rd-pt.frio { background: rgba(255, 255, 255, .6); }
.rd-pt.sumiu { background: rgba(255, 255, 255, .26); }
.rd-pt.longe { transition-duration: 5.5s; transition-timing-function: ease-in-out; }
/* a turma vem pro centro (voltando) e, ao chegar, vira cliente ativo por perto (voltou) */
.rd-pt.voltando { background: #fff; transition-duration: 1.5s; transition-timing-function: cubic-bezier(.5, .05, .35, 1); }
.rd-pt.voltou { background: #fff; transition-duration: .9s; transition-timing-function: cubic-bezier(.2, .8, .2, 1); }
.rd-pt.sem-trans { transition: none; }
.rd-pt.voltou::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid var(--pink); animation: rd-pop 1.1s ease-out 1; opacity: 0; }
@keyframes rd-pop { 0% { opacity: 1; transform: scale(.6); } 100% { opacity: 0; transform: scale(2.6); } }
.rd-casa { position: absolute; z-index: 2; left: 50%; top: 50%; width: 15%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: var(--pink); }
.rd-casa::before { content: ''; position: absolute; inset: 22%; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .8); }
.rd-casa::after { content: ''; position: absolute; inset: 42%; border-radius: 50%; background: #fff; }
.rd-onda { position: absolute; left: 50%; top: 50%; width: 100%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 1.5px solid var(--pink); opacity: 0; scale: .1; pointer-events: none; }
.rd-onda.vai { animation: rd-onda 1.7s ease-out 1; }
@keyframes rd-onda { 0% { opacity: .95; scale: .1; } 100% { opacity: 0; scale: 1; } }
/* balõezinhos dos resgates: saem da casa e sobem */
.rd-baloes { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.rd-balao { position: absolute; left: calc(50% + var(--dx, 0px)); top: 50%; padding: 7px 12px 8px; border-radius: 14px 14px 14px 4px; background: var(--light); color: var(--light-ink); font-size: 13px; font-weight: 600; line-height: 1.25; white-space: nowrap; box-shadow: 0 10px 28px -8px rgba(0, 0, 0, .6); will-change: transform, opacity; }
.rd-balao b { font-weight: 800; color: var(--light-ink); }
@media (max-width: 639px) { .rd-balao { padding: 6px 10px 7px; font-size: 12px; } }
.rd-legenda { min-height: 26px; font-size: 15px; font-weight: 600; text-align: center; color: var(--ink-soft); transition: opacity .35s ease; }
.rd-legenda.troca { opacity: 0; }
.rd-botao { min-height: 50px; padding: 0 24px; font-size: 15px; }

/* celular e tablet: tudo escala com a ALTURA da tela (svh), pra a cena caber inteira e nunca ficar por
   baixo do menu fixo, mesmo com a barra do navegador comendo tela (iPhone SE, Androids baixos) */
@media (max-width: 1023px) {
  .cena-in { gap: clamp(10px, 2.2svh, 26px); padding-block: calc(var(--nav-h) + 6px) clamp(20px, 4svh, 36px); }
  .cena-n { margin-bottom: clamp(6px, 1.4svh, 18px); font-size: clamp(30px, 5.2svh, 54px); }
  .cena-t { font-size: clamp(30px, 5.2svh, 44px); }
  .cena-p { margin-top: clamp(8px, 1.6svh, 20px); font-size: clamp(13.5px, 2svh, 16.5px); line-height: 1.5; }
  .f-feed ul { height: clamp(120px, 23svh, 230px); }
  .f-feed li { padding-block: clamp(8px, 1.5svh, 14px); font-size: clamp(14px, 2svh, 16.5px); }
  .f-regras { gap: clamp(4px, 1.3svh, 14px); }
  .regra input { height: clamp(22px, 3.4svh, 30px); }
  .f-troca .celular { width: clamp(88px, 15svh, 150px); }
  .ticket { width: clamp(88px, 14svh, 130px); padding: clamp(7px, 1.2svh, 12px); }
  .rd-palco { width: min(100%, clamp(140px, 25svh, 330px)); }
  .rd-botao { min-height: clamp(40px, 5.6svh, 50px); }
}
/* nos aparelhos mais baixos (barra do navegador visível), o número grande da cena é o que sai */
@media (max-width: 1023px) and (max-height: 660px) { .cena-n { display: none; } }