@font-face {
  font-family: "Naomi";
  src: url("fonts/Naomi%20W00%20Normal/Web%20Fonts/5af3b7ed3987702b4f24b99f59517060.woff2") format("woff2"),
       url("fonts/Naomi%20W00%20Normal/Web%20Fonts/5af3b7ed3987702b4f24b99f59517060.woff") format("woff");
  font-display: block; /* o título é a primeira coisa que se vê: melhor esperar que piscar em serifada */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: #0d0a06;
  overflow-x: hidden;
}

::selection {
  background: #5a3b16;
  color: #e8dcb8;
}

/* ---- retrato: o site não abre ----
   não dá pra girar o aparelho pela web (orientation.lock exige fullscreen e o
   iOS ignora), e girar o palco por transform quebrava os position:fixed.
   então em retrato o palco some e um aviso pede o celular na horizontal. */

#aviso-retrato { display: none; }

@media (orientation: portrait) and (max-width: 900px) {
  body { overflow: hidden; }

  #palco { display: none; }

  #aviso-retrato {
    position: fixed;
    inset: 0;
    z-index: 50; /* acima de tudo, até da entrada */
    background: #0d0a06;
    display: grid;
    place-content: center;
    gap: 22px;
    padding: 24px;
    text-align: center;
    color: #e8dcb8;
    font: 14px/1.7 "Courier New", monospace;
  }

  .aviso-titulo {
    font: 400 clamp(30px, 9vw, 52px)/1.2 "Naomi", Georgia, serif;
    letter-spacing: .1em;
  }

  .aviso-nota { opacity: .55; }
}

/* ---- fundo scrollável ---- */

#mundo {
  width: 100%;
}

.tela {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9; /* canvas do photoshop (1920x1080); tudo escala junto */
  background-size: cover;
  background-position: center;
  image-rendering: pixelated;
}

/* bg6 é um webp animado colorido: entra por ::before pra receber a mesma sépia
   das relíquias sem contaminar as relíquias pousadas nele (que já têm a sua). */
.tela.animada { background-image: none; }

.tela.animada::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("bg/bg6.webp") center / cover;
  image-rendering: pixelated;
  filter: grayscale(1) sepia(1) saturate(1.35) brightness(.95) contrast(1.05);
}

/* ---- hotspots ---- */

.reliquia {
  position: absolute;
  display: block;
}

/* em repouso a relíquia é parte da pintura: grayscale mata a cor original,
   sepia+saturate a devolve no ocre do fundo (hue 39, sat 29%, lum 32%).
   no hover ela acorda e volta a ser colorida. */
.reliquia img {
  width: 100%;
  display: block;
  filter: grayscale(1) sepia(1) saturate(1.35) brightness(.95) contrast(1.05);
  transition: filter .3s ease-out;
}

.reliquia:hover img {
  filter: drop-shadow(0 0 12px rgba(232, 220, 184, .55));
}

/* gif com fundo preto opaco: screen apaga o preto */
.blend-screen img { mix-blend-mode: screen; }

/* relíquias pousadas na moldura, acima dela */
.reliquia.fixa {
  position: fixed;
  z-index: 15;
}

/* ---- moldura fixa ---- */

#moldura {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

#moldura img {
  width: 100%;
  height: 100%; /* ponytail: estica pro viewport; fatiar em 8 se distorcer demais */
  display: block;
}

/* enfeite: gif sem link, cursor não promete nada */
.reliquia.enfeite { cursor: default; }

/* ---- navegador interno ---- */

#veu {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(13, 10, 6, .78);
}

#navegador {
  position: fixed;
  z-index: 31;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(880px, 78vw);
  height: min(620px, 74vh);
  display: flex;
  flex-direction: column;
  background: #cdbf9a;
  border: 2px outset #e8dcb8;
  box-shadow: 0 0 0 1px #2a2118, 8px 8px 0 rgba(13, 10, 6, .6);
}

#navegador[hidden], #veu[hidden] { display: none; }

.barra {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 5px;
  background: linear-gradient(#6b5330, #3d2f1a);
  color: #e8dcb8;
  font: 12px/1 "Courier New", monospace;
}

.botao {
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  background: #cdbf9a;
  border: 1px outset #e8dcb8;
  color: #2a2118;
}

.fechar { cursor: pointer; }
.fechar:active { border-style: inset; }

.endereco {
  flex: 1;
  margin-left: 6px;
  padding: 3px 7px;
  background: #2a2118;
  border: 1px inset #6b5330;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.abrir-fora {
  padding: 0 5px;
  color: #e8dcb8;
  text-decoration: none;
  font-size: 15px;
}

/* visualizador de imagens: a mesma janela, sem os aparatos de navegador.
   a barra vira título, o conteúdo é só a imagem. */
/* a janela encolhe até a imagem: sem tamanho próprio, quem manda é o <img> */
#navegador.visualizador {
  width: auto;
  height: auto;
  background: none;
  border: 0;
  box-shadow: none;
}
#navegador.visualizador .conteudo { background: none; }
#navegador.visualizador .abrir-fora { display: none; }
#navegador.visualizador .endereco {
  background: none;
  border: 0;
  text-align: center;
}

/* como as relíquias: sépia em repouso, cor no hover */
#navegador.visualizador img.midia {
  max-width: 78vw;
  max-height: calc(74vh - 24px); /* 24px: a altura da barra */
  filter: grayscale(1) sepia(1) saturate(1.35) brightness(.95) contrast(1.05);
  transition: filter .3s ease-out;
}

/* #navegador.visualizador img.midia:hover { filter: none; } */

.conteudo {
  flex: 1;
  overflow: auto;
  background: #2a2118;
  display: grid;
  place-items: center;
}

.midia {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

img.midia {
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* cartão para os sites que recusam iframe */
.cartao {
  padding: 30px;
  text-align: center;
  color: #cdbf9a;
  font: 13px/1.7 "Courier New", monospace;
}

.cartao-titulo { font-size: 21px; margin-bottom: 10px; color: #e8dcb8; }
.cartao-url { word-break: break-all; opacity: .5; margin-bottom: 22px; }

.cartao-botao {
  padding: 9px 26px;
  background: #cdbf9a;
  border: 2px outset #e8dcb8;
  color: #2a2118;
  font: inherit;
  cursor: pointer;
}

.cartao-botao:active { border-style: inset; }

/* ---- entrada ---- */

#entrada {
  position: fixed;
  inset: 0;
  z-index: 40; /* acima de tudo, inclusive do navegador interno */
  background: #0d0a06;
  display: grid;
  place-items: center;
}

#entrada img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* sempre sépia: o portão nunca acorda */
  filter: grayscale(1) sepia(1) saturate(1.35) brightness(.95) contrast(1.05);
}

#titulo {
  position: relative;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: 400 clamp(34px, 6.4vw, 96px)/1 "Naomi", Georgia, serif;
  letter-spacing: .1em;
  color: #e8dcb8;
  text-shadow: 0 0 24px rgba(13, 10, 6, .95), 0 2px 5px #0d0a06;
  transition: letter-spacing .6s ease-out, opacity .5s;
}

#titulo:hover { letter-spacing: .24em; }

/* o título sai da frente assim que clicam, sem esperar o gif decodificar */
#entrada.abrindo #titulo {
  opacity: 0;
  pointer-events: none;
}

/* fade só depois do gif terminar (3 frames: 1s + 1s + 5s = 7s) */
#entrada.rodando {
  animation: portao-some 1.4s ease-in 3s forwards;
}

@keyframes portao-some {
  to {
    opacity: 0;
    visibility: hidden; /* para de comer clique quando some */
  }
}

/* caminhamos pra dentro do portão: quatro passadas que empurram o zoom e
   balançam de leve. o corpo sobe no impulso e assenta quando o pé toca o chão. */
#entrada.rodando img {
  /* animation: caminhar 4s cubic-bezier(.35, 0, .3, 1) 1.4s forwards; */
  transform-origin: 50% 58%; /* o vão do portão, um pouco abaixo do centro */
}

@keyframes caminhar {
  0%   { transform: scale(1)    translateY(0); }
  10%  { transform: scale(1.05) translateY(-.5%); }  /* impulso */
  22%  { transform: scale(1.09) translateY(0); }     /* pé no chão */
  34%  { transform: scale(1.19) translateY(-.6%); }
  46%  { transform: scale(1.24) translateY(0); }
  58%  { transform: scale(1.38) translateY(-.7%); }
  70%  { transform: scale(1.44) translateY(0); }
  84%  { transform: scale(1.62) translateY(-.5%); }
  100% { transform: scale(1.8)  translateY(0); }     /* atravessa */
}

@media (prefers-reduced-motion: reduce) {
  #entrada.rodando img { animation: none; }
}

/* ---- grão de filme ---- */

#grao {
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 20;
  opacity: .16;
  mix-blend-mode: overlay;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation: tremer .5s steps(5) infinite;
}

@keyframes tremer {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -3%); }
  60%  { transform: translate(-2%, -2%); }
  80%  { transform: translate(3%, 3%); }
  100% { transform: translate(0, 0); }
}