/* Independent near and middle planes. The main image keeps its hit map. */
.depth-object {
  position: absolute;
  display: none;
  visibility: hidden;
  pointer-events: none;
  object-fit: contain;
  user-select: none;
  transform-origin: 50% 75%;
}
.scene-ready .depth-object[data-depth-ready='true'] {
  display: block;
  visibility: visible;
  will-change: transform;
}
.depth-object[hidden] { display: none !important; }
.depth-tree {
  z-index: 4;
  width: auto;
  height: 125%;
  max-width: none;
  /* Size by stage height: most of the source canvas is transparent space. */
  left: calc(min(7.5vw, 108px) - 55svh + 41.8px);
  bottom: -30%;
  object-position: 100% 100%;
  filter: drop-shadow(15px 22px 16px #162d3938);
  transform:
    perspective(1100px)
    translate3d(
      calc(var(--asset-near-scroll-x, 0px) + var(--pointer-near-x, 0px)),
      calc(var(--asset-near-scroll-y, 0px) + var(--pointer-near-y, 0px)),
      28px
    )
    rotateX(var(--pointer-tilt-x, 0deg))
    rotateY(var(--pointer-tilt-y, 0deg))
    scale(var(--asset-near-scroll-scale, 1.1));
}
.depth-islet {
  z-index: 3;
  width: 27%;
  height: 41%;
  max-width: 365px;
  left: 44%;
  bottom: 21%;
  opacity: var(--asset-mid-opacity, 0);
  filter: drop-shadow(3px 14px 8px #36607c35);
  transform:
    perspective(1600px)
    translate3d(
      calc(var(--asset-mid-scroll-x, 0px) + var(--pointer-mid-x, 0px)),
      calc(var(--asset-mid-scroll-y, 0px) + var(--pointer-mid-y, 0px)),
      8px
    )
    scale(var(--asset-mid-scroll-scale, 1));
}
.journey-world[data-world='harbor'] .depth-tree {
  left: auto;
  right: calc(min(10vw, 144px) - 55svh + 41.8px);
  bottom: -57%;
  height: 125%;
  object-position: 0% 100%;
  transform-origin: 40% 95%;
}
.journey-world[data-world='harbor'] .depth-islet {
  left: 13%;
  bottom: 8%;
  width: 28%;
  height: 41%;
}
@media (max-width: 1100px) and (min-width: 761px) {
  .depth-islet { width: 27%; }
}
@media (max-width: 900px) and (min-width: 761px) {
  .depth-tree { left: calc(7.5vw - 55svh + 37.4px); }
  .journey-world[data-world='harbor'] .depth-tree { right: calc(10vw - 55svh + 37.4px); }
}
@media (max-width: 760px), (max-height: 480px), (prefers-reduced-motion: reduce) {
  .depth-object { display: none !important; will-change: auto !important; }
}