/* The painting itself is never turned into left/right 3D walls. */
.zoom-enabled > .corridor-projection { display: none; }
.zoom-enabled > .corridor-projection:has(.corridor-floor) { display: block; }
.zoom-enabled > .vista { display: none; }
.zoom-enabled { will-change: transform; }
/* Continue the painting's almost uniform sky and earth beyond the design.
   The 1cqw bleed exceeds the shared walking bob (at most .25cqw). */
.zoom-sky { position: absolute; left: -1cqw; right: -1cqw; top: -1cqw; height: calc(var(--scene-horizon) + 2cqw); background: #fdfbf5; }
.zoom-ground { position: absolute; left: -1cqw; right: -1cqw; top: calc(var(--scene-horizon) - 1cqw); bottom: -1cqw; background: #efe2c9 url('./assets/backgrounds/vista.png') center bottom / 100% 320% no-repeat; }
.zoom-far { position: absolute; left: 50%; top: var(--scene-horizon); height: auto; opacity: .65; }
#infinite-zoom, .zoom-depth, .zoom-plane { position: absolute; inset: 0; pointer-events: none; }
/* Only the last 1.2–4% of the stage width fades. The opaque cap underneath
   continues both house contact rays through this short transition. */
#infinite-zoom { mask-image: radial-gradient(circle at 50% var(--scene-horizon), transparent 1.2cqw, #0004 2.1cqw, #000b 3cqw, #000 4cqw); }
.zoom-cap { position: absolute; left: 50%; top: var(--scene-horizon); width: 14cqw; height: 14cqw; translate: -50% -50%; pointer-events: none; mask-image: radial-gradient(circle, #000 4.5cqw, transparent 6.8cqw); }
/* A quiet paper-to-sky wash, wider than the cap's fully opaque center. */
.zoom-haze { position: absolute; left: 50%; top: var(--scene-horizon); width: 16cqw; height: 16cqw; translate: -50% -50%; pointer-events: none; background: radial-gradient(circle, #f8f4e940 0, #f8f4e930 2.5cqw, #fdfbf518 5cqw, #fdfbf500 8cqw); }
.zoom-depth { isolation: isolate; }
.zoom-near { z-index: 1; }
.zoom-plane { transform-origin: 50% var(--scene-horizon); will-change: transform, opacity; }
.zoom-plane img { position: absolute; top: var(--scene-horizon); height: auto; max-width: none; }
.zoom-prop { position: absolute; left: 50%; top: var(--scene-horizon); width: 0; height: 0; transform-origin: 0 0; will-change: transform; }
.zoom-prop img { position: absolute; left: 0; top: 0; height: auto; max-width: none; }