/* Matte depth; CSS-only scene, native scroll remains input. */
.hero-copy{opacity:1}.hero .dark{filter:brightness(.27) saturate(.55)}
.era{background:radial-gradient(ellipse at var(--shine-x,50%) var(--shine-y,20%),#353127 0,transparent 65%),#141412;border-color:#b5a17b70;box-shadow:1px 1px 0 #75654a,3px 3px 0 #29251d,5px 5px 0 #171510,0 28px 65px #0009,inset 0 1px 0 #e9e4d825}
.era:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(125deg,#e9e4d80c,transparent 42%,#0002);border:1px solid #ffffff05}
@media(min-width:768px) and (prefers-reduced-motion:no-preference){
.hero{height:600vh}.journey{height:2900vh}.projects{height:1800vh}
.pin{min-height:0;height:100svh}
.hero .dark,.hero .light{transform:translate3d(calc(var(--pointer-x,0)*-6px),calc(var(--pointer-y,0)*-4px),0) scale(calc(1.025 + var(--hero)*.055))}
.invitation{opacity:1}
.eras{z-index:3;perspective:1800px;perspective-origin:calc(50% + var(--pointer-x,0)*1.2%) calc(48% + var(--pointer-y,0)*1%)}
.era{width:min(520px,43vw);min-height:290px;transform:translate(-50%,-50%) translate3d(var(--hx),var(--hy),var(--hz)) rotateY(var(--hr)) rotateX(var(--pitch,0deg)) scale(var(--hs));filter:none;will-change:transform,opacity}
.era .meta.gold{display:block;padding-right:56px;font-size:10px;line-height:1.5}
.dna-core{width:clamp(170px,17vw,270px);transform:translate(-50%,-50%) perspective(1000px) rotateX(9deg) rotateZ(calc(var(--camera,0)*3deg));opacity:clamp(0,calc((var(--journey) - .08)*6),.55)}
.dna-core .rail-a,.dna-core .rail-b{transform:none}.dna-rail path{stroke-width:2.5}.dna-rungs path{stroke-dasharray:none;opacity:.5}
.orbit{height:60vh;width:82vw;transform:translate(-50%,-50%) perspective(900px) rotateX(68deg) rotateZ(calc(var(--journey)*120deg));border-color:#a8874b55;box-shadow:0 0 0 32px #a8874b04,0 0 0 65px #a8874b03}
.moon{transform:translate3d(calc(var(--pointer-x,0)*-10px),calc(var(--camera,0)*-22px),0)}
.projects .pin{perspective:1600px;background:radial-gradient(ellipse at 68% 45%,#30291e,#0b0b0a 60%)}
.track{align-items:center;overflow:visible}
.project{flex:0 0 100vw;height:100%;border:0;overflow:visible;perspective:1600px}
.project:after{display:none}
.project-copy{top:24vh;left:7vw;width:40vw;transform:translate3d(0,calc(var(--lift,0)*12px),0);}
.project h3{font-size:clamp(48px,min(6.5vw,12vh),112px)}
.project p{font-size:clamp(15px,1.15vw,18px);max-width:450px}
.project img{inset:auto;right:6vw;top:22vh;width:43vw;height:55vh;object-position:center;border:1px solid #a18c665e;border-top:26px solid #292720;border-radius:9px;filter:brightness(.75) saturate(.65);box-shadow:2px 2px 0 #776344,5px 5px 0 #292318,0 38px 70px #000b;transform:translate3d(0,calc(var(--lift,0)*28px),calc(var(--depth,0)*-130px)) rotateY(var(--yaw,0deg)) rotateX(var(--tilt,0deg));transform-origin:50% 50%;will-change:transform}
.project:before{content:"VISUAL / PROJECT";position:absolute;z-index:2;right:6vw;top:22vh;width:43vw;padding:8px 14px;color:#b7a583;font:8px/1 ui-monospace,monospace;letter-spacing:2px;transform:translate3d(0,calc(var(--lift,0)*28px),calc(var(--depth,0)*-130px)) rotateY(var(--yaw,0deg)) rotateX(var(--tilt,0deg));transform-origin:50% calc(27.5vh);pointer-events:none}
.skills{bottom:5vh}
}
@media(min-width:768px) and (max-height:760px){.era{min-height:250px;padding:24px 28px}.era h3{font-size:34px;margin-top:32px}.era p{font-size:15px}.project-copy{top:22vh}.project p{font-size:15px}.project h3{margin:14px 0 18px}}
@media(max-width:767px){.era{background:linear-gradient(135deg,#24221b,#111110 65%)}.project{border-radius:8px;box-shadow:3px 4px 0 #30291d}.era,.project img{will-change:auto}}
@media(prefers-reduced-motion:reduce){.hero-copy,.eras,.track,.project-head{opacity:1!important;transform:none!important}.era{filter:none!important;will-change:auto}.dna-core,.cue-line{display:none}.project img{transform:none}.hero-copy{transform:none}.track{opacity:1}.project-head{opacity:1}}
@media(prefers-reduced-motion:reduce) and (min-width:768px){.project{min-height:650px}.project h3{font-size:clamp(52px,7vw,100px)}}
@media(hover:none){.era{--shine-x:50%;--shine-y:20%}}
@media(scripting:none){.hero,.journey,.projects{height:auto}.pin{position:relative;height:auto;min-height:100vh}.hero-copy,.eras,.track,.project-head{opacity:1}.eras,.track,.project-head{position:relative;inset:auto;transform:none}.era{position:relative;left:auto;top:auto;transform:none;width:90%;margin:24px auto;opacity:1}.track{display:block;width:100%}.project{height:100vh}.journey-heading{display:none}}