.experience {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #ffffff;
}

/* The 16:9 design surface always covers the viewport and stays centered. */
.world {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100vw, 177.7778vh);
  height: max(100vh, 56.25vw);
  transform: translate(-50%, -50%) scale(1);
  transform-origin: var(--focus-x, 50%) var(--focus-y, 50%);
  overflow: hidden;
  will-change: transform, filter, opacity;
  transition:
    transform var(--zoom-duration) var(--zoom-ease),
    filter calc(var(--zoom-duration) * 0.78) cubic-bezier(0.2, 0.4, 0.15, 1) 180ms,
    opacity var(--crossfade-duration) var(--crossfade-ease) var(--crossfade-out-delay);
}

.experience.is-zoomed .world {
  transform: translate(-50%, -50%) scale(var(--zoom-scale));
  filter: blur(calc(var(--zoom-blur) * var(--stage-scale, 1)));
  opacity: var(--zoom-opacity);
  transition:
    transform var(--zoom-duration) var(--zoom-ease),
    filter calc(var(--zoom-duration) * 0.78) cubic-bezier(0.28, 0, 0.18, 1) 40ms,
    opacity calc(var(--zoom-duration) * 0.58) cubic-bezier(0.45, 0, 0.4, 1) 420ms;
}

.world__image,
.poi-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.world__image {
  display: block;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
}

.world__video {
  background: #000;
}

.poi-layer {
  pointer-events: none;
  transition: opacity 420ms ease calc(var(--zoom-duration) * 0.52);
}

.experience.is-zoomed .poi-layer {
  opacity: 0;
  transition-duration: 280ms;
  transition-delay: 0s;
}

.experience.is-zoomed .world .poi {
  pointer-events: none;
}