@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;800&display=swap');
:root { font-family: 'Montserrat', sans-serif; color: #202224; background: #fff; --orange: #fe6b01; font-synthesis: none; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
.renovation {
  --pad-x: max(18px, env(safe-area-inset-left), env(safe-area-inset-right));
  --pad-y: max(20px, env(safe-area-inset-top), env(safe-area-inset-bottom));
  height: 100svh;
  height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--pad-y) var(--pad-x);
  background: radial-gradient(ellipse at 48% 70%, #fe6b0106, transparent 60%);
}
/* Both viewport dimensions constrain the artwork; typography scales with it. */
.scene { position: relative; width: min(1440px, 100%, calc((100svh - 2 * var(--pad-y)) * 1.85)); width: min(1440px, 100%, calc((100dvh - 2 * var(--pad-y)) * 1.85)); aspect-ratio: 1.85; container-type: inline-size; }
.demolition { position: absolute; width: 76%; height: auto; left: 0; bottom: 0; }
.demolition > img { display: block; width: 100%; height: auto; transform-origin: 28% 94%; animation: demolition-impact 6s ease-in-out infinite; }
.impact { position: absolute; left: 61%; top: 51%; width: 0; height: 0; }
.fragment { position: absolute; width: .7cqw; height: .85cqw; background: #484b4e; clip-path: polygon(20% 0, 100% 25%, 80% 100%, 0 70%); opacity: 0; animation: debris-fall 6s ease-out infinite; }
.fragment-one { --dx: 3cqw; --dy: 7cqw; --spin: 130deg; }
.fragment-two { --dx: -2cqw; --dy: 10cqw; --spin: -180deg; width: .5cqw; }
.fragment-three { --dx: 4.5cqw; --dy: 12cqw; --spin: 230deg; background: #828588; width: .45cqw; height: .55cqw; }
.fragment-four { --dx: -3cqw; --dy: 6cqw; --spin: -100deg; background: #626568; width: .4cqw; height: .6cqw; }
.dust { position: absolute; width: 7cqw; height: 5cqw; margin: -2.5cqw 0 0 -3.5cqw; border-radius: 50%; background: radial-gradient(ellipse, #9c99914d, #b5b0a51a 45%, transparent 70%); opacity: 0; animation: impact-dust 6s ease-out infinite; }
@keyframes demolition-impact {
  0%, 25%, 48%, 100% { transform: translate(0, 0) rotate(0); }
  34% { transform: translateX(-.25cqw) rotate(-.35deg); }
  37% { transform: translateX(.3cqw) rotate(.2deg); }
  39% { transform: translate(-.16cqw, .08cqw) rotate(-.12deg); }
  42% { transform: translateX(.1cqw) rotate(.06deg); }
}
@keyframes debris-fall {
  0%, 36% { opacity: 0; transform: translate(0, 0) rotate(0); }
  38% { opacity: .85; transform: translate(0, -.5cqw) rotate(0); }
  57% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--spin)); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--spin)); }
}
@keyframes impact-dust {
  0%, 36% { opacity: 0; transform: scale(.3); }
  40% { opacity: .65; }
  58%, 100% { opacity: 0; transform: translateY(2cqw) scale(1.8); }
}
.message { position: absolute; top: 14%; left: 53%; right: 0; z-index: 2; }
h1 { margin: 0; text-transform: uppercase; line-height: 1.06; }
h1 span { display: block; white-space: nowrap; }
.title-light { font-size: 5cqw; font-weight: 300; letter-spacing: -.055em; }
.title-bold { font-size: 4.15cqw; font-weight: 800; letter-spacing: -.055em; }
.loading { margin-top: 1.6cqw; width: 15cqw; height: .85cqw; border-radius: 20px; background: #dedede; overflow: hidden; box-shadow: inset 0 1px 2px #2022240a; }
.loading span { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--orange); transform-origin: left center; animation: loading-cycle 5.5s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes loading-cycle {
  0% { transform: scaleX(.08); opacity: 0; }
  8% { transform: scaleX(.12); opacity: 1; }
  45% { transform: scaleX(.55); opacity: 1; }
  80% { transform: scaleX(1); opacity: 1; }
  94%, 100% { transform: scaleX(1); opacity: 0; }
}
.message p { margin: 1.6cqw 0 0; font-weight: 400; font-size: max(12px, 1.25cqw); line-height: 1.6; text-transform: uppercase; letter-spacing: .2em; text-wrap: balance; }
.proposal-access { display: inline-flex; align-items: center; gap: 10px; margin-top: 1.5cqw; padding: 0 0 6px; color: #3c3c3b; border-bottom: 1px solid var(--orange); font-size: max(11px, 1.05cqw); font-weight: 500; letter-spacing: .025em; text-decoration: none; transition: color .2s ease, border-color .2s ease; }
.proposal-access:hover { color: var(--orange); border-color: currentColor; }
.proposal-access:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
.cones { position: absolute; width: 35%; height: auto; right: 0; bottom: 0; }
.ground { position: absolute; left: 0; right: 0; bottom: 3%; height: max(2px, .28cqw); background: #292b2e; border-radius: 5px; box-shadow: 0 5px 12px #2022240d; }
@media (max-width: 1024px) and (orientation: portrait) {
 .scene { width: min(620px, 100%, calc((100svh - 2 * var(--pad-y)) * .72)); width: min(620px, 100%, calc((100dvh - 2 * var(--pad-y)) * .72)); aspect-ratio: .72; }
 .message { left: 0; right: 0; top: 4%; text-align: center; }
 .title-light { font-size: 10cqw; }
 .title-bold { font-size: 8.7cqw; }
 .loading { margin: 5cqw auto 0; width: 40cqw; height: 2.2cqw; }
 .message p { margin-top: 5cqw; font-size: max(12px, 2.7cqw); letter-spacing: .16em; }
 .demolition { width: 100%; left: 0; bottom: 22%; }
 .cones { width: 70%; right: 0; bottom: 0; }
 .ground { bottom: 1%; }
}
@media (prefers-reduced-motion: reduce) {
 .loading span { animation: none; transform: scaleX(.45); }
 .demolition > img, .fragment, .dust { animation: none; }
}