/* ===========================================================================
 * novo.css — home nova da Sator (parede de gesso, base Immersive Garden).
 * Medidas do IG (medidor de 24/09): grade de 12 colunas, calha 16 px, margem
 * 16 px (32 px abaixo de 1024). Hero centrada em y = 50%: logo na coluna 2,
 * frase de marca na coluna 5 ("Escolha inteligente, escolha Sator.", escolha
 * dele em 25/09, no lugar de "Estúdio de sites e sistemas"), aviso na coluna 10.
 * v3 (25/09, pedido dele: "todos os textos não estão condizentes [...] tá tudo
 * muito pequeno"): no IG os textos pequenos ficam fixos em px e só o título
 * cresce com a tela. 26/09 (pedido dele: "a mesma proporção do immersive,
 * exatamente"): voltou a ser assim aqui também (--u = 1 px fixo; textos 14, rótulo 12,
 * logo com 180 de largura). Entre 25 e 26/09 tudo crescia com a tela.
 * Parede lisa ~#c0c0c0; antes de acender a página é #e8e8e8. Texto #030303.
 * =========================================================================== */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces.woff2") format("woff2");
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --parede: #c0c0c0;
  --antes: #e8e8e8;
  --tinta: #030303;
  --serifa: "Fraunces", "Times New Roman", serif;
  --sem: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --u: 1px;   /* 26/09 (pedido dele: "a mesma proporção do immersive, exatamente"): textos fixos em px
               como no IG; só o título e o rodapé crescem com a tela (vw). Antes crescia tudo (25/09). */
  --calha: calc(16 * var(--u));
  --borda: calc(16 * var(--u));
  --sine: cubic-bezier(0.37, 0, 0.63, 1);
  --quart-out: cubic-bezier(0.25, 1, 0.5, 1);
  --p1-out: cubic-bezier(0.5, 1, 0.89, 1);
  --p2-out: cubic-bezier(0.33, 1, 0.68, 1);
  --entra: cubic-bezier(0.2, 0, 0, 1);
  --sai: cubic-bezier(0.4, 0, 0, 1);
}

* { box-sizing: border-box; }
html { background: var(--parede); -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }   /* a barra de rolagem não empurra a página quando a trava da entrada sai */
html.carregando, html.carregando body { background: var(--antes); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0; background: var(--parede); color: var(--tinta);
  font: 400 16px/1.5 var(--sem); -webkit-font-smoothing: antialiased;
  transition: background-color 1.75s var(--sine);
}
a { color: inherit; text-decoration: none; }

.grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--calha); padding: 0 var(--borda); }

#parede {
  position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; z-index: 0;
  opacity: 0; transition: opacity 1.75s var(--sine);
}
.acesa.parede-pronta #parede { opacity: 1; }        /* só depois do 1º quadro desenhado */
.sem-webgl #parede { display: none; }
/* sem WebGL: a escultura parada, com um véu da cor da parede pra o texto continuar legível */
.sem-webgl body {
  background: linear-gradient(rgba(192, 192, 192, 0.6), rgba(192, 192, 192, 0.6)) fixed,
    url("../img/parede/1-cor.jpg") center top / cover fixed no-repeat var(--parede);
}
.filtros { position: absolute; width: 0; height: 0; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sem-som .som { display: none; }
html:not(.acesa) .cursor-pontos { opacity: 0; }     /* os 3 pontos só depois que a página acende */
main, .topo, .rodape { position: relative; z-index: 1; }

/* ---------- cantos: Contato, Ver projeto, som ---------- */
.topo { position: fixed; top: calc(28 * var(--u)); right: calc(40 * var(--u)); z-index: 5; opacity: 0; }
/* menu (26/09): por enquanto simples; a tinta que invade o mármore e o fundo do IG ficam pra fase 2 */
.menu-botao {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none;
  cursor: pointer; color: var(--tinta); font: 400 calc(14 * var(--u))/1.1 var(--sem); transition: color 0.5s var(--sine);
}
.menu-icone { display: grid; gap: 4px; width: 16px; }
.menu-icone i { display: block; height: 1px; background: currentColor; transition: transform 0.5s var(--sai); }
.menu-aberto .menu-botao { color: #e8e8e8; }
.topo { pointer-events: none; }                            /* o botão só responde depois de aparecer */
.e-topo .topo, html:not(.anima) .topo { pointer-events: auto; }
html:not(.js-vivo) .topo { display: none; }                /* sem JS o menu não abre: não mostra o botão */
html.menu-aberto { overflow: hidden; }                     /* trava a rolagem também sem o Lenis (reduced-motion) */
.menu-aberto .topo { opacity: 1; pointer-events: auto; transition: none; }   /* o "Fechar" aparece mesmo se o menu abriu durante a entrada */
html { transition: background-color 0.6s var(--sine); }
html.menu-aberto { background: #080808; }                  /* a calha da barra de rolagem fica escura junto com o menu */
[tabindex="-1"]:focus { outline: none; }
.menu-aberto .menu-icone i:first-child { transform: translateY(2.5px) rotate(45deg); }
.menu-aberto .menu-icone i:last-child { transform: translateY(-2.5px) rotate(-45deg); }
.menu {
  position: fixed; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(8, 8, 8, 0.975); opacity: 0; transition: opacity 0.6s var(--sine);
}
.menu[hidden] { display: none; }
.menu.aberto { opacity: 1; }
.menu-lista { list-style: none; margin: 0; padding: 0; text-align: center; }
.menu-lista a {
  display: inline-block; padding: 8px 0; color: #e8e8e8; font: 300 clamp(40px, 4.4vw, 72px)/1.15 var(--serifa); letter-spacing: -0.01em;
  opacity: 0; transform: translateY(18px); transition: opacity 0.8s var(--p1-out), transform 0.8s var(--p1-out);
}
.menu.aberto .menu-lista a { opacity: 1; transform: none; }
.menu.aberto .menu-lista li:nth-child(2) a { transition-delay: 0.08s; }
.menu.aberto .menu-lista li:nth-child(3) a { transition-delay: 0.16s; }
.menu-lista a:hover, .menu-lista a:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px; outline: none; }
.menu-rodape { position: absolute; bottom: 32px; margin: 0; font: 400 calc(14 * var(--u))/1.1 var(--sem); color: #e8e8e8; opacity: 0.7; }
.menu-rodape a { display: inline-block; padding: 12px 0; }
.link-topo, .ver-projeto { display: inline-block; padding: 12px 0; font: 400 calc(14 * var(--u))/1.1 var(--sem); }   /* IG: 14 */
.ver-projeto { position: fixed; left: calc(40 * var(--u)); bottom: calc(32 * var(--u)); z-index: 3; opacity: 0; }
.som {
  position: fixed; right: calc(27 * var(--u)); bottom: calc(33 * var(--u)); z-index: 3; opacity: 0;
  display: flex; align-items: center; gap: calc(10 * var(--u)); min-height: 44px;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--tinta);
}
.som-rotulo { font: 400 calc(12 * var(--u))/1 var(--sem); opacity: 0; transform: translateX(6px); transition: opacity 0.6s var(--sai), transform 0.6s var(--sai); }
.som:hover .som-rotulo, .som:focus-visible .som-rotulo { opacity: 0.7; transform: none; }
.som-icone { width: calc(30 * var(--u)); height: calc(30 * var(--u)); display: block; }
.som-icone svg { display: block; overflow: visible; width: 100%; height: 100%; }
.som-ponto { fill: var(--tinta); transform-origin: 15px 15px; transform: scale(1.15); transition: transform 0.6s var(--sai), opacity 0.6s; }
.som:hover .som-ponto { transform: scale(0.75); }
.som-anel {
  fill: none; stroke: var(--tinta); stroke-width: 1; stroke-dasharray: 88; stroke-dashoffset: 88;
  transform-origin: 15px 15px; transition: stroke-dashoffset 1.8s var(--sai);
}
.som-ligado:not(.som-mudo) .som-anel { stroke-dashoffset: 57; animation: girar 35s linear infinite; }
.som-ligado:not(.som-mudo) .som-ponto { opacity: 0; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------- hero ---------- */
.hero { position: relative; height: 100vh; height: 100dvh; }
.hero-linha { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); align-items: center; will-change: transform; }
.marca { grid-column: 2 / span 3; justify-self: start; margin: 0; line-height: 0; }   /* 3 colunas: a logo de 180 cabe inteira a partir de 1100; a caixa tem o tamanho da logo (a cortina corre só nela) */
.marca img { width: min(calc(180 * var(--u)), 100%); height: auto; display: block; }   /* IG: logo com 180 de largura */
.frase { grid-column: 5 / span 5; margin: 0; font: 300 calc(28 * var(--u))/1.2 var(--serifa); white-space: nowrap; }
.frase .pal { display: inline-block; opacity: 0; }
.rolar-caixa { grid-column: 10 / span 3; position: relative; font: 400 calc(14 * var(--u))/1.1 var(--sem); }   /* IG: 14 */
.contador, .rolar { opacity: 0; }
.contador { position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-variant-numeric: tabular-nums; }
.rolar { display: inline-block; padding: 12px 0; }

/* entrada (a ordem e os tempos vêm do pagina.js) */
.marca { -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 60%); mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%; -webkit-mask-position: 100% 0; mask-position: 100% 0; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.e-logo .marca { -webkit-mask-position: 0 0; mask-position: 0 0; transition: -webkit-mask-position 2.5s var(--quart-out), mask-position 2.5s var(--quart-out); }
.e-frase .frase .pal { opacity: 1; transition: opacity 1s var(--sine); }
.e-contador .contador { opacity: 0.6; transition: opacity 0.8s var(--sine); }
.e-topo .topo { opacity: 1; transition: opacity 1.5s linear 0.1s; }
.e-cantos .ver-projeto, .e-cantos .som { opacity: 1; transition: opacity 1s var(--sine); }
.e-rolar .contador { opacity: 0; transition: opacity 0.8s var(--sine); }
.e-rolar .rolar { opacity: 0.6; transition: opacity 0.8s var(--sine); }

/* saída da hero ao rolar 30 px (0,3 s); volta: logo 0,6 s, frase 1,25 s com stagger */
.hero-fora .marca { opacity: 0; transition: opacity 0.3s var(--sine) !important; }
.hero-fora .frase .pal { opacity: 0 !important; transition: opacity 0.3s var(--sine) !important; transition-delay: 0s !important; }
.hero-fora .rolar { opacity: 0 !important; transition: opacity 0.3s var(--sine) !important; }
.e-logo .marca { opacity: 1; }
.e-logo:not(.hero-fora) .marca { transition: -webkit-mask-position 2.5s var(--quart-out), mask-position 2.5s var(--quart-out), opacity 0.6s var(--sine); }
.e-rolar:not(.hero-fora) .rolar { transition: opacity 1.25s var(--sine); }

/* A classe .anima vem do js/inicio.js. Com ela, a frase crua fica escondida até o
   pagina.js quebrar em palavras. Sem ela (JS desligado, ou JS que não chegou em 4 s),
   tudo aparece no estado final: nada some esperando um script. */
.anima .frase:not(.dividida), .anima .titulo:not(.dividida) { opacity: 0; }
/* JS tarde: o título do HTML só dá lugar ao do 3D quando a parede acende (e some junto com o fade dela) */
html:not(.anima):not(.parede-pronta) .titulo .let { color: var(--tinta); }
html.titulo-gl:not(.anima) .titulo .let { transition: color 1.75s var(--sine); }
html:not(.anima) .topo, html:not(.anima) .ver-projeto, html:not(.anima) .frase .pal,
html:not(.anima) .titulo .let, html:not(.anima) .jeito-texto .lin, html:not(.anima) .jeito-rotulo, html:not(.anima) .conversa-botao { opacity: 1; filter: none; }
html:not(.anima) .rolar { opacity: 0.6; }
html:not(.anima) .marca { -webkit-mask-image: none; mask-image: none; }
html:not(.anima) .jeito-bloco { transform: none; }
html:not(.js-vivo) .som { display: none; }         /* só sem JS (o caminho "tarde" também tira a .anima e precisa do botão) */

/* ---------- seção 2: o título grande ---------- */
.titulo-sec { position: relative; margin-top: -20vh; padding-bottom: 32vh; }
.titulo {
  grid-column: 2 / span 5; margin: 0;
  font: 300 max(44px, 3.8889vw)/1.1 var(--serifa); letter-spacing: -0.01em;
}
.titulo .pal { display: inline-block; white-space: nowrap; }
/* o título no 3D (texto.js): mesma instância da folha de letras (peso 300, opsz 56) */
.titulo { font-optical-sizing: none; font-variation-settings: "opsz" 56; }
.linha-base { display: inline-block; width: 0; height: 0; }
.titulo-gl .titulo, .titulo-gl .titulo .let { color: transparent; }
.titulo-gl .titulo .let { opacity: 1; filter: none; transition: none; }
.titulo .let { display: inline-block; opacity: 0; filter: blur(6px); transition: opacity 0.7s var(--sine), filter 0.9s var(--sine); }
.titulo.visivel .let { opacity: 1; filter: none; }
.borrando { filter: url(#borrar); }

/* ---------- seção 3: a mídia do projeto ---------- */
.projeto { padding-bottom: 12vh; row-gap: 20vh; }   /* 2 projetos, um embaixo do outro */
.midia { grid-column: 3 / span 8; position: relative; margin: 0; will-change: transform; }
.midia-quadro { position: relative; aspect-ratio: 16 / 10; overflow: hidden; transition: transform 2s var(--p1-out); }
.midia-quadro img { display: block; width: 100%; height: 100%; object-fit: cover; }
.midia-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.midia-quadro > img, .midia-gl { transition: transform 2s var(--p1-out); }   /* o encolhimento do hover mora aqui, não no quadro (01/10) */
.midia.gl .midia-quadro img { opacity: 0; }        /* opacity (não visibility): o alt continua pro leitor de tela */
.midia-titulo {
  position: absolute; left: calc(20 * var(--u)); bottom: calc(18 * var(--u)); margin: 0; pointer-events: none;
  font: 400 calc(14 * var(--u))/1.2 var(--sem); color: #f0f0f0;
}
.midia-titulo .let { display: inline-block; opacity: 0; transform: translateX(-10px); transition: opacity 1s var(--sai), transform 1s var(--sai); }
.midia.sobre .midia-titulo .let { opacity: 1; transform: none; transition: opacity 2s var(--entra), transform 2s var(--entra); }
.midia-tipo { opacity: 0.7; }
.midia[data-tom="escuro"] .midia-titulo { color: var(--tinta); }   /* mídia clara (Rotas): legenda escura */

/* ---------- o bloco "O estúdio": linha a linha ---------- */
.jeito { display: flex; justify-content: center; align-items: center; min-height: 55vw; padding: 160px var(--borda); text-align: center; }
.jeito-bloco { width: min(calc(696 * var(--u)), 100%); transform: translateY(50px); }
.jeito-bloco.visivel { transform: none; transition: transform 2s var(--p2-out); }
.jeito-rotulo { margin: 0 auto calc(24 * var(--u)); max-width: calc(459 * var(--u)); font: 300 calc(22 * var(--u))/1.4 var(--serifa); }
.jeito-texto { margin: 0; font: 300 calc(44 * var(--u))/1.1 var(--serifa); letter-spacing: -0.01em; }
.jeito-texto .lin { display: block; opacity: 0; }
.jeito-rotulo { opacity: 0; }
.jeito-bloco.visivel .jeito-rotulo, .jeito-bloco.visivel .lin { opacity: 1; transition: opacity 1.8s var(--p1-out); }

/* ---------- WhatsApp: mesmo bloco do "Daqui em diante" + o botão ---------- */
.conversa { display: flex; justify-content: center; align-items: center; min-height: 80vh; padding: 80px var(--borda) 40px; text-align: center; }
.conversa-botao {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 40px; padding: 0 28px;
  border: 1px solid var(--tinta); border-radius: 999px; color: var(--tinta); font: 400 calc(14 * var(--u))/1 var(--sem);
  opacity: 0; transition: opacity 1.8s var(--p1-out) 0.3s, background-color 0.4s var(--sine), color 0.4s var(--sine);
}
.jeito-bloco.visivel .conversa-botao { opacity: 1; }
.conversa-botao:hover, .conversa-botao:focus-visible { background: var(--tinta); color: #e8e8e8; outline: none; }

/* ---------- rodapé ---------- */
.rodape { padding: 12vh calc(40 * var(--u)) calc(120 * var(--u)); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 24px; }
.rodape-frase { margin: 0; font: 300 max(24px, 2.6vw)/1.25 var(--serifa); }
.rodape-email { display: inline-block; padding: 12px 0; font: 400 calc(14 * var(--u))/1.1 var(--sem); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- cursor: rótulo que segue com atraso + 3 pontos ---------- */
.cursor-rotulo, .cursor-pontos { position: fixed; left: 0; top: 0; z-index: 5; pointer-events: none; }
.cursor-rotulo { font: 400 calc(12 * var(--u))/1 var(--sem);   /* IG: 12 */ color: var(--tinta); white-space: nowrap; }
.cursor-rotulo.claro { color: #e8e8e8; }
.cursor-rotulo .let { display: inline-block; opacity: 0; transition: opacity 0.8s var(--sine); }
.cursor-rotulo.ativo .let { opacity: var(--op, 1); }
.cursor-rotulo.saindo .let { opacity: 0; transition: opacity 0.5s var(--sine); transition-delay: 0s !important; }
.cursor-pontos { display: grid; gap: 2px; transition: opacity 0.4s; }
.cursor-pontos i { width: 3px; height: 3px; border-radius: 50%; background: var(--tinta); display: block; }
.cursor-pontos.some { opacity: 0; }
@media (hover: none) { .cursor-rotulo, .cursor-pontos { display: none; } }

/* ---------- etiqueta do modo de teste (B1 × B2) ---------- */
.modo-teste { position: fixed; left: 50%; top: 24px; z-index: 6; transform: translateX(-50%); padding: 8px 14px;
  font: 400 calc(15 * var(--u))/1.2 var(--sem); color: var(--tinta); background: rgba(255, 255, 255, 0.8); border-radius: 4px;
  opacity: 0; pointer-events: none; transition: opacity 0.4s var(--sine); }
.modo-teste.ver { opacity: 1; }

/* ---------- abaixo de 1024 e celular ---------- */
@media (max-width: 1099px) { :root { --borda: calc(32 * var(--u)); } }
/* empilhado até 1099: entre 761 e ~1040 a frase atropelava o "role para baixo" e a logo saía cortada */
@media (max-width: 1099px) {
  .topo { top: 20px; right: 32px; }
  .hero-linha { top: 40%; transform: none; row-gap: 20px; }
  .marca, .frase, .rolar-caixa { grid-column: 1 / -1; }
  .marca img { width: 126px; }
  .frase { white-space: normal; max-width: 280px; }
  .ver-projeto { left: 32px; bottom: 24px; }
  .som { right: 22px; bottom: 24px; }
  .som-rotulo { opacity: 0.7; transform: none; }
  .titulo-sec { margin-top: 0; padding-bottom: 20vh; }
  .titulo { grid-column: 1 / -1; font-size: 44px; }
  .midia { grid-column: 1 / -1; }
  .jeito { padding: 120px 32px; }
  .conversa { min-height: 70vh; padding: 60px 32px 20px; }
  .projeto { row-gap: 12vh; }
  .jeito-rotulo { font-size: 20px; }
  .jeito-texto { font-size: 34px; }
  .rodape { padding: 10vh 32px 110px; }
}

@media (max-width: 1099px) and (max-height: 500px) { .hero-linha { top: 16%; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .marca { -webkit-mask-image: none; mask-image: none; }
  .frase .pal, .rolar, .topo, .ver-projeto, .som, .titulo .let, .jeito-texto .lin, .jeito-rotulo, .conversa-botao, .menu-lista a { opacity: 1 !important; filter: none !important; }
  .rolar { opacity: 0.6 !important; }
  .jeito-bloco { transform: none; }
  .parede-pronta #parede { opacity: 1; }
}

/* corvo (01/10) — o corvo 3D ao lado do "Ver projetos" (js/corvo.js). Some junto com o link
   no fade da entrada; o JS só o cria com mouse e janela de 900 px ou mais. */
.corvo { position: fixed; left: 0; top: 0; width: 160px; height: 160px; z-index: 3; pointer-events: none; opacity: 0; will-change: transform; }
.e-cantos .corvo { opacity: 1; transition: opacity 1s var(--sine); }
.corvo-fora, .corvo-desligado { visibility: hidden; }
@media (max-width: 899px), (hover: none), (pointer: coarse) { .corvo { display: none; } }