/* Studio loading screen: a house outline that draws itself, a progress bar with the current step, and (after the
   reveal) a small pill while photo materials keep streaming in. Behaviour: 25-photo-assets.js. */
#loader .ld-card{display:grid;justify-items:center;gap:14px;width:min(340px,86vw)}
#loader .ld-brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;letter-spacing:.02em;color:var(--txt)}
#loader .ld-brand img{width:28px;height:28px}
#loader .ld-house{width:150px;height:110px;color:var(--amber,#f28a17);fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;animation:ldDraw 1.6s cubic-bezier(.6,.05,.3,1) .1s forwards}
#loader .ld-bar{position:relative;width:100%;height:4px;border-radius:99px;background:rgba(var(--ov,255,255,255),.1);overflow:hidden}
#loader .ld-bar i{position:absolute;inset:0 auto 0 0;width:6%;border-radius:inherit;background:linear-gradient(90deg,#ffb35c,var(--amber,#f28a17));transition:width .35s ease}
#loader .ld-bar.indet i{width:30%;animation:ldSlide 1.1s ease-in-out infinite}
#loader .ld-row{display:flex;align-items:center;justify-content:center;gap:9px;min-height:20px;font-size:13px}
#loader .ld-row .ring{width:14px;height:14px;border-width:2px;margin:0}
#loader .ld-steps{display:flex;gap:6px;list-style:none;margin:0;padding:0}
#loader .ld-steps li{width:6px;height:6px;border-radius:50%;background:rgba(var(--ov,255,255,255),.18);transition:background .3s}
#loader .ld-steps li.on{background:var(--amber,#f28a17)}
@keyframes ldDraw{to{stroke-dashoffset:0}}
@keyframes ldSlide{0%{transform:translateX(-110%)}100%{transform:translateX(360%)}}

/* materials still streaming after the house is shown */
.stream-pill{position:fixed;left:50%;bottom:18px;translate:-50% 0;z-index:40;display:flex;align-items:center;gap:10px;padding:8px 14px 8px 12px;border-radius:99px;
  font-size:12.5px;color:var(--txt);background:rgba(12,16,24,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 8px 24px rgba(0,0,0,.25);transition:opacity .4s,translate .4s;pointer-events:none}
.stream-pill[hidden]{display:flex;opacity:0;translate:-50% 10px}
.stream-pill .sp-bar{width:70px;height:3px;border-radius:99px;background:rgba(255,255,255,.18);overflow:hidden}
.stream-pill .sp-bar i{display:block;height:100%;width:0;background:var(--amber,#f28a17);transition:width .3s}
:root[data-theme="light"] .stream-pill{color:#16181c;background:rgba(255,255,255,.85)}

@media (prefers-reduced-motion:reduce){
  #loader .ld-house{animation:none;stroke-dashoffset:0}
  #loader .ld-bar.indet i{animation:none;width:100%;opacity:.5}
}