/*! Macua Tours — "Where to Next" route object.
    Every selector is scoped to .macua-route-object. No global element styling. */

.macua-route-object {
  position: relative;
  display: block;
  width: 100%;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
  /* height is reserved before WebGL initialises, so the object never causes layout shift */
  height: clamp(520px, 43vw, 680px);
  background: transparent;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
}

.macua-route-object > canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: transparent;
  pointer-events: none;
}

.macua-route-object > .macua-route-object__fallback {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 240ms ease;
}

.macua-route-object.is-fallback > canvas {
  opacity: 0;
}

.macua-route-object.is-fallback > .macua-route-object__fallback {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 1199px) {
  .macua-route-object {
    max-width: 100%;
    height: clamp(460px, 62vw, 600px);
  }
}

@media (max-width: 767px) {
  .macua-route-object {
    height: clamp(360px, 108vw, 480px);
  }
}