/* A presença — "O endereço muda. Seu nome fica.", a cena dirigida pelo scroll,
   exclusiva da home.

   Este arquivo é a folha da ÚNICA seção que só a home imprime. O landing.css é
   carregado por toda página pública (o /entrar, o /assinar, os documentos, o
   blog, as telas de erro), e uma seção que existe numa página só não pode
   custar download e casamento de seletor em todas as outras — no 404
   inclusive. A regra que mantém isto verdadeiro: nada fora de
   views/marketing/home.ejs pode usar estas classes. Se alguma precisar
   aparecer noutra página, o bloco volta para o landing.css — não se carrega
   esta folha em dois lugares.

   Até 03/09/2026 aqui morava o campo de luz (o céu de pontos em quatro atos).
   A seção foi trocada pela cena da presença, desenhada no Claude Design
   (projeto "Presença: ponto e traços digitais", Presenca.dc.html) e portada
   para a casa: o markup em home.ejs, a coreografia em assets/landing.js (o
   bloco `presenca`), o visual aqui.

   ## Como a cena funciona

   A seção tem 360svh de altura e o palco, de uma tela inteira, é sticky no
   topo: enquanto a seção passa por baixo, o palco fica parado e o PROGRESSO
   dessa travessia (0 → 1) é a linha do tempo da cena. Quem lê o progresso e
   escreve cada quadro é o landing.js, em estilo inline (opacity, transform) e
   no canvas; o que esta folha faz é dar a cada peça o seu desenho e o seu
   ESTADO DE REPOUSO.

   ## O contrato da luz vale inteiro aqui

   O estado padrão de todo seletor abaixo é o FINAL da cena — o nome aceso em
   ouro, o parágrafo à vista, os quatro endereços já apagados, os fragmentos
   pousados na posição em que a coreografia os deixa. Sem JS, sem data-luz ou
   com prefers-reduced-motion a seção nasce assim, parada, com uma tela de
   altura; só não há canvas (as estrelas, os fios e o ponto são desenhados
   pelo script, e são enfeite). Os pré-estados — tudo em opacity 0, os
   fragmentos na origem à espera do script — existem só sob html[data-luz],
   que é também quem dá à seção a altura da travessia e ao palco o sticky.

   Parado, o palco é uma GRADE: a zona da cena em cima (o que sobra entre a
   primeira linha do título e o nome), o nome e o parágrafo empilhados no pé.
   É a grade que garante, sem medir nada, que o nome nunca cai em cima do
   parágrafo — num iPhone com a barra do Safari (390×664) os 24svh do nome
   não chegam para o parágrafo caber embaixo. Sob a luz o palco vira caixa
   comum e o nome fica preso ao pé por `bottom`; quem o ergue para o
   parágrafo, no fim da cena, é o script (o `lift` do landing.js).

   ## O celular tem composição própria

   Abaixo de 900px (o breakpoint do desenho, não os 1040 da página) o palco
   não comporta dez peças de tamanho de desktop: ficam QUATRO, uma em cada
   canto da zona — o post, o perfil, o mapa, a busca —, e as outras seis
   passam e vão embora (data-passa; a linha do tempo é a do home.ejs). Parado, os quatro cantos são itens da
   grade (data-vaga); com luz, o script calcula cada vaga do tamanho real da
   peça. Abaixo de 600px as peças e os pinos dos endereços encolhem, e o
   contador de etapa sai — ele dividia a linha com o chapéu.

   Dois cuidados que são mecânica, não estilo:

   1. O palco é sticky, então NENHUM ancestral dele pode ganhar overflow
      hidden/clip — viraria o contêiner de rolagem e o sticky pararia de
      grudar. O overflow:hidden fica no próprio palco, que é o que recorta os
      fragmentos que passam da borda.
   2. A seção não recorta nada de propósito: a trilha (::after) que segue do
      ponto para a seção seguinte nasce em top:100%, do lado de fora.

   O nome é `presenca`, e não uma palavra que os formulários já usem: este
   arquivo é carregado junto com o publico.css nas telas de /entrar e /assinar
   (ver o histórico do `.campo` no painel.css). */

/* -------------------------------------------------------------- a seção */

.presenca {
  /* A margem lateral da cena é a do desenho: cresce com a tela até 96px, para
     o nome grande respirar do canto. É maior que a --margem da página de
     propósito — o palco é uma tela inteira, não uma coluna. */
  --presenca-margem: clamp(20px, 6vw, 96px);
  /* Os rótulos miúdos da cena (endereço 01, traço 03 · busca, 04 — nome) são
     em mono: é o registro de "traço", de registro técnico, que o desenho usa
     para separar a etiqueta do conteúdo. Só aqui na página. */
  --f-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* A barra do topo volta flutuando (body[data-topo-solto], 64px) e cobre o
     alto do palco: o chapéu e o contador nascem abaixo dela. */
  --presenca-topo: 64px;
  /* A primeira linha do título ("O endereço muda.") em variáveis, porque a
     grade do estado parado precisa saber onde ela termina para começar a
     zona da cena — e o script faz a mesma conta, medindo. O max() é o
     celular baixo: em 14svh a linha encostava no chapéu. */
  --l1-topo: max(clamp(72px, 14vh, 150px), calc(var(--presenca-topo) + 42px));
  --l1-tam: clamp(28px, 7.6vw, 54px);
  --zona-topo: calc(var(--l1-topo) + 1.1 * var(--l1-tam) + 12px);
  position: relative;
  margin-top: var(--secao);
  background: var(--noite);
  color: var(--claro);
  min-height: 100vh;
  min-height: 100svh;
}
@supports (height: 1svh) {
  .presenca { --l1-topo: max(clamp(72px, 14svh, 150px), calc(var(--presenca-topo) + 42px)); }
}
/* A travessia: 3,6 telas de rolagem enquanto o palco fica preso. É o
   `velocidade` do desenho (360svh). */
html[data-luz] .presenca { height: 360vh; height: 360svh; }

/* O palco parado é a grade: duas colunas (os cantos do celular se alinham
   por elas; no desktop só o título e o parágrafo as atravessam) e três
   linhas — a zona da cena, que fica com a sobra, o nome, o parágrafo. */
.presenca-palco {
  position: relative; box-sizing: border-box;
  height: 100vh; height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: 1fr auto auto;
  justify-content: space-between;
  padding-top: var(--zona-topo);
}
html[data-luz] .presenca-palco { position: sticky; top: 0; display: block; padding-top: 0; }

.presenca-ceu { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }

/* O chapéu é o da casa, sobre a noite. O contador de etapa, à direita, é
   enfeite do script: nasce dizendo a última etapa, que é o estado final. */
.presenca > .presenca-palco > .chapeu {
  position: absolute; z-index: 9; margin: 0;
  left: var(--presenca-margem); top: calc(var(--presenca-topo) + 20px);
  color: var(--ouro-claro);
}
.presenca > .presenca-palco > .chapeu i { color: var(--ouro-claro); }
.presenca-etapa {
  position: absolute; z-index: 9; margin: 0;
  right: var(--presenca-margem); top: calc(var(--presenca-topo) + 22px);
  font: 600 10px/1 var(--f-mono); letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255, 214, 151, .55);
}

/* ---- o título, em duas linhas que vivem em alturas diferentes do palco

   A primeira fica no alto, pequena, sempre absoluta (parado, o palco é quem
   a posiciona; com luz, o h2 cobre o palco inteiro e dá no mesmo). A segunda
   é o nome, enorme: parado, é a linha do meio da grade; com luz, fica presa
   ao pé por `bottom` — e o ponto final dela é para onde o ponto de luz do
   canvas viaja no fim. O h2 não pega ponteiro. */
.presenca-titulo {
  margin: 0; z-index: 5; pointer-events: none;
  grid-column: 1 / -1; grid-row: 2;
  font-weight: 600; letter-spacing: -.02em;
}
html[data-luz] .presenca-titulo { position: absolute; inset: 0; }
.presenca-titulo [data-l1] {
  position: absolute; left: var(--presenca-margem);
  top: var(--l1-topo);
  font-size: var(--l1-tam); line-height: 1.1;
  color: var(--claro);
  opacity: .5;   /* no fim da cena a primeira linha recua para o nome brilhar */
}
.presenca-titulo [data-l2] {
  display: block; margin-left: var(--presenca-margem);
  font-size: clamp(44px, 12.4vw, 150px); line-height: 1; letter-spacing: -.035em;
  white-space: nowrap;
  color: var(--ouro-claro);
  text-shadow: 0 0 30px rgba(255, 214, 151, .5);
}
/* O ponto final some no fim: quem fica no lugar dele é o ponto de luz. */
.presenca-titulo [data-ponto] { opacity: 0; }
html[data-luz] .presenca-titulo [data-l1] { opacity: 0; }
html[data-luz] .presenca-titulo [data-l2] {
  position: absolute; left: var(--presenca-margem); margin: 0;
  bottom: clamp(150px, 24vh, 230px); bottom: clamp(150px, 24svh, 230px);
  opacity: 0; color: var(--claro); text-shadow: none;
}
html[data-luz] .presenca-titulo [data-ponto] { opacity: 1; }

/* ---- os quatro endereços: pinos num mapa que se apagam

   Cada um é um traço de linha (o consultório, a clínica, o hospital, a tela)
   que se DESENHA com o scroll — pathLength="1" no markup faz o dashoffset
   falar em fração do traço — e um brilho por trás. No estado final os quatro
   já se foram: opacity 0 é o repouso deles. O script os posiciona em volta do
   ponto; sem script não há onde pousá-los, e é por isso que nascem
   invisíveis mesmo sem luz. */
.presenca-end {
  position: absolute; z-index: 6; left: 0; top: 0; opacity: 0;
  white-space: nowrap; text-align: center; pointer-events: none;
  color: var(--ouro-claro);
}
.end-arte { position: relative; display: block; width: 96px; height: 72px; margin: 0 auto 10px; }
.end-brilho {
  position: absolute; left: 50%; top: 50%; width: 160px; height: 120px;
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 214, 151, .3), rgba(255, 214, 151, 0));
  filter: blur(8px);
}
.end-arte svg {
  position: relative; display: block; overflow: visible;
  filter: drop-shadow(0 0 6px rgba(255, 214, 151, .55));
}
.end-arte path, .end-arte circle { stroke-dasharray: 1; stroke-dashoffset: 1; }
.end-arte .fraco { stroke-opacity: .5; stroke-width: 1.1; }
.end-rotulo {
  display: block; margin-bottom: 8px;
  font: 600 9.5px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 214, 151, .62);
}
.end-nome { display: block; font-family: var(--f-titulo); font-size: 15px; color: rgba(251, 247, 240, .85); }
/* No celular os quatro pinos dividem duas fileiras de uma zona estreita: o
   traço encolhe e o nome quebra em duas linhas numa coluna de 150px — em 360px
   de largura, "Rua das Acácias, 120 · sala 4" inteiro numa linha invadia o
   pino ao lado. */
@media (max-width: 599.98px) {
  .presenca-end { white-space: normal; width: 150px; }
  .end-arte { width: 72px; height: 54px; margin-bottom: 8px; }
  .end-arte svg { width: 100%; height: 100%; }
  .end-brilho { width: 120px; height: 90px; }
  .end-nome { font-size: 13px; line-height: 1.35; }
}

/* ---- os fragmentos: os traços digitais que ficam

   Dez peças (o perfil, o post, a busca, o mapa, a menção, o salvo, o recado,
   a listagem, o compartilhamento, a marca) que nascem do ponto e pousam em
   volta dele. A posição de repouso do desktop vem do markup em variáveis —
   --dx/--dy, em % do palco — escritas pelo home.ejs a partir da MESMA lista
   que dá a coreografia ao script, para o estado parado e o animado nunca
   discordarem. A opacidade e a escala de repouso são as contas do script no
   último quadro (.55 + z × .45; .82 + z × .2), e o giro é 40% do inicial,
   que é o quanto sobra quando a peça termina de pousar.

   Sob a luz tudo isso é anulado: a peça vai para a origem, invisível, e quem a
   move é o script. Os [data-breve] (o salvo, o compartilhamento) são os que
   passam e vão embora antes do fim — no repouso já não existem. */
.frag {
  position: absolute; z-index: 7; left: var(--dx); top: var(--dy);
  margin: 0; pointer-events: none; will-change: transform;
  opacity: calc(.55 + var(--z) * .45);
  transform: translate(-50%, -50%) rotate(calc(var(--rot) * .4)) scale(calc(.82 + var(--z) * .2));
  font-family: var(--f-corpo);
}
.frag[data-breve] { opacity: 0; }
html[data-luz] .frag { position: absolute; left: 0; top: 0; margin: 0; opacity: 0; transform: none; }
/* Os que ficam atrás do nome (z-index abaixo do título) e o recado, na frente
   de tudo — a profundidade do desenho. */
.frag-post, .frag-mapa, .frag-salvo, .frag-listagem { z-index: 3; }
.frag-dm { z-index: 8; }

/* O celular parado: as quatro peças que ficam são itens da grade, uma em cada
   canto da zona (a linha 1), retas e no tamanho natural — que é onde o script
   também as deixa no celular, o canto é justo demais para giro e escala. As
   de passagem (data-passa) já se foram, como os breves. A vaga só existe no
   celular: no desktop as mesmas peças seguem absolutas, em --dx/--dy. */
@media (max-width: 899.98px) {
  .frag[data-vaga] { position: static; grid-row: 1; margin: 0 12px; transform: none; }
  .frag[data-vaga="tl"] { grid-column: 1; align-self: start; justify-self: start; }
  .frag[data-vaga="tr"] { grid-column: 2; align-self: start; justify-self: end; }
  .frag[data-vaga="bl"] { grid-column: 1; align-self: end; justify-self: start; }
  .frag[data-vaga="br"] { grid-column: 2; align-self: end; justify-self: end; }
  .frag[data-passa] { opacity: 0; }
}

.frag-rotulo {
  display: block;
  font: 600 9.5px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 214, 151, .62);
}
.frag-miudo { display: block; font-size: 11.5px; color: rgba(251, 247, 240, .6); }
.frag b { display: block; font-size: 13px; font-weight: 700; color: var(--claro); }

/* O cartão: o mesmo desenho para o perfil, a busca e a listagem. */
.frag-perfil, .frag-busca, .frag-listagem {
  box-sizing: border-box; padding: 10px 12px;
  background: rgba(29, 25, 21, .9);
  border: 1px solid rgba(255, 214, 151, .2); border-radius: 3px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, .45);
}
.frag-perfil { display: flex; gap: 10px; align-items: center; width: 196px; }
.frag-perfil img {
  width: 36px; height: 36px; flex: none; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255, 214, 151, .45);
}
.frag-perfil > div { min-width: 0; }
.frag-perfil .frag-rotulo { margin-bottom: 6px; }

.frag-post { width: 92px; }
.frag-post img {
  display: block; width: 92px; height: 115px; object-fit: cover; border-radius: 2px;
  box-shadow: 0 18px 36px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 214, 151, .18);
}
.frag-post figcaption { margin-top: 8px; }

.frag-busca { width: 224px; padding-bottom: 12px; background: rgba(29, 25, 21, .92); }
.frag-busca .frag-rotulo { margin-bottom: 8px; }
.busca-linha {
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid rgba(251, 247, 240, .12);
  padding-bottom: 7px; margin-bottom: 8px;
  font-size: 12px; color: rgba(251, 247, 240, .75);
}
.busca-lupa { width: 9px; height: 9px; flex: none; border: 1.5px solid rgba(251, 247, 240, .55); border-radius: 50%; }
.frag-busca b { color: var(--ouro-claro); }
.frag-busca .frag-miudo { margin-top: 2px; font-size: 11px; color: rgba(251, 247, 240, .5); }

.frag-mapa {
  width: 136px; height: 98px; box-sizing: border-box; overflow: hidden;
  background: var(--noite-2);
  border: 1px solid rgba(255, 214, 151, .18); border-radius: 2px;
  box-shadow: 0 18px 36px rgba(0, 0, 0, .5);
}
.mapa-pino {
  position: absolute; left: 58%; top: 44%; width: 8px; height: 8px; margin: -4px;
  border-radius: 50%; background: var(--ouro-claro);
  box-shadow: 0 0 0 5px rgba(255, 214, 151, .18), 0 0 14px rgba(255, 214, 151, .6);
}
.mapa-cidade { position: absolute; left: 8px; bottom: 7px; }

.frag-mencao, .frag-salvo, .frag-zap {
  display: flex; gap: 8px; align-items: center; white-space: nowrap;
  font-size: 12px; color: rgba(251, 247, 240, .62);
}
.frag-mencao { color: rgba(251, 247, 240, .82); }
.frag-mencao b, .frag-salvo b { display: inline; font-size: inherit; }
.frag-ponto {
  width: 6px; height: 6px; flex: none; border-radius: 50%;
  background: var(--ouro-claro); box-shadow: 0 0 10px rgba(255, 214, 151, .7);
}
.frag-losango { width: 6px; height: 6px; flex: none; border: 1px solid rgba(255, 214, 151, .8); transform: rotate(45deg); }
.zap-seta { font-size: 12px; color: var(--ouro-claro); }

/* O recado da Marina: o mesmo cartão do antigo campo de luz — é o desfecho, a
   cena abstrata virando uma pessoa com nome. */
.frag-dm {
  width: 214px; box-sizing: border-box; padding: 11px 13px 12px;
  background: linear-gradient(180deg, #251F19 0%, #1A1613 100%);
  border: 1px solid rgba(255, 214, 151, .28); border-radius: 3px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, .55);
}
.dm-quem { display: flex; align-items: center; gap: 8px; }
.dm-avatar {
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 214, 151, .14); color: var(--ouro-claro);
  box-shadow: inset 0 0 0 1px rgba(255, 214, 151, .38);
  font-size: 10.5px; font-weight: 800;
}
.dm-quem b { display: inline; font-size: 12.5px; color: var(--ouro-claro); }
.dm-quem i { font-style: normal; font-size: 11px; color: rgba(251, 247, 240, .5); }
.dm-texto { display: block; margin-top: 8px; font-size: 12.5px; line-height: 1.45; color: rgba(251, 247, 240, .78); }

.frag-listagem { width: 186px; background: rgba(29, 25, 21, .85); border-color: rgba(255, 214, 151, .16); box-shadow: none; }
.frag-listagem .frag-rotulo { margin-bottom: 7px; }
.frag-listagem .frag-miudo { font-size: 11px; color: rgba(251, 247, 240, .5); }
.frag-listagem b { margin-top: 2px; }

.frag-marca { display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.frag-marca img { width: 22px; height: 22px; display: block; border-radius: 5px; box-shadow: 0 0 0 1px rgba(255, 214, 151, .3); }

/* O celular: as peças encolhem para caberem duas por fileira em 360px de
   largura, com 12px de respiro da borda e folga entre elas. O post vira
   miniatura (a legenda quebra em duas linhas sob ela), a busca e o perfil
   ficam na largura mínima em que o nome e a linha da URL ainda não quebram
   feio, e o contador de etapa sai — dividia a linha com o chapéu. */
@media (max-width: 599.98px) {
  .presenca-etapa { display: none; }
  /* "…marcou você em um story" não divide a fileira de cima com o
     compartilhamento em 360px; "…marcou você" divide. */
  .frag-mencao [data-largo] { display: none; }
  .frag-perfil { width: 184px; padding: 9px 10px; gap: 9px; }
  .frag-perfil img { width: 32px; height: 32px; }
  .frag-post { width: 72px; }
  .frag-post img { width: 72px; height: 90px; }
  /* "CARROSSEL" tem 65px em mono espaçado: cabe em 72, e a legenda quebra no
     espaço, como no desktop — sem o overflow-wrap da página, que em 64px
     partia a palavra ao meio. */
  .frag-post figcaption { margin-top: 6px; overflow-wrap: normal; word-break: normal; }
  .frag-busca { width: 176px; padding: 9px 11px 10px; }
  .frag-mapa { width: 116px; height: 84px; }
  .frag-listagem { width: 160px; }
}

/* ---- o parágrafo: o argumento dito, no pé do palco, quando o nome já acendeu.
   Parado, é a última linha da grade, logo abaixo do nome; com luz, é absoluto
   no pé e o script ergue o nome para ele caber. */
.presenca-texto {
  grid-column: 1 / -1; grid-row: 3; z-index: 9;
  margin: 16px 20px 26px var(--presenca-margem);
  max-width: 34ch; font-size: 14.5px; line-height: 1.5;
  color: var(--claro-2); text-wrap: pretty;
}
.presenca-texto strong { color: var(--claro); font-weight: 700; }
html[data-luz] .presenca-texto {
  position: absolute; margin: 0;
  left: var(--presenca-margem); right: 20px; bottom: 26px;
  opacity: 0;
}

/* ---- a trilha: o ponto segue para a seção seguinte

   Do lado de fora da seção (top: 100%), na coluna exata do ponto final —
   --ponto-x é medido pelo script —, um fio de ouro que entra no papel da
   próxima seção e se dissolve antes do título dela. Só existe com luz: sem o
   script não há ponto para ela continuar. */
html[data-luz] .presenca::after {
  content: ''; position: absolute; z-index: 2; pointer-events: none;
  top: 100%; left: var(--ponto-x, 50%);
  width: 1px; height: calc(var(--secao) - 8px);
  background: linear-gradient(180deg, var(--ouro), rgba(185, 126, 36, 0));
}