/* A lit stage behind the content, with separate planes for the work and crest. */
body{isolation:isolate;--depth-warm:#c58c45;--depth-cool:#497c69;--depth-shadow:#03080e6b}
.theme-sunderward{--depth-warm:#b38459;--depth-cool:#695376}
.theme-haven{--depth-warm:#c09b5f;--depth-cool:#678b68;--depth-shadow:#1b39232b}
.theme-encirla{--depth-warm:#ca9572;--depth-cool:#416e57}
.page-depth-backdrop{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.depth-atmosphere{position:absolute;inset:-70px;background:radial-gradient(ellipse at 83% 15%,color-mix(in srgb,var(--depth-warm) 17%,transparent),transparent 48%),radial-gradient(ellipse at 10% 78%,color-mix(in srgb,var(--depth-cool) 18%,transparent),transparent 56%),radial-gradient(ellipse at 95% 90%,#76506310,transparent 48%);transform:translate3d(var(--ambient-x,0px),var(--ambient-y,0px),0);transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.depth-horizon{position:absolute;left:-30%;right:-30%;top:63%;height:80%;transform:perspective(1000px) rotateX(63deg);transform-origin:50% 0;background:radial-gradient(ellipse at 52% 0,color-mix(in srgb,var(--depth-warm) 10%,transparent),transparent 62%);border-top:1px solid color-mix(in srgb,var(--depth-warm) 5%,transparent);filter:blur(1px)}
.depth-grain{position:absolute;inset:0;opacity:.026;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.site-header{box-shadow:0 8px 30px #00000018}
.depth-surface{position:relative;transform:perspective(1500px) rotateX(var(--depth-rx,0deg)) rotateY(var(--depth-ry,0deg)) translateY(var(--depth-lift,0px));transform-style:preserve-3d;transition:transform .55s cubic-bezier(.2,.7,.2,1),box-shadow .55s;box-shadow:0 1px 1px #f0d29b12,0 12px 25px #00000021,0 34px 75px var(--depth-shadow)}
.depth-surface::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 1px 0 #f7e2b826,inset 0 -1px 1px #0000002b;background:radial-gradient(ellipse 650px 340px at var(--surface-x,50%) var(--surface-y,15%),#f5d6a00a,transparent 75%)}
.depth-surface.is-depth-hovered{box-shadow:0 2px 1px #f0d29b1f,0 17px 30px #00000030,0 44px 90px var(--depth-shadow)}
.depth-surface:focus-within{transform:perspective(1500px);--depth-lift:0px}
.world-viewer.depth-surface{border-radius:26px 26px 34px 34px;box-shadow:0 15px 25px #00000020,0 45px 85px var(--depth-shadow)}
.world-viewer.depth-surface::after{bottom:61px;border-radius:26px 26px 34px 34px}
.world-viewer .world-stage{box-shadow:inset 0 1px 0 #e9d4a90d}
.world-topline,.world-panel-copy{filter:drop-shadow(0 2px 8px #0002)}
.world-controls{position:relative;z-index:2}
.depth-crest{position:relative;transform:perspective(1300px) rotateX(var(--depth-rx,0deg)) rotateY(var(--depth-ry,0deg));transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.hero-art.depth-crest::after{content:'';position:absolute;width:64%;height:24px;left:18%;bottom:-9px;border-radius:50%;background:#0006;filter:blur(20px);z-index:-1;pointer-events:none;transform:rotateX(65deg)}
.button-primary{box-shadow:inset 0 1px 0 #ffffff66,inset 0 -2px 0 #00000018,0 7px 16px #0000002b}
.button-primary:hover{box-shadow:inset 0 1px 0 #ffffff77,inset 0 -2px 0 #00000018,0 11px 22px #00000040}
.button-primary:active{transform:translateY(1px);box-shadow:inset 0 1px 3px #00000025,0 2px 5px #00000024}
.community-callout.depth-surface{padding-inline:36px;border:1px solid #d8d4b318;border-radius:26px;background:linear-gradient(135deg,#263a3f66,#19243166)}
.project-card.depth-surface .project-art{box-shadow:inset 0 1px 0 #ffffff18}
.detail-art.depth-surface{border-radius:26px}
.theme-haven .depth-surface{box-shadow:0 2px 4px #173b2210,0 22px 55px #1d442526}
.theme-haven .depth-surface::after{box-shadow:inset 0 1px 0 #ffffff70,inset 0 -1px 0 #173b2210}
@media(hover:none),(pointer:coarse){.depth-surface,.depth-crest{transform:none!important}.depth-atmosphere{transform:none}.depth-surface{box-shadow:0 1px 1px #f0d29b12,0 10px 20px #0002,0 25px 50px var(--depth-shadow)}}
@media(max-width:760px){.community-callout.depth-surface{padding-inline:25px}.depth-grain{opacity:.018}.depth-surface{transition:box-shadow .3s}}
@media(prefers-reduced-motion:reduce){.depth-surface,.depth-crest,.depth-atmosphere{transform:none!important;transition:none!important}.button-primary:hover,.button-primary:active{transform:none}}
