/**
 * One-building camera.
 * Sticky 100vh stage. JS sets --open, --dolly, --cx, --cy, --hx, --hy, --feather.
 * Next shot is already behind. Current shot is punched through at the far opening.
 */

html.walk-on {
  scroll-snap-type: none;
  touch-action: pan-y;
}

.walk-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: #140804;
}
.rooms { overflow: hidden; }
.room { overflow: hidden; }

@media (max-width: 767px) {
  .shot.is-front { display: none; }
}

.walk-track {
  pointer-events: none;
  height: 500vh;
}

body:not([data-here="dawn"]):not([data-here="vault"]) [data-fx="dust"] { visibility: hidden; }
body:not([data-here="courtyard"]) [data-fx="shimmer"] { visibility: hidden; }
body:not([data-here="terrace"]) [data-fx="birds"] { visibility: hidden; }

.stage {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.shot {
  position: absolute;
  inset: 0;
  z-index: 0;
  visibility: hidden;
}
.shot.is-back { z-index: 1; visibility: visible; }
.shot.is-mid { z-index: 2; visibility: visible; }
.shot.is-front {
  z-index: 3;
  visibility: visible;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, #000 0 13%, transparent 18% 83%, #000 88% 100%);
  mask-image: linear-gradient(90deg, #000 0 13%, transparent 18% 83%, #000 88% 100%);
}

.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
  will-change: transform;
  transform: scale(var(--dolly, 1));
  transform-origin: var(--origin, 50% 45%);
  transition: transform 140ms ease-out;
}

.shot.is-front img {
  transform: scale(var(--front, 1));
  transform-origin: 50% 50%;
}

.shot.is-mid.is-holed {
  -webkit-mask-image: radial-gradient(
    ellipse var(--hx, 3%) var(--hy, 8%) at var(--cx, 50%) var(--cy, 43%),
    transparent 0%,
    transparent 52%,
    #000 100%
  );
  mask-image: radial-gradient(
    ellipse var(--hx, 3%) var(--hy, 8%) at var(--cx, 50%) var(--cy, 43%),
    transparent 0%,
    transparent 52%,
    #000 100%
  );
}

.walk-fx {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.rooms {
  position: absolute;
  inset: 0;
  z-index: 5;
}

.room {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: none;
}
.room.is-in {
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .shot img { transform: none !important; }
  .shot.is-mid.is-holed {
    -webkit-mask-image: none;
    mask-image: none;
  }
}