/* Hero construction study: a quiet, repeating build from foundation to enclosure.
   SVG markup is inline in the hero so the site-level motion switch can control it. */
.zd-build-sequence {
  position: absolute;
  z-index: 1;
  top: 18%;
  right: 2.5%;
  width: min(44vw, 630px);
  height: 66%;
  pointer-events: none;
  opacity: .62;
  filter: drop-shadow(0 0 7px rgba(227, 185, 111, .26));
}
.zd-build-sequence svg { display: block; width: 100%; height: 100%; overflow: visible; }
.zd-build-sequence .zd-build-grid {
  fill: none;
  stroke: #d5b877;
  stroke-width: .8;
  stroke-dasharray: 3 9;
  opacity: .3;
}
.zd-build-sequence .zd-build-crane {
  fill: none;
  stroke: #e5c887;
  stroke-width: 1.15;
  stroke-linejoin: round;
  opacity: .5;
}
.zd-build-sequence .zd-build-crane .zd-build-mast {
  stroke-width: 1.45;
}
.zd-build-sequence .zd-build-hook {
  fill: none;
  stroke: #f3daa0;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .78;
}
.zd-build-sequence .zd-build-footing,
.zd-build-sequence .zd-build-tier,
.zd-build-sequence .zd-build-roof,
.zd-build-sequence .zd-build-envelope {
  fill: none;
  stroke: #f3da9d;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.zd-build-sequence .zd-build-footing { stroke-width: 2.3; }
.zd-build-sequence .zd-build-tier .zd-build-cross,
.zd-build-sequence .zd-build-envelope {
  stroke: #dbb974;
  stroke-width: 1.15;
}
.zd-build-sequence .zd-build-slab {
  fill: rgba(205, 164, 90, .1);
  stroke: #f5dca1;
  stroke-width: 1.7;
}
.zd-build-sequence .zd-build-envelope rect {
  fill: rgba(237, 202, 132, .035);
}
.zd-build-sequence .zd-build-pin { fill: #f9e5b4; opacity: .8; }
.zd-build-sequence .zd-build-labels {
  fill: #f5dc9e;
  font: 9px/1.2 var(--mono, monospace);
  letter-spacing: .14em;
  opacity: .65;
}
.zd-build-sequence .zd-build-guide {
  fill: none;
  stroke: #e8ca8a;
  stroke-width: .75;
  stroke-dasharray: 4 8;
  opacity: .4;
}

/* The complete building is shown if the visitor turns motion off. */
html[data-motion="on"] .zd-build-sequence .zd-build-footing {
  animation: zd-foundation-cycle 16s ease-in-out infinite;
}
html[data-motion="on"] .zd-build-sequence .zd-build-tier--one {
  animation: zd-tier-one-cycle 16s ease-in-out infinite;
}
html[data-motion="on"] .zd-build-sequence .zd-build-tier--two {
  animation: zd-tier-two-cycle 16s ease-in-out infinite;
}
html[data-motion="on"] .zd-build-sequence .zd-build-tier--three {
  animation: zd-tier-three-cycle 16s ease-in-out infinite;
}
html[data-motion="on"] .zd-build-sequence .zd-build-roof {
  animation: zd-roof-cycle 16s ease-in-out infinite;
}
html[data-motion="on"] .zd-build-sequence .zd-build-envelope {
  animation: zd-envelope-cycle 16s ease-in-out infinite;
}
html[data-motion="on"] .zd-build-sequence .zd-build-hook {
  animation: zd-hook-cycle 16s ease-in-out infinite;
}
html[data-motion="on"] .zd-build-sequence .zd-build-crane {
  animation: zd-crane-cycle 16s ease-in-out infinite;
}
html[data-motion="on"] .zd-build-sequence .zd-build-pin {
  animation: zd-build-pin-cycle 3.4s ease-in-out infinite;
}
html[data-motion="on"] .zd-build-sequence .zd-build-guide {
  animation: zd-build-guide-cycle 16s linear infinite;
}
html[data-motion="on"] .zd-build-sequence .zd-build-labels {
  animation: zd-build-label-cycle 16s ease-in-out infinite;
}

@keyframes zd-foundation-cycle {
  0%, 3% { opacity: 0; transform: translateY(10px); }
  9%, 88% { opacity: 1; transform: translateY(0); }
  96%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes zd-tier-one-cycle {
  0%, 13% { opacity: 0; transform: translateY(16px); }
  21%, 88% { opacity: 1; transform: translateY(0); }
  96%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes zd-tier-two-cycle {
  0%, 27% { opacity: 0; transform: translateY(16px); }
  35%, 88% { opacity: 1; transform: translateY(0); }
  96%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes zd-tier-three-cycle {
  0%, 41% { opacity: 0; transform: translateY(16px); }
  49%, 88% { opacity: 1; transform: translateY(0); }
  96%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes zd-roof-cycle {
  0%, 55% { opacity: 0; transform: translateY(-15px); }
  64%, 88% { opacity: 1; transform: translateY(0); }
  96%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes zd-envelope-cycle {
  0%, 66% { opacity: 0; transform: translateY(5px); }
  75%, 88% { opacity: .86; transform: translateY(0); }
  96%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes zd-hook-cycle {
  0%, 11%, 100% { transform: translateY(-5px); }
  20%, 30% { transform: translateY(40px); }
  38%, 43% { transform: translateY(0); }
  50%, 57% { transform: translateY(32px); }
  69%, 90% { transform: translateY(-5px); }
}
@keyframes zd-crane-cycle {
  0%, 100% { opacity: .4; }
  24%, 60% { opacity: .7; }
}
@keyframes zd-build-pin-cycle {
  0%, 100% { opacity: .38; }
  50% { opacity: 1; }
}
@keyframes zd-build-guide-cycle {
  to { stroke-dashoffset: -120; }
}
@keyframes zd-build-label-cycle {
  0%, 9%, 96%, 100% { opacity: .35; }
  20%, 88% { opacity: .75; }
}

@media (max-width: 900px) {
  .zd-build-sequence { right: -5%; width: 62vw; opacity: .45; }
}
@media (max-width: 650px) {
  .zd-build-sequence {
    top: 14%;
    right: -23%;
    width: 93vw;
    height: 44%;
    opacity: .3;
    filter: none;
  }
  .zd-build-sequence .zd-build-labels { display: none; }
}