/* Five independent image planes in one continuous studio. Offsets are in scene.js. */
@view-transition{navigation:auto}
html{background:#05010e;overflow-x:clip}
body{isolation:isolate;background:transparent!important}
.journey-studio{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:clip;background:#060914}
.studio-depth{position:absolute;top:0;height:100%;background-size:100% 100%;background-repeat:no-repeat}
.studio-depth--shell{width:108vw;background-image:url('/src/assets/studio-shell.svg');view-transition-name:studio-shell}
.studio-depth--led{width:117vw;background-image:url('/src/assets/studio-led.svg');view-transition-name:studio-led}
.studio-depth--floor{width:129vw;background-image:url('/src/assets/studio-floor.svg');view-transition-name:studio-floor}
.studio-depth--truss{width:147vw;background-image:url('/src/assets/studio-truss.svg');view-transition-name:studio-truss}
.studio-depth--near{width:174vw;background-image:url('/src/assets/studio-near.svg');view-transition-name:studio-near}
/* All routes share the same studio assets; only their camera offsets change. */
.studio-depth--equipment{width:138vw;background-image:none;view-transition-name:studio-equipment}
.studio-foreground{position:relative;z-index:100;isolation:isolate;view-transition-name:studio-ui;min-height:100svh}
.page-wrapper{background:transparent!important}
body[data-scene="1"] .photo,body[data-scene="1"] .scrim{background:transparent}
::view-transition-group(*){animation-duration:1200ms;animation-timing-function:cubic-bezier(.76,0,.24,1)}
::view-transition-group(root){z-index:0}
/* Near planes travel farther and settle sooner; distant planes drift to rest. */
::view-transition-group(studio-shell){z-index:1;animation-duration:1700ms;animation-timing-function:cubic-bezier(.45,0,.2,1)}
::view-transition-group(studio-led){z-index:2;animation-duration:1500ms;animation-timing-function:cubic-bezier(.45,0,.2,1)}
::view-transition-group(studio-floor){z-index:3;animation-duration:1300ms;animation-timing-function:cubic-bezier(.45,0,.2,1)}
::view-transition-group(studio-equipment){z-index:4;animation-duration:1200ms;animation-timing-function:cubic-bezier(.45,0,.2,1)}
::view-transition-group(studio-truss){z-index:5;animation-duration:1100ms;animation-timing-function:cubic-bezier(.45,0,.2,1)}
::view-transition-group(studio-near){z-index:6;animation-duration:900ms;animation-timing-function:cubic-bezier(.45,0,.2,1)}
::view-transition-group(studio-ui){z-index:100}
::view-transition-old(studio-equipment){display:none}
::view-transition-new(studio-equipment){animation:none;height:100%;object-fit:fill}
::view-transition-old(studio-shell),::view-transition-old(studio-led),::view-transition-old(studio-floor),::view-transition-old(studio-truss),::view-transition-old(studio-near){display:none}
::view-transition-new(studio-shell),::view-transition-new(studio-led),::view-transition-new(studio-floor),::view-transition-new(studio-truss),::view-transition-new(studio-near){animation:none;height:100%;object-fit:fill}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-old(studio-ui),::view-transition-new(studio-ui){mix-blend-mode:normal;animation-duration:1200ms;animation-timing-function:cubic-bezier(.76,0,.24,1);animation-fill-mode:both}
::view-transition-old(studio-ui){animation-name:room-out-left}
::view-transition-new(studio-ui){animation-name:room-in-right}
html[data-no-scene-transition] .studio-depth,html[data-no-scene-transition] .studio-foreground{view-transition-name:none!important}
html[data-no-scene-transition]::view-transition-group(*),html[data-no-scene-transition]::view-transition-old(*),html[data-no-scene-transition]::view-transition-new(*){animation:none!important}
html[data-scene-direction="back"]::view-transition-old(studio-ui){animation-name:room-out-right}
html[data-scene-direction="back"]::view-transition-new(studio-ui){animation-name:room-in-left}
@keyframes room-out-left{from{transform:translateX(0)}to{transform:translateX(-100vw)}}
@keyframes room-in-right{from{transform:translateX(100vw)}to{transform:translateX(0)}}
@keyframes room-out-right{from{transform:translateX(0)}to{transform:translateX(100vw)}}
@keyframes room-in-left{from{transform:translateX(-100vw)}to{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
