/* Scene styles are namespaced to the four presentation pages. */
.dp-scene{--dp-x:0;--dp-y:0;position:absolute;inset:0;perspective:1200px;perspective-origin:50% 50%;pointer-events:none;overflow:hidden}
.dp-stage{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(calc(var(--dp-y)*-.85deg)) rotateY(calc(var(--dp-x)*1.3deg));transform-origin:50% 50%}
.dp-plane{position:absolute;inset:-7%;background-position:center;background-size:cover;background-repeat:no-repeat;transform-origin:50% 50%;transform:translate3d(calc(var(--dp-x)*var(--dp-speed)),calc(var(--dp-y)*var(--dp-speed)*.6),var(--dp-z)) scale(var(--dp-scale));backface-visibility:hidden;will-change:transform}
.dp-plane-0{--dp-speed:-7px;--dp-z:-240px;--dp-scale:1.2}
.dp-plane-1{--dp-speed:-24px;--dp-z:-100px;--dp-scale:1.083333}
.dp-plane-2{--dp-speed:-52px;--dp-z:60px;--dp-scale:.95}
.dp-plane-3{--dp-speed:-90px;--dp-z:180px;--dp-scale:.85}
.dp-scene:not(.dp-ready) .dp-stage{opacity:0}
.dp-flat .dp-stage{transform:none}
.dp-flat .dp-plane{transform:translateZ(var(--dp-z)) scale(var(--dp-scale))}
.dp-toggle{display:inline-flex;align-items:center;gap:8px;padding:8px 0;background:transparent;border:0;color:inherit;font:inherit;font-size:11px;letter-spacing:.4px;cursor:pointer}
.dp-toggle svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.dp-toggle[aria-pressed="false"]{opacity:.5}.dp-toggle:focus-visible{outline:2px solid currentColor;outline-offset:5px}

/* Personal portfolio: keep the original drawn die and introduce spatial planes. */
#ariel-portfolio-vivo .al-art{overflow:visible;isolation:isolate}
#portfolio-depth{inset:-6%;overflow:visible;color:var(--al-bronze)}
#portfolio-depth .dp-plane{inset:0;background:none}
#portfolio-depth .al-die{position:absolute;inset:0;width:100%;height:100%}
#portfolio-depth .al-die-number{background:transparent;padding:0;pointer-events:none}
#portfolio-depth .al-art-glow{inset:0;animation:none}
.al-depth-orbits{position:absolute;inset:2%;width:96%;height:96%;stroke:currentColor;fill:none;stroke-width:.6;opacity:.28}
.al-depth-code{position:absolute;left:-7%;top:15%;width:112px;height:90px;border:1px solid var(--al-line);background:var(--al-paper);box-shadow:0 15px 40px #00000016;border-radius:4px;opacity:.9;padding:17px}
.al-depth-code svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.al-depth-db{position:absolute;right:-3%;bottom:15%;width:77px;height:92px;color:var(--al-bronze);filter:drop-shadow(0 14px 14px #0002)}
.al-depth-db svg{width:100%;height:100%;fill:var(--al-paper);stroke:currentColor;stroke-width:1}
.al-depth-mark{position:absolute;right:10%;top:9%;font:22px Georgia,serif;color:var(--al-bronze);opacity:.7}
#ariel-portfolio-vivo .al-depth-control{margin-left:auto;color:var(--al-muted);white-space:nowrap;font-size:11px}
#ariel-portfolio-vivo .al-depth-control+.al-motion{margin-left:0}
#ariel-portfolio-vivo .al-art-caption{bottom:-8%;font-size:9px}

/* Shizoku: pixel art stays pixel art; only the scenery is split into planes. */
.home-page .world-scene.dp-ready{background:none}
#shizoku-depth .dp-plane{image-rendering:pixelated;background-position:center 48%}
#shizoku-depth .dp-plane-0{background-image:url('../shizoku/img/depth/distant.png')}
#shizoku-depth .dp-plane-1{background-image:url('../shizoku/img/depth/temple.png')}
#shizoku-depth .dp-plane-2{background-image:url('../shizoku/img/depth/bridge.png')}
#shizoku-depth .dp-plane-3{background-image:url('../shizoku/img/depth/foreground.png')}
.home-page .hero-depth-toggle{color:#d5c596;font-family:inherit;font-size:14px;margin-top:16px;min-height:40px}
.home-page .hero-depth-toggle svg{width:19px;height:19px}

/* Biblioteca: real gaps between the room, the shelves and the writing desk. */
.library-home.library-depth-ready::before{background:linear-gradient(180deg,#080d098c,#0d120c82 28%,#101410 96%);z-index:-1}
.library-home.library-depth-ready{overflow-x:clip}
#library-depth{--library-art-height:1100px;position:absolute;inset:0 0 auto;height:1100px;z-index:-2;overflow:hidden;background:#101410}
#library-depth .dp-plane{background-size:auto var(--library-art-height);background-position:center top}
#library-depth .dp-plane-0{background-image:url('../biblioteca_do_abismo/assets/images/depth/distant.png')}
#library-depth .dp-plane-1{background-image:url('../biblioteca_do_abismo/assets/images/depth/shelves-left.png');background-position:calc(50% - var(--library-art-height)*.783492) top}
#library-depth .dp-plane-2{background-image:url('../biblioteca_do_abismo/assets/images/depth/shelves-right.png')}
#library-depth .dp-plane-3{background-image:url('../biblioteca_do_abismo/assets/images/depth/desk.png')}
.library-home .library-depth-control{display:flex;justify-content:center;color:#cbb182;position:relative;z-index:1;margin:16px auto 0;width:max-content}

/* InfinityQuest: editable vector geometry split into spatial layers. */
#village-depth{position:absolute;inset:0;overflow:visible;filter:none}
#village-depth .dp-plane{inset:0;background-size:contain;background-position:center}
#village-depth .dp-plane-0{--dp-speed:-3px}
#village-depth .dp-plane-1{--dp-speed:-10px}
#village-depth .dp-plane-2{--dp-speed:-20px}
#village-depth .dp-plane-3{--dp-speed:-36px}
#village-depth .dp-plane-0{background-image:url('../infinityquest/assets/depth/ground.svg')}
#village-depth .dp-plane-1{background-image:url('../infinityquest/assets/depth/buildings.svg')}
#village-depth .dp-plane-2{background-image:url('../infinityquest/assets/depth/trees.svg')}
#village-depth .dp-plane-3{background-image:url('../infinityquest/assets/depth/people.svg')}
.hero-world .world-scene:has(#village-depth.dp-ready)>img{opacity:0}
.hero-world.night #village-depth{filter:none}
.hero-world .village-depth-control{position:absolute;bottom:12px;right:22px;z-index:6;font-size:8px;color:#56714c;padding:6px}
.hero-world.night .village-depth-control{color:#d2dbad}
.hero-world:has(#village-depth) .illustration-label{width:55%;left:22px;text-align:left;line-height:1.5;font-size:7px}

@media(max-width:760px){
 .dp-stage{transform:none}
 .dp-plane{transform:translate3d(calc(var(--dp-x)*var(--dp-speed)*.25),calc(var(--dp-y)*var(--dp-speed)*.15),0)}
 .dp-flat .dp-plane{transform:none}
 #portfolio-depth{inset:0}
 .al-depth-code{left:0;top:12%;width:89px;height:74px}
 .al-depth-db{right:2%;bottom:11%;width:61px;height:75px}
 #ariel-portfolio-vivo .al-depth-control{margin-left:0}
 #shizoku-depth .dp-plane{background-position:66% center}
 #library-depth{--library-art-height:950px;height:950px}
 .hero-world .village-depth-control{font-size:8px;right:20px}
}
@media(prefers-reduced-motion:reduce){.dp-stage{transform:none}.dp-plane{transform:translateZ(var(--dp-z)) scale(var(--dp-scale))}}