@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 */
}

/* caligrafia do caderno (Google Fonts, OFL, auto-hospedada) */
@font-face {
  font-family: "Escrita";
  src: url("fonts/shadows-into-light/shadows-into-light.woff2") format("woff2");
  font-display: swap; /* a letra pode piscar do cursivo do sistema pro webfont */
}

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

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

/* cursor animado: cursor:url não anima webp nem aceita filter —
   #ponteiro (img) recebe a mesma sépia das relíquias e segue o mouse. */
.com-ponteiro, .com-ponteiro a, .com-ponteiro button,
.com-ponteiro .fechar, .com-ponteiro .cartao-botao, .com-ponteiro #titulo {
  cursor: none;
}

#ponteiro {
  position: fixed;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  pointer-events: none;
  z-index: 60; /* acima da entrada e do aviso de retrato */
  image-rendering: pixelated;
  filter: grayscale(1) sepia(1) saturate(1.35) brightness(.95) contrast(1.05);
}

/* enquanto a entrada existe no DOM, o site fica travado no topo: o usuário
   não scrola às cegas por trás do portão. quando entrada.js a remove (fim do
   fade), a regra deixa de valer sozinha e o scroll libera — já no topo, porque
   overflow:hidden segurou a posição em 0. */
html:has(#entrada) { overflow: 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;
}

/* ---- 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;
}

/* ---- caderno: letra escrita à mão numa folha pautada ---- */
/* usa o mesmo chrome do viewer (janela sem barra). font "Escrita" ainda não
   tem @font-face: cai no cursivo do sistema até escolhermos um webfont. */

.caderno {
  display: grid;
  place-items: start center;
}

.folha {
  width: min(520px, 82vw);
  max-height: 78vh;
  overflow-y: auto;
  padding: 30px 40px 42px 60px; /* esquerda maior: espaço pra margem vermelha */
  position: relative;
  color: #46381f;
  background: #e7d9b4;
  box-shadow: inset 0 0 70px rgba(150, 120, 70, .22), 8px 10px 28px rgba(13, 10, 6, .55);
}

/* margem vermelha desbotada */
.folha::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 42px;
  width: 1px;
  background: rgba(150, 70, 55, .35);
}

/* as letras do disco não têm título nem autor (ver letras.js): o cabeçalho é só
   o algarismo romano, e o filete abaixo dele segura a folha sem eles */
.folha-titulo {
  font: 26px/1.25 "Escrita", "Segoe Script", "Bradley Hand", cursive;
  color: #3a2c14;
  padding-bottom: 8px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(150, 70, 55, .28);
}

.folha-autor {
  font: 16px/1.3 "Escrita", "Segoe Script", "Bradley Hand", cursive;
  color: #6a5636;
  margin-bottom: 16px;
}

/* a pauta: uma linha a cada 32px; a letra tem line-height 32 e assenta nela */
.folha-letra {
  font: 19px/32px "Escrita", "Segoe Script", "Bradley Hand", cursive;
  white-space: pre-wrap;
  background-image: repeating-linear-gradient(transparent 0 31px, rgba(120, 90, 50, .30) 31px 32px);
}

.folha-vazio { opacity: .5; font-style: italic; }

/* 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; }
}

/* ---- tela cheia ----
   pousado no canto da entrada, nas duas páginas. nasce escondido: quem o mostra
   é tela-cheia.js, e só depois de saber que o navegador sabe fazer isso. */

#tela-cheia {
  position: absolute;
  right: 18px;
  top: 16px;
  padding: 5px 12px;
  background: rgba(42, 33, 24, .72);
  border: 1px solid rgba(232, 220, 184, .45);
  color: #cdbf9a;
  font: 12px/1.5 "Courier New", monospace;
  letter-spacing: .05em;
  cursor: pointer;
}

#tela-cheia[hidden] { display: none; }

#tela-cheia:hover {
  background: rgba(107, 83, 48, .85);
  color: #e8dcb8;
}

/* o título já saiu de cena: o botão vai junto, sem esperar o fade */
#entrada.abrindo #tela-cheia {
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s;
}

/* ---- 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); }
}