/* =========================================================================
   TOK leilões — página de aguarde do lançamento.

   Só composição: cor, tipografia, raio, sombra e motion saem dos tokens de
   vendor/colors_and_type.css. Nenhum hex novo além das camadas de fundo, que
   são tints translúcidos dos tokens de marca (azul e dourado) — declarados em
   rgba porque precisam de alfa.
   ========================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100dvh;
  overflow-x: hidden;
}

/* ---------- Camadas de fundo -----------------------------------------------
   Estáticas de propósito: o design system não admite movimento decorativo, e a
   profundidade aqui vem de gradiente e vinheta, não de animação.
   -------------------------------------------------------------------------- */
.cena {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.cena__brilho {
  position: absolute;
  border-radius: 50%;
}

.cena__brilho--azul {
  top: -34vh;
  left: 50%;
  width: min(1200px, 150vw);
  height: min(900px, 110vh);
  transform: translateX(-50%);
  background: radial-gradient(
    closest-side,
    rgba(63, 106, 154, 0.34),
    rgba(63, 106, 154, 0.12) 55%,
    transparent 100%
  );
}

/* O dourado é raro (~5% dos pixels): fica só aqui, no selo e no fio dos blocos. */
.cena__brilho--ouro {
  bottom: -22vh;
  left: 50%;
  width: min(900px, 130vw);
  height: min(620px, 80vh);
  transform: translateX(-50%);
  background: radial-gradient(
    closest-side,
    rgba(212, 175, 55, 0.13),
    rgba(212, 175, 55, 0.04) 60%,
    transparent 100%
  );
}

.cena__grade {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(
    ellipse 80% 60% at 50% 42%,
    #000 20%,
    transparent 78%
  );
  mask-image: radial-gradient(
    ellipse 80% 60% at 50% 42%,
    #000 20%,
    transparent 78%
  );
}

.cena__vinheta {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 100% 78% at 50% 46%,
    transparent 42%,
    rgba(0, 0, 0, 0.58) 100%
  );
}

/* ---------- Esqueleto da página ------------------------------------------- */
.pagina {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-10);
  padding: clamp(24px, 5vw, 48px) clamp(20px, 5vw, 40px);
}

.cabecalho {
  width: 100%;
  max-width: 880px;
  display: flex;
  justify-content: center;
}

/* O logo é colorido para fundo claro; sobre a superfície escura ele vira o
   wordmark branco, como no rodapé do site. */
.marca {
  height: clamp(22px, 3.6vw, 28px);
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.94;
}

.conteudo {
  flex: 1;
  width: 100%;
  max-width: 880px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2vw, 20px);
  text-align: center;
}

/* ---------- Selo, título e apoio ------------------------------------------ */
.selo {
  margin: 0;
  padding: 7px 16px;
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: var(--radius-pill);
  background: rgba(212, 175, 55, 0.08);
  color: var(--color-premium);
}

.titulo {
  margin: 0;
  max-width: 18ch;
  font-size: clamp(26px, 4.6vw, var(--text-5xl));
  color: var(--color-fg);
  text-wrap: balance;
}

.titulo__marca {
  font-family: var(--font-brand);
  font-weight: var(--fw-semibold);
  color: var(--color-premium);
}

.apoio {
  margin: 0;
  max-width: 54ch;
  font-size: clamp(var(--text-sm), 1.1vw, var(--text-md));
  line-height: var(--lh-relaxed);
  color: var(--color-fg-muted);
  text-wrap: pretty;
}

/* ---------- Contador ------------------------------------------------------- */
/* `display: grid` vence o `hidden` do navegador (que é só `display: none` na
   folha do agente): sem esta regra, o contador zerado continuaria na tela. */
.contagem[hidden] {
  display: none;
}

.contagem {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1.8vw, 16px);
  width: 100%;
  max-width: 500px;
  margin-top: var(--space-2);
}

.contagem__bloco {
  position: relative;
  overflow: hidden;
  padding: clamp(12px, 2.2vw, 18px) clamp(4px, 1.2vw, 10px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  background: var(--gradient-surface-dark);
  box-shadow: var(--shadow-lg);
}

/* Fio dourado no topo do bloco — o detalhe premium, em 1px. */
.contagem__bloco::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(212, 175, 55, 0.62),
    transparent
  );
}

.contagem__valor {
  display: block;
  font-size: clamp(24px, 6.2vw, 40px);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: var(--tracking-tighter);
  color: var(--color-fg);
  transition: color var(--duration-base) var(--ease-standard);
}

/* Antes do primeiro tique os campos mostram "--": o cinza evita que o
   marcador seja lido como um número de verdade por um instante. */
.contagem[data-estado="carregando"] .contagem__valor {
  color: var(--color-fg-disabled);
}

.contagem__rotulo {
  display: block;
  margin-top: clamp(6px, 1.4vw, 10px);
  font-size: var(--text-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-fg-subtle);
}

/* ---------- Data e rodapé -------------------------------------------------- */
.data {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-fg-muted);
}

.data__icone {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--color-fg-subtle);
}

.rodape {
  width: 100%;
  max-width: 880px;
  padding-top: clamp(20px, 4vw, 28px);
  border-top: 1px solid var(--color-border-subtle);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
}

.rodape__nota {
  margin: 0;
  font-size: var(--text-2xs);
  color: var(--color-fg-subtle);
}

/* ---------- Acessibilidade e motion ---------------------------------------- */
.apenas-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Entrada única, curta, sem laço — não é decoração em movimento contínuo. */
@media (prefers-reduced-motion: no-preference) {
  .cabecalho,
  .conteudo > *,
  .rodape {
    animation: surgir var(--duration-slower) var(--ease-decelerate) both;
  }

  .conteudo > *:nth-child(1) {
    animation-delay: 60ms;
  }
  .conteudo > *:nth-child(2) {
    animation-delay: 120ms;
  }
  .conteudo > *:nth-child(3) {
    animation-delay: 180ms;
  }
  .conteudo > *:nth-child(4) {
    animation-delay: 240ms;
  }
  .conteudo > *:nth-child(5),
  .conteudo > *:nth-child(6) {
    animation-delay: 300ms;
  }
  .rodape {
    animation-delay: 360ms;
  }
}

@keyframes surgir {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Telas muito estreitas: o contador vira 2×2 antes de os dígitos ficarem
   ilegíveis por falta de largura. */
@media (max-width: 359px) {
  .contagem {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}