@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;
}

/* mudos e sem função: só o terminal do virtual_mancer, que é um mac, os acende */
.falso { display: none; }

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

.endereco {
  flex: 1;
  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; }

/* ---- cartela: o about do autor ----
   a única janela do site que não é sépia. todas as outras mostram o acervo;
   esta mostra quem construiu a vitrine, e por isso está vestida com o
   vocabulário do virtualmancer.xyz: preto, monospace, o vermelho #e0483a, a
   moldura #7a1a12, o glitch de abrir, a seta pixelada. é a assinatura aparecendo
   por baixo da pintura.

   a barra do navegador sépia não é escondida: é repintada. três pontos e um
   letreiro é exatamente a titlebar de lá, e assim o ✕ que fecha continua sendo
   o mesmo elemento que popup.js já ligou. markup em sobre.js. */

#navegador.cartela-janela {
  width: min(370px, 86vw);
  height: auto;
  background: rgba(12, 2, 1, .92);
  border: 1px solid #7a1a12;
  box-shadow: 0 0 34px rgba(255, 45, 20, .14);
  backdrop-filter: blur(3px);
  /* ponto → risco vertical → abre com glitch: a animação de abrir de lá, com o
     translate do centro embutido em cada quadro (senão a janela desancora). */
  animation: cartela-abre .8s cubic-bezier(.2, .8, .2, 1) forwards;
}

@keyframes cartela-abre {
  0%   { transform: translate(-50%, -50%) scale(.02, 0); }
  22%  { transform: translate(-50%, -50%) scale(.02, 1); }
  48%  { transform: translate(-50%, -50%) scale(1, 1); animation-timing-function: steps(1); }
  56%  { transform: translate(calc(-50% - 5px), -50%); opacity: .6; filter: brightness(2); animation-timing-function: steps(1); }
  64%  { transform: translate(calc(-50% + 4px), -50%); opacity: 1; filter: none; animation-timing-function: steps(1); }
  74%  { transform: translate(calc(-50% + 5px), -50%); opacity: .55; filter: brightness(1.7); animation-timing-function: steps(1); }
  84%  { transform: translate(-50%, -50%); opacity: 1; filter: none; animation-timing-function: steps(1); }
  92%  { transform: translate(calc(-50% - 4px), -50%); opacity: .7; filter: brightness(2); }
  100% { transform: translate(-50%, -50%); opacity: 1; filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  #navegador.cartela-janela { animation: none; }
}

/* a titlebar: o gradiente sépia sai, o vermelho entra */
#navegador.cartela-janela .barra {
  gap: 7px;
  padding: 7px 11px;
  background: rgba(50, 8, 4, .55);
  border-bottom: 1px solid #7a1a12;
}

/* aqui os pontos mudos acendem: o terminal de lá é um mac, e são os três juntos
   à esquerda que o dizem. acendem da esquerda pra direita, e o mais aceso é
   justamente o que fecha (a ordem do flex desfaz a do site, que põe o ✕ no
   canto direito). */
#navegador.cartela-janela .falso { display: grid; order: -2; }
#navegador.cartela-janela .fechar { order: -1; }

#navegador.cartela-janela .botao {
  width: 9px;
  height: 9px;
  border: 0;
  border-radius: 50%;
  background: #ff3b22;
  font-size: 0; /* o ✕ desenhado sairia do ponto */
  opacity: .5;
}

#navegador.cartela-janela .falso + .falso { opacity: .7; }
#navegador.cartela-janela .fechar { opacity: .9; }
#navegador.cartela-janela .fechar:hover { background: #ff8a6a; }

/* o título deixa de ser endereço e passa a ser letreiro, à direita */
#navegador.cartela-janela .endereco {
  flex: 1;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  text-align: right;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #ff5a3c;
  opacity: .75;
}

#navegador.cartela-janela .abrir-fora { display: none; }

#navegador.cartela-janela .conteudo {
  flex: none;
  overflow: visible;
  background: none;
}

/* ---- o corpo da cartela ---- */

.cartela {
  padding: 30px 26px 26px;
  text-align: center;
  color: #e0483a;
  font: 13px/1.7 ui-monospace, "Courier New", monospace;
  letter-spacing: .04em;
  /* a seta pixelada de lá: dentro desta janela o ponteiro é o do outro site */
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' shape-rendering='crispEdges'%3E%3Cpath d='M2 2 L2 18 L6 14 L9 21 L12 20 L9 13 L15 13 Z' fill='%23e0483a' stroke='%23360b07' stroke-width='1'/%3E%3C/svg%3E") 2 2, auto;
}

/* o ponteiro sépia do site é um <img> que segue o mouse: ele sai de cena
   enquanto a mão está aqui dentro, senão os dois cursores apareceriam. */
html:has(.cartela:hover) #ponteiro { display: none; }

/* o ícone do programa, como em toda caixa de about: a estrela do
   virtualmancer.xyz, desenhada em 32x32 por sobre.js e subida pixelada: os
   pixels grandes são o ponto. sem o fundo preto que o favicon precisa ter: aqui
   ela fica pousada no vidro da janela. */
.cartela-selo {
  width: 46px;
  height: 46px;
  image-rendering: pixelated;
}

/* a linha que apresenta a marca. discreta e pequena: quem tem que crescer na
   cartela é o nome logo abaixo. */
.cartela-credito {
  margin-top: 16px;
  font-size: 11px;
  letter-spacing: .16em;
  opacity: .6;
}

.cartela-marca {
  margin-top: 4px;
  font-size: clamp(20px, 3.4vw, 26px);
  letter-spacing: .06em;
  color: #ff6a4a;
}

.cartela-oficio {
  margin-top: 7px;
  font-size: 11px;
  letter-spacing: .16em;
  opacity: .6; /* .45 como no site do autor ficava ilegível sobre este fundo */
}

/* o véu do site é sépia porque tudo aqui é sépia. com a cartela aberta ele só
   esquenta um fio: a janela vaza, não inunda. quem faz o estrago é o #chiado. */
body:has(#navegador.cartela-janela) #veu {
  background: rgba(17, 8, 5, .8);
  transition: background .5s ease-out;
}

/* ---- chiado: o glitch do favicon, do tamanho da tela ----
   quando a cartela rompe o site, o site chia. são os mesmos dois ingredientes
   da estrela na aba do virtualmancer.xyz, em css: os canais separados (aqui
   como bandas de scanline vermelhas e ciano, somando luz por mix-blend-mode) e
   o chiado (a mesma turbulência svg do #grao, sem sépia e sem freio).

   dispara e para sozinho: quem o liga é o :has da janela, e a animação roda uma
   vez. sem classe pra pôr, sem timer pra limpar. */

#chiado {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30; /* empata com o véu, ganha por vir depois; perde da janela (31) */
  opacity: 0;
  mix-blend-mode: screen;
  background: repeating-linear-gradient(
    180deg,
    rgba(255, 40, 20, .5) 0 2px,
    transparent 2px 7px,
    rgba(0, 220, 255, .38) 7px 9px,
    transparent 9px 22px
  );
}

/* o chiado propriamente: grão bruto, mais forte e mais rápido que o do filme */
#chiado::before {
  content: "";
  position: absolute;
  inset: -30%;
  opacity: .5;
  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.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---- os estragos ----
   aqui só o desenho de cada um. quem decide quando, e quais dois de cada vez, é
   o maestro do sobre.js: ele põe a classe glitch-* no <body> e a tira quando o
   estrago acaba, e é a classe saindo e voltando que faz a animação repetir.

   as durações estão duplicadas do GLITCH do sobre.js de propósito: css não lê
   js, e o maestro precisa saber quando tirar a classe. se um mudar, muda os dois.

   todas as regras passam pelo :has da janela. é o que garante que uma classe
   que demore um triz pra sair, depois de fechar a cartela, não faça o site
   piscar sozinho. */

/* o fundo rasga: bandas de scanline deslocando, 750ms */
body:has(#navegador.cartela-janela).glitch-fundo #chiado {
  animation: chiar .75s steps(1);
}

body:has(#navegador.cartela-janela).glitch-fundo #chiado::before {
  animation: chiar-grao .75s steps(2);
}

/* as bandas rasgam de lado e piscam, como a estrela quando os canais se soltam */
@keyframes chiar {
  0%   { opacity: 0; transform: none; }
  7%   { opacity: .85; transform: translate(-9px, 3px) scaleY(1.02); }
  16%  { opacity: .35; transform: translate(8px, -4px); }
  25%  { opacity: .9;  transform: translate(-5px, 1px) scaleY(.99); }
  37%  { opacity: .2;  transform: translate(11px, 4px); }
  49%  { opacity: .7;  transform: translate(-7px, -2px); }
  62%  { opacity: .28; transform: translate(4px, 2px); }
  76%  { opacity: .45; transform: translate(-3px, 0); }
  89%  { opacity: .12; transform: none; }
  100% { opacity: 0;   transform: none; }
}

/* o grão anda por conta própria: se andasse junto, o rasgo pareceria um bloco */
@keyframes chiar-grao {
  0%   { opacity: 0; transform: translate(0, 0); }
  10%  { opacity: .6; transform: translate(4%, -3%); }
  30%  { opacity: .3; transform: translate(-5%, 4%); }
  50%  { opacity: .55; transform: translate(3%, 3%); }
  70%  { opacity: .25; transform: translate(-2%, -4%); }
  90%  { opacity: .1; transform: translate(1%, 1%); }
  100% { opacity: 0; transform: translate(0, 0); }
}

/* a janela escorrega e clareia: 220ms. esta animação substitui a de abrir na
   lista em vez de somar a ela, e pode: o último quadro da de abrir é igual ao
   repouso do #navegador, então trocar uma pela outra não muda pixel nenhum. (o
   maestro nunca a dispara durante a abertura: o primeiro sorteio vem segundos
   depois, e o par de estreia é fundo+texto justamente por isso.) */
body:has(#navegador.cartela-janela).glitch-tela #navegador {
  animation: cartela-tranco .22s steps(1);
}

@keyframes cartela-tranco {
  0%   { transform: translate(-50%, -50%); opacity: 1; filter: none; }
  20%  { transform: translate(calc(-50% - 6px), -50%); opacity: .75; filter: brightness(1.9); }
  45%  { transform: translate(calc(-50% + 5px), calc(-50% + 2px)); opacity: 1; filter: none; }
  70%  { transform: translate(calc(-50% - 3px), -50%); opacity: .85; filter: brightness(1.4); }
  100% { transform: translate(-50%, -50%); opacity: 1; filter: none; }
}

/* o texto racha nos canais: 130ms. o text-shadow desce pra marca, pro ofício e
   pro comando de uma vez; o selo não se abala porque é canvas e tem o seu. */
body:has(#navegador.cartela-janela).glitch-texto .cartela {
  animation: cartela-canais .13s steps(1);
}

@keyframes cartela-canais {
  0%   { text-shadow: none; transform: none; }
  22%  { text-shadow: -2px 0 rgba(255, 0, 0, .9), 2px 0 rgba(0, 255, 255, .75); transform: translateX(1px) skewX(-.6deg); }
  50%  { text-shadow: 3px 0 rgba(255, 0, 0, .8), -3px 0 rgba(0, 255, 255, .7); transform: translateX(-2px); }
  75%  { text-shadow: -1px 0 rgba(255, 0, 0, .7), 1px 0 rgba(0, 255, 255, .6); transform: none; }
  100% { text-shadow: none; transform: none; }
}

/* o único link, escrito como um comando: o que se lê é o que se faz */
.cartela-comando {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid #7a1a12;
  text-align: left;
  font-size: 13px;
}

.cartela-prompt { color: #ff6a4a; }

.cartela a {
  color: #e0483a;
  text-decoration: none;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' shape-rendering='crispEdges'%3E%3Cpath d='M2 2 L2 18 L6 14 L9 21 L12 20 L9 13 L15 13 Z' fill='%23ff8a6a' stroke='%23360b07' stroke-width='1'/%3E%3C/svg%3E") 2 2, pointer;
}

.cartela a:hover {
  color: #ff8a6a;
  text-decoration: underline;
}

/* o cursor de texto do terminal, piscando no fim da linha */
.cartela-caret {
  display: inline-block;
  width: .55ch;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: -.12em;
  background: #ff3b22;
  animation: cartela-pisca 1s steps(1) infinite;
}

@keyframes cartela-pisca { 50% { opacity: 0; } }

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

/* o de dentro: só o glifo, discreto mas legível. a .22 de antes era invisível
   na prática: quem não sabe que ele existe não acha o que não vê. */
.tela-cheia.hud {
  position: fixed;
  right: 14px;
  top: 12px;
  z-index: 22; /* acima da moldura e do grão, abaixo do véu do popup */
  padding: 4px 8px;
  background: rgba(42, 33, 24, .45);
  border: 1px solid rgba(232, 220, 184, .2);
  font-size: 16px;
  line-height: 1;
  opacity: .62;
  transition: opacity .3s ease-out, background .3s, border-color .3s;
}

.tela-cheia.hud:hover {
  background: rgba(107, 83, 48, .85);
  border-color: rgba(232, 220, 184, .5);
  opacity: 1;
}

/* enquanto há entrada de pé, o botão por extenso já está na tela: dois seria um
   a mais. (no index a entrada sai do DOM e a regra cai sozinha; no labirinto
   ela só fica hidden, daí o :not.) */
#entrada:not([hidden]) ~ .tela-cheia.hud { display: none; }

/* mouse preso no labirinto: não há ponteiro pra alcançar o canto */
html.preso .tela-cheia.hud { display: none; }

/* inventário aberto: o véu dele é z-index 24 e o glifo 22, então ele apareceria
   meio apagado por baixo: um controle que não dá pra clicar. sai de cena. */
#inventario:not([hidden]) ~ .tela-cheia.hud { display: 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); }
}