/* ===== palco: o vídeo em "cover", com a unidade --u = 1 pixel do vídeo ===== */
:root {
  /* --vw/--vh = tamanho do vídeo em uso (o main.js troca entre 16:9 e 9:16) */
  --vw: 1920;
  --vh: 1080;
  --tela-w: 100vw;
  --tela-h: 100vh;
  /* A altura inteira da cena sempre aparece (o que for mais largo que o vídeo é
     preenchido pela cena estendida); só numa janela mais larga que a extensão
     (--ext = largura estendida / largura do vídeo) volta a cortar em cima/embaixo. */
  --ext: 1;
  --W: max(calc(var(--tela-h) * var(--vw) / var(--vh)), calc(var(--tela-w) / var(--ext)));
  --H: calc(var(--W) * var(--vh) / var(--vw));
  --u: calc(var(--W) / var(--vw));

  /* de onde o corte "puxa" quando sobra vídeo dos lados (0 = esquerda, 1 = direita) */
  --ax: .5;

  --parede: #c9a684;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

@supports (height: 100dvh) {
  :root { --tela-h: 100dvh; }
}

/* celular em pé ainda sem vídeo vertical: puxa o corte para a parede dos quadros */
:root.layout-paisagem.tela-em-pe { --ax: .62; }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--parede);
}

.stage {
  position: fixed;
  left: calc((var(--tela-w) - var(--W)) * var(--ax));
  top: calc((var(--tela-h) - var(--H)) / 2);
  width: var(--W);
  height: var(--H);
}

/* laterais estendidas, atrás do vídeo; o miolo é o próprio poster */
.fundo-largo {
  position: absolute;
  top: 0;
  height: 100%;
  left: calc(var(--faixa, 0) * var(--u) * -1);
  width: calc(var(--W) * var(--ext));
  background: var(--parede) center / 100% 100% no-repeat;
  pointer-events: none;
}

.bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--parede);
}

/* bordas suaves do vídeo: se a luz do vídeo mudar um pouco em relação à extensão,
   a emenda não aparece */
:root.com-extensao .bg {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 1.6%, #000 98.4%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 1.6%, #000 98.4%, transparent);
}

/* ===== peças na parede ===== */
/* a parede é um espaço 3D visto do centro da cena, com a distância da câmera do
   vídeo: peças nas pontas mostram um fio da lateral, como na foto */
.parede {
  position: absolute;
  inset: 0;
  perspective: calc(var(--u) * 2300);
  perspective-origin: 50% 50%;
}

.peca,
.sombra {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  aspect-ratio: var(--proporcao, 3 / 4);
}

.peca { transform-style: preserve-3d; }

.peca[hidden],
.sombra[hidden] { display: none; }

/* sombras projetadas (o main.js calcula uma por luz); multiply = escurece a parede
   sem acinzentar, como sombra de verdade */
.sombras {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.sombra { mix-blend-mode: multiply; }

.corpo {
  position: absolute;
  inset: 0;
  display: block;
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  outline: none;
  will-change: transform;
}

/* laterais da moldura, da frente até a parede */
.lado {
  position: absolute;
  --d: calc(var(--u) * var(--prof, 12));
  pointer-events: none;
}
.lado.topo, .lado.base { left: 0; width: 100%; height: var(--d); }
.lado.esq, .lado.dir { top: 0; height: 100%; width: var(--d); }
.lado.topo { top: 0;    transform-origin: 50% 0;    transform: rotateX(-90deg); background: linear-gradient(var(--lado-topo), color-mix(in srgb, var(--lado-topo), #000 30%)); }
.lado.base { bottom: 0; transform-origin: 50% 100%; transform: rotateX(90deg);  background: linear-gradient(color-mix(in srgb, var(--lado-base), #000 30%), var(--lado-base)); }
.lado.esq  { left: 0;   transform-origin: 0 50%;    transform: rotateY(90deg);  background: linear-gradient(90deg, var(--lado-esq), color-mix(in srgb, var(--lado-esq), #000 30%)); }
.lado.dir  { right: 0;  transform-origin: 100% 50%; transform: rotateY(-90deg); background: linear-gradient(90deg, color-mix(in srgb, var(--lado-dir), #000 30%), var(--lado-dir)); }
.lado { background-color: #6b4a2e; }
.peca:not(.gl) .lado { display: none; }

.corpo img,
.corpo canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.corpo canvas { visibility: hidden; }
.peca.gl .corpo canvas { visibility: visible; }
.peca.gl .corpo img { visibility: hidden; }

a.corpo { cursor: pointer; }

a.corpo:focus-visible::after {
  content: "";
  position: absolute;
  inset: max(calc(var(--u) * -7), -5px);
  border: max(calc(var(--u) * 2.5), 2px) solid #fff8ec;
  border-radius: 2px;
}

/* imagem ainda não colocada na pasta: caixa tracejada com o nome do arquivo */
.peca.faltando .corpo {
  border: calc(var(--u) * 3) dashed rgb(64 36 20 / .55);
  background: rgb(255 255 255 / .18);
  display: grid;
  place-items: center;
  padding: 6%;
  font: 600 calc(var(--u) * 16) / 1.3 system-ui, sans-serif;
  color: rgb(64 36 20 / .9);
  text-align: center;
  overflow-wrap: anywhere;
}
.peca.faltando .corpo img,
.peca.faltando .corpo canvas { display: none; }
.peca.faltando .corpo::before { content: "[falta: " attr(data-arquivo) "]"; }

/* ===== etiqueta de museu: aparece embaixo do quadro clicável ===== */
.etiqueta {
  position: absolute;
  left: 50%;
  top: calc(100% + var(--u) * 26);
  display: grid;
  gap: calc(var(--u) * 3);
  justify-items: center;
  padding: calc(var(--u) * 9) calc(var(--u) * 16);
  background: #f4ede0;
  color: #2a2420;
  white-space: nowrap;
  box-shadow:
    0 0 calc(var(--u) * 1.5) rgb(52 32 20 / .4),
    calc(var(--u) * 4) calc(var(--u) * 3) calc(var(--u) * 5) rgb(70 44 28 / .3);
  opacity: 0;
  translate: -50% calc(var(--u) * 8);
  pointer-events: none;
  transition: opacity .2s ease, translate .25s var(--ease);
}

.etiqueta b {
  font: 600 max(calc(var(--u) * 17), 12px) / 1.15 Georgia, "Times New Roman", serif;
  letter-spacing: .01em;
}

.etiqueta small {
  font: 400 max(calc(var(--u) * 12), 10px) / 1.2 Georgia, "Times New Roman", serif;
  font-style: italic;
  opacity: .72;
}

.peca.erguida .etiqueta {
  opacity: 1;
  translate: -50% 0;
  transition-duration: .3s, .35s;
  transition-delay: .1s;
}

@media (prefers-reduced-motion: reduce) {
  .etiqueta { transition: none; translate: -50% 0; }
}