/* ==========================================================================
   "Ground to handover" — a scroll-driven build sequence, services page hero
   ========================================================================== */

.build {
  position: relative;
  height: 460vh;                 /* the scroll runway the sticky frame rides */
  padding: 0;

  /* Its own palette rather than the footer's: warmer, more luminous, and
     independent of the light/dark theme so the drawing always reads. */
  --bd-ink:    #F5EBDD;          /* warm cream — structure and type */
  --bd-gold:   #E0A96D;          /* luminous gold — slabs, the load-bearing line */
  --bd-amber:  #FFC98A;          /* lit interiors at handover */
  --bd-sage:   #A6C972;          /* planting */
  --bd-hair:   rgba(245,235,221,.42);

  /* A pool of warm light at the base, so the building sits in an evening
     rather than floating on flat black. */
  background:
    radial-gradient(120% 78% at 50% 92%, #4A2F24 0%, #2A1A15 38%, #170F0D 72%, #120C0B 100%);
  color: var(--bd-ink);
}
.build__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: grid;
  /* head · titles · stage · ladder — four children, so four tracks. With three
     the 1fr landed on the titles and the stage fell to an auto row, which
     collapsed to zero once its contents became absolutely positioned. */
  grid-template-rows: auto auto 1fr auto;
  gap: clamp(.6rem, 2vh, 1.4rem);
  padding: clamp(5.5rem, 11vh, 8rem) clamp(1.5rem, 4vw, 4rem) clamp(1.6rem, 4vh, 3rem);
}

.build__head { display: flex; align-items: baseline; gap: 1.2rem; flex-wrap: wrap; }
.build__kicker {
  font-size: .7rem; font-weight: 500; letter-spacing: .32em;
  text-transform: uppercase; color: var(--bd-gold);
}
.build__count {
  margin-left: auto;
  font-family: ui-monospace, Menlo, monospace;
  font-size: .74rem; letter-spacing: .14em;
  color: rgba(245,235,221,.5);
  font-variant-numeric: tabular-nums;
}
.build__titles { display: grid; }
.build__title {
  grid-area: 1 / 1;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.9rem, 5.4vw, 4.2rem);
  line-height: 1;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--bd-ink);
  opacity: 0;
  transform: translateY(.4em);
  transition: opacity .45s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}
.build__title.is-on { opacity: 1; transform: translateY(0); }
.build__title span { color: var(--bd-gold); }

/* ------------------------------ the drawing ------------------------------- */
.build__stage { position: relative; display: grid; place-items: center; min-height: 0; }
.build__svg { width: min(100%, 1000px); height: 100%; overflow: visible; }

.build__svg [data-layer] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .55s ease, transform .85s cubic-bezier(.2,.7,.2,1);
}
.build__svg [data-layer].is-built { opacity: 1; transform: translateY(0); }

/* These live INSIDE a [data-layer] group, so they must key off the group's
   state — the group is the only thing the script ever marks. Selecting on
   `[data-draw].is-built` (as this first did) matched nothing, which left every
   column at scaleY(.02) and every line at full dash offset: an empty stage. */
.build__svg [data-draw] {
  stroke-dasharray: var(--len, 1200);
  stroke-dashoffset: var(--len, 1200);
  transition: stroke-dashoffset 1.2s cubic-bezier(.3,.7,.2,1);
}
.build__svg [data-layer].is-built [data-draw] { stroke-dashoffset: 0; }

.build__svg [data-rise] {
  transform: scaleY(.02);
  transform-box: fill-box;
  transform-origin: center bottom;
  transition: transform .95s cubic-bezier(.25,.8,.25,1);
}
.build__svg [data-layer].is-built [data-rise] { transform: scaleY(1); }
/* columns and fins land one after another, not as a slab */
.build__svg [data-layer].is-built [data-rise]:nth-of-type(1) { transition-delay: .04s; }
.build__svg [data-layer].is-built [data-rise]:nth-of-type(2) { transition-delay: .12s; }
.build__svg [data-layer].is-built [data-rise]:nth-of-type(3) { transition-delay: .20s; }
.build__svg [data-layer].is-built [data-rise]:nth-of-type(4) { transition-delay: .28s; }
.build__svg [data-layer].is-built [data-rise]:nth-of-type(5) { transition-delay: .36s; }
.build__svg [data-layer].is-built [data-rise]:nth-of-type(6) { transition-delay: .44s; }
.build__svg [data-layer].is-built [data-rise]:nth-of-type(7) { transition-delay: .52s; }
.build__svg [data-layer].is-built [data-rise]:nth-of-type(8) { transition-delay: .60s; }

.bl-line   { fill: none; stroke: var(--bd-hair); stroke-width: 1.5; stroke-linecap: round; }
.bl-struct { fill: color-mix(in srgb, var(--bd-ink) 88%, transparent); }
.bl-slab   { fill: var(--bd-gold); }
.bl-glass  { fill: color-mix(in srgb, var(--bd-gold) 22%, transparent); }
.bl-lit    { fill: var(--bd-amber); }
.bl-mull   { fill: none; stroke: rgba(245,235,221,.45); stroke-width: 1; }
.bl-green  { fill: var(--bd-sage); }
.bl-roof   { fill: color-mix(in srgb, var(--bd-ink) 94%, transparent); }

/* The project's own palette: lime-plaster masses, fins a shade brighter so the
   screen reads against the wall behind it, openings dark, door in walnut. */
.bl-wall   { fill: color-mix(in srgb, var(--bd-ink) 92%, transparent); }
.bl-fin    { fill: var(--bd-ink); }
.bl-void   { fill: #150E0C; }
.bl-timber { fill: #6B4023; }

/* The lights coming on at handover is the payoff — give it a real glow. */
.build__svg .bl-lit { filter: drop-shadow(0 0 22px rgba(255,201,138,.55)); }

/* The drawing becomes the building: at handover a real render can dissolve over
   the elevation. Hidden until build.js confirms the file actually loaded, so a
   missing asset leaves the drawing as the final frame rather than a broken box. */
.build__final {
  position: absolute;
  inset: 0;
  margin: auto;
  max-width: min(100%, 1000px);
  max-height: 100%;
  object-fit: contain;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.1s cubic-bezier(.3,.7,.2,1);
  pointer-events: none;
}
.build__final.is-ready { visibility: visible; }
.build.is-final .build__final.is-ready { opacity: 1; }
.build.is-final .build__final.is-ready ~ .build__svg,
.build.is-final .build__svg:has(~ .build__final.is-ready) { opacity: .12; transition: opacity 1.1s ease; }

/* ------------------------------- the ladder ------------------------------- */
.build__steps {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: clamp(.4rem, 1vw, 1rem); margin: 0; padding: 0; list-style: none;
}
.build__step { position: relative; padding-top: .9rem; }
.build__step::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: rgba(245,235,221,.16);
}
.build__step::after {
  content: ""; position: absolute; inset: 0 auto auto 0; height: 2px; width: 0;
  background: var(--bd-gold);
  box-shadow: 0 0 12px rgba(224,169,109,.5);
  transition: width .7s cubic-bezier(.2,.7,.2,1);
}
.build__step.is-done::after { width: 100%; }
.build__step b {
  display: block; font-family: ui-monospace, Menlo, monospace;
  font-size: .66rem; letter-spacing: .14em; font-weight: 400;
  color: rgba(245,235,221,.42);
}
.build__step span {
  display: block; margin-top: .2rem;
  font-size: clamp(.7rem, 1.1vw, .86rem);
  color: rgba(245,235,221,.55);
  transition: color .4s ease;
}
.build__step.is-done span { color: var(--bd-ink); }

@media (max-width: 700px) {
  .build { height: 400vh; }
  .build__steps { grid-auto-flow: row; grid-auto-columns: auto; gap: .3rem; }
  .build__step { padding-top: .45rem; }
  .build__step span { font-size: .78rem; }
  .build__count { width: 100%; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .build { height: auto; }
  .build__sticky { position: relative; height: auto; min-height: 90vh; }
  .build__title { opacity: 1; transform: none; }
  .build__step::after { width: 100%; }
  /* build.js jumps straight to the finished building; hold it still. */
  .build__svg [data-layer],
  .build__svg [data-layer].is-built { opacity: 1; transform: none; transition: none; }
  .build__svg [data-draw] { stroke-dashoffset: 0; transition: none; }
  .build__svg [data-rise] { transform: none; transition: none; }
}