/* ==========================================================================
   A PORTA

   Uma tela, um gesto. Tudo aqui serve para o olho chegar no valor e a mão
   chegar no botão — não há terceiro caminho, e é por isso que não há campo,
   link secundário nem rodapé.

   A hierarquia é a mesma da capa da tela de início: o dinheiro é a única coisa
   em escala grande, e o resto desce de peso. Quem já viu a capa reconhece a
   casa antes de entrar nela.
   ========================================================================== */

.tela-convite {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--e-6);
  padding-block: var(--e-6);
}

.convite-cartao {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--e-4);
  padding: var(--e-7) var(--e-5) var(--e-6);
  border-radius: var(--raio-gg);
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in oklab, var(--verde) 10%, transparent), transparent 70%),
    var(--superficie);
  border: 1px solid var(--borda);
  box-shadow: var(--sombra-alta);
  overflow: hidden;
}

/* Um fio de luz no topo do cartão: diz "isto abriu para você" sem precisar de
   nenhuma palavra a mais. */
.convite-cartao::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--verde), transparent);
}

.convite-selo {
  font-size: var(--txt-micro);
  font-weight: var(--peso-forte);
  letter-spacing: var(--letra-rotulo);
  text-transform: uppercase;
  color: var(--verde);
  padding: 4px var(--e-3);
  border-radius: var(--raio-pill);
  border: 1px solid color-mix(in oklab, var(--verde) 40%, transparent);
  background: color-mix(in oklab, var(--verde) 10%, transparent);
}

.convite-titulo {
  font-size: var(--txt-titulo);
  font-weight: var(--peso-extra);
  letter-spacing: var(--letra-titulo);
  line-height: var(--altura-apertada);
  text-wrap: balance;
}

.convite-apoio {
  font-size: var(--txt-nota);
  color: var(--texto-fraco);
  line-height: var(--altura-normal);
  max-width: 34ch;
  text-wrap: pretty;
}

.convite-apoio strong { color: var(--texto); font-weight: var(--peso-forte); }

/* A linha que explica COMO se ganha, logo abaixo do valor.
   Ela veio para cá vinda de cima: acima do número, era leitura pedida antes de
   existir motivo para ler; abaixo, chega quando a pessoa já viu quanto tem e a
   pergunta natural passou a ser "e como eu faço". */
.convite-como {
  font-size: var(--txt-nota);
  color: var(--texto-fraco);
  line-height: var(--altura-normal);
  max-width: 32ch;
  text-wrap: pretty;
  margin-top: calc(var(--e-1) * -1);
}

/* O valor. Mesma escala e mesmo brilho do saldo na capa da tela de início —
   é o mesmo dinheiro, visto duas vezes na vida do app. */
.convite-bonus {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-block: var(--e-2);
}

.convite-bonus-rotulo {
  font-size: var(--txt-micro);
  font-weight: var(--peso-forte);
  letter-spacing: var(--letra-rotulo);
  text-transform: uppercase;
  color: var(--texto-3);
}

.convite-valor {
  font-size: clamp(42px, 14vw, 58px);
  font-weight: var(--peso-extra);
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--verde);
  text-shadow: 0 0 34px color-mix(in oklab, var(--verde) 32%, transparent);
}

.convite-botao {
  gap: var(--e-2);
  margin-top: var(--e-2);
}

.convite-nota {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--txt-mini);
  color: var(--texto-3);
}

.convite-nota svg { flex: none; }

/* ------------------------------------------------------------------ a marca
   A logo real no lugar do símbolo desenhado.

   O <h1> continua sendo o <h1>; o que mudou é que o conteúdo dele é a arte, e
   não uma linha de texto ao lado de um quadrado colorido. Por isso as regras de
   tipografia herdadas de `.login-titulo` são zeradas aqui: sem isso o
   `letter-spacing` e a `line-height` do título continuariam reservando espaço
   em volta de um texto que não existe mais. */
.convite-marca {
  line-height: 0;
  letter-spacing: 0;
  font-size: 0;
}

.convite-logo {
  /* Larga o bastante para a moeda ter presença, com teto para não estourar em
     tela grande. A altura vem da proporção do arquivo. */
  width: min(80vw, 310px);
  height: auto;
  display: block;

  /* COMO O FUNDO DA ARTE SOME.
     A logo veio renderizada sobre preto, com brilho dourado saindo da moeda. O
     brilho é PARTE da logo, então recortar o fundo — no Canva ou com chave de
     luminância — levaria o brilho junto ou deixaria um halo recortado. Testei a
     chave de luminância: ela come as sombras internas da moeda e o fundo da
     página aparece por dentro do disco.
     `screen` resolve pela matemática da mistura: preto sobre qualquer coisa não
     muda nada, e quanto mais claro o pixel, mais ele aparece. O fundo preto
     evapora sozinho, o brilho continua brilho, e nenhum pixel da arte precisou
     ser apagado.
     A máscara radial que estava aqui antes não servia: ela é redonda e o
     "PlayCash" é largo — o desvanecimento comia as pontas do texto. */
  mix-blend-mode: screen;
}

/* Onde `screen` NÃO serve: tema claro.
   A mistura só apaga o preto quando há escuridão embaixo; sobre fundo claro ela
   apagaria a logo inteira. Aí a arte volta ao normal, dentro de um cartão
   escuro próprio — o mesmo fundo que ela já tinha, agora deliberado. */
@media (prefers-color-scheme: light) {
  :root:not([data-tema="escuro"]) .convite-logo {
    mix-blend-mode: normal;
    border-radius: var(--raio-g);
    background: #05070A;
  }
}

:root[data-tema="claro"] .convite-logo {
  mix-blend-mode: normal;
  border-radius: var(--raio-g);
  background: #05070A;
}