/* ==========================================================================
   ROCHA NEVES — construcao.css

   Uma tela só, preta, com o campo ao fundo e três linhas de texto na frente.

   Os tokens vêm da Lavytier (cinco tons, raio derivado da marca, base 8, uma
   curva de movimento). A Rocha Neves tem marca própria — azul e cinza —, mas
   ela ainda não foi levada para tela: aplicá-la aqui, numa página que sai do
   ar em algumas semanas, fixaria uma versão dela antes de o site definir como
   a marca se comporta em fundo escuro. Até lá quem assina a página é quem a
   está construindo, e a página tem de parecer com a assinatura.
   ========================================================================== */

:root {
  /* cor: os cinco tons da marca, nada fora disso */
  --ink:      #000000;
  --graphite: #282828;
  --slate:    #646464;
  --cloud:    #EBEBEB;
  --paper:    #FFFFFF;

  --hair: rgba(255, 255, 255, .12);

  /* raio: 18,3% do lado, os mesmos quatro degraus */
  --r-1: 6px;
  --r-2: 10px;
  --r-pill: 999px;

  /* espaço: base 8 */
  --s-1: 8px;   --s-2: 16px;  --s-3: 24px;  --s-4: 32px;
  --s-6: 48px;  --s-8: 64px;  --s-12: 96px;

  /* movimento: uma curva, três durações */
  --ease:    cubic-bezier(.16, 1, .3, 1);
  --t-tap:   .14s;
  --t-state: .38s;
  --t-enter: .7s;

  --gutter: clamp(20px, 5vw, 48px);

  --font: 'Sora', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

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

.rn-body {
  margin: 0;
  font-family: var(--font);
  background: var(--ink);
  color: var(--cloud);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;              /* a página é exatamente uma tela */
}

/* ==========================================================================
   A TELA
   ========================================================================== */

.rn-root {
  position: relative;
  /* dvh acompanha a barra do navegador no celular, que aparece e some
     durante a rolagem; com vh a página fica alta demais e sangra. */
  min-height: 100svh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto;
  isolation: isolate;
}

/* O campo ocupa a tela inteira e sangra por todos os lados: o conteúdo é que
   está dentro dele, não ele atrás do conteúdo. */
.rn-campo {
  position: fixed;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  display: block;
}

/* Uma sombra no centro, só o bastante para o texto nunca disputar com o
   grão. Não é escurecer a arte — é abrir espaço para a leitura. */
.rn-root::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 78% at 50% 46%, rgba(0,0,0,.72) 0%, rgba(0,0,0,.42) 42%, rgba(0,0,0,0) 78%);
  pointer-events: none;
}

/* ==========================================================================
   O TEXTO
   ========================================================================== */

.rn-centro {
  grid-row: 1;
  align-self: center;
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  padding: var(--s-12) var(--gutter) var(--s-6);
  text-align: center;
}

.rn-marca {
  margin: 0 0 var(--s-4);
  font-family: var(--mono);
  font-size: clamp(11px, 1.5vw, 13px);
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  text-indent: .34em;            /* devolve o espaço que o tracking abre à direita */
  color: var(--slate);
}

.rn-titulo {
  margin: 0;
  font-size: clamp(34px, 7.4vw, 76px);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -.028em;
  color: var(--paper);
  text-wrap: balance;
}

.rn-texto {
  margin: var(--s-4) auto 0;
  max-width: 46ch;
  font-size: clamp(14px, 1.8vw, 17px);
  font-weight: 300;
  line-height: 1.65;
  color: var(--slate);
}

/* ==========================================================================
   O RODAPÉ
   ========================================================================== */

.rn-rodape {
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  padding: var(--s-4) var(--gutter) calc(var(--s-4) + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 255, 255, .07);
}

.rn-estado {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 7px 14px 7px 12px;
  border: 1px solid var(--hair);
  border-radius: var(--r-pill);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate);
}

.rn-pulso {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cloud);
  /* Só opacidade e transform animam. O halo é box-shadow de raio fixo, que o
     compositor resolve sem repintar a caixa. */
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .08);
  animation: rn-pulso 2.8s var(--ease) infinite;
}

@keyframes rn-pulso {
  0%, 100% { opacity: .35; transform: scale(.82); }
  46%      { opacity: 1;   transform: scale(1); }
}

.rn-assinatura {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  opacity: .58;
  transition: opacity var(--t-state) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .rn-assinatura:hover { opacity: 1; }
}

.rn-assinatura-rotulo {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate);
}

.rn-assinatura-marca {
  display: block;
  width: auto;
  height: 17px;
}

:where(a):focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 4px;
  border-radius: var(--r-1);
}

/* ==========================================================================
   ENTRADA

   As quatro linhas entram em degraus curtos.

   É animação de CSS, não transição disparada por JS, e a razão é dura: se
   fosse o script a revelar o texto, um erro de script deixaria a página em
   branco. Aqui o pior caso é o texto aparecer sem se mover.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  @keyframes rn-entra {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }

  [data-rn-entra] {
    animation: rn-entra var(--t-enter) var(--ease) both;
  }

  [data-rn-entra="1"] { animation-delay: .10s; }
  [data-rn-entra="2"] { animation-delay: .20s; }
  [data-rn-entra="3"] { animation-delay: .34s; }
  [data-rn-entra="4"] { animation-delay: .48s; }
}

@media (max-width: 560px) {
  .rn-rodape {
    justify-content: center;
    gap: var(--s-2);
  }
}