/* The image planes are independent assets, not offset copies of a flattened scene. */
.hero.depth-scene{min-height:700px;background:#081820;overflow:hidden;isolation:isolate;align-items:center;padding-block:110px 150px}
.hero.home.depth-scene{min-height:calc(110svh - 80px);max-height:none}
.depth-scene .hero-art{inset:-110px -80px -160px;z-index:-5;background-position:50% 55%;filter:saturate(.94);will-change:transform}
.depth-light{position:absolute;inset:-20%;z-index:-4;pointer-events:none;background:radial-gradient(ellipse at 78% 34%,#ffc88635,transparent 38%),linear-gradient(120deg,transparent 48%,#ffbb7712 52%,transparent 67%);mix-blend-mode:screen;will-change:transform}
.depth-performers{position:absolute;right:-5%;bottom:0;width:90%;height:98%;object-fit:contain;object-position:right bottom;z-index:-2;pointer-events:none;filter:drop-shadow(0 24px 20px #0006);will-change:transform}
.depth-scene:after{z-index:-1;background:linear-gradient(90deg,#05121bed 0%,#061722ad 26%,#07151b22 57%,transparent 78%),linear-gradient(0deg,#09151c 0%,transparent 22%);pointer-events:none}
.depth-scene .foreground{inset:-5% -6% -15%;background-size:cover;opacity:1;z-index:3;will-change:transform}
.depth-scene .hero-copy{max-width:620px;position:relative;z-index:4;text-shadow:0 3px 25px #04121b80}
.depth-scene h1{font-size:clamp(48px,6.2vw,94px);max-width:650px}
.depth-scene p{max-width:430px;line-height:1.65}
.depth-scene .hero-bottom{z-index:4;bottom:34px}
.depth-scene .crumb{z-index:4}
.home-grid .card{border-radius:12px;box-shadow:0 20px 65px #0004}
.home-grid .card:nth-child(even){margin-top:35px;margin-bottom:-35px}
.section:has(.home-grid){position:relative;z-index:5;background:linear-gradient(#09151c,#09151c00);padding-top:52px;padding-bottom:100px}
.band{border-top:1px solid #b68d5540;border-bottom:1px solid #b68d5540;padding-block:105px;background:#10242d}
.band .band-art{opacity:.38;background-image:url('/assets/depth-terrace-v2.webp')!important}
body.reduced [data-depth]{transform:none!important;will-change:auto}
@media(min-width:1600px){.depth-performers{right:0;width:78%}.depth-scene .hero-copy{max-width:700px}}
@media(max-width:900px){.hero.depth-scene{min-height:780px;padding:100px 6% 140px}.depth-performers{width:115%;right:-25%;height:85%}.depth-scene .hero-copy{max-width:520px}.depth-scene h1{font-size:clamp(46px,7vw,72px)}.depth-scene:after{background:linear-gradient(90deg,#05121be8,#06172275 50%,transparent),linear-gradient(0deg,#09151c,transparent 30%)}.depth-scene .foreground{background-size:auto 100%}}
@media(max-width:600px){.hero.home.depth-scene{min-height:930px;min-height:max(930px,110svh);align-items:flex-start;padding-top:62px}.hero.depth-scene{min-height:760px;align-items:flex-start;padding-top:85px}.depth-scene .hero-copy{max-width:100%}.depth-scene h1{font-size:clamp(42px,11vw,62px);letter-spacing:-1.8px}.depth-scene p{font-size:16px;max-width:330px}.depth-performers{height:56%;width:170%;right:-41%;bottom:25px}.depth-scene .hero-art{background-position:65% center;inset:-70px -130px -110px}.depth-scene:after{background:linear-gradient(180deg,#05121be8 0%,#05121bc0 25%,#05121b12 62%,#09151c 100%)}.depth-scene .foreground{inset:18% -20% -10%;background-size:auto 100%}.depth-scene .hero-bottom{font-size:8px;letter-spacing:1px;bottom:23px}.home-grid .card:nth-child(even){margin:0}.section:has(.home-grid){padding-bottom:55px}.band{padding-block:70px}}
@media(prefers-reduced-motion:reduce){[data-depth]{transform:none!important;will-change:auto}}
@media(max-width:600px){.depth-performers{right:-12%}.hero.home.depth-scene{min-height:max(880px,105svh)}}
@media(min-width:601px){html[dir=rtl] .depth-performers{right:auto;left:-34%}html[dir=rtl] .depth-scene:after{background:linear-gradient(270deg,#05121bed 0%,#061722ad 26%,#07151b22 57%,transparent 78%),linear-gradient(0deg,#09151c 0%,transparent 22%)}}
@media(max-width:600px){html[dir=rtl] .depth-scene:after{background:linear-gradient(180deg,#05121be8 0%,#05121bc0 25%,#05121b12 62%,#09151c 100%)}}

/* Pixel spatial edition: distinct semantic foreground for every route. */
.depth-scene{--scene-accent:#efba78}
.depth-pixels,.depth-grid{position:absolute;inset:-10%;pointer-events:none;will-change:transform}
.depth-pixels{z-index:2;mask-image:linear-gradient(90deg,transparent 30%,#000 65%)}
.depth-pixels i{position:absolute;width:var(--pixel);height:var(--pixel);background:var(--scene-accent);box-shadow:18px 18px 0 color-mix(in srgb,var(--scene-accent) 30%,transparent)}
.depth-grid{z-index:-3;background-image:linear-gradient(#ffffff0c 1px,transparent 1px),linear-gradient(90deg,#ffffff0c 1px,transparent 1px);background-size:64px 64px;transform-origin:center;mask-image:radial-gradient(ellipse at 80% 55%,#000,transparent 65%)}
.depth-scene:not([data-scene=home]) .foreground{z-index:2;color:var(--scene-accent);opacity:.52;inset:-3%;filter:drop-shadow(0 0 16px color-mix(in srgb,var(--scene-accent) 30%,transparent))}
.foreground svg{width:100%;height:100%}
.depth-scene:not([data-scene=home]) .depth-light{background:radial-gradient(ellipse at 80% 45%,color-mix(in srgb,var(--scene-accent) 24%,transparent),transparent 55%)}
.depth-scene:not([data-scene=home]) .hero-art{filter:saturate(.85) brightness(.7)}
.section{position:relative;isolation:isolate}
.section:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(#a6c9cb22 1px,transparent 1px);background-size:24px 24px;mask-image:linear-gradient(135deg,transparent,#000 80%)}
.card,.feature,.panel{box-shadow:0 20px 45px #0003;border:1px solid #ffffff17}
.card{transition:transform .35s,box-shadow .35s}
@media(hover:hover) and (prefers-reduced-motion:no-preference){body:not(.reduced) .card:hover{transform:translateY(-8px);box-shadow:0 28px 65px #0007}}
@media(max-width:600px){.depth-scene:not([data-scene=home]) .foreground{inset:25% -45% -4% -60%;opacity:.45}.depth-pixels{mask-image:linear-gradient(180deg,transparent 30%,#000 75%)}.depth-grid{background-size:40px 40px}}
body.reduced .card{transition:none}