/* Cinematic layer: camera movement and ambient movement use separate elements. */
.cinema-scene{--scene-y:0px;--scene-scale:1;--pointer-x:0px;--pointer-y:0px;background:#070c0d;isolation:isolate}
.scene-camera{position:absolute;z-index:-3;inset:-8% -4%;transform:translate3d(var(--pointer-x),calc(var(--scene-y) + var(--pointer-y)),0) scale(var(--scene-scale));transform-origin:50% 60%;pointer-events:none}
.scene-camera>img,.scene-art,.scene-art img{display:block;width:100%;height:100%;object-fit:cover}
.scene-camera>img{position:absolute;inset:0}
.scene-camera .hero-picture{z-index:auto}
.scene-camera img{transform:scale(1.015);transform-origin:50% 62%}
.cinema-atmosphere{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.cinema-light{position:absolute;width:48%;height:150%;left:52%;top:-28%;transform:rotate(31deg);transform-origin:top center;background:linear-gradient(90deg,transparent,rgba(234,182,106,.085) 40%,rgba(236,200,151,.13) 48%,transparent 68%);opacity:.65}
.cinema-haze{position:absolute;inset:25% -20% -25%;opacity:.27;background:radial-gradient(ellipse at 70% 65%,#adc6bd27,transparent 46%),radial-gradient(ellipse at 20% 65%,#eed2a321,transparent 44%)}
.cinema-grain{position:absolute;inset:0;opacity:.055;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='.87' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.65' filter='url(%23n)'/%3E%3C/svg%3E");background-size:180px;mix-blend-mode:soft-light}
.cinema-shutter{position:absolute;inset:0;background:linear-gradient(90deg,#020609c4,transparent 14%,transparent 86%,#020609b3);opacity:.7}
.hero-content,.hero-bottom,.game-feature-top,.game-feature-bottom{z-index:2}
.hero-content,.game-feature>div:not(.scene-camera):not(.cinema-atmosphere){position:relative}
.hero-bottom{position:absolute}
.title-line{display:block}
.hero .title-line:last-child{transform-origin:left center}
.hero-shade{background:linear-gradient(90deg,#080b09c9,#080b0918 78%),linear-gradient(0deg,#080b09b3,transparent 32%)}
.game-feature .scene-camera>img{object-position:center}
.game-feature:after{z-index:-1;background:linear-gradient(90deg,#060c0df0,transparent 90%),linear-gradient(0deg,#080f11db,transparent 60%)}
.game-feature .cinema-light{opacity:.45}
.game-feature h2{max-width:850px}

/* A title sequence, with every essential word present in the static frame. */
.game-hero{min-height:820px;max-height:1160px;padding:140px var(--pad) 32px;justify-content:flex-start}
.game-hero:after{z-index:-1;background:linear-gradient(180deg,#03090dc2 0%,#03090d68 35%,#03090d05 61%,#03090d05 71%,#03090de3 100%)}
.game-title-block{position:relative;z-index:2;width:100%;max-width:1000px}
.game-hero .title-kicker{display:flex;align-items:center;justify-content:center;gap:12px;font-size:10px;letter-spacing:.3em;color:#d1cec4}
.game-hero h1{font-size:clamp(88px,8.6vw,138px);line-height:.85;letter-spacing:-.045em;margin:24px 0 22px;text-shadow:0 3px 40px #0008}
.game-hero h1 .title-line{white-space:nowrap}
.game-hero h1 .title-line:last-child{margin-top:.02em}
.game-hero h1 em{color:#e0b87e;text-shadow:0 0 42px #b68b4430}
.game-hero .tagline{font-size:13px;line-height:1.65;letter-spacing:.045em;color:#e0e0d8;display:table;margin-inline:auto;padding:5px 20px;background:radial-gradient(ellipse,#03090dd9,transparent 75%);text-shadow:0 2px 5px #000}
.game-hero .mystery-cta{margin-top:22px;min-height:50px;min-width:236px;background:#080e10b8;border-color:#c8ae795f;position:relative;overflow:hidden;font-size:11px}
.mystery-cta:before{content:'';position:absolute;inset:0;transform:translateX(-110%);background:linear-gradient(100deg,transparent,#d8ab7029,transparent);pointer-events:none}
.mystery-cta:hover{border-color:#e4bd7d;background:#d8ab7024;color:#fff0d6}
.game-hero-bottom{position:relative;z-index:2;margin-top:auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:30px;padding-top:24px}
.game-hero-bottom .hero-art-note{text-align:right;font-size:9px;color:#b6b8ae}
.hero-case{display:flex;align-items:center;gap:18px}
.hero-case p+p{margin-top:7px}
.game-hero-bottom .hero-case .eyebrow{font-size:10px;letter-spacing:.15em;color:#e5c79c}
.case-stroke{width:1px;height:40px;background:linear-gradient(transparent,#d8ab70);flex:none}
.game-hero-bottom .scroll-cue{font-size:9px;letter-spacing:.19em;align-self:center}

/* Testimony stays abstract: no invented portraits, dialogue or clues. */
.testimony-section{position:relative;background:radial-gradient(ellipse at 50% 50%,#182322,transparent 65%),#0b1112;border-top:1px solid #bca57535;overflow:hidden}
.testimony-section .section-line{color:#c1b394}
.testimony-section .split-intro h2{font-size:clamp(70px,7vw,112px)}
.testimony-section .split-intro h2 em{color:#d4ba96}
.testimony-section .split-intro p{color:#c5cdc6;font-size:15px;line-height:1.95}
.testimony-section .case-names{gap:24px;margin-top:64px}
.testimony-section .case-name{display:flex;flex-direction:column;position:relative;isolation:isolate;overflow:hidden;min-height:320px;padding:34px 30px 27px;border:1px solid #c5b59033;background:linear-gradient(145deg,#26302a8c,#101817);transition:border-color .5s,transform .5s}
.case-name:before{content:'';position:absolute;inset:-20%;z-index:-1;background:linear-gradient(113deg,transparent 46%,#d8ab7014 50%,transparent 57%);transform:translateX(-20%);transition:transform 1s}
.case-name:hover{border-color:#bd9d667a;transform:translateY(-5px)}
.case-name:hover:before{transform:translateX(20%)}
.testimony-section .case-number{font-family:var(--serif);font-size:146px;line-height:1;position:absolute;right:19px;top:5px;color:#d2b7810b;-webkit-text-stroke:1px #d2b7812a;z-index:-1}
.testimony-section .case-name small{font-size:9px;letter-spacing:.2em;color:#c6ae8a}
.testimony-section .case-name h3{font-size:43px;letter-spacing:-.025em;margin-top:102px;color:#f0ebe0;line-height:1}
.testimony-section .case-name p{font-size:12px;color:#adb8af;margin-top:14px}
.case-rule{height:1px;background:linear-gradient(90deg,#bb996a80,transparent);width:100%;margin-top:auto;transform-origin:left}
.testimony-section .case-name:nth-child(2){transition-delay:.1s}
.testimony-section .case-name:nth-child(3){transition-delay:.2s}
.mystery-thought{text-align:center;margin:100px auto 0;max-width:970px;position:relative}
.mystery-thought .eyebrow{font-size:9px;letter-spacing:.22em;color:#a8b5ac}
.mystery-thought p{font:400 clamp(40px,4.6vw,70px)/1.07 var(--serif);letter-spacing:-.025em;margin-top:28px;color:#e4e2d8}
.mystery-thought em{color:#d8ab70}
.thought-line{display:block;width:1px;height:76px;margin:38px auto -65px;background:linear-gradient(#d8ab709e,transparent)}
.mystery-page #how-to-play{background:#101310;position:relative}
.mystery-page .flow-stage{background:radial-gradient(ellipse at 50% 30%,#26352b,#141d18 80%);border-color:#c1a87555;box-shadow:0 28px 65px #0005;min-height:525px}
.mystery-page .stage-visual svg{color:#d0b484}
.mystery-page .flow-tabs button{position:relative;overflow:hidden;transition:color .25s,background .25s,border-color .25s}
.mystery-page .flow-tabs button:hover{border-color:#d8ab70}
.mystery-page .chapter-art{background:linear-gradient(#07100ebd,#09100cdb),url('assets/listening-room-v2-800.webp') center/cover;box-shadow:0 30px 70px #060a0640}
.mystery-page .chapter-art:before{inset:16px;border-color:#d2b68775}
.mystery-page .chapter-art:after{inset:23px;border-color:#d2b68725}
.mystery-page .chapter-art h3{font-size:clamp(64px,6.5vw,104px)}
.mystery-page .closing{background:radial-gradient(ellipse at 100% 80%,#2d2b1e,#101310 65%)}

/* Animation is opt-in through script and is suspended outside the scene. */
.js-motion .cinema-scene .scene-camera img{animation:cinema-push 16s cubic-bezier(.3,0,.6,1) infinite alternate;animation-play-state:paused}
.js-motion .cinema-scene .cinema-light{animation:light-pass 13s ease-in-out infinite alternate;animation-play-state:paused}
.js-motion .cinema-scene .cinema-haze{animation:haze-pass 17s ease-in-out infinite alternate;animation-play-state:paused}
.js-motion .cinema-scene.in-view .scene-camera img,.js-motion .cinema-scene.in-view .cinema-light,.js-motion .cinema-scene.in-view .cinema-haze{animation-play-state:running}
.js-motion .cinema-scene.scene-visible .title-line{animation:title-arrive 1.65s cubic-bezier(.16,1,.3,1) both}
.js-motion .cinema-scene.scene-visible .title-line:nth-child(2){animation-delay:.16s}
.js-motion .game-hero.scene-visible .title-kicker{animation:kicker-arrive 1.8s ease-out both}
.js-motion .game-hero.scene-visible .mystery-cta:before{animation:action-light 2.7s 1s ease-out both}
.js-motion .game-hero.scene-visible .cinema-shutter{animation:aperture-open 2.2s cubic-bezier(.16,1,.3,1) both}
.js-motion .scene-visible .scroll-cue b{animation:invitation-drop 2.5s ease-in-out infinite}
.js-motion .cinema-scene:not(.in-view) .scroll-cue b{animation-play-state:paused}
.js-motion .tab-enter{animation:record-enter .55s cubic-bezier(.16,1,.3,1) both}
.js-motion .tab-enter .stage-visual svg{animation:record-draw .5s ease-out both}
.page-hidden *,.page-hidden *:before,.page-hidden *:after{animation-play-state:paused!important}
.no-motion .scene-camera{transform:none!important}
.no-motion .case-name:hover{transform:none}
.no-js .cinema-scene .scene-camera{transform:none}
@keyframes cinema-push{from{transform:scale(1.015) translate3d(-.25%,0,0)}to{transform:scale(1.09) translate3d(.45%,-.5%,0)}}
@keyframes light-pass{from{transform:rotate(27deg) translate3d(-7%,0,0);opacity:.32}to{transform:rotate(34deg) translate3d(14%,0,0);opacity:.78}}
@keyframes haze-pass{from{transform:translate3d(-3%,2%,0);opacity:.18}to{transform:translate3d(5%,-2%,0);opacity:.36}}
@keyframes title-arrive{from{transform:translate3d(0,35px,0);letter-spacing:-.017em;opacity:.55}to{transform:translate3d(0,0,0);letter-spacing:inherit;opacity:1}}
@keyframes kicker-arrive{from{letter-spacing:.43em;opacity:.55}to{letter-spacing:.3em;opacity:1}}
@keyframes aperture-open{from{transform:scaleX(.8);opacity:1}to{transform:scaleX(1);opacity:.7}}
@keyframes invitation-drop{0%,100%{transform:translateY(-3px);opacity:.6}50%{transform:translateY(4px);opacity:1}}
@keyframes action-light{to{transform:translateX(110%)}}
@keyframes record-enter{from{opacity:.35;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes record-draw{from{transform:scale(.94);opacity:.25}to{transform:scale(1);opacity:1}}

@media(max-width:1000px) and (min-width:761px){.game-hero{padding-top:140px}.game-hero h1{font-size:105px}.testimony-section .case-name{padding:25px 23px}.testimony-section .case-name h3{font-size:34px}.game-hero-bottom{gap:20px}}
@media(max-width:760px){
 .scene-camera{inset:-3% -2%}
 .hero-shade{background:linear-gradient(180deg,#080b0978,#080b0920 62%,#080b09bf)}
 .cinema-light{width:65%;left:47%;opacity:.4}
 .cinema-haze{inset:35% -10% -10%;opacity:.2}
 .cinema-grain{opacity:.04}
 .game-hero{min-height:820px;height:100svh;max-height:none;padding:126px 24px 25px}
 .game-title-block{max-width:480px}
 .game-hero .scene-art img{object-fit:contain;object-position:center 60%;mask-image:linear-gradient(transparent,black 8%,black 85%,transparent)}
 .game-hero:after{background:linear-gradient(180deg,#03090d8c,#03090d30 43%,#03090d03 59%,#03090d0a 77%,#03090dcf)}
 .game-hero .title-kicker{font-size:8px;letter-spacing:.23em;gap:8px}
 .game-hero h1{font-size:clamp(54px,14.4vw,91px);line-height:.92;margin:28px 0 22px;letter-spacing:-.042em}
 .game-hero h1 .title-line:last-child{font-size:1.26em;margin-top:-.02em}
 .game-hero .tagline{font-size:12px;max-width:none;line-height:1.7}
 .game-hero .mystery-cta{margin-top:25px;min-width:215px;min-height:49px;background:#080d10a3;font-size:11px}
 .game-hero-bottom{grid-template-columns:1fr auto;gap:12px 8px;align-items:end;padding-top:28px}
 .hero-case{gap:10px}
 .case-stroke{height:32px}
 .game-hero-bottom .hero-case .eyebrow{font-size:8px;letter-spacing:.07em;max-width:none}
 .game-hero-bottom p{font-size:9px;max-width:none}
 .game-hero-bottom .scroll-cue{font-size:8px;gap:7px}
 .game-hero-bottom .hero-art-note{grid-column:1/-1;text-align:left;font-size:8px;color:#bfc4b9;line-height:1.5}
 .game-hero-bottom .hero-art-note br{display:none}
 .hero-case p+p{margin-top:5px}
 .testimony-section{padding-top:66px;padding-bottom:80px}
 .testimony-section .split-intro h2{font-size:69px}
 .testimony-section .split-intro p{font-size:14px;line-height:1.9}
 .testimony-section .section-line .eyebrow{font-size:9px;letter-spacing:.14em}
 .testimony-section .case-names{grid-template-columns:1fr;gap:14px;margin-top:42px}
 .testimony-section .case-name{min-height:194px;padding:24px;display:flex}
 .testimony-section .case-name small{padding:0;font-size:8px}
 .testimony-section .case-name h3{margin-top:32px;font-size:39px}
 .testimony-section .case-name p{margin-top:9px;font-size:12px}
 .testimony-section .case-number{font-size:130px;right:20px;top:16px}
 .case-rule{margin-top:23px}
 .mystery-thought{margin-top:65px}
 .mystery-thought p{font-size:42px;line-height:1.08}
 .mystery-thought .eyebrow{font-size:8px;letter-spacing:.1em}
 .thought-line{height:50px;margin-top:25px;margin-bottom:-50px}
 .mystery-page .flow-stage{min-height:540px}
 .mystery-page .chapter-art{aspect-ratio:1/1.1}
 .mystery-page .chapter-art h3{font-size:85px}
 .js-motion .cinema-scene .scene-camera img{animation-name:cinema-push-mobile;animation-duration:14s}
 .js-motion .cinema-scene.scene-visible .title-line{animation-name:title-arrive-mobile;animation-duration:1.4s}
 .js-motion .game-hero.scene-visible .title-kicker{animation:none}
 .js-motion .game-hero.scene-visible .cinema-shutter{animation-name:aperture-open-mobile}
}
@keyframes cinema-push-mobile{from{transform:scale(1.01)}to{transform:scale(1.05) translate3d(0,-.25%,0)}}
@keyframes title-arrive-mobile{from{transform:translateY(22px);opacity:.6}to{transform:translateY(0);opacity:1}}
@keyframes aperture-open-mobile{from{opacity:1;transform:scaleX(.91)}to{opacity:.7;transform:scaleX(1)}}
@media(max-width:360px){.game-hero{padding:125px 20px 24px;min-height:780px}.game-hero h1{font-size:49px;margin-top:30px}.game-hero .title-kicker{font-size:7px;letter-spacing:.17em}.game-hero .tagline{font-size:11px}.testimony-section .split-intro h2{font-size:61px}.testimony-section .case-name h3{font-size:35px}.mystery-thought p{font-size:35px}.game-hero-bottom .hero-case .eyebrow{font-size:7px}.game-hero-bottom .scroll-cue{font-size:7px}.mystery-page .chapter-art h3{font-size:74px}}
@media(prefers-reduced-motion:reduce){.scene-camera{transform:none!important}.case-name:hover{transform:none}.title-line,.title-kicker,.tab-enter{opacity:1!important;transform:none!important}.cinema-shutter{opacity:.7}.cinema-light{opacity:.35}}