/* Local-time sky lives behind the existing interactive house, never above controls. */
:root{--sky-position:33.333%;--sky-strength:.65}
:root[data-daylight=sunrise]{--sky-position:0%;--sky-strength:.7}
:root[data-daylight=golden]{--sky-position:66.667%;--sky-strength:.65}
:root[data-daylight=evening]{--sky-position:100%;--sky-strength:.73}
.house-scene::before,#stage::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:url('/assets/house-skies.webp');background-size:400% 100%;background-position:var(--sky-position) center;opacity:var(--sky-strength);mask-image:linear-gradient(to bottom,#000 0%,#000 38%,transparent 98%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 38%,transparent 98%)}
#stage canvas{position:relative;z-index:1}
#stage .hotspots,#stage .interaction-hint,#stage .scene-tag{z-index:2}
@media(min-width:761px){#stage::before{mask-image:linear-gradient(to right,transparent,#000 25%),linear-gradient(to bottom,#000 40%,transparent 100%);mask-composite:intersect;-webkit-mask-image:linear-gradient(to right,transparent,#000 25%),linear-gradient(to bottom,#000 40%,transparent 100%);-webkit-mask-composite:source-in}}

:root[data-daylight=night]{--sky-strength:.85}
:root[data-daylight=night] .house-scene::before,:root[data-daylight=night] #stage::before{background-image:url('/assets/house-night-sky.webp');background-size:100% 100%;background-position:center}