/* ═══════════════════════════════════════════════════════════════════
   hero.css — abertura em sequencia. A primeira dobra ja traz lockup,
   headline, curva e lead; os dois recortes em camadas, com alturas
   diferentes, comecam abaixo dela e entram com a primeira rolagem. Fundo transparente para as nanoparticulas aparecerem em
   cheio. A marca descendente nao tem trilho: desce sozinha.
   ═══════════════════════════════════════════════════════════════════ */

.rn-hero {
  position: relative;
  background: transparent;
  --hero-pad-bottom: clamp(var(--space-8), 12vh, 160px);
  --hero-pad-top: calc(var(--header-h) + clamp(16px, 3vh, 48px));
  /* Faixa reservada na base da dobra para a marca descendente e a seta. */
  --hero-mark-zone: clamp(122px, 17svh, 180px);

  padding-top: var(--hero-pad-top);
  padding-bottom: var(--hero-pad-bottom);
  overflow: hidden;
}

.rn-hero__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-5);
  /* O bloco ocupa a primeira dobra inteira e se centra no espaco acima
     da marca descendente: os retratos comecam exatamente na dobra. */
  min-height: calc(100svh - var(--hero-pad-top));
  padding-bottom: var(--hero-mark-zone);
}

/* Envoltorio da marca: carrega o fluxo de rolagem, enquanto a imagem
   dentro dele carrega a entrada de carregamento. Sao dois movimentos
   com ciclos de vida diferentes, e por isso dois elementos. */
.rn-hero__mark {
  display: flex;
  justify-content: center;
  width: 100%;
}

.rn-hero__lockup {
  /* 424px = os 420px do desenho mais a margem transparente do arquivo.
     O terceiro termo encolhe a marca em telas baixas, para headline,
     curva e lead caberem com ela na primeira dobra. */
  width: max(180px, min(424px, 74.7vw, (100svh - 570px) * 1.742));
  height: auto;
  /* A marca precisa de silencio a volta antes de o headline comecar:
     o intervalo e o que separa a assinatura da promessa. */
  margin-bottom: clamp(var(--space-6), 4vh, var(--space-8));
}

.rn-hero__title {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  /* Um degrau abaixo de --text-display-1: com o lockup logo acima, o
     corpo maximo anterior fazia duas marcas competirem pelo mesmo peso. */
  font-size: clamp(30px, 2.4vw + 20px, 54px);
  /* Entrelinha um pouco mais aberta que --leading-display: o headline
     e uma frase de duas a tres linhas em caixa alta. */
  line-height: 1.14;
  /* Mais fechado que --tracking-display (0.03em) apenas aqui, sem
     alterar o token: na frase longa o tracking do sistema espalhava
     demais as palavras. */
  letter-spacing: 0.012em;
  color: var(--text-heading);
  /* Medida em px: ch nao serve com Cinzel (ver DESIGN.md). */
  max-width: 820px;
  margin: 0;
}

.rn-hero__lead {
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--text-lead);
  line-height: var(--leading-body);
  color: var(--text-body);
  /* Mais largo que --measure-narrow: em tres linhas, e nao quatro, o
     lead cabe na primeira dobra junto com a marca e a headline. */
  max-width: 580px;
  margin: 0;
}

/* ── Curva entre headline e lead ──────────────────────────────────── */

/* Atravessa a tela de lado a lado: um item de 100vw centrado no flex
   estoura igualmente para os dois lados, e a hero corta o excesso
   (overflow: hidden). O viewBox fatia sem distorcer (slice), entao a
   curva e o ponto nunca se deformam em telas estreitas.
   O traco se desenha sozinho no carregamento ([data-hero-draw] recebe
   .is-cued de js/hero-sequence.js). Um ponto de luz percorre a curva
   continuamente (animateMotion) depois que ela se completa. */
.rn-hero__wave {
  width: 100vw;
  max-width: none;
  /* Curva baixa e margens negativas: headline, linha e lead leem como um
     unico bloco, sem o vazio que o gap do intro deixaria. */
  height: clamp(40px, 4vw, 60px);
  margin-block: calc(var(--space-2) * -1);
  flex: none;
  pointer-events: none;
}

.rn-hero__wave svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.rn-hero__wave-line,
.rn-hero__wave-echo {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1900ms var(--ease-entrance) 520ms;
}

/* O eco parte um pouco depois: as duas linhas nao se desenham em bloco. */
.rn-hero__wave-echo { transition-delay: 760ms; }

[data-hero-draw].is-cued .rn-hero__wave-line,
[data-hero-draw].is-cued .rn-hero__wave-echo,
.no-js .rn-hero__wave-line,
.no-js .rn-hero__wave-echo { stroke-dashoffset: 0; }

.rn-hero__wave-line {
  stroke: var(--cedar-500);
  stroke-width: 1.25;
}

.rn-hero__wave-echo {
  stroke: var(--bone-500);
  stroke-opacity: 0.2;
  stroke-width: 1;
}

/* O ponto de luz so acende depois de a linha se completar. */
.rn-hero__wave-dot {
  fill: var(--cedar-200);
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(217, 194, 172, 0.75));
  transition: opacity 900ms var(--ease-entrance) 2100ms;
}

[data-hero-draw].is-cued .rn-hero__wave-dot,
.no-js .rn-hero__wave-dot { opacity: 1; }

/* ── Retratos recortados, em camadas ──────────────────────────────── */

/* Os dois recortes nao formam um par simetrico: o da esquerda fica a
   frente e mais baixo, o da direita sobe e recua. O deslocamento
   vertical entre eles e a profundidade da composicao — reforcada em
   rolagem pelo parallax de cada camada (js/hero-sequence.js). */
.rn-hero__figures {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  column-gap: clamp(4px, 2vw, 24px);
  margin-top: var(--space-4);
}

/* As duas camadas sao [data-flow]: sobem em direcao ao topo mais rapido
   do que a propria rolagem, cada uma no seu ritmo, e desaparecem ao
   chegar la. A da esquerda, que assenta mais baixo, leva o maior fator
   do fluxo inteiro (1) e sobe quase o dobro da direita (0.55), que ja
   nasce elevada. O transform e a opacidade vem de [data-flow], em
   motion.css — nao redeclarar aqui, ou a especificidade empata e a
   ordem dos arquivos decide. */
.rn-hero__layer {
  position: relative;
  display: flex;
}

.rn-hero__layer--left {
  z-index: 2;
  justify-content: flex-end;
}

.rn-hero__layer--right {
  z-index: 1;
  justify-content: flex-start;
  /* A camada de tras sobe: a assimetria e o que cria as duas alturas */
  margin-bottom: clamp(28px, 6.5vw, 108px);
}

/* Sem sobreposicao horizontal: o recorte de hero-bianca.webp carrega um
   retangulo de fundo residual na borda direita (a poltrona), que ficaria
   visivel por cima do blazer claro da figura vizinha. A camada vem do
   deslocamento vertical, do empilhamento e do parallax diferenciado —
   nao de invadir o recorte ao lado. */
@media (min-width: 700px) {
  .rn-hero__figures { column-gap: clamp(8px, 1.4vw, 24px); }
}

.rn-portrait {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
}

.rn-portrait__img {
  /* Os recortes sao fotos cortadas pela moldura: sem o esmaecimento das
     bordas, o corte aparece como aresta reta — e, com a sobreposicao das
     camadas, uma aresta cruzando a figura de tras. Duas mascaras em
     intersecao dissolvem base e laterais. */
  --mask-v: linear-gradient(to bottom, #000 62%, transparent 99%);
  --mask-h: linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%);

  width: 100%;
  max-width: 370px;
  height: auto;
  border-radius: var(--radius-image);
  -webkit-mask-image: var(--mask-v), var(--mask-h);
  -webkit-mask-composite: source-in;
  mask-image: var(--mask-v), var(--mask-h);
  mask-composite: intersect;
}

.rn-portrait__caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  margin-top: calc(var(--space-5) * -1);
}

.rn-portrait__name {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: clamp(17px, 1.4vw + 12px, 26px);
  letter-spacing: var(--tracking-display);
  line-height: 1.2;
  color: var(--text-heading);
  text-align: center;
}

.rn-portrait__oab {
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--text-body-sm);
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

@media (max-width: 599px) {
  .rn-hero__lockup { margin-bottom: var(--space-5); }
  /* Um degrau abaixo de --text-lead: em coluna estreita o lead quebra em
     seis linhas e empurraria a propria base para fora da dobra. */
  .rn-hero__lead { font-size: var(--text-body-lg); }
  .rn-hero__figures { column-gap: 2px; }
  .rn-portrait__caption { margin-top: calc(var(--space-4) * -1); }
  /* Proporcional a coluna: "Bianca Guareschi" cabe numa linha e o nome
     fecha em duas, em vez de tres. */
  .rn-portrait__name { font-size: clamp(13px, 4vw, 17px); }
  .rn-portrait__oab { font-size: var(--text-caption); }
}

/* ── Principios sob os retratos (composicao do protótipo) ─────────── */

/* Os textos se alternam de um lado e do outro do centro, cada um no
   seu degrau. Sem eixo desenhado, o que costura a cascata e o fio cedar
   sob cada titulo e a entrada lateral de cada bloco, vinda do seu lado. */
.rn-hero__principios {
  position: relative;
  /* Mais junto dos retratos: o fluxo ja afasta os blocos durante a
     rolagem (velocidades diferentes), o repouso nao precisa somar vazio. */
  margin-top: clamp(var(--space-7), 7vh, 96px);
}

/* ul.<classe>: o reset zera o padding de toda lista com classe
   (ul[class]) — o seletor precisa da mesma especificidade. */
ul.rn-principios {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--space-6), 4vh, 56px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rn-principio {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  text-align: center;
}

.rn-principio__title {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-title);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  color: var(--text-heading);
  margin: 0;
}

/* Fio sob o titulo: --draw (0–1) vem da rolagem, o fio se desenha a
   partir do centro enquanto o texto se acende. */
.rn-principio__rule {
  display: block;
  width: 56px;
  height: 1px;
  margin: 0 auto;
  background: var(--cedar-500);
  transform: scaleX(var(--draw, 1));
  transform-origin: center;
}

.rn-principio__body {
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--text-body-md);
  line-height: var(--leading-body);
  color: var(--text-body);
  /* O texto cresceu para quatro frases: 34ch empilhava linhas demais. */
  max-width: 42ch;
  margin: 0 auto;
}

@media (min-width: 760px) {
  ul.rn-principios {
    grid-template-columns: 1fr 1fr;
    /* Sem gap de linha: cada degrau e dado pelo recuo do proprio item,
       nao por uma grade regular — e o que reproduz a cascata do
       protótipo em vez de uma tabela de tres celulas. */
    gap: 0 clamp(var(--space-7), 7vw, 128px);
  }

  /* Esquerda no topo, direita um degrau abaixo, esquerda de volta no
     fim: a leitura desce em ziguezague. A margem negativa sobe cada item
     para dentro da faixa do anterior — sao colunas diferentes, entao nao
     ha sobreposicao — e o ziguezague fica compacto, sem vazios entre os
     degraus. Verificado sem colisao durante a rolagem de 390 a 1440px. */
  .rn-principio:nth-child(1) { grid-column: 1; grid-row: 1; }
  .rn-principio:nth-child(2) { grid-column: 2; grid-row: 2; margin-top: calc(clamp(40px, 8vh, 96px) * -1); }
  .rn-principio:nth-child(3) { grid-column: 1; grid-row: 3; margin-top: calc(clamp(40px, 8vh, 96px) * -1); }
}

/* Empilhado, a linha central nao separa nada — some com ela. */
@media (max-width: 759px) {
  .rn-hero__principios::before { display: none; }
}