/* =========================================================
   MURAL DO INÍCIO (.mur-) — a parede de desaparecidos da
   delegacia, igual à última tela da abertura (mural.js).
   Coordenadas: a caixa .mur = o mundo da abertura de
   x −500…500 e y −230…172 (u); 1 u = --mur-w / 1000.
   Celular: bloco "MURAL DO INÍCIO" no fim do mobile.css.
   ========================================================= */
#inicio {
  --mur-w: clamp(min(560px, 92vw), calc((100vh - 330px) * 1.76), min(1180px, 92vw));
  --mur-w: clamp(min(560px, 92vw), calc((100svh - 330px) * 1.76), min(1180px, 92vw));
}
.mur-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* a faixa do Início: sem a rua, a sala da delegacia ocupa o fundo */
#inicio .hero.mur-hero { isolation: isolate; }
.theme-hawkins #inicio .hero.mur-hero {
  min-height: clamp(540px, calc(100vh - 150px), 900px);
  min-height: clamp(540px, calc(100svh - 150px), 900px);
  padding: calc(var(--mur-w) * 0.16 + 6px) 16px 40px;
  background: #050709;
}
.theme-upside #inicio { --mur-w: min(940px, calc(92vw - 32px)); }
.theme-upside #inicio .hero.mur-hero { padding: calc(var(--mur-w) * 0.16 + 6px) 16px 36px; background: #030102; }
/* as luzes de Natal eram da rua: na sala elas cobririam a placa da delegacia */
#inicio .mur-hero .hero-lights { display: none; }
#inicio .mur-hero .hero-content { width: 100%; }
#inicio .mur-hero .hero-tag { position: relative; z-index: 2; margin: 18px auto 18px; }
#inicio .mur-hero .hero-cta { position: relative; z-index: 2; }

/* ---------- o mural ---------- */
.mur {
  position: relative;
  width: var(--mur-w);
  max-width: 100%;
  aspect-ratio: 1000 / 402;
  margin: 0 auto;
  -webkit-tap-highlight-color: transparent;
}
/* a foto da sala (gerada pelo motor da abertura): 2560 × 1600 u em volta do logo */
.mur-sala { position: absolute; left: -78%; top: -156.2189%; width: 256%; height: 398.0100%; z-index: 0; pointer-events: none; user-select: none; }
.mur-sala img { display: block; width: 100%; height: 100%; }
.mur-fotos { position: absolute; inset: 0; z-index: 3; }

/* o fio de neon (por cima das fotos, como na abertura) */
.mur-fio { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; overflow: visible; pointer-events: none; }
.mur-fio path { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.mur-fio-halo { stroke: #ff2a12; stroke-width: 4.2; opacity: 0.5; }
.mur-fio-tubo { stroke: #ff3a22; stroke-width: 1.5; }
.mur-fio-nucleo { stroke: #ffd9cc; stroke-width: 0.55; }

/* ---------- cada polaroide (foto + cartão), presa no alfinete ---------- */
.mur-un {
  position: absolute;
  width: 3.8%;
  aspect-ratio: 38 / 60;
  margin: 0; padding: 0; border: 0; border-radius: 0;
  background: none;
  color: inherit; font: inherit;
  cursor: pointer;
  transform-origin: 50% 5.3333%;
  transform: rotate(var(--mur-r, 0deg));
  transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
  touch-action: manipulation;
}
.mur-un.is-aberta { z-index: 6; transform: translate(var(--mur-dx, 0px), var(--mur-dy, 0px)) scale(var(--mur-z, 1)); }
.mur-un:focus { outline: none; }
.mur-un:focus-visible { outline: calc(2px / var(--mur-z, 1)) solid #ffc764; outline-offset: calc(3px / var(--mur-z, 1)); }
/* na parede as fotos ficam na penumbra, tingidas pela luz do neon; ampliada, acende */
/* (uma camada que só muda de opacidade: animar filtro de cor recalcularia a imagem a cada quadro) */
.mur-papel { position: absolute; inset: 0; display: block; }
.mur-papel::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgba(58, 12, 4, 0.36); transition: opacity 0.32s ease; }
.mur-un.is-aberta .mur-papel::after { opacity: 0; }
.mur-foto { position: absolute; left: 0; top: 0; width: 100%; height: 79.1667%; display: block; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); }
.mur-foto img { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
.mur-cartao { position: absolute; left: 2%; top: 80.8333%; width: 96%; height: 19.1667%; display: block; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
.mur-carimbo { position: absolute; width: 73.6842%; height: 15.3333%; background: var(--mur-carimbo) center / 100% 100% no-repeat; opacity: 0.88; pointer-events: none; }
/* o alfinete (4,4 u) é desenhado 4× maior e encolhido: tão pequeno, o navegador arredondaria largura e altura diferente */
.mur-pino { position: absolute; z-index: 2; left: 50%; top: 5.3333%; width: 46.3158%; height: 29.3333%; transform: translate(-50%, -50%) scale(0.25); border-radius: 50%; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6); background: radial-gradient(circle at 37% 33%, #ff4a3a, #b0120c 55%, #4a0402); }
.mur-pino-branco { background: radial-gradient(circle at 37% 33%, #ffffff, #c9c4ba 55%, #5c5850); }
.mur-pino-amarelo { background: radial-gradient(circle at 37% 33%, #ffe36a, #c99a10 55%, #4d3a02); }
.mur-pino-azul { background: radial-gradient(circle at 37% 33%, #6fb6ff, #1c5fb4 55%, #061d3d); }

/* ---------- o fogo ---------- */
.mur-fogo { position: absolute; z-index: 1; pointer-events: none; }
.mur-un.is-acesa .mur-papel { visibility: hidden; }
.mur-un.is-queimando { cursor: default; }
.mur-luz { position: absolute; z-index: 5; pointer-events: none; border-radius: 50%; opacity: 0; background: radial-gradient(closest-side, rgba(255, 150, 60, 0.42), rgba(255, 90, 20, 0.14) 55%, rgba(255, 60, 10, 0) 100%); }
/* depois: o pedacinho preso no alfinete e a marca de fumaça na cortiça */
.mur-un.is-queimada { pointer-events: none; cursor: default; }
.mur-un.is-queimada .mur-papel { display: none; }
.mur-resto { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.mur-un.is-queimada::before {
  content: ""; position: absolute; z-index: -1; left: -30%; top: -12%; width: 160%; height: 70%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(12, 7, 5, 0.6), rgba(12, 7, 5, 0.25) 60%, rgba(12, 7, 5, 0));
}

/* neon: uma falha rara (a camada inteira, para não pesar) */
@media (prefers-reduced-motion: no-preference) {
  .mur-fio { animation: murNeon 11s steps(1) infinite; will-change: opacity; }
}
@keyframes murNeon { 0%, 90%, 100% { opacity: 1; } 91% { opacity: 0.55; } 91.6% { opacity: 1; } 93% { opacity: 0.78; } 93.5% { opacity: 1; } }
html.pc-fraco .mur-fio { animation: none; will-change: auto; }
html.pc-fraco .mur-un { transition-duration: 0.2s; }

/* ---------- Mundo Invertido: a mesma sala, apodrecida e fria ---------- */
.theme-upside .mur-sala img { filter: grayscale(0.55) sepia(0.35) hue-rotate(-28deg) saturate(1.5) brightness(0.62) contrast(1.12); }
.theme-upside .mur-papel { filter: grayscale(0.55) sepia(0.3) hue-rotate(-25deg); }
.theme-upside .mur-papel::after { background: rgba(30, 2, 6, 0.5); }

@media (prefers-reduced-motion: reduce) {
  .mur-un, .mur-papel::after { transition: none; }
}