/* ==========================================================================
   HOME — capa, índice, composição, valores
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CAPA — a primeira tela inteira

   Três faixas: identificação no topo, a proposta e as duas ações no meio,
   contato rente ao pé. Nada mais entra aqui.
   -------------------------------------------------------------------------- */

.capa {
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(2rem, 5vh, 3.5rem);
  padding-block: clamp(1.6rem, 4vh, 2.6rem);
}

/* O nome, depois do portão, vive pequeno e para de disputar atenção. */
.marca {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem 2rem;
  animation: sobe var(--medio) var(--curva-calma) 2680ms both;
}

.marca-nome {
  font-size: clamp(0.95rem, 1.6vw, 1.1rem);
  font-weight: 700;
  font-stretch: 88%;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.marca-sub {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-60);
}

/* --- meio: proposta e as duas ações --- */

.miolo {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: clamp(2.5rem, 7vh, 5rem);
}

/* Na tela estreita a proposta encolhe e o `flex-end` deixava um buraco
   vertical no meio da capa: aqui o miolo se centra em vez de afundar. */
@media (max-width: 760px) {
  .miolo {
    justify-content: center;
  }
}

/*
  A promessa vem da arte que o Enzo desenhou: uma frase de abertura, quatro
  ganhos em display pesado, e um sinal de mais construído com dois retângulos
  — não é o glifo "+" de nenhuma fonte, é uma cruz geométrica.

  As proporções da cruz não são mais as da arte original (82/123 de lado,
  18/123 de traço): são as métricas medidas do próprio Archivo neste peso,
  porque a cruz e a palavra dividem a mesma linha e qualquer diferença entre
  elas lê como erro. Ver o bloco `.mais`.

  É também o único lugar da página onde a tinta vira fundo: a única massa
  cheia do site, já que todo o resto é filete e tipo sobre papel. É ela que
  dá peso à capa e transforma a metade direita vazia num campo de cor em vez
  de papel sobrando.

  Sangra até as bordas (`.sangra`, em base.css) porque um retângulo com
  margem dos dois lados flutua no meio da página; encostado nas bordas ele
  vira faixa, e a capa passa a ler em três bandas: papel, tinta, papel.
*/
.promessa {
  background: var(--ink-100);
  color: var(--paper);
  padding-block: clamp(2.2rem, 5vh, 3.4rem);
}

/* Dentro da faixa o contraste da seleção também tem de virar. */
.promessa ::selection {
  background: var(--paper);
  color: var(--ink-100);
}

/*
  Tela baixa: a capa já ocupa a janela inteira sem folga nenhuma — o corpo da
  lista até encolhe sozinho por `7.2vh`, mas as três faixas somadas fecham
  exatas. Então o ar da faixa é a primeira coisa a ceder, junto com o vão que
  a separa do índice: a cor sozinha já a faz ler como faixa, o respiro é que
  é opcional. Sem isto o `.pe` cai abaixo da dobra em telas de ~700px.
*/
@media (max-height: 820px) {
  .promessa {
    padding-block: clamp(0.6rem, 1.6vh, 1.1rem);
  }

  .miolo {
    gap: clamp(1.2rem, 3vh, 2rem);
  }
}

/*
  A frase é a mesma família da lista, levada ao extremo oposto: caixa baixa,
  largura normal, peso leve, sem aperto. Contra o display — caixa alta, 92%
  de largura, peso pesado, -0.07em — o contraste acontece em três eixos ao
  mesmo tempo. Uma condensada emprestada só para esta linha ficava perto
  demais das formas da lista para contrastar e longe demais para pertencer.

  A medida curta é deliberada: a frase termina bem antes do fim da palavra mais
  longa da lista. Antes as duas paravam a 4px uma da outra, o que lê como
  alinhamento que falhou em vez de duas larguras diferentes.
*/
.frase {
  font-size: clamp(1.15rem, 1.5vw, 1.45rem);
  /* Papel a 82% sobre a tinta: 5,5:1, folgado para este corpo, e recua o
     suficiente para a lista continuar sendo a voz alta do bloco. */
  color: rgb(var(--paper-rgb) / 0.82);
  font-weight: 450;
  font-stretch: 100%;
  letter-spacing: 0;
  line-height: 1.35;
  max-width: 26ch;
  margin-bottom: clamp(1.3rem, 3.2vh, 2.1rem);
  animation: sobe var(--lento) var(--curva-calma) 2760ms both;
}

/*
  O tamanho é limitado pela ALTURA além da largura: quatro linhas de
  display mais o índice não cabem numa tela de 780px se só o `vw` mandar.
*/
.ganhos {
  list-style: none;
  display: grid;
  font-size: clamp(2rem, min(5.6vw, 7.2vh), 4.2rem);
  gap: 0.114em;

  /* Medidas do Archivo 750 a 92% de largura, tiradas do render e não do
     desenho: cap-height, caule, e a coluna que dá à cruz a mesma folga
     óptica que separa duas letras. */
  --cruz-lado: 0.718em;
  --cruz-traco: 0.170em;
  --cruz-meio: calc((var(--cruz-lado) - var(--cruz-traco)) / 2);
  --cruz-coluna: 0.87em;
}

.ganhos li {
  display: grid;
  grid-template-columns: var(--cruz-coluna) 1fr;
  align-items: baseline;
  /*
    750, não 800. Papel sobre tinta engorda o glifo em 4,3% medidos — mas não
    engorda a cruz, que é retângulo e não passa pelo mesmo antialiasing. No
    peso nominal a letra saía com caule de 12px contra 11px da cruz, e a
    paridade das duas se desfazia só por inverter as cores. 750 devolve o
    caule a 11px. Se a faixa um dia voltar a ser papel, isto volta a 800.
  */
  font-weight: 750;
  font-stretch: var(--largura-display);
  letter-spacing: var(--aperto-grande);
  text-transform: uppercase;
  line-height: 0.92;
  animation: sobe var(--lento) var(--curva-calma) both;
}

.ganhos li:nth-child(1) { animation-delay: 2840ms; }
.ganhos li:nth-child(2) { animation-delay: 2915ms; }
.ganhos li:nth-child(3) { animation-delay: 2990ms; }
.ganhos li:nth-child(4) { animation-delay: 3065ms; }

/*
  A cruz. Dois retângulos, sem glifo — mas as medidas saem do Archivo, não de
  um número redondo, porque ela divide a linha com a palavra e o olho compara
  as duas diretamente:

    --cruz-lado  = a cap-height do Archivo neste peso (46,5px medidos em 64,8)
    --cruz-traco = o caule das próprias letras (11px medidos em 64,8)

  Se o peso da lista mudar, estes dois valores mudam junto — senão a cruz
  volta a pesar diferente da palavra. Um traço mais fino que o caule, mesmo
  por 1px, faz o "+" ler como adorno em vez de operador; e a promessa é
  justamente "mais" de tudo, então ele é a parte que menos pode desbotar.

  Sem `opacity`: a cruz é a mesma tinta da palavra. Meio ponto de alpha aqui
  custava 2,7 pontos de contraste e era a razão principal de o bloco parecer
  apagado.
*/
.mais {
  position: relative;
  width: var(--cruz-lado);
  height: var(--cruz-lado);
  align-self: baseline;
  /* Encosta a cruz na faixa da caixa alta: `baseline` alinha o rodapé da
     caixa, e sem este ajuste ela pendia 1,5px abaixo do centro óptico. */
  translate: 0 0.002em;
}

.mais::before,
.mais::after {
  content: "";
  position: absolute;
  background: currentColor;
}

.mais::before {
  left: 0;
  top: var(--cruz-meio);
  width: var(--cruz-lado);
  height: var(--cruz-traco);
}

.mais::after {
  top: 0;
  left: var(--cruz-meio);
  width: var(--cruz-traco);
  height: var(--cruz-lado);
}

/* --------------------------------------------------------------------------
   2. ÍNDICE — as duas ações

   Nem botão nem carimbo: duas linhas de índice de largura total. São as
   únicas coisas da tela com filete, então são impossíveis de não ver.
   Hover entinta a linha inteira.
   -------------------------------------------------------------------------- */

.indice {
  border-top: var(--filete) solid var(--ink-22);
  animation: sobe var(--lento) var(--curva-calma) 3140ms both;
}

.linha {
  display: grid;
  grid-template-columns: 3.2rem 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: clamp(1.1rem, 2.6vh, 1.7rem) 0;
  border-bottom: var(--filete) solid var(--ink-22);
  transition:
    background-color var(--rapido) var(--curva),
    color var(--rapido) var(--curva),
    padding-inline var(--rapido) var(--curva);
}

.linha:hover,
.linha:focus-visible {
  background: var(--ink-100);
  color: var(--paper);
  padding-inline: 1.1rem;
  outline: none;
}

.linha-num {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  opacity: 0.6;
}

.linha-titulo {
  font-size: clamp(1.25rem, 2.6vw, 2rem);
  font-weight: 700;
  font-stretch: var(--largura-display);
  letter-spacing: var(--aperto-medio);
  line-height: 1.1;
}

.linha-cauda {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.linha-cauda svg {
  width: 26px;
  height: 10px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
}

/* A seta se estica para a direita quando a linha entinta. */
.linha-cauda svg line {
  transition: transform var(--rapido) var(--curva);
  transform-origin: left center;
}

.linha:hover .linha-cauda svg line {
  transform: scaleX(1.5);
}

@media (max-width: 620px) {
  .linha {
    grid-template-columns: 2.2rem 1fr;
    row-gap: 0.5rem;
  }

  .linha-cauda {
    grid-column: 2;
    font-size: 0.72rem;
  }
}

/* --------------------------------------------------------------------------
   3. PÉ DA CAPA — contato e redes, discretos

   Uma linha só, na base da primeira tela. Está ali para quem procura, não
   para quem está olhando.
   -------------------------------------------------------------------------- */

.pe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem 1.6rem;
  font-size: 0.8rem;
  color: var(--ink-78);
  animation: sobe var(--medio) var(--curva-calma) 3230ms both;
}

.pe-contatos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
}

.pe a {
  transition: opacity var(--rapido) var(--curva);
}

.pe a:hover {
  opacity: 0.55;
}

.pe-local {
  color: var(--ink-60);
}

.redes {
  display: flex;
  gap: 1.1rem;
  list-style: none;
}

.redes a {
  display: block;
  color: var(--ink-78);
  transition: color var(--rapido) var(--curva), scale var(--rapido) var(--curva);
}

.redes a:hover {
  color: var(--ink-100);
  scale: 1.12;
}

.redes svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   4. COMPOSIÇÃO — a arte depois da rolagem

   O retrato é o centro; os trabalhos orbitam em volta, menores e
   sobrepostos. Tudo em proporção percentual, então a composição inteira
   escala junto com a tela em vez de se desmontar.
   -------------------------------------------------------------------------- */

.obra {
  padding-top: clamp(4rem, 14vh, 9rem);
}

.composicao {
  position: relative;
  aspect-ratio: 16 / 11;
  max-width: 1180px;
  margin-inline: auto;
}

.peca {
  position: absolute;
  margin: 0;
}

.peca img {
  width: 100%;
  height: auto;
}

/* O retrato: centro, maior, e o único que não gira. */
.peca--centro {
  left: 28%;
  top: 10%;
  width: 44%;
  z-index: 3;
}

.peca--a { left: 0;    top: 0;     width: 32%; z-index: 2; }
.peca--b { right: 0;   top: 4%;    width: 30%; z-index: 2; }
.peca--c { left: 6%;   bottom: 0;  width: 30%; z-index: 4; }
.peca--d { right: 2%;  bottom: 2%; width: 33%; z-index: 4; }

.peca figcaption {
  margin-top: 0.6rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-60);
}

.peca--centro figcaption {
  text-align: center;
}

/* A legenda desta peça caía atrás do retrato, que a sobrepõe. Um filho não
   fura o z-index do pai, então em vez de brigar com a pilha a legenda sobe
   para cima da imagem — onde há papel livre. */
.peca--b {
  display: flex;
  flex-direction: column-reverse;
}

.peca--b figcaption {
  margin-top: 0;
  margin-bottom: 0.55rem;
}

/* Cada peça entra no seu tempo, puxada pela rolagem. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .peca {
      animation: monta 900ms var(--curva) both;
      animation-timeline: view();
    }

    .peca--centro { animation-range: entry-crossing 0% entry-crossing 34%; }
    .peca--a      { animation-range: entry-crossing 6% entry-crossing 44%; }
    .peca--b      { animation-range: entry-crossing 10% entry-crossing 48%; }
    .peca--c      { animation-range: entry-crossing 14% entry-crossing 52%; }
    .peca--d      { animation-range: entry-crossing 18% entry-crossing 56%; }
  }
}

@keyframes monta {
  from {
    opacity: 0;
    translate: 0 46px;
    scale: 0.94;
  }

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

/* No celular a composição sobreposta vira uma coluna: sobreposição em
   330px de largura é ilegível, não é arte. */
@media (max-width: 760px) {
  .composicao {
    aspect-ratio: auto;
    display: grid;
    gap: 1.6rem;
  }

  .peca {
    position: static;
    width: auto;
    rotate: none;
  }

  .peca--centro {
    order: -1;
  }
}

/* --------------------------------------------------------------------------
   5. VALORES
   -------------------------------------------------------------------------- */

.valores {
  padding-block: clamp(4.5rem, 15vh, 10rem) clamp(3rem, 10vh, 6rem);
  display: grid;
  gap: clamp(1.6rem, 4vh, 2.6rem);
}

@media (min-width: 900px) {
  .valores {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(3rem, 8vw, 8rem);
  }
}

.valor {
  display: grid;
  gap: 0.35rem;
  padding-top: 1rem;
  border-top: var(--filete) solid var(--ink-22);
}

.valor dt {
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  font-weight: 800;
  font-stretch: var(--largura-display);
  line-height: 1.02;
  letter-spacing: var(--aperto-medio);
}

.valor dd {
  font-size: 0.9rem;
  color: var(--ink-78);
  max-width: 34ch;
}

.fecho {
  padding-bottom: clamp(3rem, 8vh, 5rem);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-60);
}