.viewport { position: fixed; inset: 0; overflow: hidden; background: #02040f; transition: filter .6s var(--ease-out); }
.viewport.is-dimmed { filter: blur(6px) brightness(.42) saturate(.8); }

/* camera = caixa 16:9 que cobre a tela; % de hotspots e zoom são relativos a ela */
.camera {
  position: absolute; overflow: hidden; will-change: transform;
  width: max(100vw, 177.78vh); height: max(100vh, 56.25vw);
  left: calc((100vw - max(100vw, 177.78vh)) / 2);
  top: calc((100vh - max(100vh, 56.25vw)) / 2);
}
.scene { position: absolute; inset: 0; will-change: transform; }
.scene__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; display: block; background: #02040f; }
.scene__video[hidden] { display: none; }
.hotspots { position: absolute; inset: 0; }

@media (max-width: 767px) and (orientation: portrait) {
  .viewport { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .viewport::-webkit-scrollbar { display: none; }
  .camera { left: 0; }
}