/* Espaço Premium, a caminhada (26/10/2026, premium-caminhada.js). O Gustavo: "uma porta bonita que se abre e mostra a
   casa por dentro, mas como se fosse algo real, como se eu estivesse caminhando para dentro da casa". É a foto da
   porta entreaberta (a de 16/10, "que ficou bom") em camadas: o fundo com o vão vazado, as duas folhas recortadas que
   giram, e a sala de verdade atrás do vão. A câmera anda até a porta, as folhas abrem e ela entra; lá dentro aparecem
   piso, rodapé, forro e painel. Tudo mexido pelo JS (transform e variáveis), só no que a GPU desenha rápido. */
.pw { position: relative; height: 430vh; background: #070707; }
.pw-palco { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #070707; }
.pw-lado { position: absolute; inset: -4%; background: #0b0a09 center / cover no-repeat; filter: saturate(0.8); }
.pw-lado::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 70% at 50% 55%, transparent 30%, rgba(5, 5, 5, 0.85) 80%); }

/* a sala: atrás de tudo, recortada pelo vão (clip-path que o JS calcula) */
.pw-casa { position: absolute; left: 50%; top: 50%; max-width: none; transform-origin: 50% 50%; will-change: transform, clip-path;
  user-select: none; -webkit-user-drag: none; }

/* a fachada: uma caixa do tamanho da foto larga (3994 x 1536: a porta de 1024 no meio, começando em x 1485, e a
   galeria de arandelas e vasos dos dois lados, 26/10/2026 "que ocupe a tela toda"), posta e escalada pela câmera */
.pw-cena { position: absolute; left: 0; top: 0; width: 3994px; height: 1536px; transform-origin: 0 0; will-change: transform; }
.pw-cena img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; user-select: none; -webkit-user-drag: none; }
.pw-folhas { position: absolute; left: 1485px; top: 0; width: 1024px; height: 1536px; perspective: 2300px; perspective-origin: 52% 45%; }
.pw-folha { will-change: transform, filter; backface-visibility: hidden; }
/* as dobradiças: borda de fora de cada folha (x 188 e 857 da foto) */
.pw-folha-esq { transform-origin: 18.36% 50%; transform: rotateY(calc(var(--abre, 0deg) * -1)); filter: brightness(var(--folha-b, 1)); }
.pw-folha-dir { transform-origin: 83.69% 50%; transform: rotateY(var(--abre, 0deg)); filter: brightness(var(--folha-b, 1)); }
/* a luz da casa saindo pelo vão, no piso de mármore da frente */
.pw-derrama { position: absolute; left: 40.26%; width: 19.48%; top: 74%; height: 18%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(ellipse 50% 60% at 50% 18%, rgba(255, 196, 120, 0.55), rgba(255, 170, 90, 0.12) 55%, transparent 75%);
  opacity: var(--derrama, 0); }

.pw-veu { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 5, 5, 0.35), transparent 22%, transparent 62%, rgba(5, 5, 5, 0.55));
  opacity: var(--veu, 1); }
.pw-veu-dentro { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(10, 8, 6, 0.92), rgba(10, 8, 6, 0.82) 34%, rgba(10, 8, 6, 0.45) 54%, transparent 74%);
  opacity: var(--t2, 0); }

/* textos */
.pw-texto { position: absolute; z-index: 5; color: #F3EDE2; pointer-events: none;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.pw-fechado { left: 0; right: 0; bottom: 4vh; text-align: center; opacity: var(--t1, 1);
  transform: translateY(calc((1 - var(--t1, 1)) * 14px)); }
.pw-kicker { display: block; font: 600 0.72rem var(--font-mono); letter-spacing: 0.28em; text-transform: uppercase; color: #C9A227;
  margin-bottom: 8px; }
.pw-fechado h1 { font: 400 clamp(1.5rem, 3.4vw, 2.6rem)/1.12 var(--font-display); margin: 0 auto; max-width: 22ch; text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.8); }
.pw-dica { margin-top: 10px; font: 500 0.78rem var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(243, 237, 226, 0.62); }
.pw-dica::after { content: ""; display: block; width: 1px; height: 26px; margin: 8px auto 0;
  background: linear-gradient(rgba(201, 162, 39, 0.9), transparent); animation: pw-desce 1.8s ease-in-out infinite; }
@keyframes pw-desce { 0%, 100% { transform: translateY(0); opacity: 0.4; } 50% { transform: translateY(6px); opacity: 1; } }
/* content-box: o recuo da esquerda (que alinha com o resto da página em tela grande) não come a largura do texto */
.pw-aberto { left: 0; top: 50%; box-sizing: content-box; max-width: min(560px, calc(100vw - 32px));
  padding-left: max(16px, calc((100vw - 1180px) / 2), env(safe-area-inset-left, 0px));
  transform: translateY(calc(-50% + (1 - var(--t2, 0)) * 18px)); opacity: var(--t2, 0); }
.pw-aberto.ativo { pointer-events: auto; }
.pw-aberto h2 { font: 400 clamp(1.8rem, 4.2vw, 3.3rem)/1.08 var(--font-display); margin: 0 0 14px; text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.55); }
.pw-aberto p { max-width: 46ch; margin: 0 0 22px; color: rgba(243, 237, 226, 0.9); line-height: 1.6; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.7); }

/* o que tem na sala */
.pw-pontos { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: var(--t3, 0); }
.pw-pontos.ativo { pointer-events: auto; }
.pw-ponto { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 8px; text-decoration: none;
  color: #F3EDE2; font: 600 0.72rem var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
  transform: translate(var(--x, 0px), var(--y, 0px)); }
.pw-ponto i { position: relative; flex: none; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%;
  background: #C9A227; box-shadow: 0 0 0 4px rgba(201, 162, 39, 0.28), 0 0 18px rgba(255, 210, 120, 0.6); }
.pw-ponto i::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1px solid rgba(201, 162, 39, 0.7);
  animation: pw-pulsa 2.2s ease-out infinite; }
@keyframes pw-pulsa { 0% { transform: scale(0.5); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
.pw-ponto span { padding: 6px 10px; border-radius: 999px; background: rgba(12, 10, 8, 0.72); border: 1px solid rgba(201, 162, 39, 0.45);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.pw-ponto:hover span, .pw-ponto:focus-visible span { border-color: #C9A227; color: #fff; }
.pw-ponto:focus-visible { outline: none; }
/* perto da borda direita a etiqueta vai para a esquerda do ponto */
.pw-ponto.esq { flex-direction: row-reverse; transform: translate(calc(var(--x, 0px) - 100%), var(--y, 0px)); }
.pw-ponto.esq i { margin-left: 0; margin-right: -7px; }
.pw-ponto[hidden] { display: none; }

.pw-pular { position: absolute; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(3vh + env(safe-area-inset-bottom, 0px)); z-index: 6;
  font: 600 0.72rem var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(243, 237, 226, 0.6);
  background: none; border: 1px solid rgba(243, 237, 226, 0.25); border-radius: 999px; padding: 8px 14px; cursor: pointer;
  opacity: var(--t1, 1); }
.pw-pular:hover, .pw-pular:focus-visible { color: #F3EDE2; border-color: #C9A227; outline: none; }

@media (max-width: 640px) {
  .pw { height: 380vh; }
  .pw-fechado h1 { font-size: 1.45rem; }
  .pw-aberto { top: auto; bottom: 7vh; transform: translateY(calc((1 - var(--t2, 0)) * 18px)); }
  .pw-veu-dentro { background: linear-gradient(0deg, rgba(10, 8, 6, 0.85), rgba(10, 8, 6, 0.4) 45%, transparent 70%); }
  .pw-ponto { font-size: 0.64rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pw-dica::after, .pw-ponto i::after { animation: none; }
}