@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=DM+Sans:wght@400;500;600&display=swap');
:root{color-scheme:dark;--paper:#e4dfd3;--muted:#aba89f;--accent:#ad7954;--progress:0;--zoom:1}*{box-sizing:border-box}html{scroll-behavior:smooth;background:#090a0a}body{margin:0;color:var(--paper);font-family:'DM Sans',sans-serif}a{color:inherit}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:2px solid #dfb789;outline-offset:8px}.skip{position:fixed;top:-100px;left:20px;z-index:20;background:#ddd;color:#111;padding:12px}.skip:focus{top:15px}.world{position:fixed;inset:0;overflow:hidden;pointer-events:none;background:#0a0b0b}.portrait{position:absolute;inset:-2%;background:url('assets/personagem.png') 66% center/cover no-repeat;transform:scale(var(--zoom));opacity:var(--portrait,1);transition:opacity 1.3s}.shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,7,7,.8),rgba(5,7,7,.28) 47%,transparent 76%),linear-gradient(0deg,#080a0a,transparent 24%,transparent 80%,#080a0a90)}.grain{position:absolute;inset:0;opacity:.12;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.65' filter='url(%23n)'/%3E%3C/svg%3E")}.corridor{position:absolute;inset:0;opacity:var(--corridor,0);transition:opacity 1.5s;background:radial-gradient(ellipse at 68% 46%,#69615322,#090c0d 63%);transform:scale(calc(1 + var(--progress)*.17));transform-origin:68% 48%}.wall{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 11%,#53504a24 11.1% 11.3%,transparent 11.4% 22%)}.wall.left{clip-path:polygon(0 0,61% 35%,61% 66%,0 100%);background-color:#171a18}.wall.right{clip-path:polygon(100% 0,75% 35%,75% 66%,100% 100%);background-color:#20221f}.floor{position:absolute;inset:0;clip-path:polygon(61% 66%,75% 66%,100% 100%,0 100%);background:repeating-linear-gradient(0deg,#4141391c 0 1px,transparent 2px 70px),linear-gradient(#0a0a0a,#29291f)}.door{position:absolute;left:61%;top:35%;width:14%;height:31%;border:8px solid #292a24;box-shadow:0 0 65px #dcb57428;background:linear-gradient(#b2a177,#5c563e);transform:scale(calc(.9 + var(--progress)*.3));transform-origin:center bottom}.door:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0a0c0bf0 75%,transparent 76%);transform:perspective(600px) rotateY(calc(var(--progress)*-26deg));transform-origin:left}.figure,.ghost{position:absolute;display:block;width:36px;height:105px;border-radius:45% 45% 12% 12%;background:#141714;bottom:0;left:57%;filter:blur(2px)}.figure:before,.ghost:before{content:'';position:absolute;width:23px;height:29px;background:inherit;border-radius:48%;top:-22px;left:7px}.ghost{height:210px;width:75px;bottom:14%;opacity:var(--ghosts,0);transition:opacity 1.5s;background:#050909;filter:blur(4px)}.ghost:before{width:45px;height:56px;top:-43px;left:14px}.g1{left:52%}.g2{left:81%;bottom:8%;height:280px;width:90px}.g3{left:66%;bottom:29%;transform:scale(.6)}header{position:fixed;z-index:10;top:0;left:0;width:100%;padding:29px 4vw;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(#080a0a9c,transparent)}.wordmark{text-decoration:none;font-family:'Barlow Condensed',Impact,sans-serif;letter-spacing:.19em;font-weight:800;font-size:27px;line-height:1}.wordmark span{display:block;font:8px 'DM Sans',sans-serif;letter-spacing:.38em;margin-top:9px}.header-right{display:flex;align-items:center;gap:40px;font-size:9px;letter-spacing:.16em}.edition{color:var(--muted)}#sound{font:inherit;letter-spacing:inherit;color:var(--paper);background:transparent;border:1px solid #ffffff26;border-radius:0;padding:12px 15px;cursor:pointer}#sound-state{color:var(--accent);margin-left:7px}.sound-icon{font-size:19px;vertical-align:middle;margin-right:7px}.timeline{position:fixed;right:4vw;top:42%;z-index:5;display:flex;align-items:center;flex-direction:column;gap:15px;font:10px monospace;color:var(--muted)}.track{height:115px;width:1px;background:#ffffff26;overflow:hidden}#progress{width:100%;height:100%;background:#c5aa84;transform:scaleY(var(--progress));transform-origin:top}.scene{position:relative;min-height:115svh;display:flex;align-items:center;padding:120px 11vw}.copy{max-width:710px;opacity:1;transition:opacity .7s,transform 1s}.js .copy{opacity:.12;transform:translateY(25px)}.js .scene.active .copy{opacity:1;transform:none}.intro{min-height:100svh}.eyebrow{color:#b4a38c;font-size:10px!important;letter-spacing:.24em;line-height:1.6!important;margin:0 0 25px!important}h1{font-family:'Barlow Condensed',Impact,sans-serif;font-size:clamp(90px,11.2vw,180px);line-height:.79;letter-spacing:-.025em;margin:30px 0 35px;font-weight:600}h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1px #d6d0c2}h1 .title-dot{color:var(--accent)}.intro-line{font-size:clamp(17px,1.6vw,23px)!important;line-height:1.5!important;color:#c6c2b6}.copy p{font-size:clamp(15px,1.3vw,19px);line-height:1.8;color:#b6b6ae}.invitation{display:flex;gap:15px;align-items:center;font-size:10px!important;letter-spacing:.12em;margin-top:45px;color:#cac2b3!important}.line{display:inline-block;height:1px;width:32px;background:var(--accent)}.scene-note{position:absolute;right:10vw;bottom:90px;font-size:8px;letter-spacing:.24em;color:#b6afa0;writing-mode:vertical-rl}.bottom-label{position:fixed;bottom:25px;left:4vw;right:4vw;z-index:6;display:flex;justify-content:space-between;text-transform:uppercase;font-size:8px;letter-spacing:.22em;color:#a6a395;pointer-events:none}h2{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:500;font-size:clamp(49px,5.8vw,88px);line-height:1.02;letter-spacing:-.015em;margin:0 0 32px}h2 em{font-style:normal;color:#b69b7c}.whisper{margin-top:35px;color:#d4c9b8!important;font-style:italic}.listen{margin-top:25px;display:inline-flex;gap:40px;padding:18px 0;border-bottom:1px solid #a7865e;text-decoration:none;font-size:11px;letter-spacing:.15em}.listen:hover{color:#eac99f}.music-note{font-size:11px!important;color:#999c96!important;margin-top:15px}.restart{display:inline-block;margin-top:35px;font-size:11px;text-underline-offset:6px;color:#b6b6ae}.ending{min-height:110svh}footer{position:absolute;bottom:75px;left:11vw;right:11vw;display:flex;justify-content:space-between;gap:25px;font-size:7px;letter-spacing:.15em;color:#84867f}.ending .copy{padding-bottom:70px}
@media(max-width:650px){header{padding:23px 6vw}.wordmark{font-size:23px}.edition{display:none}.header-right{gap:0}#sound{font-size:8px;padding:9px}.scene{padding:110px 9vw;min-height:110svh}.intro{min-height:100svh}.copy{max-width:85%}h1{font-size:100px}.portrait{background-position:62% center;opacity:calc(var(--portrait,1)*.67)}.shade{background:linear-gradient(90deg,#080a0ad9,#080a0a48),linear-gradient(0deg,#080a0a,transparent 60%)}.timeline{right:5vw}.scene-note{display:none}.bottom-label{left:6vw;right:6vw}.copy p{font-size:15px}h2{font-size:52px}.eyebrow{font-size:8px!important}.door{left:53%;width:25%;top:32%;height:35%}.ghost{left:60%}.g2{left:85%}.g3{left:70%}footer{left:9vw;right:9vw;flex-direction:column;font-size:7px;bottom:70px;gap:10px}.desktop{display:none}.listen{font-size:9px;gap:16px;line-height:1.8}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}.portrait,.corridor{transform:none}.js .copy{transform:none}.grain{display:none}}

/* Prólogo musical: o tempo do vídeo conduz as cenas. */
[hidden]{display:none!important}
#mode{font:inherit;letter-spacing:.12em;color:var(--paper);background:#090c0b80;border:1px solid #ffffff36;padding:12px;cursor:pointer}
.enter{display:flex;align-items:center;gap:18px;background:transparent;color:#e3d6bf;border:0;border-bottom:1px solid #a7865e;padding:17px 0;font:11px 'DM Sans',sans-serif;letter-spacing:.17em;cursor:pointer;margin-top:24px}
.enter:hover{color:#fff2d8}.door-mark{width:15px;height:24px;display:block;border:1px solid #bda078;border-right:4px solid #bda078;transform:skewY(-8deg)}
.copy .entry-note{font-size:11px;line-height:1.6;color:#b7ad9e;margin-top:14px}.free-link{font-size:10px;color:#a5a59e;text-underline-offset:5px;display:inline-block;margin-top:10px}
.music-dock{position:fixed;z-index:12;right:8vw;bottom:65px;width:320px;background:#0b0e0efa;border:1px solid #9e866541;padding:12px;box-sizing:content-box}
.music-dock iframe{display:block;border:0;width:320px;height:200px}.player-label{display:flex;justify-content:space-between;font-size:8px;letter-spacing:.09em;color:#c0ae93;margin:0 0 10px}
#player-status{color:#b5b4aa;font-size:10px;line-height:1.6;margin:10px 0 5px}.player-fallback{font-size:9px;color:#bfa889;text-underline-offset:3px}
body.cinematic{overflow:hidden}.cinematic main{height:100svh;position:relative}.cinematic .scene{position:absolute;inset:0;min-height:100svh;height:100svh;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 1s,visibility 1s;overflow:hidden;padding-right:40vw}
.cinematic .scene.active{opacity:1;visibility:visible;pointer-events:auto}.cinematic .copy{max-width:660px}.cinematic .scene-note{display:none}.cinematic .ending .copy{padding-bottom:0}.cinematic footer{bottom:65px;right:43vw;font-size:6px;line-height:1.6}.cinematic .intro h1{font-size:clamp(80px,10vw,150px)}.cinematic .free-link,.cinematic .entry-note,.cinematic #enter{display:none}.cinematic .copy p{font-size:16px}.cinematic h2{font-size:clamp(45px,5.1vw,74px)}
@media(max-width:800px){.music-dock{right:6vw;bottom:55px;width:calc(88vw - 24px);max-width:320px;padding:10px}.music-dock iframe{width:100%;height:200px}.cinematic .scene{padding:105px 9vw 340px;align-items:center}.cinematic .copy{max-width:100%}.cinematic .intro h1{font-size:78px;margin:18px 0 22px}.cinematic h2{font-size:43px;margin-bottom:18px}.cinematic .copy p{font-size:13px;line-height:1.7}.cinematic .whisper{margin-top:20px}.cinematic .eyebrow{margin-bottom:16px!important}.cinematic footer{display:none}.cinematic .intro-line{font-size:17px!important}.cinematic .music-note{font-size:10px!important}.cinematic .listen{margin-top:12px;font-size:9px}.cinematic .restart{margin-top:20px}#mode{font-size:8px;padding:10px}.portrait{background-position:87% center}}
@media(max-height:680px){.cinematic .scene{padding-top:100px}.cinematic .intro h1{font-size:70px}.cinematic .eyebrow{margin-bottom:12px!important}.cinematic .copy p{font-size:12px}.cinematic h2{font-size:36px;margin-bottom:12px}.cinematic .whisper{margin-top:12px}.music-dock{bottom:40px}.cinematic .intro-line{font-size:14px!important}}