/* A abertura do jogo, do Regulus 3, trazida para dentro da página do jogo. Ela era uma página inteira e virou uma camada: morrer e voltar ao menu não pode recarregar o MediaPipe, os cinco clipes de cada monstro e a trilha — são segundos de espera entre uma partida e a seguinte, e o jogo perde o fôlego justamente onde ele precisa ter. O que mudou do original: as variáveis moram em #abertura em vez de :root, as regras que olhavam para o body olham para a camada, e o reset global saiu porque o jogo já tem o dele. O resto é o que ele escreveu. */ #abertura{position:fixed;inset:0;z-index:60;overflow:hidden} #abertura[hidden]{display:none} #abertura{ --ink:#d8d3cb; --dim:#6f6a63; --hot:#c8452f; /* Quanto perto ele está. Zero é quarto vazio; um é o susto. Tudo que aperta nesta tela — vinheta, grão, o tremor do título, a batida — lê deste número, e de mais nenhum. */ --tensao:0; } /* ---------- o quarto ---------- Mesma regra do jogo: a cena é 4:3, entra inteira e sobra moldura preta. Cortar a altura tiraria o chão e o teto, que são o que dá o tamanho do quarto. Tudo daqui para baixo é posicionado em % DESTE retângulo, e não da tela — é o que faz o monstro do menu cair no mesmo lugar em que ele mora no jogo, em qualquer janela. */ #palco{position:fixed;inset:0;display:grid;place-items:center;overflow:hidden;background:#000} #quarto{ position:relative; width:min(100vw, 133.1vh); aspect-ratio:748/562; overflow:hidden; } .chapa{position:absolute;inset:0;background:center/100% 100% no-repeat} /* O quarto vazio é o mesmo quadro zero que o jogo usa de fundo. */ #vazio{background-image:url("assets/cena.png")} /* E o morador é o frame REAL do clipe dele, inteiro, por cima. Não há máscara nem recorte: as duas fotos são o mesmo quarto da mesma câmera, então trocar uma pela outra não muda nada — exceto onde ele está. É o crossfade mais barato possível e o único que não deixa emenda. */ #morador{opacity:0;transition:opacity 420ms linear} /* O quarto respirava aqui — uma escala indo e voltando a cada treze segundos. Numa imagem que ocupa a tela inteira isso é a tela inteira crescendo e encolhendo sem parar debaixo do olho de quem está lendo o menu, e o preço disso é enjoo. A cena assusta parada; quem se mexe é o monstro. */ /* A luz que ele traz junto: um calor sujo em volta do lugar onde ele está, crescendo com a tensão. Sem isso o crossfade é só uma foto aparecendo. */ #brasa{ position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen; background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(190,72,48,.20), rgba(190,72,48,0) 19%); opacity:calc(var(--tensao) * var(--tensao) * .9); transition:opacity .3s linear; } /* Vinheta que fecha. Em repouso já é escura; no fim ela é quase um túnel. */ #vinheta{ position:absolute;inset:0;pointer-events:none; background:radial-gradient(ellipse 78% 72% at 50% 52%, transparent 0%, rgba(0,0,0,.35) calc(52% - var(--tensao) * 22%), rgba(0,0,0,.96) 100%); } /* Grão. Uma folha de ruído maior que a tela, empurrada para um canto diferente a cada quadro — parada, ela vira textura de papel; pulando, ela vira película. */ #grao{ position:absolute;inset:-60%;pointer-events:none; opacity:calc(.045 + var(--tensao) * .085); background-image:url("data:image/svg+xml;utf8,"); animation:pular .42s steps(1) infinite; } @keyframes pular{ 0%{transform:translate(0,0)} 20%{transform:translate(-7%,4%)} 40%{transform:translate(5%,-6%)} 60%{transform:translate(-4%,-3%)} 80%{transform:translate(6%,5%)} 100%{transform:translate(0,0)} } /* ---------- o visor ---------- Cantos de enquadramento, luz de gravação, timecode. O jogo inteiro é uma câmera apontada para o jogador; a abertura diz isso sem escrever. */ .canto{position:absolute;width:26px;height:26px;border:1px solid #ffffff26;pointer-events:none} .canto.ne{top:22px;right:22px;border-left:0;border-bottom:0} .canto.no{top:22px;left:22px;border-right:0;border-bottom:0} .canto.se{bottom:22px;right:22px;border-left:0;border-top:0} .canto.so{bottom:22px;left:22px;border-right:0;border-top:0} #visor{ position:absolute;top:24px;left:56px;right:56px; display:flex;justify-content:space-between; font-size:10px;letter-spacing:.22em;color:#ffffff2e;pointer-events:none; } #rec{display:flex;align-items:center;gap:7px} #rec i{width:5px;height:5px;border-radius:50%;background:var(--hot);animation:pisca 1.9s ease-in-out infinite} @keyframes pisca{0%,45%{opacity:1}55%,100%{opacity:.15}} /* ---------- o nome ---------- */ #nome{ position:absolute;top:13%;left:0;right:0;text-align:center;pointer-events:none; } #nome h1{ margin:0;font-family:"Bodoni Moda",Didot,"Bodoni MT","Times New Roman",serif; font-weight:400;font-size:clamp(2.2rem,9.4vw,7.6rem);line-height:.92; letter-spacing:.17em;text-indent:.085em; /* devolve o tracking da última letra ao centro */ color:#efeae1; text-shadow:0 0 42px rgba(140,170,200,.16), 0 2px 0 rgba(0,0,0,.85); /* A aberração cromática é o medidor honesto da tensão: em repouso ela não existe, e quando ele chega perto o nome começa a se descolar de si mesmo. */ filter:drop-shadow(calc(var(--tensao) * var(--tensao) * -3.5px) 0 0 rgba(255,40,40,.55)) drop-shadow(calc(var(--tensao) * var(--tensao) * 3.5px) 0 0 rgba(40,220,255,.45)); } #nome p{ margin:1.5em 0 0;font-size:10px;letter-spacing:.42em;color:#ffffff40; text-indent:.42em; } /* ---------- o menu ---------- Encostado na quina de baixo à esquerda, sobre a cama, que é a parte mais escura e mais parada da foto. E longe do armário de propósito: para clicar em COMEÇAR você tem que tirar os olhos dele. O jogo começa antes de começar. */ #menu{position:absolute;left:7%;bottom:14%;display:flex;flex-direction:column;gap:2px;min-width:min(268px,44%)} .item{ display:flex;align-items:baseline;gap:14px; padding:9px 12px 9px 0;background:none;border:0;border-top:1px solid #ffffff12; color:var(--dim);font:inherit;font-size:12px;letter-spacing:.2em;text-transform:uppercase; text-align:left;cursor:none;position:relative; transition:color .18s ease,letter-spacing .3s cubic-bezier(.2,.7,.3,1),padding-left .3s cubic-bezier(.2,.7,.3,1); } .item:last-child{border-bottom:1px solid #ffffff12} .item .n{font-size:9px;letter-spacing:.1em;color:#ffffff26;transition:color .18s ease} .item .rot{flex:1} /* A linha que enche por baixo: o mesmo gesto do alvo do jogo que enche quando você o encara tempo demais. */ .item::after{ content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0; background:linear-gradient(90deg,var(--hot),#ffffff00); transition:width .34s cubic-bezier(.2,.7,.3,1); } .item:hover,.item:focus-visible{color:var(--ink);letter-spacing:.26em;padding-left:14px;outline:0} .item:hover .n,.item:focus-visible .n{color:var(--hot)} .item:hover::after,.item:focus-visible::after{width:100%} .item[disabled]{opacity:.35} /* ---------- rodapé ---------- */ #rodape{ position:absolute;left:7%;right:7%;bottom:5.5%; display:flex;justify-content:space-between;align-items:center;gap:20px; font-size:10px;letter-spacing:.16em;color:#ffffff2b;pointer-events:none; } #camera{display:flex;align-items:center;gap:8px} #camera i{width:5px;height:5px;border-radius:50%;background:#ffffff2b;box-shadow:0 0 0 3px #ffffff0a} /* O idioma vive aqui e em mais lugar nenhum: três siglas, do tamanho do rodapé, que não disputam atenção com o menu e não pedem uma tela só delas. */ #idiomas{display:flex;gap:2px;pointer-events:auto} .lang{ background:none;border:0;padding:3px 7px;cursor:none; font:inherit;font-size:10px;letter-spacing:.16em;color:#ffffff24; transition:color .18s ease; } .lang:hover{color:#ffffff6b} .lang[aria-current="true"]{color:var(--ink)} #btTelaCheia{margin-right:14px;padding-left:0} #btTelaCheia::before{content:"⛶";margin-right:7px;font-size:11px} /* Onde não há tela cheia o botão continua, mais apagado: o toque explica. */ #btTelaCheia.semTela{color:#ffffff14} /* ---------- o convite para a tela cheia ---------- Uma vez só, na primeira visita. Vem antes do Começar de propósito: a calibração é da janela, e mudar o tamanho depois é calibrar de novo. */ #convite{ position:absolute;inset:0;z-index:30;display:grid;place-items:center; background:rgba(0,0,0,.55);pointer-events:auto;animation:conviteEntra .5s ease both; } #convite[hidden]{display:none} @keyframes conviteEntra{from{opacity:0}to{opacity:1}} #convite .caixa{ width:min(420px,84%);padding:30px 32px 26px;background:#07080b;border:1px solid #ffffff1f; box-shadow:0 0 0 1px #000,0 30px 80px rgba(0,0,0,.7),0 0 40px rgba(200,69,47,.08); text-align:center; } #convite .titulo{margin:0;font-size:11px;letter-spacing:.32em;color:var(--ink)} #convite .texto{margin:16px 0 0;font-size:11px;line-height:1.8;letter-spacing:.06em;color:#ffffff8c} #convite .botoes{display:flex;justify-content:center;gap:10px;margin-top:24px} #convite button{ background:none;border:1px solid #ffffff24;padding:11px 18px;cursor:none; font:inherit;font-size:10px;letter-spacing:.28em;text-indent:.28em;color:var(--ink); transition:border-color .2s,color .2s,box-shadow .3s; } #convite button:hover{border-color:var(--hot);box-shadow:0 0 22px rgba(200,69,47,.22)} #btConviteNao{color:#ffffff59} /* ---------- pálpebras ---------- Elas existem no jogo porque piscar é a única coisa que o jogador não controla. Aqui elas fecham sozinhas de vez em quando — e, como no jogo, enquanto estão fechadas ele anda. O quarto que você reencontra ao abrir os olhos não é o que você deixou. */ .palpebra{ position:fixed;left:0;right:0;height:52%;background:#000;z-index:40;pointer-events:none; transition:transform 210ms cubic-bezier(.4,0,.2,1); } #cima {top:0; transform:translateY(-100%);box-shadow:0 14px 34px rgba(0,0,0,.9)} #baixo{bottom:0;transform:translateY(100%); box-shadow:0 -14px 34px rgba(0,0,0,.9)} #abertura.piscando #cima,#abertura.piscando #baixo{transform:translateY(0)} #abertura.entrando #cima,#abertura.entrando #baixo{transform:translateY(0);transition-duration:900ms} /* ---------- a mira ---------- Copiada do jogo de propósito, traço por traço: é o mesmo ponteiro que vai virar o olhar da pessoa dois cliques adiante. Aqui ela segue o mouse. */ #mira{ position:fixed;left:0;top:0;width:120px;height:120px;margin:-60px 0 0 -60px; z-index:50;pointer-events:none;will-change:transform; } #mira .anel{position:absolute;inset:34px;border:1px solid #ffffff59;border-radius:50%; transition:inset .25s cubic-bezier(.2,.7,.3,1),border-color .25s ease} #mira .anel.larga{inset:4px;border-color:#ffffff1f;border-style:dashed; animation:girar 26s linear infinite} @keyframes girar{to{transform:rotate(360deg)}} #mira .risco{position:absolute;background:#ffffff8c} #mira .n{left:50%;top:6px;width:1px;height:14px} #mira .s{left:50%;bottom:6px;width:1px;height:14px} #mira .w{top:50%;left:6px;height:1px;width:14px} #mira .e{top:50%;right:6px;height:1px;width:14px} #mira .pip{position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px; border-radius:50%;background:var(--hot);box-shadow:0 0 10px var(--hot)} /* Sobre ele, a mira fecha e esquenta: é o jogo dizendo "você está olhando" sem uma palavra de tutorial. */ #abertura.encarando #mira .anel{inset:22px;border-color:var(--hot)} /* ---------- o depois do COMEÇAR ---------- */ #saida{ position:fixed;inset:0;z-index:60;display:grid;place-items:center; color:#ffffff3d;font-size:11px;letter-spacing:.3em;opacity:0;pointer-events:none; transition:opacity .6s ease 1.05s; } #abertura.entrando #saida{opacity:1} #abertura.saindo #saida{opacity:0;transition-delay:0s} /* Quem pediu para o sistema parar de mexer as coisas tem um quarto parado — e o monstro continua andando, só que sem tremer nada em volta. */ @media (prefers-reduced-motion:reduce){ #grao,#rec i,#mira .anel.larga{animation:none} #quarto{transform:none} #nome h1{filter:none} } /* ---------- no celular ---------- A mira segue o mouse, e no toque não há mouse: ela sumia num canto e ficava ali, um ponto vermelho parado no meio do menu. */ @media (hover:none){ #mira{display:none} } /* Deitado, a tela é curta: o quarto entra inteiro no meio, com barras pretas dos lados, e o que era escrito dentro dele não cabe mais. Título, menu e rodapé passam a morar na tela — o menu na barra da esquerda, os idiomas na da direita, o nome por cima — e o convite cobre a tela, e não só o quarto. */ @media (max-height:520px) and (orientation:landscape){ #nome{position:fixed;top:5%} #nome h1{font-size:clamp(1.5rem,9vh,3rem)} #nome p{margin-top:.8em;font-size:8px;letter-spacing:.3em} /* O menu é de dedo: cada opção com altura de toque e um respiro entre elas. */ #menu{position:fixed;left:4%;bottom:12%;min-width:0;width:auto;gap:4px} .item{padding:10px 14px 10px 0;gap:12px;font-size:12px;min-height:40px;box-sizing:border-box} #rodape{position:fixed;left:4%;right:4%;bottom:3%;gap:12px;font-size:8px;letter-spacing:.12em} #camera{min-width:0;flex:1 1 auto} #camera>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #idiomas{flex:none} .lang{font-size:9px;padding:3px 5px} #btTelaCheia{margin-right:8px} #visor{position:fixed;top:10px;left:34px;right:34px;font-size:8px} .canto{position:fixed;width:18px;height:18px} .canto.ne,.canto.no{top:10px} .canto.se,.canto.so{bottom:10px} .canto.ne,.canto.se{right:10px} .canto.no,.canto.so{left:10px} #convite{position:fixed} #convite .caixa{width:min(440px,80%);padding:16px 20px 14px} #convite .texto{margin-top:8px;font-size:10px;line-height:1.6} #convite .botoes{margin-top:12px} #convite button{padding:10px 14px} } @media (pointer:coarse){ .item,.lang,#convite button{cursor:auto} } /* Na tela do celular os cinzas de monitor somem: a retina é mais fina e o aparelho fica mais longe do olho. No toque, tudo que era sussurro sobe um tom — sem virar branco, que aí disputaria com o quarto. */ @media (pointer:coarse){ #abertura{--dim:#aaa59d} #nome p{color:#ffffff8c} #rodape{color:#ffffff73} #camera i{background:#ffffff73} .lang{color:#ffffff66} #btTelaCheia.semTela{color:#ffffff40} .item .n{color:#ffffff59} #visor{color:#ffffff59} #convite .texto{color:#ffffffc4} #btConviteNao{color:#ffffff99} }