/* ============================================================
   HOME — o que só existe nesta página.

   O resto (tokens, cena, menu, pausa, cubo, assinatura) mora em
   base.css e é compartilhado com as outras páginas.
   ============================================================ */

.nucleo{
  display: grid; justify-items: center; text-align: center;
  translate: calc(var(--px, 0px) * .5) calc(var(--py, 0px) * .5);
  /* Sem `transition`: o amortecimento já é feito no JS. Os dois
     juntos reiniciavam a interpolação a cada quadro e somavam meio
     segundo de atraso ao seguidor. */
}

/* Só na home o cubo tem texto embaixo dele. */
.nucleo .cubo{ margin-bottom: clamp(.6rem, 2.5vh, 1.4rem); }

.saudacao{
  margin: 0;
  font-family: var(--display);
  font-stretch: expanded;
  font-weight: 700;
  font-size: clamp(2rem, 5.6vw, 4.4rem);
  line-height: 1;
  letter-spacing: .2em;
  text-indent: .2em;          /* compensa o tracking na última letra */
  text-transform: uppercase;
  /* Cinza aceso, nunca branco puro: o cubo continua sendo o ponto
     mais claro da tela. */
  color: var(--aceso);
  text-wrap: balance;
}

.linha{
  margin: clamp(.8rem, 2.2vh, 1.4rem) 0 0;
  max-width: 34ch;
  font-size: clamp(.82rem, 1.05vw, .95rem);
  line-height: 1.65;
  color: var(--aco);
  text-wrap: balance;
}

/* Paisagem baixa. Encolhe em vez de apagar: sumir com a linha era
   perda de conteúdo, e esse mesmo limiar dispara em zoom de 400%. */
@media (max-height: 560px){
  .saudacao{ font-size: clamp(1.4rem, 5.5vh, 2.4rem); letter-spacing: .14em; text-indent: .14em; }
  .linha{ font-size: .78rem; margin-top: .5rem; }
}

@media (prefers-reduced-motion: reduce){
  .nucleo{ translate: none; }
}