/* ============================================================
   ASTRON — BASE
   Reset, palco e o esqueleto de seção.
   ============================================================ */

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

* {
  margin: 0;
  padding: 0
}

html {
  background: var(--bg)
}

body {
  font-family: var(--font);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ============================================================
   A BARRA DE ROLAGEM SOME

   A apresentação já tem indicador próprio de progresso, e a barra
   do sistema divide a atenção com ele — além de aparecer diferente
   em cada máquina, o que numa call compartilhada fica visível.

   O SCROLL CONTINUA FUNCIONANDO. Isto esconde só o desenho da
   barra: roda, trackpad, teclado e o Lenis seguem iguais, porque
   nada aqui mexe em overflow.

   Duas sintaxes porque nenhuma cobre todos os navegadores:
   scrollbar-width é o padrão (Firefox e Chrome novos),
   ::-webkit-scrollbar é o que Safari ainda usa.
   ============================================================ */
html {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

img,
svg {
  display: block;
  max-width: 100%
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer
}

/* --- Palco 3D ------------------------------------------------
   Fica fixo atrás de tudo. Como é desenhado por shader e não
   tem geometria, não existe borda: o quadriculado continua
   para fora da tela em qualquer direção.
   ------------------------------------------------------------ */
#stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Durante a travessia do asteroide o palco sobe acima do texto.
   Sem isso ele passaria por trás das palavras, porque o texto é
   DOM em z-index 2 e o 3D é canvas em z-index 0. */
#stage.acima {
  z-index: 3;
}

#stage canvas {
  display: block;
  width: 100%;
  height: 100%
}

/* --- Conteúdo ------------------------------------------------ */
.content {
  position: relative;
  z-index: 1
}

.section {
  min-height: 100svh;
  display: grid;
  align-content: center;
  /* O respiro de baixo conta o menu inteiro a partir do rodapé —
     não só a altura dele. Com o menu subindo 25px, um
     calc(--pad + --nav-h) fixo deixaria o texto encostar nele. */
  padding: calc(var(--pad) + var(--nav-bottom) + var(--nav-h)) var(--pad);
}

/* Trava de leitura: em ultrawide o texto para de esticar e
   o excesso vira respiro, não linha de 200 caracteres. */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
}

/* --- Acessibilidade ------------------------------------------ */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important
  }
}

/* Seção com mais de uma parada de câmera precisa de mais trilho
   de scroll, senão as duas paradas se espremem e o menu troca de
   item no meio de uma delas. */
.section--longa {
  min-height: 200svh
}

/* Seções que precisam de mais trilho porque têm MAIS DE UMA parada,
   ou uma travessia longa dentro delas.

   A conta que decide isto é sempre a mesma: distância percorrida
   pela câmera dividida pelo trecho de trilho que a percorre. As
   travessias aprovadas ficam entre 345 e 460 unidades por unidade
   de progresso; acima disso o movimento vira tranco.

   A Oferta tem três paradas e 76 unidades de câmera. O Decole tem
   uma parada mas 34,5 unidades de aproximação. */
.section--x3 {
  min-height: 300svh
}

.section--x4 {
  min-height: 400svh
}