/* ==========================================================================
   PERFIL — cabeçalho

   Era um "M" branco num círculo vermelho e uma pilha de cartões, todos com o
   mesmo peso: saldo, ranking, nível, números, preferências. Nada dizia de quem
   é aquela tela nem o que ali é conquista.

   O que o perfil tem de único é o NÍVEL, e é a única coisa que muda de verdade
   com o uso. Então o nível vira o cabeçalho: ele pinta a tela, dá o metal, e a
   barra de progresso é a promessa do próximo. O resto desce de peso.

   A cor vem do metal, não da marca — Cobre, Bronze, Prata, Ouro, Platina e
   Diamante têm cor própria, e é isso que faz duas pessoas de níveis diferentes
   verem telas visivelmente diferentes.
   ========================================================================== */

.perfil-capa {
  position: relative;
  margin:
    calc(-1 * (var(--topo-h) + env(safe-area-inset-top) + var(--e-4)))
    calc(-1 * var(--pad-tela))
    var(--e-5);
  padding:
    calc(var(--topo-h) + env(safe-area-inset-top) + var(--e-7))
    var(--pad-tela)
    var(--e-6);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  /* Cada nível traz o próprio par de cores por variável inline. */
  --metal: var(--texto-fraco);
  --metal-2: var(--texto-3);
}

.perfil-capa[data-nivel="1"] { --metal: #C87F4A; --metal-2: #8A5730; }
.perfil-capa[data-nivel="2"] { --metal: #CD7F32; --metal-2: #7A4A1E; }
.perfil-capa[data-nivel="3"] { --metal: #C9CDD4; --metal-2: #7E858F; }
.perfil-capa[data-nivel="4"] { --metal: #E8B923; --metal-2: #9A7A12; }
.perfil-capa[data-nivel="5"] { --metal: #9FE7E0; --metal-2: #4E9A94; }
/* O topo da escada é OURO BRANCO, e não mais azul-gelo com roxo: aqueles dois
   eram os únicos azuis que sobravam numa tela de app sem azul nenhum, e ainda
   por cima no nível que a pessoa mais quer mostrar. Pálido e perolado é o que
   o separa do nível 4, que é ouro cheio. */
.perfil-capa[data-nivel="6"] { --metal: #F2E8CE; --metal-2: #B9A46A; }

.perfil-capa-luz {
  position: absolute;
  inset: -40% -25% auto -25%;
  height: 170%;
  z-index: -2;
  background:
    radial-gradient(50% 44% at 50% 6%, color-mix(in oklab, var(--metal) 38%, transparent), transparent 70%),
    radial-gradient(46% 40% at 82% 26%, color-mix(in oklab, var(--metal-2) 30%, transparent), transparent 74%);
  filter: blur(8px);
}

.perfil-capa::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 50%;
  z-index: -1;
  background: linear-gradient(to bottom, transparent, var(--fundo));
  pointer-events: none;
}

/* O disco do nível. Anel duplo com a cor do metal e o algarismo no meio — a
   inicial do nome não dizia nada, o número diz em que ponto a pessoa está. */
.perfil-disco {
  width: 96px;
  height: 96px;
  margin: 0 auto var(--e-4);
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  background:
    radial-gradient(circle at 32% 28%, color-mix(in oklab, var(--metal) 30%, transparent), transparent 62%),
    var(--superficie);
  border: 2px solid color-mix(in oklab, var(--metal) 70%, transparent);
  box-shadow:
    0 0 0 6px color-mix(in oklab, var(--metal) 10%, transparent),
    0 0 40px color-mix(in oklab, var(--metal) 28%, transparent);
}

.perfil-disco-num {
  font-size: 40px;
  font-weight: var(--peso-extra);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--metal);
}

.perfil-nome {
  font-size: var(--txt-titulo);
  font-weight: var(--peso-extra);
  letter-spacing: var(--letra-titulo);
  line-height: var(--altura-apertada);
}

.perfil-fone {
  margin-top: var(--e-1);
  font-size: var(--txt-nota);
  color: var(--texto-3);
  font-variant-numeric: tabular-nums;
}

.perfil-metal {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  margin-top: var(--e-3);
  padding: 5px var(--e-4);
  border-radius: var(--raio-pill);
  font-size: var(--txt-mini);
  font-weight: var(--peso-forte);
  letter-spacing: var(--letra-rotulo);
  text-transform: uppercase;
  color: var(--metal);
  border: 1px solid color-mix(in oklab, var(--metal) 45%, transparent);
  background: color-mix(in oklab, var(--metal) 10%, transparent);
}

/* A barra do próximo nível, dentro do cabeçalho: é a única promessa da tela. */
.perfil-avanco { margin-top: var(--e-5); }

.perfil-avanco-barra {
  height: 6px;
  border-radius: var(--raio-pill);
  background: color-mix(in oklab, var(--texto) 12%, transparent);
  overflow: hidden;
}

.perfil-avanco-barra > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--metal-2), var(--metal));
  box-shadow: 0 0 14px color-mix(in oklab, var(--metal) 50%, transparent);
  transition: width var(--tempo-longo) var(--curva);
}

.perfil-avanco-nota {
  margin-top: var(--e-2);
  font-size: var(--txt-mini);
  color: var(--texto-fraco);
}

/* ------------------------------------------------------------- os números */

/* Sem cartão: quatro números soltos numa grade, separados por fio. Cartão em
   volta de um número só é moldura em volta de nada. */
.perfil-numeros {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--e-2);
  padding: var(--e-4) 0;
  border-block: 1px solid color-mix(in oklab, var(--borda) 70%, transparent);
}

.perfil-numero { text-align: center; }

.perfil-numero-valor {
  font-size: var(--txt-destaque);
  font-weight: var(--peso-extra);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.perfil-numero-rotulo {
  display: block;
  margin-top: var(--e-1);
  font-size: var(--txt-micro);
  color: var(--texto-3);
  line-height: var(--altura-apertada);
}

@media (prefers-reduced-motion: reduce) {
  .perfil-avanco-barra > i { transition: none; }
}

/* ============================================ O NOME E O RETRATO, EDITÁVEIS

   Duas coisas nesta tela são da pessoa e não do app: como ela se chama e a cara
   que ela mostra. Cada uma ganha um lápis do lado — pequeno, na beirada, sem
   caixa. Um botão "Editar perfil" no meio da tela transformaria um cabeçalho de
   identidade num formulário. */

/* A CAPA É UMA PILHA: foto em cima, nome embaixo, nível embaixo do nome.
   `inline-grid` quebrou isso — a caixa da foto virou um item de linha e o nome,
   que também estava inline, foi parar ao lado dela em vez de abaixo. A capa não
   é flex: ela centraliza por `text-align`, e nela um bloco só fica no meio se
   for BLOCO com margem automática. */
.perfil-disco-caixa {
  position: relative;
  display: grid;
  place-items: center;
  width: 96px;
  margin: 0 auto;
}

/* O disco já tinha a própria margem de baixo; dentro da caixa ela empurraria o
   lápis junto. A folga volta na caixa. */
.perfil-disco-caixa .perfil-disco { margin-bottom: 0; }

/* O retrato ocupa o disco inteiro, no lugar do algarismo do nível. */
.perfil-foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.perfil-nome-linha {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 100%;
  /* A folga que o disco tinha embaixo, agora entre a foto e o nome. */
  margin-top: var(--e-4);
}

.perfil-nome-linha .perfil-nome { margin: 0; }

/* O lápis. Alvo de toque cheio, desenho pequeno: a área tem os 44px que um dedo
   precisa, e o que se vê é um traço de 15px. */
/* O LÁPIS DO NOME É CLARO, e não `--sobre-marca`.
   Aquele token é a cor que vai SOBRE o dourado — quase preto. Na capa do perfil,
   que é escura, ele desenhava um lápis preto sobre fundo preto: o botão existia,
   ocupava lugar e não se via. Aqui a cor é a do metal do nível, que é a cor que
   a capa inteira já usa. */
.perfil-lapis {
  display: grid;
  place-items: center;
  width: var(--toque-min-compacto);
  height: var(--toque-min-compacto);
  flex: none;
  border: 1px solid color-mix(in oklab, var(--metal) 45%, transparent);
  border-radius: 50%;
  background: color-mix(in oklab, var(--metal) 14%, transparent);
  color: var(--metal);
  cursor: pointer;
  transition: transform var(--tempo-instante) var(--curva), background var(--tempo-curto) var(--curva);
}

.perfil-lapis:active { transform: scale(.9); }

/* O da foto fica na beirada do disco, meio dentro e meio fora — é assim que se
   lê "mexe nisto aqui" sem escrever nada. */
/* O ALVO TEM 44px, O DESENHO TEM 36px.
   Um disco de 44px na quina do retrato fica pesado — parece um segundo botão
   grudado na foto. Mas 36px é menor que a ponta de um dedo, e o teste ponta a
   ponta mede a caixa do BOTÃO, não o que se pinta dentro dela: esticar a área
   com um `::after` transbordando engana o olho e não engana a régua, que é o
   certo dos dois. Então o botão tem os 44px de verdade, é transparente, e o
   disco dourado é desenhado no `::before`, centrado, com 36px. */
.perfil-lapis-foto {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: var(--toque-min-compacto);
  height: var(--toque-min-compacto);
  background: none;
  color: var(--sobre-marca);
  display: grid;
  place-items: center;
}

.perfil-lapis-foto::before {
  content: "";
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--marca);
  border: 2px solid var(--fundo);
  box-shadow: var(--sombra);
}

/* O ícone por cima do disco. */
.perfil-lapis-foto .icone { position: relative; }

/* O RESPIRO DE BAIXO ENCOLHEU NO 2.0.
   A capa reservava espaço para a barra de progresso do nível, que saiu junto
   com o bloco que a explicava (ver telas/perfil.js). Sem ela, o vão empurrava
   o cartão de saldo para fora da primeira dobra — e o saldo é a primeira coisa
   que alguém abre o perfil para ver. */
.perfil-capa { padding-bottom: var(--e-4); }