/* Real perspective planes. No scroll hijacking, pinned text or 3D library. */
/* Keep navigation native: whole-page snapshots flatten the spatial layers. */
@view-transition{navigation:none}
[data-depth]{--depth-x:0deg;--depth-y:0deg;--depth-scale:1;--depth-lift:0px;--depth-turn:0;--depth-roll:0deg}
[data-depth="photo"],[data-depth="screen"],[data-depth="document"],[data-depth="panel"]{transform-origin:50% 55%;transform:perspective(1200px) rotateX(var(--depth-x)) rotateY(var(--depth-y)) rotateZ(var(--depth-roll)) scale(var(--depth-scale));transition:none;backface-visibility:hidden}
[data-depth="photo"]{box-shadow:0 28px 40px -24px #07131f70}
.story-image[data-depth]{width:88%;max-width:1440px;margin-inline:auto}
[data-depth="screen"]{box-shadow:2px 4px 0 #42536b,5px 8px 0 #283b56,12px 34px 45px -20px #0009;outline:1px solid #ffffff1c;outline-offset:-1px}
[data-depth="title"] em{display:inline-block;transform-origin:50% 70%;transform:perspective(1000px) rotateX(calc(var(--depth-x) * .4)) rotateY(calc(var(--depth-y) * .3));text-shadow:1px 2px 0 #5477c6,2px 4px 0 #395b9e,3px 6px 0 #223c70,8px 16px 24px #02091666}
/* The two devices occupy different Z planes and retain a three-quarter view. */
[data-depth="showcase"]{background:radial-gradient(ellipse at 55% 28%,#f0f4f9 0%,#d4deeb 54%,#b4c4d8 100%)}
[data-depth="showcase"] .screens{perspective:1450px;transform-style:preserve-3d;padding-block:84px 96px;gap:42px}
[data-depth="showcase"] .desktop-screen{transform:translate3d(-8px,var(--depth-lift),0) rotateX(calc(5deg + var(--depth-x))) rotateY(calc(-7deg + var(--depth-y))) scale(.94);transform-origin:50% 55%;box-shadow:3px 4px 0 #8999b0,7px 9px 0 #6f819b,18px 48px 48px -18px #18314e80;transition:box-shadow .3s}
[data-depth="showcase"] .mobile-screen{transform:translate3d(-25px,calc(-4px - var(--depth-lift)),130px) rotateX(calc(3deg + var(--depth-x))) rotateY(calc(9deg - var(--depth-y))) rotateZ(1.5deg);box-shadow:3px 3px 0 #596c86,6px 6px 0 #2c3d56,20px 45px 40px -14px #18314e80;transition:box-shadow .3s}
[data-depth="showcase"] .desktop-screen:focus-visible,[data-depth="showcase"] .mobile-screen:focus-visible,[data-depth]:focus-within{transform:none!important}
/* Meridia's document is a sheet of work, with a separated paper edge. */
[data-depth="document"]{box-shadow:1px 2px 0 #e3e4dc,3px 5px 0 #b8bdb4,5px 8px 0 #e6e7df,14px 28px 30px -20px #15242b66}
[data-depth="panel"]{box-shadow:2px 3px 0 #d2dde5,5px 7px 0 #b4c5d2,12px 30px 35px -20px #243d5966}
.project-photo[data-depth]{transform-origin:50% 80%}
.material-photo[data-depth]{transform-origin:15% 60%}
.project-photo[data-depth] .project-open{box-shadow:5px 7px 0 #0003}
.photo-window[data-depth]{overflow:visible;transform-style:preserve-3d}
.photo-window[data-depth] .photo-label{transform:translate3d(-8px,-6px,75px) rotateZ(-2deg);box-shadow:4px 5px 0 #ad8d60,12px 26px 28px -12px #0007}
@media(max-width:760px){
 [data-depth="photo"],[data-depth="screen"],[data-depth="document"],[data-depth="panel"]{transform:perspective(1000px) rotateX(var(--depth-x)) rotateY(var(--depth-y)) rotateZ(var(--depth-roll)) scale(var(--depth-scale))}
 [data-depth="showcase"] .screens{perspective:1000px;padding-block:36px 46px;gap:20px}
 [data-depth="showcase"] .desktop-screen{transform:translate3d(0,var(--depth-lift),0) rotateX(var(--depth-x)) rotateY(calc(-3deg + var(--depth-y))) scale(.95);box-shadow:2px 3px 0 #8999b0,4px 5px 0 #6f819b,8px 20px 25px -10px #18314e80}
 [data-depth="showcase"] .mobile-screen{transform:translate3d(-7px,calc(2px - var(--depth-lift)),45px) rotateX(var(--depth-x)) rotateY(calc(6deg - var(--depth-y)));box-shadow:2px 2px 0 #596c86,3px 4px 0 #2c3d56,8px 18px 20px -8px #18314e80}
 .photo-window[data-depth] .photo-label{transform:translateZ(24px) rotateZ(-1deg)}
 .story-image[data-depth]{width:calc(100% - 40px);margin-inline:20px}
 [data-depth="title"] em{text-shadow:1px 1px 0 #5477c6,2px 2px 0 #395b9e,3px 3px 0 #223c70,5px 8px 16px #02091666}
}
@media(prefers-reduced-motion:reduce){[data-depth],[data-depth] .desktop-screen,[data-depth] .mobile-screen,.photo-window[data-depth] .photo-label,[data-depth="title"] em{transform:none!important;transition:none!important}}