/* The hero: a sample website assembling itself while its hero photo, a construction
   time-lapse, goes from staked lot to finished house. site.js sets --s1 … --s6 (0 → 1) on .build
   as each step's text scrolls past; everything here derives from those six numbers.
   Without JS they're all 1: the finished site. */
.build {
  --s1: 1; --s2: 1; --s3: 1; --s4: 1; --s5: 1; --s6: 1;
  --p1: clamp(0, var(--s1) / .5, 1);
  --bar: clamp(0, var(--s2) / .6, 1);
  --solid: clamp(0, var(--s2) / .8, 1);
  --wire: calc(var(--p1) * (1 - clamp(0, var(--s4) / .4, 1)));
  --skel: calc(clamp(0, var(--s3) / .5, 1) * (1 - clamp(0, (var(--s4) - .1) / .4, 1)));
  --real: clamp(0, (var(--s4) - .25) / .5, 1);
  --wired: clamp(0, var(--s5) / .6, 1);
  --quote: clamp(0, (var(--s5) - .25) / .6, 1);
  --live: clamp(0, (var(--s6) - .4) / .5, 1);
}

.build-art { flex-direction: column; gap: 18px; }

/* ---------- the browser ---------- */
.mock {
  container-type: inline-size;
  position: relative; width: 100%; max-width: 780px; aspect-ratio: 16 / 10.8;
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgb(237 227 211 / calc(.16 + .2 * var(--p1)));
  background: rgb(33 26 21 / calc(.35 + .65 * var(--solid)));
  box-shadow: 0 50px 90px -40px rgb(0 0 0 / calc(.7 * var(--solid)));
}
.mock-bar { flex: none; height: 6.4cqw; display: flex; align-items: center; gap: 2cqw; padding: 0 2.2cqw; border-bottom: 1px solid var(--line); }
.dots { display: flex; gap: .8cqw; }
.dots i { width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: var(--line-strong); }
.url {
  display: flex; align-items: center; gap: .9cqw; margin: 0 auto; width: 44%; height: 3.8cqw; padding: 0 1.6cqw;
  border-radius: 999px; background: var(--soil); border: 1px solid var(--line);
  font: 500 1.45cqw/1 var(--font-mono); color: rgb(237 227 211 / var(--bar));
}
.url svg { width: 1.2cqw; flex: none; color: rgb(240 168 60 / var(--bar)); }
.live {
  padding: .7cqw 1.4cqw; border-radius: 999px; font: 500 1.2cqw/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase;
  background: rgb(240 168 60 / var(--live)); color: rgb(22 18 15 / var(--live)); border: 1px solid rgb(237 227 211 / calc(.2 * (1 - var(--live))));
}

.mock-screen { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* wireframe outlines (step 1), grey placeholders (step 3), real content (step 4) */
.wf { position: relative; }
.wf::before { content: ""; position: absolute; inset: -.5cqw; border: 1px dashed rgb(237 227 211 / .5); border-radius: .8cqw; opacity: var(--wire); pointer-events: none; }
.tx { position: relative; color: rgb(var(--tx, 237 227 211) / var(--real)); }
.tx::after { content: ""; position: absolute; inset: 18% 0; border-radius: .4cqw; background: rgb(237 227 211 / .16); opacity: var(--skel); }

.m-nav { flex: none; height: 8.4cqw; display: flex; align-items: center; gap: 2.6cqw; margin: 0 3cqw; }
.m-logo { font: 600 2.1cqw/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
.m-links { display: flex; gap: 2.2cqw; margin-left: auto; font-size: 1.45cqw; }
.m-links .tx { --tx: 169 157 141; }
.m-call {
  padding: .9cqw 1.6cqw; border-radius: .6cqw; font: 600 1.4cqw/1 var(--font-body);
  opacity: calc(var(--skel) + var(--real));
  border: 1px solid rgb(237 227 211 / calc(.35 * (1 - var(--wired))));
  background: rgb(240 168 60 / var(--wired));
  color: rgb(calc(237 - 215 * var(--wired)) calc(227 - 209 * var(--wired)) calc(211 - 196 * var(--wired)) / var(--real));
}
.m-burger { display: none; }

.m-hero { flex: 1; min-height: 0; margin: 0 3cqw; border-radius: 1.2cqw; position: relative; }
.m-photo { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; background: var(--soil); opacity: calc(.4 + .6 * var(--p1)); }
.m-photo img, .m-photo canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.m-photo canvas { display: none; }
.js .mock.seq .m-photo canvas { display: block; }
.js .mock.seq .m-still { display: none; }
.m-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(18 14 11 / .88), rgb(18 14 11 / .5) 42%, rgb(18 14 11 / 0) 68%); opacity: var(--real); }

.m-copy { position: absolute; left: 4cqw; top: 50%; transform: translateY(-50%); width: 42%; display: flex; flex-direction: column; align-items: flex-start; gap: 1.3cqw; }
.m-eyebrow { --tx: 240 168 60; font: 500 1.15cqw/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.m-h { font: 600 4.6cqw/.95 var(--font-display); text-transform: uppercase; }
.m-h::after { background: linear-gradient(rgb(237 227 211 / .16) 0 44%, transparent 44% 56%, rgb(237 227 211 / .16) 56%); inset: 4% 12% 4% 0; }
.m-sub { --tx: 214 204 190; font-size: 1.5cqw; line-height: 1.45; }
.m-btns { display: flex; gap: 1cqw; margin-top: .6cqw; }
.m-btn {
  padding: 1cqw 1.7cqw; border-radius: .6cqw; font: 600 1.35cqw/1 var(--font-body); white-space: nowrap;
  background: rgb(240 168 60 / var(--real)); color: rgb(22 18 15 / var(--real));
  border: 1px solid rgb(237 227 211 / calc(.3 * var(--skel)));
}
.m-btn.ghost { background: transparent; color: rgb(237 227 211 / var(--real)); border-color: rgb(237 227 211 / calc(.3 * var(--skel) + .45 * var(--real))); }

.m-quote {
  position: absolute; right: 3cqw; top: 50%; width: 27%; display: grid; gap: .9cqw; padding: 2cqw;
  border-radius: 1.1cqw; background: rgb(22 18 15 / .92); border: 1px solid var(--line-strong);
  /* shows during step 5, then steps aside so the finished, lit house is the last thing you see */
  opacity: calc(var(--quote) * (1 - var(--live))); transform: translate(calc((1 - var(--quote) + var(--live)) * 5cqw), -50%);
}
.m-q-title { font: 600 1.9cqw/1 var(--font-display); text-transform: uppercase; margin-bottom: .4cqw; }
.m-field { height: 3.4cqw; display: flex; align-items: center; padding: 0 1.1cqw; border: 1px solid var(--line-strong); border-radius: .5cqw; font-size: 1.2cqw; color: var(--concrete); }
.m-field.tall { height: 6.2cqw; align-items: flex-start; padding-top: 1cqw; }
.m-quote .m-btn { text-align: center; }

.m-google {
  position: absolute; left: 4cqw; bottom: 2.6cqw; display: inline-flex; align-items: center; gap: .9cqw;
  padding: .8cqw 1.3cqw .8cqw .8cqw; border-radius: 999px; background: rgb(22 18 15 / .9); border: 1px solid var(--line-strong);
  font-size: 1.2cqw; color: var(--fir); opacity: clamp(0, (var(--s5) - .5) / .4, 1);
}
.m-google b { display: grid; place-items: center; width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: var(--fir); color: var(--soil); font: 700 1.2cqw/1 var(--font-body); }

.m-cards { flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.8cqw; padding: 2.6cqw 3cqw 3cqw; }
.m-card { display: flex; flex-direction: column; gap: .7cqw; padding: 1.6cqw 1.8cqw; border-radius: .9cqw; background: rgb(42 34 27 / var(--real)); }
.m-card-t { font: 600 1.7cqw/1 var(--font-display); text-transform: uppercase; letter-spacing: .04em; }
.m-card-p { --tx: 169 157 141; font-size: 1.25cqw; line-height: 1.4; }
.m-dock { display: none; }

.mock-tag {
  position: absolute; right: 1.6cqw; bottom: 1.4cqw; padding: .5cqw 1cqw; border-radius: .5cqw;
  font: 500 1.05cqw/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--concrete);
  background: rgb(22 18 15 / .85); border: 1px solid var(--line);
}

/* ---------- build meter under the browser ---------- */
.meter { width: 100%; max-width: 780px; display: flex; align-items: center; gap: 14px; color: var(--concrete); }
.meter ol { flex: 1; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; list-style: none; margin: 0; padding: 0; }
.meter li { height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--worklight); transform-origin: 0 50%; }
.meter li:nth-child(1) i { transform: scaleX(var(--s1)); }
.meter li:nth-child(2) i { transform: scaleX(var(--s2)); }
.meter li:nth-child(3) i { transform: scaleX(var(--s3)); }
.meter li:nth-child(4) i { transform: scaleX(var(--s4)); }
.meter li:nth-child(5) i { transform: scaleX(var(--s5)); }
.meter li:nth-child(6) i { transform: scaleX(var(--s6)); }
.meter-live { color: rgb(240 168 60 / calc(.35 + .65 * var(--live))); }

/* ---------- phones: the sample site as a phone ---------- */
@media (max-width: 959px) {
  .build-art { gap: 10px; }
  .mock { width: auto; height: calc(100% - 22px); max-width: 100%; aspect-ratio: 390 / 760; border-radius: 26px; border-width: 5px; border-color: rgb(237 227 211 / calc(.2 + .25 * var(--p1))); }
  .mock-bar { height: 12cqw; padding: 0 4cqw; }
  .dots { display: none; }
  .url { width: auto; flex: 1; height: 7.6cqw; font-size: 3.2cqw; gap: 2cqw; padding: 0 3.4cqw; }
  .url svg { width: 2.6cqw; }
  .live { font-size: 2.6cqw; padding: 1.6cqw 2.6cqw; }
  .m-nav { height: 14cqw; margin: 0 5cqw; }
  .m-logo { font-size: 4.6cqw; }
  .m-links, .m-call { display: none; }
  .m-burger { display: grid; place-items: center; margin-left: auto; width: 8cqw; height: 8cqw; border: 1px solid rgb(237 227 211 / calc(.3 * (var(--skel) + var(--real)))); border-radius: 1.6cqw; }
  .m-burger i, .m-burger i::before, .m-burger i::after { display: block; width: 4cqw; height: 2px; background: rgb(237 227 211 / var(--real)); position: relative; }
  .m-burger i::before, .m-burger i::after { content: ""; position: absolute; left: 0; }
  .m-burger i::before { top: -1.3cqw; }
  .m-burger i::after { top: 1.3cqw; }
  .m-hero { flex: none; margin: 0; border-radius: 0; display: flex; flex-direction: column; }
  .m-photo { position: relative; inset: auto; aspect-ratio: 4 / 3; border-radius: 0; }
  .m-photo::after { display: none; }
  .m-copy { position: static; transform: none; width: auto; padding: 6cqw 5cqw 0; gap: 3cqw; }
  .m-eyebrow { font-size: 2.8cqw; }
  .m-h { font-size: 9.6cqw; }
  .m-sub { font-size: 3.6cqw; }
  .m-btns { gap: 2.4cqw; margin-top: 1cqw; }
  .m-btn { font-size: 3.4cqw; padding: 2.8cqw 4cqw; border-radius: 1.6cqw; }
  .m-google { left: 4cqw; bottom: auto; top: calc(75cqw - 11cqw); font-size: 2.8cqw; gap: 2cqw; padding: 1.6cqw 3cqw 1.6cqw 1.6cqw; }
  .m-google b { width: 5cqw; height: 5cqw; font-size: 2.8cqw; }
  .m-quote {
    position: absolute; left: 0; right: 0; top: auto; bottom: 13cqw; width: auto; gap: 2.4cqw; padding: 5cqw; background: var(--soil);
    border-radius: 5cqw 5cqw 0 0; transform: translateY(calc((1 - var(--quote) + var(--live)) * 30%));
  }
  .m-q-title { font-size: 5cqw; }
  .m-field { height: 8.6cqw; font-size: 3.2cqw; padding: 0 3cqw; border-radius: 1.4cqw; }
  .m-field.tall { height: 14cqw; padding-top: 2.4cqw; }
  .m-cards { display: none; }
  .m-dock {
    position: absolute; left: 0; right: 0; bottom: 0; height: 13cqw; display: grid; grid-template-columns: 1fr 1.6fr;
    font: 600 3.6cqw/1 var(--font-body); opacity: var(--wired);
  }
  .m-dock span { display: grid; place-items: center; }
  .m-dock span:first-child { background: #0f0c0a; color: var(--fir); }
  .m-dock span:last-child { background: var(--worklight); color: var(--soil); }
  .mock-tag { right: 3cqw; bottom: auto; top: 29cqw; font-size: 2.4cqw; padding: 1.2cqw 2cqw; }
  .meter { max-width: none; width: calc(100% - 2 * var(--gutter)); gap: 10px; }
}