/* The room and the shared window use one 1672 x 941 coordinate system.
   New interior artwork must keep this aperture and camera registration. */
.hero { --scene-position:.5; }
.hero__scene,.hero__beacons { position:absolute; inset:0; container-type:size; pointer-events:none; }
.hero__scene { z-index:-2; opacity:0; transition:opacity .35s var(--ease); }
.hero__scene--day { --room-image:url("assets/hero-ar-day.webp"); --window-image:url("assets/hero-ar-day.webp"); }
.hero__scene--night { --room-image:url("assets/hero-ar-night.webp"); --window-image:url("assets/hero-ar-night.webp"); }
.hero__preview { position:absolute; inset:0; z-index:-2; pointer-events:none; background:url("assets/hero-preview-day.webp") calc(var(--scene-position) * 100%) center / cover; }
[data-theme="night"] .hero__preview { background-image:url("assets/hero-preview-night.webp"); }
.hero[data-scene-ready="day"] .hero__scene--day,
.hero[data-scene-ready="night"] .hero__scene--night { opacity:1; }
.hero__scene-canvas,.hero__beacons-scene {
  position:absolute;
  width:max(100cqw,calc(100cqh * 1672 / 941));
  height:max(100cqh,calc(100cqw * 941 / 1672));
  left:calc((100cqw - max(100cqw,100cqh * 1672 / 941)) * var(--scene-position));
  top:calc((100cqh - max(100cqh,100cqw * 941 / 1672)) * .5);
}
.hero__room,.hero__window { position:absolute; inset:0; background-size:100% 100%; }
.hero[data-scene-ready="day"] .hero__scene--day .hero__room,
.hero[data-scene-ready="night"] .hero__scene--night .hero__room { background-image:var(--room-image); }
.hero[data-scene-ready="day"] .hero__scene--day .hero__window,
.hero[data-scene-ready="night"] .hero__scene--night .hero__window { background-image:var(--window-image); }
.hero__window { clip-path:polygon(57.17% 0,97.01% 0,97.01% 76.3%,57.17% 71.3%); }
/* Reveal the five medallions already painted into the original window.
   Soft masks use the same pixels and camera scale; no second icons are added. */
.hero__beacons { z-index:-1; }
.hero__beacons-scene {
  background-size:100% 100%;
  filter:brightness(1.06);
  mask-image:
    radial-gradient(ellipse 1.55% 3.1% at 60.35% 29.65%,#000 40%,transparent 100%),
    radial-gradient(ellipse .9% 1.9% at 69.26% 25.72%,#000 40%,transparent 100%),
    radial-gradient(ellipse 1.9% 3.9% at 68.42% 43.89%,#000 40%,transparent 100%),
    radial-gradient(ellipse 1.55% 3.25% at 87.80% 34.96%,#000 40%,transparent 100%),
    radial-gradient(ellipse 2.1% 4.8% at 89.12% 56.32%,#000 40%,transparent 100%);
  transition:opacity .45s var(--ease);
}
.hero__beacons-scene { opacity:0; }
.hero[data-scene-ready="day"] .hero__beacons-scene--day { background-image:url("assets/hero-ar-day.webp"); opacity:.32; }
.hero[data-scene-ready="night"] .hero__beacons-scene--night { background-image:url("assets/hero-ar-night.webp"); opacity:.26; }
@media (max-width:900px) { .hero { --scene-position:.87; } }
@media (max-width:600px) { .hero { --scene-position:.78; } }