/* v3 – extra animations for the inner pages (v3 only; home keeps its own set from v2.css).
   Decorative spans (.v3-*) are injected by v3.js so the page markup and copy stay untouched. */

/* ---------- 1. banner photo: glass sheen, laser level, breathing crop corners, depth ---------- */
.fx-hero--page .fx-frame { translate: calc(var(--v3x, 0) * 10px) calc(var(--v3y, 0) * 8px); transition: translate .7s var(--fx-ease); }
.v3-sheen { position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .55) 50%, transparent 62%) 0 0 / 300% 100% no-repeat;
  animation: v3Sheen 6.5s ease-in-out 2.4s infinite; background-position: 100% 0; }
@keyframes v3Sheen { 0% { background-position: 100% 0; } 40%, 100% { background-position: 0% 0; } }
.v3-level { position: absolute; left: 0; right: 0; bottom: 8%; z-index: 3; height: 2px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .95) 12%, var(--fx-terra) 50%, rgba(255, 255, 255, .95) 88%, transparent);
  box-shadow: 0 0 14px 2px rgba(184, 93, 57, .55); animation: v3Level 9s ease-in-out 2s infinite; }
.v3-level::after { content: ''; position: absolute; right: 10%; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 3px var(--fx-terra), 0 0 14px 4px rgba(184, 93, 57, .6); }
@keyframes v3Level { 0% { opacity: 0; bottom: 8%; } 8%, 92% { opacity: .95; } 50% { bottom: 86%; } 100% { opacity: 0; bottom: 8%; } }
.v3-corners { position: absolute; inset: 12px; z-index: 3; pointer-events: none; }
.v3-corners i { position: absolute; width: 26px; height: 26px; border: 0 solid #fff; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .4));
  animation: v3Breathe 3.6s ease-in-out infinite; }
.v3-corners i:nth-child(1) { left: 0; top: 0; border-left-width: 2.5px; border-top-width: 2.5px; --bx: 6px; --by: 6px; }
.v3-corners i:nth-child(2) { right: 0; top: 0; border-right-width: 2.5px; border-top-width: 2.5px; --bx: -6px; --by: 6px; }
.v3-corners i:nth-child(3) { left: 0; bottom: 0; border-left-width: 2.5px; border-bottom-width: 2.5px; --bx: 6px; --by: -6px; }
.v3-corners i:nth-child(4) { right: 0; bottom: 0; border-right-width: 2.5px; border-bottom-width: 2.5px; --bx: -6px; --by: -6px; }
@keyframes v3Breathe { 50% { translate: var(--bx) var(--by); opacity: .7; } }

/* ---------- 2. cards: tilt toward the pointer, glare, build meter ---------- */
.v3-tilt { transform-style: preserve-3d; }
.js .v3-tilt.is-tilting { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px) !important;
  transition: transform .2s ease-out, box-shadow .4s, border-color .3s !important; transition-delay: 0s !important;
  box-shadow: 0 44px 70px -40px rgba(153, 69, 35, .55); }
.js .v3-tilt.v3-leaving { transition: transform .6s var(--fx-ease), box-shadow .4s, border-color .3s !important; transition-delay: 0s !important; }
.v3-glare { position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .4s;
  background: radial-gradient(380px circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .42), transparent 46%); mix-blend-mode: soft-light; }
.is-tilting > .v3-glare { opacity: 1; }
.v3-meter { position: absolute; left: 18px; right: 18px; bottom: 0; z-index: 6; height: 4px; border-radius: 4px 4px 0 0; pointer-events: none;
  transform: scaleX(0); transform-origin: left; transition: transform .7s var(--fx-ease);
  background: repeating-linear-gradient(-45deg, var(--fx-char) 0 7px, var(--fx-sun) 7px 14px); background-size: 19.8px 100%; animation: v3Meter .9s linear infinite; }
.v3-tilt:hover > .v3-meter { transform: scaleX(1); }
@keyframes v3Meter { to { background-position: 19.8px 0; } }
.fx-agree, .fx-wall, .fx-post, .fx-card, .fx-price-card { position: relative; }

/* ---------- 3. photos inside cards & split sections: crop corners + scan on hover, slow drift ---------- */
.v3-media { position: relative; }
.v3-mcorners { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.v3-mcorners i { position: absolute; width: 22px; height: 22px; border: 0 solid #fff; opacity: 0; transition: all .55s var(--fx-ease);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35)); }
.v3-mcorners i:nth-child(1) { left: 30px; top: 30px; border-left-width: 2.5px; border-top-width: 2.5px; }
.v3-mcorners i:nth-child(2) { right: 30px; top: 30px; border-right-width: 2.5px; border-top-width: 2.5px; }
.v3-mcorners i:nth-child(3) { left: 30px; bottom: 30px; border-left-width: 2.5px; border-bottom-width: 2.5px; }
.v3-mcorners i:nth-child(4) { right: 30px; bottom: 30px; border-right-width: 2.5px; border-bottom-width: 2.5px; }
.v3-hot:hover .v3-mcorners i { opacity: 1; width: 30px; height: 30px; }
.v3-hot:hover .v3-mcorners i:nth-child(1) { left: 12px; top: 12px; }
.v3-hot:hover .v3-mcorners i:nth-child(2) { right: 12px; top: 12px; }
.v3-hot:hover .v3-mcorners i:nth-child(3) { left: 12px; bottom: 12px; }
.v3-hot:hover .v3-mcorners i:nth-child(4) { right: 12px; bottom: 12px; }
.v3-scan { position: absolute; left: 0; right: 0; top: 0; height: 36%; z-index: 4; pointer-events: none; opacity: 0; transform: translateY(-100%);
  background: linear-gradient(180deg, transparent 40%, rgba(254, 206, 87, .3) 92%, rgba(255, 255, 255, .95) 100%); border-bottom: 1px solid rgba(255, 255, 255, .9); }
.v3-hot:hover .v3-scan { animation: v3Scan 1.8s ease-in-out infinite; }
@keyframes v3Scan { 0% { opacity: 0; transform: translateY(-100%); } 12%, 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(280%); } }
.v3-drift img { animation: v3Drift 18s ease-in-out infinite alternate; }
@keyframes v3Drift { 0% { scale: 1.02; translate: 0 0; } 100% { scale: 1.1; translate: -2.5% -2%; } }

/* ---------- 4. dark quote band: a slow spotlight drifts behind the quote ---------- */
.fx-band { position: relative; isolation: isolate; }
.v3-glow { position: absolute; z-index: -1; width: 46vw; height: 46vw; max-width: 620px; max-height: 620px; left: 10%; top: -40%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(184, 93, 57, .45), transparent 62%); filter: blur(10px); animation: v3Glow 16s ease-in-out infinite alternate; }
.v3-glow + .v3-glow { left: auto; right: 6%; top: 10%; width: 34vw; height: 34vw; background: radial-gradient(circle, rgba(254, 206, 87, .22), transparent 62%); animation-duration: 20s; animation-delay: -6s; }
@keyframes v3Glow { 0% { translate: 0 0; scale: 1; } 50% { translate: 18vw 6vh; scale: 1.15; } 100% { translate: 6vw -4vh; scale: .95; } }

/* ---------- 5. checklists: row slides, tick pops ---------- */
.fx-check { transition: border-color .3s, transform .45s var(--fx-ease), box-shadow .4s; }
.fx-check:hover { box-shadow: 0 16px 30px -22px rgba(153, 69, 35, .7); }
.fx-check:hover svg { animation: v3Tick .6s var(--fx-bounce); }
@keyframes v3Tick { 40% { transform: scale(1.3) rotate(-10deg); } 100% { transform: none; } }

/* ---------- 6. FAQs: answers glide open, crimson bar on the open item ---------- */
.faq-item { position: relative; overflow: hidden; transition: box-shadow .4s, border-color .3s, transform .4s var(--fx-ease); }
.faq-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--fx-terra), var(--fx-sun));
  transform: scaleY(0); transform-origin: top; transition: transform .5s var(--fx-ease); }
.faq-item[open]::before { transform: scaleY(1); }
.faq-item:hover { transform: translateX(4px); }
.faq-item[open] > :not(summary) { animation: v3FaqIn .55s var(--fx-ease) both; }
@keyframes v3FaqIn { from { opacity: 0; transform: translateY(-10px); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }

/* ---------- 7. contact form: fields lift and glow on focus ---------- */
form input:not([type="checkbox"]):not([type="radio"]), form select, form textarea { transition: border-color .3s, box-shadow .35s, transform .35s var(--fx-ease), background-color .3s; }
form input:not([type="checkbox"]):not([type="radio"]):focus, form select:focus, form textarea:focus {
  transform: translateY(-2px); background-color: #fff; box-shadow: 0 14px 26px -18px rgba(153, 69, 35, .7), 0 0 0 4px rgba(184, 93, 57, .12); }

/* ---------- 8. footer: accent line draws across the top, links slide ---------- */
footer[data-purpose="site-footer"] { position: relative; }
.v3-fline { position: absolute; left: 0; right: 0; top: -1px; height: 3px; pointer-events: none; transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, var(--fx-terra), var(--fx-sun), var(--fx-terra)); transition: transform 1.6s var(--fx-ease); }
.v3-fline.fx-in { transform: scaleX(1); }
footer[data-purpose="site-footer"] ul a { display: inline-block; transition: color .25s, transform .35s var(--fx-ease); }
footer[data-purpose="site-footer"] ul a:hover { transform: translateX(5px); }

@media (prefers-reduced-motion: reduce) {
  .v3-sheen, .v3-level, .v3-corners i, .v3-scan, .v3-drift img, .v3-glow, .v3-meter { animation: none !important; }
  .v3-level { display: none; }
  .faq-item[open] > :not(summary) { animation: none; }
}

/* ---------- About: Our Mission / Our Vision cards ---------- */
@property --v3a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.v3-mv { isolation: isolate; }
/* entrance: swing in from opposite sides (replays) – overrides the one-off page reveal */
.js .v3-mv[data-reveal], .js .v3-mv { opacity: 0; transform: perspective(1000px) translateX(-70px) rotateY(16deg) scale(.96);
  transition: opacity .8s ease, transform 1.1s var(--fx-ease); transition-delay: var(--reveal-delay, 0ms); }
.js .v3-mv--vision[data-reveal], .js .v3-mv--vision { transform: perspective(1000px) translateX(70px) rotateY(-16deg) scale(.96); }
.js .v3-mv.v3-in, .js .v3-mv.v3-in[data-reveal], .js .v3-mv--vision.v3-in[data-reveal] { opacity: 1; transform: none; }
/* light running around the edge */
.v3-mv::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--v3a), transparent 0 62%, rgba(255, 200, 87, .95) 74%, var(--fx-terra) 84%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: v3Spin 6s linear infinite; }
.v3-mv--vision::after { animation-delay: -3s; }
@keyframes v3Spin { to { --v3a: 360deg; } }
/* spotlight following the pointer */
.v3-spot { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .1), transparent 60%); }
.v3-mv:hover .v3-spot { opacity: 1; }
/* heading letters spread into place */
.v3-mv h2 { transition: letter-spacing 1.2s var(--fx-ease) .35s, opacity .8s ease .35s; }
.js .v3-mv:not(.v3-in) h2 { letter-spacing: .6em; opacity: 0; }
/* words come into focus one by one */
.v3-mv .v3-w { display: inline-block; transition: opacity .6s ease, filter .7s ease, transform .8s var(--fx-ease); transition-delay: calc(var(--i) * 45ms + 650ms); }
.js .v3-mv:not(.v3-in) .v3-w { opacity: 0; filter: blur(6px); transform: translateY(10px); }
/* icon tile pops in */
.v3-mv .v3-ico { transition: transform .8s var(--fx-bounce) .3s; }
.js .v3-mv:not(.v3-in) .v3-ico { transform: scale(.3) rotate(-25deg); }
/* Mission: target rings ripple like a bullseye being hit */
.v3-mv--mission .v3-ico svg circle { transform-box: fill-box; transform-origin: center; animation: v3Ring 2.4s ease-in-out infinite; }
.v3-mv--mission .v3-ico svg circle:nth-of-type(2) { animation-delay: .15s; }
.v3-mv--mission .v3-ico svg circle:nth-of-type(3) { animation-delay: .3s; }
@keyframes v3Ring { 0%, 60%, 100% { transform: scale(1); opacity: 1; } 30% { transform: scale(1.22); opacity: .65; } }
.v3-mv--mission .v3-ico::after { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 2px solid rgba(255, 200, 87, .8);
  animation: v3Pulse 2.4s ease-out infinite; }
@keyframes v3Pulse { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(1.7); opacity: 0; } }
/* Vision: the eye blinks and looks around */
.v3-mv--vision .v3-ico svg { transform-origin: 50% 50%; animation: v3Blink 4.5s ease-in-out infinite; }
.v3-mv--vision .v3-ico svg circle { animation: v3Look 4.5s ease-in-out infinite; }
@keyframes v3Blink { 0%, 44%, 52%, 100% { transform: scaleY(1); } 48% { transform: scaleY(.08); } }
@keyframes v3Look { 0%, 20% { transform: translate(0, 0); } 30%, 40% { transform: translate(-2.5px, 0); } 60%, 70% { transform: translate(2.5px, -.5px); } 85%, 100% { transform: translate(0, 0); } }
.v3-ico { position: relative; }
@media (prefers-reduced-motion: reduce) {
  .js .v3-mv, .js .v3-mv h2, .js .v3-mv .v3-w, .js .v3-mv .v3-ico { opacity: 1 !important; transform: none !important; filter: none !important; letter-spacing: .25em !important; }
  .v3-mv::after, .v3-mv .v3-ico svg, .v3-mv .v3-ico svg circle, .v3-mv .v3-ico::after { animation: none !important; }
}

/* ---------- home "How we are": three slabs rise out of a moving site floor; each photo develops out of a
   white line sketch of its service (plot / building frame / house + key) – the sketch redraws over the photo on hover ---------- */
@property --dz { syntax: '<length>'; inherits: false; initial-value: 0px; }
.v3-how { position: relative; padding: .5rem 0 2.5rem; }
.v3-floor { position: absolute; z-index: 0; left: -8%; right: -8%; bottom: -10px; height: 58%; perspective: 640px; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(0deg, #000 25%, transparent 92%); mask-image: linear-gradient(0deg, #000 25%, transparent 92%); }
.v3-floor i { position: absolute; left: 0; right: 0; bottom: 0; height: 220%; transform: rotateX(70deg); transform-origin: 50% 100%;
  background-image: linear-gradient(color-mix(in srgb, var(--fx-terra) 22%, transparent) 1.5px, transparent 1.5px), linear-gradient(90deg, color-mix(in srgb, var(--fx-terra) 22%, transparent) 1.5px, transparent 1.5px);
  background-size: 60px 60px; animation: v3Floor 5s linear infinite; }
@keyframes v3Floor { to { background-position: 0 60px; } }
.v3-how-grid { position: relative; z-index: 1; display: grid; gap: 2.4rem; perspective: 1400px; }
@media (min-width: 768px) { .v3-how-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.v3-slab { position: relative; display: flex; flex-direction: column; border-radius: 22px; background: #fff; color: inherit;
  border: 1px solid color-mix(in srgb, var(--fx-terra) 18%, #fff);
  box-shadow: 0 var(--dz) 0 0 color-mix(in srgb, var(--fx-terra) 30%, #fff), 0 calc(var(--dz) + 30px) 46px -30px color-mix(in srgb, var(--fx-rust) 70%, transparent);
  opacity: 0; transform: translateY(80px) rotateX(24deg); transform-origin: 50% 100%;
  transition: opacity .6s ease, transform 1s var(--fx-bounce), --dz .8s var(--fx-ease), border-color .3s; transition-delay: calc(var(--k) * 180ms), calc(var(--k) * 180ms), calc(var(--k) * 180ms + 500ms), 0s; }
.v3-how.is-in .v3-slab { opacity: 1; transform: none; --dz: 12px; }
.v3-how.is-in .v3-slab:hover { transform: translateY(-10px); --dz: 22px; border-color: color-mix(in srgb, var(--fx-terra) 45%, #fff); transition-delay: 0s; transition-duration: .5s; }
/* photo plate: a dark crimson blueprint until the photo develops through the sketch */
.v3-slab-media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 21px 21px 0 0;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--fx-terra) 70%, #000), color-mix(in srgb, var(--fx-terra) 35%, #000));
  background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px), radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--fx-terra) 70%, #000), color-mix(in srgb, var(--fx-terra) 35%, #000));
  background-size: 24px 24px, 24px 24px, auto; }
.v3-slab-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; scale: 1.12; transition: opacity .4s, scale .4s; }
.v3-how.is-in .v3-slab-media img { opacity: 1; scale: 1; transition: opacity 1.1s ease calc(var(--k) * 180ms + 1.7s), scale 2.2s var(--fx-ease) calc(var(--k) * 180ms + 1.7s); }
.v3-slab-media::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .5s;
  background: linear-gradient(0deg, color-mix(in srgb, var(--fx-terra) 70%, #000) 0%, color-mix(in srgb, var(--fx-terra) 30%, transparent) 100%); }
.v3-slab:hover .v3-slab-media::after { opacity: .7; }
.v3-sketch { position: absolute; z-index: 2; left: 7%; top: 8%; width: 86%; height: 84%; overflow: visible; pointer-events: none; opacity: 1; transition: opacity .3s; }
.v3-sketch path { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 4px rgba(255, 255, 255, .45)); transition: stroke-dashoffset .3s; }
.v3-how.is-in .v3-sketch path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s ease-in-out calc(var(--k) * 180ms + 350ms); }
.v3-how.is-in .v3-sketch { opacity: 0; transition: opacity .9s ease calc(var(--k) * 180ms + 2.4s); }
.v3-how.is-in .v3-slab:hover .v3-sketch { opacity: 1; transition: opacity .25s; }
.v3-how.is-in .v3-slab:hover .v3-sketch path { animation: v3Sketch 1.1s ease-in-out; }
@keyframes v3Sketch { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.v3-slab-ico { position: absolute; z-index: 3; top: 14px; right: 14px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: #fff;
  background: var(--fx-terra); box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .6); opacity: 0; transform: scale(.4) rotate(-20deg); transition: opacity .3s, transform .3s; }
.v3-slab-tag { position: absolute; z-index: 3; left: 14px; bottom: 14px; padding: .35rem .8rem; border-radius: 999px; font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fx-char); background: #fff; box-shadow: 0 10px 20px -12px rgba(0, 0, 0, .5); opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .3s; }
.v3-how.is-in .v3-slab-ico { opacity: 1; transform: none; transition: opacity .4s ease calc(var(--k) * 180ms + 2.3s), transform .6s var(--fx-bounce) calc(var(--k) * 180ms + 2.3s); }
.v3-how.is-in .v3-slab-tag { opacity: 1; transform: none; transition: opacity .4s ease calc(var(--k) * 180ms + 2.45s), transform .6s var(--fx-ease) calc(var(--k) * 180ms + 2.45s); }
.v3-how.is-in .v3-slab:hover .v3-slab-ico { transform: rotate(-10deg) scale(1.08); transition-delay: 0s; }
.v3-slab-body { flex: 1; display: flex; flex-direction: column; padding: 1.5rem 1.6rem 1.7rem; }
.v3-slab-body h3 { font-size: 1.3rem; font-weight: 800; color: var(--fx-char); transition: color .3s; }
.v3-slab:hover .v3-slab-body h3 { color: var(--fx-terra); }
.v3-slab-body p { flex: 1; margin-top: .5rem; font-size: .95rem; line-height: 1.65; color: var(--fx-slate); }
.v3-slab-link { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.2rem; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--fx-terra); }
.v3-slab-link svg, .v3-slab-link i { transition: transform .35s var(--fx-ease); }
.v3-slab:hover .v3-slab-link svg, .v3-slab:hover .v3-slab-link i { transform: translateX(5px); }
@media (prefers-reduced-motion: reduce) {
  .v3-floor i, .v3-sketch path { animation: none !important; }
  .v3-slab, .v3-slab-media img, .v3-slab-ico, .v3-slab-tag { opacity: 1 !important; transform: none !important; transition: none !important; }
  .v3-sketch { display: none; }
}

/* ---------- v3 index-1 hero: a CSS 3D construction site. A dashed hologram of the finished tower appears; a tower
   crane lowers every piece on its hook (cable pays out in step), pieces land with a spark burst and fill in – podium,
   a twisting glass tower (balcony slab + crimson corner fin per floor), crimson crown with an antenna light. Then
   trees pop up, two cars circle the plaza, the crane swings away, light glints across the glass and the site turns. ---------- */
.b3d { position: absolute; inset: 0; perspective: 1600px; perspective-origin: 50% 20%; pointer-events: none; --d0: .9s; --step: .36s; }
.b3d-sway { position: absolute; left: 50%; bottom: 12%; width: 0; height: 0; transform-style: preserve-3d; scale: .78; }
.b3d-world { position: absolute; left: 0; top: 0; transform-style: preserve-3d;
  transform: rotateX(-18deg) rotateY(calc(-30deg + var(--px, 0) * 30deg)); transition: transform .9s var(--fx-ease); }
.b3d-box, .b3d-sub, .b3d-ghost, .b3d-orbit { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }
.b3d-sub { transform: var(--t); }
/* site: plaza + shadow */
.b3d-base, .b3d-shadow { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.b3d-base { width: 330px; height: 280px; transform: translate3d(-165px, 0, -140px) rotateX(90deg); border-radius: 18px;
  background: radial-gradient(ellipse at 50% 50%, transparent 0 44%, color-mix(in srgb, var(--fx-terra) 25%, transparent) 44.5% 46%, transparent 46.5%),
    linear-gradient(color-mix(in srgb, var(--fx-terra) 22%, transparent) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(90deg, color-mix(in srgb, var(--fx-terra) 22%, transparent) 1px, transparent 1px) 0 0 / 20px 20px, #f1eeec;
  border: 2px solid color-mix(in srgb, var(--fx-terra) 50%, #fff); clip-path: inset(50% 50% 50% 50% round 18px); transition: clip-path 1s var(--fx-ease) .1s; }
.fx-build.fx-in .b3d-base { clip-path: inset(0 0 0 0 round 18px); }
.b3d-shadow { width: 600px; height: 520px; transform: translate3d(-300px, 1px, -260px) rotateX(90deg); background: radial-gradient(closest-side, rgba(20, 21, 24, .2), transparent); opacity: 0; transition: opacity 1.2s ease .2s; }
.fx-build.fx-in .b3d-shadow { opacity: 1; }
/* faces */
.b3d-f { position: absolute; left: 0; top: 0; transform-origin: 0 0; border: 1.5px dashed var(--fx-terra); transition: border-color .5s ease; transition-delay: calc(var(--i, 0) * var(--step) + var(--d0) + .35s); }
.b3d-f::before, .b3d-f::after { content: ''; position: absolute; inset: -1.5px; opacity: 0; }
.b3d-f::before { transition: opacity .55s ease; transition-delay: calc(var(--i, 0) * var(--step) + var(--d0) + .35s); }
.fx-build.fx-in .b3d-f { border-color: transparent; }
.fx-build.fx-in .b3d-f::before { opacity: 1; }
.b3d-f--front, .b3d-f--back { width: var(--bw); height: var(--bh); }
.b3d-f--left, .b3d-f--right { width: var(--bd); height: var(--bh); }
.b3d-f--top { width: var(--bw); height: var(--bd); }
.b3d-f--front { transform: translate3d(calc(var(--bw) / -2), calc(var(--bh) * -1), calc(var(--bd) / 2)); }
.b3d-f--back { transform: translate3d(calc(var(--bw) / 2), calc(var(--bh) * -1), calc(var(--bd) / -2)) rotateY(180deg); }
.b3d-f--right { transform: translate3d(calc(var(--bw) / 2), calc(var(--bh) * -1), calc(var(--bd) / 2)) rotateY(90deg); }
.b3d-f--left { transform: translate3d(calc(var(--bw) / -2), calc(var(--bh) * -1), calc(var(--bd) / -2)) rotateY(-90deg); }
.b3d-f--top { transform: translate3d(calc(var(--bw) / -2), calc(var(--bh) * -1), calc(var(--bd) / -2)) rotateX(90deg); }
/* 1. hologram of the finished tower, shown while it is being built */
.b3d-ghost { opacity: 0; transform: translate3d(0, calc(var(--y) * -1), 0) rotateY(var(--ry)); }
.fx-build.fx-in .b3d-ghost { animation: b3dGhost 6.6s ease forwards; }
@keyframes b3dGhost { 0% { opacity: 0; } 7% { opacity: 1; } 84% { opacity: 1; } 100% { opacity: 0; } }
.fx-build .b3d-ghost .b3d-f, .fx-build.fx-in .b3d-ghost .b3d-f { border: 1px dashed color-mix(in srgb, var(--fx-terra) 45%, transparent); transition: none; }
.b3d-ghost .b3d-f::before, .b3d-ghost .b3d-f::after { display: none; }
/* 2. each piece starts on the hook under the jib and is lowered to its place (tower floors turn as they come down) */
.b3d-box { opacity: 0; transform: translate3d(0, calc((var(--jib) - 40px - var(--bh)) * -1), 0) rotateY(calc(var(--ry) + var(--sp)));
  transition: transform .95s cubic-bezier(.3, 1.25, .5, 1), opacity .15s; transition-delay: calc(var(--i) * var(--step) + var(--d0)); }
.fx-build.fx-in .b3d-box { opacity: 1; transform: translate3d(0, calc(var(--y) * -1), 0) rotateY(var(--ry)); }
/* the cable pays out with the same timing curve, so its end stays on the piece */
.b3d-cable { position: absolute; left: -1px; top: calc(var(--jib) * -1); width: 2px; height: var(--ch); background: #34353b; transform-origin: 50% 0; transform: scaleY(var(--s0)); opacity: 0;
  transition: transform .95s cubic-bezier(.3, 1.25, .5, 1); transition-delay: calc(var(--i) * var(--step) + var(--d0)); }
.fx-build.fx-in .b3d-cable { transform: scaleY(1); animation: b3dCable 1.35s linear forwards; animation-delay: calc(var(--i) * var(--step) + var(--d0)); }
@keyframes b3dCable { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
/* 3. spark burst on landing */
.b3d-spark { position: absolute; left: 0; top: 0; transform: translate3d(calc(var(--bw) / 2), calc(var(--bh) * -1), calc(var(--bd) / 2)); }
.b3d-spark b { position: absolute; left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: #ffb020; box-shadow: 0 0 6px 2px rgba(255, 140, 40, .8); opacity: 0; }
.b3d-spark b:nth-child(1) { --sx: 22px; --sy: -18px; } .b3d-spark b:nth-child(2) { --sx: -16px; --sy: -24px; } .b3d-spark b:nth-child(3) { --sx: 28px; --sy: 4px; }
.b3d-spark b:nth-child(4) { --sx: -26px; --sy: 2px; } .b3d-spark b:nth-child(5) { --sx: 8px; --sy: -30px; } .b3d-spark b:nth-child(6) { --sx: 16px; --sy: 20px; } .b3d-spark b:nth-child(7) { --sx: -10px; --sy: 18px; }
.fx-build.fx-in .b3d-spark b { animation: b3dSpark .75s ease-out forwards; animation-delay: calc(var(--i) * var(--step) + var(--d0) + .62s); }
@keyframes b3dSpark { 0% { opacity: 1; transform: translate(0, 0) scale(1.2); } 100% { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(.3); } }
/* podium */
.b3d-pod .b3d-f--front::before, .b3d-pod .b3d-f--back::before {
  background: linear-gradient(180deg, #dcd7d3 0 9px, transparent 9px), repeating-linear-gradient(90deg, #ebe8e5 0 4px, transparent 4px 46px), linear-gradient(180deg, #5e7792, #a3b6c8); }
.b3d-pod .b3d-f--right::before, .b3d-pod .b3d-f--left::before {
  background: linear-gradient(180deg, #c9c3be 0 9px, transparent 9px), repeating-linear-gradient(90deg, #d3cfcb 0 4px, transparent 4px 42px), linear-gradient(180deg, #445b75, #7b90a6); }
.b3d-pod .b3d-f--top::before { background: #e7e3e0; }
/* tower floors: glass + mullions, with a light glint that runs across once built */
.b3d-fl .b3d-f--front::before, .b3d-fl .b3d-f--back::before {
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .6) 50%, transparent 58%) 160% 0 / 300% 100% no-repeat,
    repeating-linear-gradient(90deg, #f1f1f2 0 4px, transparent 4px 28px), linear-gradient(180deg, #6c86a1 0%, #a9bccc 62%, #d1dbe5 100%); }
.b3d-fl .b3d-f--right::before, .b3d-fl .b3d-f--left::before {
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .45) 50%, transparent 58%) 160% 0 / 300% 100% no-repeat,
    repeating-linear-gradient(90deg, #cfd2d6 0 4px, transparent 4px 26px), linear-gradient(180deg, #46607c 0%, #7c92a9 100%); }
.b3d-fl .b3d-f--top::before { background: #e4e1de; }
.fx-build.fx-in .b3d-fl .b3d-f::before { animation: b3dGlint 6s ease-in-out infinite; animation-delay: calc(7.6s + var(--i) * .1s); }
@keyframes b3dGlint { 0% { background-position: 160% 0, 0 0, 0 0; } 35%, 100% { background-position: -60% 0, 0 0, 0 0; } }
/* balcony slabs */
.b3d-slab .b3d-f::before { background: #fbfaf9; box-shadow: inset 0 -1px 0 rgba(20, 21, 24, .12); }
.b3d-slab .b3d-f--right::before, .b3d-slab .b3d-f--left::before { background: #dedad6; }
.b3d-slab--pod .b3d-f::before { background: var(--fx-terra); }
.b3d-slab--pod .b3d-f--right::before, .b3d-slab--pod .b3d-f--left::before { background: color-mix(in srgb, var(--fx-terra) 72%, #000); }
.b3d-slab--pod .b3d-f--top::before { background: #f4f1ef; box-shadow: inset 0 0 0 5px var(--fx-terra); }
/* crimson corner fin */
.b3d-fin .b3d-f::before { background: var(--fx-terra); }
.b3d-fin .b3d-f--right::before, .b3d-fin .b3d-f--left::before { background: color-mix(in srgb, var(--fx-terra) 70%, #000); }
/* crown + antenna light */
.b3d-crown .b3d-f { border-width: 4px; }
.fx-build.fx-in .b3d-crown .b3d-f { border-color: var(--fx-terra); border-style: solid; }
.b3d-crown .b3d-f::before { background: linear-gradient(180deg, color-mix(in srgb, var(--fx-terra) 18%, transparent), transparent); }
.b3d-crown .b3d-f--top::before { background: none; }
.b3d-ant .b3d-f::before { background: #2b2c31; }
.b3d-light { position: absolute; left: -6px; top: -90px; width: 12px; height: 12px; border-radius: 50%; background: #ff2d4f; opacity: 0;
  box-shadow: 0 0 0 4px rgba(255, 45, 79, .25), 0 0 18px 6px rgba(255, 45, 79, .55); }
.fx-build.fx-in .b3d-light { animation: b3dBlink 1.6s steps(1) infinite; animation-delay: 6.2s; }
@keyframes b3dBlink { 0% { opacity: 1; } 50% { opacity: .15; } }
/* windows light up here and there */
.b3d-fl .b3d-f--front::after { background: linear-gradient(#ffd98a, #ffd98a) no-repeat calc(var(--lx) * 37px + 9px) 5px / 19px calc(var(--bh) - 10px); }
.b3d-fl .b3d-f--right::after { background: linear-gradient(#ffcf70, #ffcf70) no-repeat calc(var(--ly) * 33px + 8px) 5px / 17px calc(var(--bh) - 10px); }
.fx-build.fx-in .b3d-fl .b3d-f--front::after { animation: b3dLit 6s ease-in-out infinite; animation-delay: calc(6.6s + var(--i) * .6s); }
.fx-build.fx-in .b3d-fl .b3d-f--right::after { animation: b3dLit 7s ease-in-out infinite; animation-delay: calc(7.2s + var(--i) * .45s); }
@keyframes b3dLit { 0%, 100% { opacity: 0; } 25%, 65% { opacity: .85; } }
/* 4. tower crane: lattice mast + jib, counterweight, cab, trolley over the tower; swings away when the job is done */
.b3d-crane { opacity: 0; transition: opacity .5s ease .2s; }
.fx-build.fx-in .b3d-crane { opacity: 1; }
.b3d-sub.b3d-jib { transform: translate3d(-175px, calc(var(--jib) * -1), 0); }
.fx-build.fx-in .b3d-sub.b3d-jib { animation: b3dSlew 1.8s ease-in-out 6.3s forwards; }
@keyframes b3dSlew { to { transform: translate3d(-175px, calc(var(--jib) * -1), 0) rotateY(-70deg); } }
.b3d-mast .b3d-f::before, .b3d-jibarm .b3d-f::before {
  background: repeating-linear-gradient(45deg, transparent 0 5px, var(--fx-terra) 5px 6.5px), repeating-linear-gradient(-45deg, transparent 0 5px, var(--fx-terra) 5px 6.5px);
  box-shadow: inset 0 0 0 1.6px var(--fx-terra); }
.b3d-crane .b3d-f { transition-delay: .2s; } .b3d-crane .b3d-f::before { transition-delay: .2s; }
.b3d-head .b3d-f::before { background: var(--fx-terra); }
.b3d-cw .b3d-f::before { background: #9a9590; } .b3d-cw .b3d-f--top::before { background: #b9b4af; }
.b3d-cab .b3d-f::before { background: linear-gradient(180deg, #8fb0cc 0 55%, #f4f2f0 55%); box-shadow: inset 0 0 0 1.5px var(--fx-terra); }
.b3d-trolley .b3d-f::before { background: #2f3035; }
/* 5. landscaping + traffic once the tower is done */
.b3d-tree .b3d-f::before { background: linear-gradient(180deg, #6cbf6a, #3f8f4a); border-radius: 3px; }
.b3d-tree .b3d-f--top::before { background: #7ccd78; }
.b3d-tree--plaza { opacity: 0; transform: var(--t) scale3d(.2, 0, .2); transition: transform .7s cubic-bezier(.34, 1.6, .64, 1), opacity .3s; transition-delay: calc(6.4s + var(--q) * .14s); }
.fx-build.fx-in .b3d-tree--plaza { opacity: 1; transform: var(--t); }
.b3d-orbit { opacity: 0; transition: opacity .6s ease 6.8s; }
.fx-build.fx-in .b3d-orbit { opacity: 1; animation: b3dOrbit 10s linear 6.8s infinite; }
.fx-build.fx-in .b3d-orbit--2 { animation-duration: 14s; animation-direction: reverse; }
@keyframes b3dOrbit { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
.b3d-car .b3d-f::before { background: var(--fx-terra); border-radius: 3px; } .b3d-car .b3d-f--top::before { background: linear-gradient(180deg, #2f3035 0 30%, var(--fx-terra) 30% 70%, #2f3035 70%); }
.b3d-car--2 .b3d-f::before { background: #f6f4f2; } .b3d-car--2 .b3d-f--top::before { background: linear-gradient(180deg, #2f3035 0 30%, #fff 30% 70%, #2f3035 70%); }
.b3d-car .b3d-f, .b3d-tree .b3d-f { border-width: 0; transition-delay: 6.3s; } .b3d-car .b3d-f::before, .b3d-tree--plaza .b3d-f::before { transition-delay: 6.3s; }
/* 6. the whole site turns slowly once everything is done */
.fx-build.fx-in .b3d-sway { animation: b3dTurn 40s linear 8.2s infinite; }
@keyframes b3dTurn { to { transform: rotateY(360deg); } }
.fx-build--3d .fx-level { display: none; }
@media (max-width: 640px) { .b3d-sway { scale: .6; bottom: 10%; } }
@media (prefers-reduced-motion: reduce) {
  .b3d-box { opacity: 1 !important; transform: translate3d(0, calc(var(--y) * -1), 0) rotateY(var(--ry)) !important; transition: none !important; }
  .b3d-f { border-color: transparent !important; } .b3d-f::before { opacity: 1 !important; transition: none !important; animation: none !important; }
  .b3d-cable, .b3d-ghost, .b3d-spark, .b3d-orbit { display: none; } .b3d-base { clip-path: none !important; }
  .b3d-sway, .b3d-light, .b3d-jib { animation: none !important; } .b3d-crane, .b3d-tree--plaza { opacity: 1 !important; transform: var(--t) !important; }
}