@font-face{font-family:Sign;src:url('/assets/construction/first-stage/sign-type.ttf') format('truetype');font-weight:700;font-display:block}
/* Preserve the approved permanent white/silver background; only alpha layers move. */
.first-pit{position:absolute;z-index:2;width:70%;height:auto;left:15%;top:var(--scene-top,16%);object-fit:contain;opacity:0;pointer-events:none}
.first-sign{position:absolute;z-index:4;left:72%;top:var(--sign-top,39%);width:21%;height:auto;overflow:visible;transform:none;opacity:0;pointer-events:none}

.first-replay{border:0;border-bottom:1px solid #b9bec5;background:none;padding:5px 0;font:12px/1.4 -apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;color:#6c7480;cursor:pointer;min-height:32px}
.first-replay:focus-visible{outline:2px solid #bd3034;outline-offset:4px}
@media(prefers-reduced-motion:reduce){.first-pit,.first-sign{opacity:1!important;transform:none!important;clip-path:none!important}}
.first-excavator{position:absolute;z-index:3;left:13%;top:14.5%;width:20%;height:auto;opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){.first-excavator{display:none!important}}

@media(prefers-reduced-motion:reduce){.first-sign{transform:none!important}}

/* Project the metal face in the scene's downward view; the vertical post stays fixed. */
.first-sign{aspect-ratio:220/340}
.first-sign-post{display:block;width:100%;height:100%;overflow:visible}
.first-sign-face{position:absolute;inset:0 0 auto;width:100%;aspect-ratio:220/207;transform-origin:50% 95%;transform:none}
.first-sign-face>svg{display:block;width:100%;height:100%;overflow:visible}

/* Stage 2 occupies the exact same scene footprint; the substrate and sign are unchanged. */
.second-foundation{position:absolute;z-index:2;width:70%;height:auto;left:15%;top:var(--scene-top,16%);object-fit:contain;opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){.has-foundation .first-pit{opacity:0!important}.second-foundation{opacity:1!important}}

/* Stage 3: same fixed footprint and camera, with first-storey supports. */
.third-supports{position:absolute;z-index:2;width:70%;height:auto;left:15%;top:var(--scene-top,16%);object-fit:contain;opacity:0;pointer-events:none}



@media(prefers-reduced-motion:reduce){.has-supports .second-foundation{opacity:1!important}.third-supports{opacity:1!important;clip-path:none!important}}

.supports-settled{position:absolute;z-index:2;width:70%;height:auto;left:15%;top:var(--scene-top,16%);opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){.has-supports .second-foundation,.has-supports .third-supports{opacity:0!important}.supports-settled{opacity:1!important}}

/* One fixed camera/ground anchor for every construction stage and the eventual roof. */
.first-stage{--scene-top:16%;--sign-top:39%}
.frame-beams,.frame-base,.frame-settled{position:absolute;z-index:2;left:15%;top:var(--scene-top,16%);width:70%;height:auto;opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){.has-frame .supports-settled,.has-frame .frame-beams,.has-frame .frame-base{opacity:0!important}.frame-settled{opacity:1!important}}

.frame-beams,.frame-base,.frame-settled{aspect-ratio:1672/941;object-fit:fill}

/* Small replay circle; preserve the existing full-sequence restart handler. */
.first-replay{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:#626c79;line-height:1}.first-replay::before{content:"";position:absolute;inset:6px;border:1px solid #d6dbe2;border-radius:50%;background:#ffffffb3}.first-replay svg{position:relative;display:block;pointer-events:none}.first-replay:hover::before{background:#f3f5f7;border-color:#aab2bd}.first-replay:active{transform:scale(.96)}

/* Walls keep the approved scene footprint and camera. */
.walls-settled{position:absolute;z-index:2;left:15%;top:var(--scene-top,16%);width:70%;height:auto;aspect-ratio:1672/941;object-fit:fill;opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){.has-walls .frame-settled{opacity:0!important}.has-walls .walls-settled{opacity:1!important}}

/* Replay is only the circular arrows, overlaid inside the illustration. */
.first-stage>.first-replay{position:absolute;right:0;bottom:0;z-index:5;width:44px;height:44px;margin:0;border:0;background:transparent;color:#9da4aa;pointer-events:auto}.first-stage>.first-replay::before{display:none}.first-stage>.first-replay svg{position:absolute;right:9px;bottom:9px;width:20px;height:20px;aspect-ratio:1}.first-stage>.first-replay:hover{color:#263146}.first-stage>.first-replay:focus-visible{outline:2px solid #bd3034;outline-offset:-5px}



@media(max-width:360px){.first-stage>.first-replay svg{right:6px;bottom:6px;width:18px;height:18px}}
.facade-settled{position:absolute;z-index:2;left:15%;top:var(--scene-top,16%);width:70%;height:auto;aspect-ratio:1672/941;object-fit:fill;opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){.has-facade .walls-settled{opacity:0!important}.has-facade .facade-settled{opacity:1!important}}

/* Gold roof shares the approved fixed facade and ground registration. */
.roof-settled{position:absolute;z-index:2;left:15%;top:var(--scene-top,16%);width:70%;height:auto;aspect-ratio:1672/941;object-fit:fill;opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){.has-roof .facade-settled{opacity:0!important}.has-roof .roof-settled{opacity:1!important}}

/* Daylight windows: same illustration frame, no camera or background change. */
.windows-settled{position:absolute;z-index:2;left:15%;top:var(--scene-top,16%);width:70%;height:auto;aspect-ratio:1672/941;object-fit:fill;opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){.has-windows .roof-settled{opacity:0!important}.has-windows .windows-settled{opacity:1!important}}

.estate-settled{position:absolute;z-index:2;left:6%;top:8%;width:88%;height:auto;aspect-ratio:1672/941;opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){.has-estate .windows-settled,.has-estate .first-sign{opacity:0!important}.has-estate .estate-settled{opacity:1!important}}

.estate-cars{position:absolute;z-index:3;left:6%;top:8%;width:88%;height:auto;aspect-ratio:1672/941;pointer-events:none;opacity:0}