/* These are optical depth layers, all using the same original background.
   The shared city camera positions every plane in the same world coordinates. */
.city-world>.city-depth-plane{
 position:absolute;left:0;top:0;width:1536px;height:1024px;max-width:none;
 z-index:0;opacity:0;visibility:hidden;pointer-events:none;
 mask-repeat:no-repeat;mask-size:100% 100%;
 -webkit-mask-repeat:no-repeat;-webkit-mask-size:100% 100%;
}
.city-depth-street{
 mask-image:url('/assets/street-depth/receding-street.svg');
 -webkit-mask-image:url('/assets/street-depth/receding-street.svg');
}
.city-depth-skyline{
 mask-image:url('/assets/street-depth/distant-skyline.svg');
 -webkit-mask-image:url('/assets/street-depth/distant-skyline.svg');
}
.city-depth-foreground{
 mask-image:linear-gradient(to bottom,transparent 76%,#0005 85%,#000 96%);
 -webkit-mask-image:linear-gradient(to bottom,transparent 76%,#0005 85%,#000 96%);
}
.city-depth-billboard{
 mask-image:url('/assets/street-depth/billboard-structure.svg');
 -webkit-mask-image:url('/assets/street-depth/billboard-structure.svg');
}
/* Keep the frame and live screen together after their own perspective maps.
   The support plate shares their optical depth while staying behind people. */
.city-billboard{position:absolute;inset:0;z-index:1;pointer-events:none}
/* Scene depth replaces the old screen-edge blur, which followed the viewport
   and could soften a character simply because the camera moved past them. */
#overview .scene-defocus{display:none}