/* camera-zoom.css */

/* Prevent scroll while camera intro runs */
body.cz-lock {
  overflow: hidden;
  height: 100vh;
}

/* The real wall container, pinned and scaled into the camera screen hole */
.cz-intro {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  overflow: hidden !important;
  transform-origin: 0 0 !important;
  will-change: transform;
  z-index: 50 !important;
}

/* The 3D WebGL camera canvas, on top of the wall; screen is a see-through hole */
.cz-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 60;
  pointer-events: none;
  opacity: 1;
}
.cz-canvas.is-out {
  opacity: 0;
  transition: opacity 250ms ease;
}

/* Soft shadow under camera */
.cz-shadow {
  position: fixed;
  z-index: 55;
  height: 34px;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .85), rgba(0, 0, 0, 0));
  opacity: 0;
  transition: opacity 500ms cubic-bezier(.65, 0, .35, 1);
}
.cz-shadow.is-on {
  opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
  .cz-canvas, .cz-shadow {
    transition-duration: 1ms;
  }
}