:root{--scroll-depth:0}
body.studio-depth-page{isolation:isolate}
.studio-depth-page > .site-header{position:relative;z-index:2}
.studio-depth-page > main,.studio-depth-page > .site-footer{position:relative;z-index:1}
.studio-depth-page > .skip:focus{position:relative;z-index:5}
.studio-depth-backdrop{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:strict}
.studio-depth-haze{position:absolute;inset:-12%;background:radial-gradient(ellipse at 13% 53%,#89d6b74d,transparent 47%),radial-gradient(ellipse at 91% 72%,#b4a1dc36,transparent 45%);opacity:calc(.18 + var(--scroll-depth)*.62);transform:translate3d(0,calc(var(--scroll-depth)*-34px),0) scale(calc(1 + var(--scroll-depth)*.04));will-change:transform,opacity}
.studio-depth-grid{position:absolute;inset:-25% -14%;background-image:linear-gradient(#678e7b55 1px,transparent 1px),linear-gradient(90deg,#678e7b55 1px,transparent 1px);background-size:88px 88px;opacity:calc(.035 + var(--scroll-depth)*.30);transform-origin:50% 62%;transform:perspective(900px) rotateX(calc(var(--scroll-depth)*56deg)) translate3d(0,calc(var(--scroll-depth)*44px),0) scale(calc(1 + var(--scroll-depth)*.12));-webkit-mask-image:radial-gradient(ellipse at 50% 60%,#000 12%,transparent 72%);mask-image:radial-gradient(ellipse at 50% 60%,#000 12%,transparent 72%);will-change:transform,opacity}
.studio-depth-surface{position:absolute;inset:26% 7% 12%;border:1px solid #c1d3c980;border-radius:36px;background:linear-gradient(135deg,#ffffff24,#d7e8df18);opacity:calc(var(--scroll-depth)*.50);box-shadow:0 30px 90px #21443212;transform-origin:50% 55%;transform:perspective(1100px) rotateX(calc(var(--scroll-depth)*18deg)) rotateY(calc(var(--scroll-depth)*-5deg)) translate3d(0,calc(var(--scroll-depth)*-18px),0);will-change:transform,opacity}
.studio-depth-page .mountain-hero .hero-landscape{transform-origin:50% 80%;transform:perspective(1200px) rotateX(calc(var(--scroll-depth)*4deg)) translate3d(0,calc(var(--scroll-depth)*-8px),0) scale(calc(1 + var(--scroll-depth)*.055));will-change:transform}
@media(max-width:700px){
  .studio-depth-grid{background-size:58px 58px;transform:perspective(850px) rotateX(calc(var(--scroll-depth)*43deg)) translate3d(0,calc(var(--scroll-depth)*25px),0) scale(calc(1 + var(--scroll-depth)*.07))}
  .studio-depth-page .mountain-hero .hero-landscape{transform:perspective(1000px) rotateX(calc(var(--scroll-depth)*2.5deg)) translate3d(0,calc(var(--scroll-depth)*-5px),0) scale(calc(1 + var(--scroll-depth)*.035))}
}
@media(prefers-reduced-motion:reduce){
  .studio-depth-backdrop{display:none}
  .studio-depth-page .mountain-hero .hero-landscape{transform:none;will-change:auto}
}