/* Mercadão da Madeira — versão "serra": a fachada é a tábua, o disco corta a tela e a loja aparece (js/cena.js) */

:root { --corte-e: 47%; --corte-d: 59%; }   /* altura do corte na borda esquerda e na direita */

/* ---------- A rua: céu + fachada recortada ---------- */
.palco { position: absolute; inset: 0; overflow: hidden; }
.rua-ceu { position: absolute; inset: -5%; overflow: hidden; }
.rua-ceu::before {
  content: ""; position: absolute; inset: 0 -6%;
  background: #1c4f9e url("../assets/hero/ceu.webp") center top / cover no-repeat;
  animation: nuvens 46s ease-in-out infinite alternate;
}
@keyframes nuvens { from { transform: translateX(-2.6%); } to { transform: translateX(2.6%); } }

/* a foto é 4:3; em telas largas ela desce para a placa nunca sair pelo topo */
.rua-fachada { position: absolute; left: 0; width: 100%; aspect-ratio: 4 / 3; bottom: min(0px, calc(80svh - 45.15vw)); }
.rua-fachada img { width: 100%; height: 100%; }
@media (max-aspect-ratio: 4/3) { .rua-fachada { left: -15%; width: 130%; bottom: 0; } }
@media (max-aspect-ratio: 1/1) { .rua-fachada { left: -35%; width: 170%; } }

.rua-luz {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(18, 12, 8, .7) 0%, rgba(18, 12, 8, .28) 14%, rgba(18, 12, 8, 0) 30%),
    linear-gradient(0deg, rgba(18, 12, 8, .95) 0%, rgba(18, 12, 8, .78) 14%, rgba(18, 12, 8, 0) 31%);
}

/* ---------- A tábua (duas metades depois que o js entra) ---------- */
.tabua { position: absolute; inset: 0; z-index: 3; will-change: transform; }
.tabua-face { position: absolute; inset: 0; overflow: hidden; background: var(--nogueira-950); }
.cena-viva .tabua-cima .tabua-face { clip-path: polygon(0 0, 100% 0, 100% var(--corte-d), 0 var(--corte-e)); }
.cena-viva .tabua-baixo .tabua-face { clip-path: polygon(0 var(--corte-e), 100% var(--corte-d), 100% 100%, 0 100%); }
/* as duas metades ocupam a tela inteira: só a parte visível de cada uma recebe o toque, senão a de baixo
   (que fica por cima) engole o toque nos botões da metade de cima — é onde eles ficam no celular */
.cena-viva .tabua { pointer-events: none; }
.cena-viva .tabua-face { pointer-events: auto; }
/* borda de madeira recém-cortada, em cada metade */
.tabua-fio { display: none; position: absolute; left: 0; height: 7px; pointer-events: none; transform-origin: 0 0; }
.cena-viva .tabua-fio { display: block; }
.tabua-baixo .tabua-fio { background: linear-gradient(180deg, #f6dcae, #c98a4b 45%, rgba(156, 100, 48, 0)); }
.tabua-cima .tabua-fio { margin-top: -7px; background: linear-gradient(0deg, #f6dcae, #c98a4b 45%, rgba(156, 100, 48, 0)); }

/* ---------- Texto sobre a calçada ---------- */
.chegada { position: absolute; left: 0; right: 0; bottom: clamp(30px, 7vh, 70px); z-index: 3; }
.chegada-titulo {
  font-family: var(--serifa); font-weight: 400; font-size: clamp(2.1rem, 4.6vw, 4rem);
  line-height: 1.02; letter-spacing: -.03em; margin-bottom: 24px; text-shadow: 0 2px 30px rgba(18, 12, 8, .7);
}
.chegada-titulo .linha { display: inline-block; vertical-align: top; margin-right: .22em; }
.chegada-titulo em { font-style: italic; color: var(--destaque); }
.chegada .sobretitulo { margin-bottom: 14px; }
/* só o botão de contorno é transparente: os <button> cobre/escuro precisam manter o fundo deles */
button.btn { cursor: pointer; }
.btn-linha { background: transparent; }

/* ---------- Serra: risco do corte, disco e serragem ---------- */
.serra, .serra-po { display: none; position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.cena-viva .serra, .cena-viva .serra-po { display: block; }
.serra-po { width: 100%; height: 100%; z-index: 6; }
.serra-risco {
  position: absolute; left: 0; height: 5px; margin-top: -2.5px; transform-origin: 0 50%;
  background: #0b0705; box-shadow: 0 0 0 1px rgba(246, 220, 174, .55), 0 0 22px 2px rgba(255, 190, 110, .35);
}
.serra-disco {
  position: absolute; left: 0; top: 0; width: clamp(150px, 36vh, 340px); aspect-ratio: 1; margin: calc(clamp(150px, 36vh, 340px) / -2) 0 0 calc(clamp(150px, 36vh, 340px) / -2);
  will-change: transform; filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .55));
}
.serra-gira { width: 100%; height: 100%; will-change: transform; }
.serra-gira svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* sem movimento (ou antes do JS): só a fachada */
.cena-serra .hero-texto { display: none; }
.cena-viva .cena-serra .hero-texto { display: block; }
.cena-serra .hero-rolar { z-index: 7; }

/* ---------- Dentes de serra na borda das seções escuras ---------- */
.secao.escura { z-index: 1; overflow-x: clip; }
.secao.escura::after {
  content: ""; position: absolute; left: 0; right: 0; top: -13px; height: 14px; pointer-events: none;
  background: var(--nogueira-900);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='14'%3E%3Cpath d='M0 14 L23 0 L30 14Z'/%3E%3C/svg%3E") repeat-x left bottom / 30px 14px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='14'%3E%3Cpath d='M0 14 L23 0 L30 14Z'/%3E%3C/svg%3E") repeat-x left bottom / 30px 14px;
}

/* disco pequeno que corre pela borda de cada seção escura enquanto ela entra na tela */
.secao .mini-serra { position: absolute; left: 0; top: -31px; width: 62px; height: 62px; margin-left: -31px; z-index: 2; pointer-events: none; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .45)); will-change: transform; }
.mini-serra svg { width: 100%; height: 100%; display: block; overflow: visible; }
.mini-serra text { display: none; }

/* ---------- Retrato: texto no céu, corte passando pela placa ---------- */
@media (max-aspect-ratio: 1/1) {
  :root { --corte-e: 67%; --corte-d: 76%; }
  .rua-luz {
    background:
      linear-gradient(180deg, rgba(18, 12, 8, .86) 0%, rgba(18, 12, 8, .62) 34%, rgba(18, 12, 8, 0) 62%),
      linear-gradient(0deg, rgba(18, 12, 8, .7) 0%, rgba(18, 12, 8, 0) 16%);
  }
  .chegada { top: 104px; bottom: auto; }
  .chegada-titulo { font-size: clamp(2.2rem, 10.5vw, 3.2rem); }
  .chegada-titulo .linha { display: block; margin-right: 0; }
  .serra-disco { width: 150px; margin: -75px 0 0 -75px; }
}

/* ---------- Celular deitado (tela baixa): título e botões compactos, junto da calçada ---------- */
@media (max-height: 560px) and (orientation: landscape) {
  .chegada { bottom: 16px; }
  .chegada .sobretitulo { margin-bottom: 6px; }
  .chegada-titulo { font-size: clamp(1.5rem, 8.5vh, 2.6rem); margin-bottom: 12px; }
  .serra-disco { width: 130px; margin: -65px 0 0 -65px; }
}