/* ==========================================================================
   BASE — tokens, reset, portão, rodapé

   Duas cores. Uma família tipográfica, usada em dois extremos dos seus
   eixos variáveis. Fundo liso: nenhuma guia, nenhum grão, nenhum rótulo
   técnico. O que sobrou na tela sobrou por merecer.
   ========================================================================== */

@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 300ms;
  animation-timing-function: cubic-bezier(.2, .8, .2, 1);
}

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* Duas cores, sempre. Guardadas como componentes para aplicar alpha sem
     inventar um hex novo — "cinza" aqui é sempre tinta com transparência. */
  --ink-rgb: 32 54 206;     /* #2036CE */
  --paper-rgb: 242 240 230; /* #F2F0E6 */

  /*
    Degraus de tinta, medidos sobre este papel:
      100% -> 7,4:1  qualquer texto
       78% -> 4,7:1  texto pequeno, aprova AA
       60% -> 3,2:1  só texto grande (>=24px)
       22% -> filete e borda. Nunca texto.
  */
  --ink-100: rgb(var(--ink-rgb));
  --ink-78: rgb(var(--ink-rgb) / 0.78);
  --ink-60: rgb(var(--ink-rgb) / 0.60);
  --ink-22: rgb(var(--ink-rgb) / 0.22);
  --paper: rgb(var(--paper-rgb));

  /*
    Uma família só, esticada nos dois eixos. O display é a mesma fonte do
    corpo levada ao extremo — peso 900, largura 62 — e é essa distância
    entre os dois extremos que carrega a personalidade, em vez de uma
    segunda família emprestada.
  */
  --face: "Archivo", "Helvetica Neue", Arial, sans-serif;

  /*
    Uma largura só para tudo que é display — portão, índice, promessa,
    valores, título da página de IA. Antes cada bloco tinha a sua, e o
    conjunto lia como três fontes diferentes. O ar entre as letras é que
    muda com o tamanho: quanto maior o corpo, mais apertado o encaixe.
  */
  --largura-display: 92%;
  --aperto-medio: -0.035em;
  --aperto-grande: -0.07em;

  --margem: clamp(1.5rem, 6vw, 7rem);
  --filete: 1px;

  /* A largura da folha vive aqui porque quem sangra de ponta a ponta precisa
     dela para recompor a margem por dentro. Ver `.promessa` em home.css. */
  --folha-max: 1680px;

  --curva: cubic-bezier(.2, .8, .2, 1);
  /* Saída expo: começa rápido e assenta devagar. É a curva que separa
     "premium" de "saltitante". */
  --curva-calma: cubic-bezier(.16, 1, .3, 1);
  /* Simétrica: entra devagar, sai devagar. É a curva de quem dissolve,
     não a de quem entra correndo — usada só nas opacidades do portão. */
  --curva-dissolve: cubic-bezier(.45, 0, .55, 1);
  --rapido: 240ms;
  --medio: 480ms;
  --lento: 700ms;
}

/* Sem inversão automática: o site é sempre tinta sobre papel. */
:root {
  color-scheme: only light;
}

/* --------------------------------------------------------------------------
   2. FONTE — self-hosted, subset latin, dois eixos variáveis
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   3. RESET
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100svh;
  background: var(--paper);
  color: var(--ink-100);
  font-family: var(--face);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
}

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

:focus-visible {
  outline: 2px solid var(--ink-100);
  outline-offset: 3px;
}

::selection {
  background: var(--ink-100);
  color: var(--paper);
}

/* --------------------------------------------------------------------------
   4. FOLHA — a caixa de conteúdo, comum às duas páginas
   -------------------------------------------------------------------------- */

.folha {
  max-width: var(--folha-max);
  margin-inline: auto;
  padding-inline: var(--margem);
}

/*
  A margem que a folha aplica, recalculada a partir da janela. Serve a quem
  sangra até a borda e precisa devolver o texto ao mesmo eixo do resto da
  página: `width: 100vw` mata a margem, e este padding a repõe por dentro.
*/
.sangra {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-inline: max(
    var(--margem),
    calc(50vw - (var(--folha-max) / 2) + var(--margem))
  );
}

/* --------------------------------------------------------------------------
   5. TIPOGRAFIA
   -------------------------------------------------------------------------- */

/* Etiqueta miúda. Poucas, e nenhuma inventada — só o que informa. */
.etiqueta {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-60);
}

/* --------------------------------------------------------------------------
   6. PORTÃO DE ABERTURA

   O nome aparece e desaparece. Só isso. Nada desliza, nada estica, nada
   corta: a única coisa que muda é a opacidade, devagar, nos dois sentidos.
   O fundo do portão é o mesmo papel da página, então a saída não é uma
   cortina que sobe — é o nome se dissolvendo e a página já estando lá.

   Toda visita, sem pular: é o que faz alguém ver o nome antes de qualquer
   outra coisa. CSS puro, sem JavaScript.
   -------------------------------------------------------------------------- */

.portao {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  /* Sem `minmax(0, ...)` a coluna automática cresce até o min-content do
     nome — uma palavra só, indivisível — e estoura a margem. */
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  padding-inline: var(--margem);
  background: var(--paper);
  overflow: hidden;
  animation: apaga 1000ms var(--curva-dissolve) 2450ms forwards;
}

@keyframes apaga {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

.portao-nome {
  font-weight: 900;
  font-stretch: var(--largura-display);
  text-transform: uppercase;
  letter-spacing: var(--aperto-grande);
  /* ZAMPRONIO nesta largura e neste aperto preenche a largura útil da
     tela sem encostar na margem, em qualquer viewport. */
  font-size: min(14.6vw, 19rem);
  line-height: 0.94;
}

.portao-linha {
  display: block;
  animation: surge 1100ms var(--curva-dissolve) both;
}

.portao-linha + .portao-linha {
  margin-top: -0.14em;
}

.portao-linha:nth-child(1) { animation-delay: 200ms; }
.portao-linha:nth-child(2) { animation-delay: 380ms; }

@keyframes surge {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Um filete entre o nome e a legenda. É a única linha do portão. */
.portao-regua {
  height: var(--filete);
  margin-block: clamp(1.3rem, 3vh, 2.2rem) clamp(0.9rem, 2vh, 1.4rem);
  background: var(--ink-22);
  animation: surge 900ms var(--curva-dissolve) 900ms both;
}

.portao-sub {
  font-size: clamp(0.7rem, 1.3vw, 0.85rem);
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-60);
  animation: surge 900ms var(--curva-dissolve) 1150ms both;
}

@keyframes sobe {
  from {
    opacity: 0;
    translate: 0 14px;
  }

  to {
    opacity: 1;
    translate: none;
  }
}

/* --------------------------------------------------------------------------
   7. ENTRADA POR ROLAGEM — nativa, sem biblioteca
   -------------------------------------------------------------------------- */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .entra {
      animation: sobe 700ms var(--curva) both;
      animation-timeline: view();
      animation-range: entry-crossing 0% entry-crossing 45%;
    }
  }
}

/* --------------------------------------------------------------------------
   8. MOVIMENTO REDUZIDO
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }

  .portao {
    animation: portao-corta 1ms linear 900ms forwards;
  }

  .portao-linha,
  .portao-regua,
  .portao-sub {
    translate: none;
    scale: 1;
    opacity: 1;
  }

  @keyframes portao-corta {
    to {
      opacity: 0;
      visibility: hidden;
    }
  }
}