/* Scroll-linked loading scene. The resting state is fully loaded. */
.loading-story{background:#122631;color:#fff;position:relative}
.loading-sticky{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:54px 24px 42px;isolation:isolate;overflow:hidden}
.loading-heading{text-align:center;position:relative;z-index:2}
.loading-heading .eyebrow{color:#d0f266;font-size:11px;letter-spacing:1.7px}
.loading-heading h2{font-size:clamp(32px,4vw,52px);margin:12px 0 9px;letter-spacing:-2px}
.loading-heading p{color:#c2d0d5;font-size:15px;margin:0}
.loading-scene{position:relative;width:min(850px,100%);margin:5px 0 0;aspect-ratio:3/2;flex-shrink:0}
.loading-vehicle{position:absolute;inset:0;transform:translate3d(0,0,0)}
.loading-van{position:absolute;width:100%;height:100%;object-fit:contain;inset:0;user-select:none;pointer-events:none}
.loading-cargo{position:absolute;aspect-ratio:1;transform-origin:50% 95%;pointer-events:none}
.loading-cargo span{position:absolute;inset:0;background-image:url('assets/loading-cargo.webp');background-size:200% 200%;background-repeat:no-repeat}
.loading-sofa{width:25%;left:42%;top:29%;z-index:3}.loading-sofa span{background-position:0 0}
.loading-cabinet{width:23%;left:26%;top:31.8%;z-index:2}.loading-cabinet span{background-position:100% 0}
.loading-boxes{width:20%;left:11%;top:35.4%;z-index:4}.loading-boxes span{background-position:0 100%}
.loading-small-boxes{width:13%;left:31%;top:26.4%;z-index:4}.loading-small-boxes span{background-position:100% 100%}
.loading-scene figcaption{position:absolute;bottom:8%;left:0;right:0;text-align:center;color:#8fa5af;font-size:12px}
.loading-footer{width:min(680px,100%);margin-top:-28px;text-align:center;position:relative;z-index:5}
.loading-status{display:flex;justify-content:space-between;align-items:center;gap:15px;font-size:14px;text-align:left;min-height:44px}
.loading-status>span:first-child{font-weight:600;color:#e7efeb}
.loading-instruction{font-size:12px;color:#a7bdc6;display:none}
.loading-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;list-style:none;margin:12px 0 18px;padding:0;text-align:left}
.loading-steps li{font-size:12px;color:#d0f266}
.loading-steps li>span{display:block;height:3px;margin-bottom:10px;background:#d0f266;transform-origin:left;border-radius:2px}
.loading-skip{font-size:12px;color:#acbec6;display:inline-block;padding:9px 14px;min-height:38px;text-decoration:underline;text-underline-offset:4px}
.loading-story.is-scroll{height:260vh;height:260svh}
.is-scroll .loading-sticky{position:sticky;top:0;height:100vh;height:100svh;padding:30px 24px 25px;overflow:hidden}
.is-scroll .loading-scene{width:min(850px,calc((100svh - 250px)*1.5),100%)}
.is-scroll .loading-instruction{display:block}
.is-scroll .loading-cargo{will-change:transform,opacity}
.is-scroll .loading-vehicle{will-change:transform}
.is-scroll .loading-steps li{color:#a7bdc6}
.is-scroll .loading-steps li>span{background:#d0f266;transform:scaleX(var(--item-progress,0));box-shadow:0 0 0 1px #d0f2660a}
.is-scroll .loading-steps li.is-loaded{color:#d0f266}
@media(max-width:700px){
 .loading-sticky{padding:45px 19px 90px}
 .loading-heading .eyebrow{font-size:9px;letter-spacing:1.2px}
 .loading-heading h2{font-size:clamp(30px,8.5vw,44px);letter-spacing:-1.5px;margin-top:14px}
 .loading-heading p{font-size:13px}
 .loading-scene{width:115%;max-width:none;margin-top:28px}
 .loading-scene figcaption{bottom:2%;font-size:10px}
 .loading-footer{margin-top:12px}
 .loading-status{flex-direction:column;align-items:center;gap:9px;text-align:center;min-height:51px;font-size:13px}
 .loading-instruction{font-size:11px}
 .loading-steps{gap:10px;margin:19px 0 12px}.loading-steps li{font-size:11px}
 .loading-skip{font-size:11px}
 .loading-story.is-scroll{height:245vh;height:245svh}
 .is-scroll .loading-sticky{padding:28px 22px 86px}
 .is-scroll .loading-scene{width:114%;max-width:620px}
}
@media(max-height:650px) and (min-width:701px){.is-scroll .loading-heading h2{font-size:32px}.is-scroll .loading-sticky{padding:18px 24px}.is-scroll .loading-scene{width:min(650px,calc((100svh - 205px)*1.5),100%)}.loading-footer{margin-top:-18px}.loading-status{min-height:30px}.loading-steps{margin-top:4px;margin-bottom:4px}}
@media(prefers-reduced-motion:reduce){.loading-story.is-scroll{height:auto}.is-scroll .loading-sticky{height:auto;position:static;padding-top:48px;padding-bottom:80px}.is-scroll .loading-scene{width:min(850px,100%)}.loading-instruction{display:none!important}.loading-cargo{opacity:1!important;transform:none!important}.loading-vehicle{transform:none!important}.loading-steps li>span{transform:none!important}}

@media(max-height:620px) and (max-width:700px){.is-scroll .loading-heading h2{font-size:30px}.is-scroll .loading-heading p{display:none}.is-scroll .loading-sticky{padding:20px 18px 72px}.is-scroll .loading-scene{width:min(112%,calc((100svh - 250px)*1.5));margin-top:10px}.is-scroll .loading-footer{margin-top:0}}
