/* Site do Estúdio Stalo — direção "A — Janela" (DESIGN.md). */
:root {
  --preto: #000;
  --branco: #fff;
  --texto-2: #cfcfcf;          /* subtítulo e endereço sobre o preto: 13,5:1 */
  --margem: clamp(16px, 3vw, 40px);
  --raio: 6px;
  --fonte: "Libre Franklin", "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }      /* senão o display dos botões passa por cima do hidden */
html { background: var(--preto); color: var(--branco); font-family: var(--fonte); -webkit-font-smoothing: antialiased; }
body { background: var(--preto); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--branco); outline-offset: 3px; }

/* A barra de abas. No topo ela é preta e de ponta a ponta, colada no chão; descendo, encolhe até a pílula translúcida
   da referência do Save.design (o Arthur, 28/10). --b vai de 0 (topo) a 1 (encolhida), posto pelo capa.js na rolagem. */
.barra {
  --b: 0;
  position: fixed; z-index: 10;
  top: calc(14px * var(--b)); left: calc(var(--margem) * var(--b)); right: calc(var(--margem) * var(--b));
  height: calc(76px - 20px * var(--b));
  padding: 0 calc(10px + (var(--margem) - 10px) * (1 - var(--b))) 0 calc(18px + (var(--margem) - 18px) * (1 - var(--b)));
  display: flex; align-items: center; gap: clamp(16px, 3vw, 36px);
  background: rgba(0, 0, 0, calc(1 - .3 * var(--b))); border-radius: calc(var(--raio) * var(--b));
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
}
.marca { display: block; line-height: 0; }
.marca img { width: 62px; height: auto; }
.barra nav { display: flex; gap: clamp(14px, 2.4vw, 30px); font-size: .78rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.barra nav a { text-decoration: none; }
.barra nav a[aria-current] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.aba-fechada { opacity: .45; cursor: default; }
.barra .contato { margin-left: auto; }

.botao {
  display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px; border-radius: var(--raio);
  font-size: .92rem; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background-color .2s cubic-bezier(.16, 1, .3, 1), color .2s cubic-bezier(.16, 1, .3, 1);
}
/* <button> não herda fonte, cor nem fundo; :where deixa a regra sem peso, pra cheio/vazado continuarem mandando. */
:where(button.botao) { font: inherit; font-weight: 600; color: inherit; background: transparent; border: 0; cursor: pointer; }
.botao--cheio { background: var(--branco); color: var(--preto); }
.botao--cheio:hover { background: #dcdcdc; }
.botao--vazado { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7); }
.botao--vazado:hover { background: rgba(255, 255, 255, .1); }
.barra .botao { min-height: 38px; padding: 0 14px; font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; }

/* A capa: um palco preso na tela enquanto a seção alta rola por baixo. A altura vem do capa.js (o tamanho da sequência). */
.capa { position: relative; height: 700svh; }
.palco { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.texto { position: relative; z-index: 2; padding: 118px var(--margem) 0; max-width: 820px; will-change: opacity, transform; }
h1 { font-size: clamp(2.7rem, 7.4vw, 6rem); font-weight: 800; line-height: .98; letter-spacing: -.035em; text-wrap: balance; }
.sub { margin-top: 18px; max-width: 46ch; font-size: clamp(1rem, 1.35vw, 1.2rem); line-height: 1.5; color: var(--texto-2); text-wrap: pretty; }
.botoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

.campo { position: absolute; left: var(--margem); right: var(--margem); top: var(--topo-campo, 58svh); bottom: -10svh; border-radius: var(--raio); overflow: hidden; background: #111; }
.campo canvas { width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .9s cubic-bezier(.16, 1, .3, 1); }
.campo canvas.pronto { opacity: 1; }

/* A janela: o capa.js move e cresce ela até tomar a tela. O canvas tem o tamanho da tela toda e se recorta em cover,
   então crescer a janela é abrir a vista, não esticar a imagem. */
.janela { position: absolute; z-index: 3; left: 22%; right: 22%; top: 66svh; height: 60svh; background: #0b0b0d; border-radius: var(--raio); overflow: hidden; }
.cromo { position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: #0e0e12; color: #8d8d96; font-size: .72rem; letter-spacing: .05em; }
.cromo i { width: 9px; height: 9px; border-radius: 50%; background: #3a3a42; }
.cromo span { position: absolute; left: 0; right: 0; text-align: center; }
#quadro { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.convite { position: absolute; z-index: 2; left: 0; right: 0; top: 70%; text-align: center; font-size: .82rem; font-weight: 600; letter-spacing: .04em; text-shadow: 0 1px 6px rgba(0, 0, 0, .8); }
.convite span { display: inline-block; animation: desce 1.8s cubic-bezier(.16, 1, .3, 1) infinite; }
@keyframes desce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
/* As telas de texto: um bloco preto que abre por cima da foto no trecho dele da sequência. */
.telas { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.tela {
  position: absolute; left: var(--margem); bottom: 11svh; width: min(560px, calc(100% - 2 * var(--margem)));
  padding: clamp(24px, 3vw, 40px); background: var(--preto); border-radius: var(--raio);
  opacity: 0; transform: translateY(24px); pointer-events: auto; will-change: opacity, transform;
}
.tela h2 { font-size: clamp(1.8rem, 3.2vw, 2.8rem); font-weight: 800; line-height: 1.02; letter-spacing: -.03em; text-wrap: balance; }
.tela p { margin-top: 16px; color: var(--texto-2); font-size: clamp(1rem, 1.2vw, 1.12rem); line-height: 1.55; text-wrap: pretty; }
.tela .botoes { margin-top: 22px; }
/* A planta: contorno branco sobre o preto, à direita da tela da sala (embaixo dela no celular). O traço tem
   pathLength=1, então o capa.js desenha a planta só mexendo no stroke-dashoffset de 1 a 0. */
.planta { position: absolute; z-index: 3; inset: 14svh var(--margem) 10svh 44%; opacity: 0; pointer-events: none; }
.planta-desenho { width: 100%; height: 100%; display: block; overflow: visible; }
.planta-desenho path { stroke-width: 1.4px; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.planta-desenho .drywall { stroke: #FFBA19; }      /* o box in box da sala de gravação, em amarelo da Paleta B */

.fecho { padding: 22vh var(--margem) 18vh; display: grid; justify-items: start; gap: 28px; border-top: 1px solid #1c1c1c; }
.fecho-marca { width: min(520px, 70vw); height: auto; }
address { font-style: normal; color: var(--texto-2); font-size: 1.05rem; }

@media (max-width: 720px) {
  .barra { height: calc(64px - 12px * var(--b)); gap: 14px; justify-content: center; padding-left: 12px; padding-right: 12px; }   /* no celular, logo e abas no centro (o Arthur, 28/10) */
  .marca img { width: 50px; }
  .barra nav { gap: 12px; font-size: .7rem; }
  .barra .contato { display: none; }      /* no celular o contato fica nos botões da capa e no fecho */
  .texto { padding-top: 96px; }
  .botao { font-size: .88rem; padding: 0 16px; }
  .janela { left: 12%; right: 12%; }
  .planta { inset: 13svh var(--margem) 52svh var(--margem); }
}

/* Quem pede menos movimento vê a janela parada, com uma foto, e a página sem a sequência. */
@media (prefers-reduced-motion: reduce) {
  .capa { height: auto; }
  .palco { position: relative; }
  .convite span { animation: none; }
  .campo canvas { transition: none; }
  .telas { position: static; display: grid; gap: 16px; padding: 24px var(--margem) 0; }
  .tela { position: static; width: auto; max-width: 640px; opacity: 1; transform: none; }
  .planta { display: none; }
}