/* Component-only styles. The host owns its position, height and content. */
.ls-scene{position:absolute;inset:0;overflow:hidden;isolation:isolate;pointer-events:none;background:#000}
.ls-scene .ls-background{position:absolute;inset:0;z-index:0;overflow:hidden;background-color:#081d46;background-size:cover;background-position:right center;isolation:isolate}
.ls-scene canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0}
.ls-scene canvas.ready{opacity:1}
.ls-scene .ls-foreground-camera{position:absolute;inset:0;z-index:2;pointer-events:none;perspective:1600px;perspective-origin:75% 44%;overflow:hidden}
.ls-scene .ls-foreground-plane{position:absolute;left:0;top:0;width:100%;transform-origin:50% 50%;will-change:transform;opacity:0;transform-style:preserve-3d}
.ls-scene .ls-foreground-plane.ready{opacity:1}
.ls-scene .ls-foreground-plane img{display:block;width:100%;height:auto;user-select:none}
.ls-scene .ls-foreground-plane::after{content:"";position:absolute;top:calc(100% - 1px);left:0;width:calc(100% + 160vw);height:120vh;background:#191b29}
.ls-scene [data-ls="foreground-edge"]{position:absolute;inset:auto;left:calc(100% - 1px);top:0;width:160vw;height:100%;display:block;opacity:1}
.ls-scene .ls-hull-fill{position:absolute;top:0;bottom:0;left:0;width:0;background:#191b29;opacity:0}
.ls-scene .ls-intro-fade{position:absolute;inset:auto 0 0;height:min(70%,480px);z-index:1;pointer-events:none;background:linear-gradient(transparent,rgba(0,0,0,.15) 35%,#000 75%,#000);opacity:1}
.ls-scene .ls-black{position:absolute;inset:0;z-index:5;background:#000;opacity:1;will-change:opacity}
@media(prefers-reduced-motion:reduce){.ls-scene .ls-foreground-plane,.ls-scene .ls-black{will-change:auto}}

/* Keep Artist's artwork sizing, fade into its black base, and preserve fallback art. */
.living-sky-artwork { background: #000; }
.living-sky-artwork > .art-background { object-position: right center; }
.living-sky-artwork > .art-foreground { object-position: left center; }
.living-sky-artwork > .ls-scene { z-index: 2; }
.living-sky-artwork.is-faded::after { z-index: 3; }
.living-sky-artwork[data-living-sky-state="ready"] > img,
.living-sky-artwork[data-living-sky-state="loading"][data-living-sky-intro="true"] > img { visibility: hidden; }
/* Closing scenes show their static composition until the finished WebGL frame exists. */
.living-sky-artwork[data-living-sky-intro="false"] > .ls-scene:not([data-status="ready"]) { opacity: 0; }