/* A dark listening room for endless procedural horror. The only sound control is its central threshold. */
:root{color-scheme:dark;--ink:#e8e9df;--muted:#a1b0ab;--room:#101619;--energy:.22;--serif:Georgia,'Times New Roman',serif;--sans:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
*{box-sizing:border-box}
html{background:var(--room)}
body{margin:0;color:var(--ink);background:var(--room);font:14px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit;text-underline-offset:3px}
button:focus-visible,a:focus-visible{outline:2px solid #e8e9df;outline-offset:7px}
.listening-room{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:center;min-height:calc(100svh - 46px);padding:clamp(40px,7vh,80px) 24px 22px;text-align:center;background:radial-gradient(ellipse at 50% 45%,#24332f55,transparent 56%),linear-gradient(165deg,#131b1c,#101619 60%,#181920)}
.atmosphere{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;opacity:.5;transition:opacity 6s}
.atmosphere i{position:absolute;display:block;width:72vw;height:65vh;max-width:1200px;border-radius:50%;filter:blur(80px);opacity:.12;transform:translate3d(0,0,0)}
.atmosphere i:nth-child(1){left:-25%;top:3%;background:#6da697;animation:drift-one 63s ease-in-out infinite alternate}
.atmosphere i:nth-child(2){right:-26%;top:24%;background:#a18fb9;animation:drift-two 79s ease-in-out infinite alternate}
.atmosphere i:nth-child(3){left:17%;bottom:-43%;background:#6d898d;animation:drift-one 91s ease-in-out infinite alternate-reverse}
.invitation{position:relative;z-index:1;flex:none}
.eyebrow{margin:0 0 16px;font-size:9px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:#acbbb3}
h1{margin:0;font:400 clamp(54px,8vw,86px)/1.12 var(--serif);letter-spacing:-.035em;color:#e0e3db}
h1 span{color:#b5d2c4}
.introduction{margin:14px 0 0;font:italic 17px/1.5 var(--serif);color:var(--muted)}
.threshold{position:relative;flex:1 0 auto;display:grid;place-items:center;width:min(500px,86vw);height:clamp(250px,41vh,450px);min-height:250px;margin:0 auto}
.field{position:absolute;left:50%;top:50%;width:min(520px,112vw);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;opacity:.58;transition:opacity 5s,filter 5s;filter:saturate(.55)}
.field-halo{position:absolute;inset:15%;border-radius:50%;background:radial-gradient(circle,#98b4a91b,transparent 67%);box-shadow:0 0 90px 30px #86aaa108,inset 0 0 80px #a9bca708;animation:breathe 17s ease-in-out infinite alternate}
.contours{display:block;width:100%;height:100%;animation:turn 240s linear infinite}
.orbit{position:absolute;inset:18%;border:1px solid #bbcbb411;border-radius:50%;transform:rotate(-25deg) scaleY(.83)}
.orbit-two{inset:12%;transform:rotate(42deg) scaleY(.9);border-color:#b5c4b40a}
.enter{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;width:132px;height:132px;border:1px solid #c6d8c75c;border-radius:50%;background:#1a2524d9;box-shadow:0 0 0 10px #bdcfb904,0 0 52px #9bbdae0c,inset 0 0 28px #c0d3c506;color:#e1e9db;cursor:pointer;transition:background .5s,border-color .5s,box-shadow 1s,transform .5s}
.enter:hover:not(:disabled){background:#2a3a32;border-color:#d7e4ccad;box-shadow:0 0 0 13px #bdcfb907,0 0 65px #9bbdae20}
.enter:active:not(:disabled){transform:scale(.97)}
.enter:disabled{cursor:wait;opacity:.5}
.enter svg{width:23px;height:23px;fill:currentColor}
.enter .play-symbol{margin-left:4px}
.enter .pause-symbol{display:none}
.enter span{font:500 9px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}
body[data-state=playing] .pause-symbol,body[data-state=starting] .pause-symbol{display:block}
body[data-state=playing] .play-symbol,body[data-state=starting] .play-symbol{display:none}
body[data-state=playing] .field{opacity:calc(.66 + var(--energy)*.25);filter:saturate(1)}
body[data-state=playing] .atmosphere{opacity:1}
body[data-state=playing] .field-halo{box-shadow:0 0 110px 45px #86aaa115,inset 0 0 80px #a9bca712}
body[data-state=starting] .enter{animation:button-breath 2s ease-in-out infinite alternate}
.listening-copy{position:relative;z-index:1;flex:none;max-width:440px;margin:0 auto 36px;min-height:90px}
.status{min-height:1.6em;margin:0 0 12px;color:#c5cfc4;font-size:12px;line-height:1.7;letter-spacing:.01em}
.listening-note{margin:0;color:#8e9f99;font:14px/1.65 var(--serif)}
.headphone-note{display:block;margin-top:12px;color:#94a69a;font:10px/1.5 var(--sans);letter-spacing:.04em}
.source-note{flex:none;width:100%;margin-top:auto;padding-top:20px;border-top:1px solid #c2d1c00b}
.source-note>p:first-child{margin:0;color:#93a59c;font:9px/1.6 var(--sans);letter-spacing:.13em;text-transform:uppercase}
.credits{max-width:760px;margin:12px auto 0;color:#94a69a;font-size:10px;line-height:1.7}
.credits a{color:#94a69a}
.no-script{padding:12px 24px;text-align:center;color:#dce5d6}
@keyframes drift-one{from{transform:translate3d(-5%,-8%,0) rotate(-8deg)}to{transform:translate3d(24%,18%,0) rotate(18deg)}}
@keyframes drift-two{from{transform:translate3d(12%,5%,0)}to{transform:translate3d(-16%,-14%,0)}}
@keyframes turn{to{transform:rotate(360deg)}}
@keyframes breathe{from{transform:scale(.94);opacity:.6}to{transform:scale(1.06);opacity:1}}
@keyframes button-breath{from{border-color:#c6d8c734}to{border-color:#c6d8c7a0}}
@media(max-width:640px){.listening-room{min-height:calc(100svh - 44px);padding-top:38px}.eyebrow{font-size:8px;letter-spacing:.2em}.threshold{height:33vh;min-height:265px}.field{width:430px}.enter{width:116px;height:116px}.listening-copy{margin-bottom:30px}.credits{font-size:9px;max-width:370px}.atmosphere i{filter:blur(50px)}}
@media(max-height:750px) and (min-width:641px){.listening-room{padding-top:30px}.threshold{height:280px;min-height:250px}.field{width:420px}.listening-copy{margin-bottom:22px}}
body[data-hidden=true] .atmosphere i,body[data-hidden=true] .contours,body[data-hidden=true] .field-halo,body[data-hidden=true] .enter{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.atmosphere{opacity:.5}.contours{transform:rotate(-12deg)}}