.detail {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100vw, 177.7778vh);
  height: max(100vh, 56.25vw);
  transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--crossfade-duration) var(--crossfade-ease)
      var(--crossfade-out-delay),
    visibility 0s linear calc(var(--crossfade-out-delay) + var(--crossfade-duration));
}

.experience.is-zoomed .detail {
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--detail-fade-in-duration) var(--crossfade-ease)
      var(--crossfade-in-delay),
    visibility 0s linear 0s;
}

.detail__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
}

.detail__image[hidden] {
  display: none;
}

.detail__video {
  background: #000;
  pointer-events: none;
}

.detail-poi-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 360ms ease,
    visibility 0s linear 360ms;
}

.experience.is-zoomed .detail-poi-layer {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 420ms ease var(--detail-poi-delay),
    visibility 0s linear var(--detail-poi-delay);
}