.city-lab{height:800vh;position:relative;--city-p:0;--old-grow:0;--demolish:0;--tower-grow:0;--cam:0;background:#0087ff}.city-stage{position:sticky;top:0;height:100vh;overflow:hidden}.city-world{position:absolute;inset:-3%;width:106%;height:106%;transform:scale(calc(1 + var(--cam)*.1)) translate3d(calc(var(--cam)*-1.8%),calc(var(--cam)*-2%),0);transform-origin:center;will-change:transform}.city-sky{filter:saturate(calc(1 - var(--demolish)*.45)) brightness(calc(1 - var(--demolish)*.2))}.city-sun{transform:translateY(calc(var(--city-p)*90px));filter:drop-shadow(0 0 25px rgba(253,227,119,.7))}.old-building{transform-box:fill-box;transform-origin:center bottom;transform:translateY(calc(var(--demolish)*420px)) rotate(calc(var(--demolish)*18deg)) scaleY(var(--old-grow));opacity:calc(1 - var(--demolish)*1.3)}.old-building:nth-child(even){transform:translateY(calc(var(--demolish)*460px)) rotate(calc(var(--demolish)*-16deg)) scaleY(var(--old-grow))}.old-building text{font:900 20px Aeonik,sans-serif;fill:#1d1d1b;text-anchor:middle}.debris{opacity:var(--demolish)}.debris rect{transform-box:fill-box;transform-origin:center;transform:translateY(calc(var(--demolish)*170px)) rotate(calc(var(--demolish)*240deg))}.debris rect:nth-child(even){transform:translateY(calc(var(--demolish)*130px)) translateX(calc(var(--demolish)*80px)) rotate(calc(var(--demolish)*-190deg))}.tower{transform-box:fill-box;transform-origin:center bottom;transform:scaleY(var(--tower-grow));filter:drop-shadow(0 25px 25px rgba(29,29,27,.25))}.tower text{font:900 44px Aeonik,sans-serif;fill:#fff;text-anchor:middle;opacity:var(--tower-grow);filter:url(#glow)}.t2{transform:scaleY(clamp(0,calc(var(--tower-grow)*1.3 - .18),1))}.t3{transform:scaleY(clamp(0,calc(var(--tower-grow)*1.4 - .32),1))}.t4{transform:scaleY(clamp(0,calc(var(--tower-grow)*1.5 - .48),1))}.city-people{opacity:clamp(0,calc(var(--tower-grow)*2 - .8),1)}.city-noise{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.1),transparent 35%,rgba(0,0,0,.42)),repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 4px)}.city-ui{position:absolute;inset:0;padding:28px var(--pad) 34px;display:flex;flex-direction:column;justify-content:space-between;color:#fff}.city-ui header,.city-ui footer{display:grid;grid-template-columns:1fr 1fr 1fr;font:9px var(--mono);letter-spacing:.13em}.city-ui header span:nth-child(2){text-align:center}.city-ui header span:last-child,.city-ui footer span:last-child{text-align:right}.city-copy{position:relative;height:clamp(150px,19vw,290px);max-width:1200px}.city-copy p{position:absolute;left:0;bottom:0;margin:0;font:900 clamp(49px,7.3vw,112px)/.86 Aeonik,sans-serif;letter-spacing:-.065em;opacity:0;transform:translateY(45px);transition:opacity .4s,transform .4s;text-shadow:0 3px 30px rgba(0,0,0,.18)}.city-copy p.active{opacity:1;transform:none}.city-ui footer{align-items:center}.city-track{height:2px;background:rgba(255,255,255,.35);margin:0 22px;position:relative}.city-track i{display:block;height:100%;background:#fde377;transform:scaleX(var(--city-p));transform-origin:left}.city-track b{position:absolute;left:calc(var(--city-p)*100%);top:50%;width:12px;height:12px;border:2px solid #fde377;border-radius:50%;background:#1d1d1b;transform:translate(-50%,-50%)}@media(max-width:800px){.city-lab{height:650vh}.city-ui header span:nth-child(2){display:none}.city-ui header{grid-template-columns:1fr 1fr}.city-ui footer{grid-template-columns:auto 1fr auto}.city-world{inset:0;width:100%;height:100%;transform:scale(1.35) translate3d(calc(var(--cam)*-2%),calc(var(--cam)*-3%),0)}.city-copy p{font-size:14vw}}