/* ============================================================
   Contact — page-only styles
   A blueprint house that builds itself in the hero, beside the
   demo form: site layout, foundation, framing, roof, close-in,
   complete. Decorative only; js/contact.js steps the stages by
   adding .is-s1 … .is-s6 to .ct-hero. A tower crane on the
   other side of the form works the same schedule. Loaded only by login.html.
   ============================================================ */

.ct-site {
  display: none;
}

/* Only where there is open space beside the form. */
@media (min-width: 1140px) {
  .ct-site {
    display: block;
    position: absolute;
    z-index: -1;
    top: 25rem;
    left: calc(50% + 18rem + 3rem);
    width: min(25rem, calc(50% - 18rem - 5rem));
    pointer-events: none;
  }

  /* The crane mirrors the house on the other side of the form. */
  .ct-site--crane {
    left: auto;
    right: calc(50% + 18rem + 3rem);
  }
}

.ct-house {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Line work ---------- */

.ct-house line,
.ct-house path,
.ct-house rect,
.ct-house polygon,
.ct-house circle {
  stroke: rgba(148, 163, 184, 0.55);
  stroke-width: 1.25;
}

.ct-house .ct-orange,
.ct-house .ct-stake {
  stroke: rgba(254, 93, 1, 0.85);
  stroke-width: 1.6;
}

.ct-house .ct-ground {
  stroke: rgba(148, 163, 184, 0.7);
  stroke-width: 1.5;
}

.ct-house .ct-string,
.ct-house .ct-dim {
  stroke: rgba(254, 93, 1, 0.5);
  stroke-dasharray: 0.012 0.012;
}

/* Every .ct-draw line is drawn from nothing when its stage starts. */
.ct-draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.6s cubic-bezier(0.65, 0, 0.35, 1);
  transition-delay: calc(var(--i, 0) * 28ms);
}

/* Dashed lines can't use the dash trick, so they fade in. */
.ct-house .ct-string,
.ct-house .ct-dim {
  stroke-dashoffset: 0;
  opacity: 0;
  transition: opacity 0.5s ease 0.2s;
}

.ct-g {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.is-s1 .ct-g1,
.is-s2 .ct-g2,
.is-s3 .ct-g3,
.is-s4 .ct-g4,
.is-s5 .ct-g5,
.is-s6 .ct-g6 {
  opacity: 1;
}

.is-s1 .ct-g1 .ct-draw,
.is-s2 .ct-g2 .ct-draw,
.is-s3 .ct-g3 .ct-draw,
.is-s4 .ct-g4 .ct-draw,
.is-s5 .ct-g5 .ct-draw {
  stroke-dashoffset: 0;
}

.is-s1 .ct-g1 .ct-string,
.is-s1 .ct-g1 .ct-dim {
  opacity: 1;
}

/* Survey marks come down once the slab is poured. */
.is-s3 .ct-g1 .ct-string,
.is-s3 .ct-g1 .ct-stake,
.is-s3 .ct-g1 .ct-dim {
  opacity: 0;
  transition: opacity 0.6s ease;
}

/* ---------- 02 Foundation ---------- */

.ct-house .ct-slab {
  stroke: none;
  fill: rgba(148, 163, 184, 0.16);
  transform: scaleY(0);
  transform-box: fill-box;
  transform-origin: bottom;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.25s;
}

.is-s2 .ct-slab {
  transform: scaleY(1);
}

/* ---------- 03 Framing: studs rise one by one ---------- */

.ct-stud {
  transform: scaleY(0);
  transform-box: fill-box;
  transform-origin: bottom;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 40ms);
}

.is-s3 .ct-stud {
  transform: scaleY(1);
}

/* ---------- 05 Close-in ---------- */

.ct-house .ct-wall {
  stroke: rgba(148, 163, 184, 0.55);
  fill: #131d33;
  opacity: 0;
  transition: opacity 0.45s ease;
}

.ct-house .ct-roof {
  stroke: none;
  fill: #1a2438;
  opacity: 0;
  transition: opacity 0.45s ease 0.25s;
}

.is-s5 .ct-wall,
.is-s5 .ct-roof {
  opacity: 1;
}

.ct-siding .ct-draw {
  transition-delay: calc(0.15s + var(--i, 0) * 30ms);
}

.ct-house .ct-siding line {
  stroke: rgba(148, 163, 184, 0.22);
  stroke-width: 1;
}

.ct-shingles .ct-draw {
  transition-delay: calc(0.35s + var(--i, 0) * 30ms);
}

.ct-house .ct-shingles line {
  stroke: rgba(148, 163, 184, 0.28);
  stroke-width: 1;
}

.ct-house .ct-chimney {
  stroke: rgba(148, 163, 184, 0.7);
  transition-delay: 0.5s;
}

.ct-house .ct-win {
  stroke: rgba(148, 163, 184, 0.7);
  fill: #0b1120;
  opacity: 0;
  transition: opacity 0.35s ease 0.55s;
}

.is-s5 .ct-win {
  opacity: 1;
}

.ct-openings .ct-draw {
  transition-delay: 0.7s;
}

/* ---------- 06 Complete: lights on ---------- */

.ct-house .ct-glow rect,
.ct-house .ct-glow circle {
  stroke: none;
  fill: rgba(254, 93, 1, 0.5);
}

.ct-house .ct-lit {
  stroke: none;
  fill: rgba(254, 138, 57, 0.4);
}

.ct-house .ct-frame {
  stroke: rgba(15, 23, 42, 0.85);
  stroke-width: 2;
}

.ct-house .ct-knob,
.ct-house .ct-lamp {
  stroke: none;
  fill: #FE8A39;
}

.ct-g6 {
  transition: opacity 0.8s ease;
}

/* ---------- Tower crane ---------- */

/* The mast climbs at an even pace across stages 1 and 2: the rails
   grow linearly while each brace section follows them up. */
.ct-crane .ct-g1 .ct-draw:not(.ct-ground) {
  transition-duration: 0.3s;
  transition-delay: calc(0.1s + var(--i, 0) * 150ms);
}

.ct-crane .ct-rail {
  stroke: rgba(254, 93, 1, 0.85);
  stroke-width: 1.6;
  transition: transform 1.7s linear 0.05s;
}

.ct-crane .ct-pad {
  transition-delay: 0s;
}

.is-s1 .ct-crane .ct-rail,
.is-s1 .ct-crane .ct-pad {
  transform: scaleY(1);
}

.ct-crane .ct-weight {
  stroke: rgba(148, 163, 184, 0.55);
  fill: rgba(148, 163, 184, 0.16);
}

.ct-crane .ct-trolley-box {
  stroke: rgba(254, 93, 1, 0.85);
  fill: #0f172a;
}

.ct-crane .ct-cable,
.ct-crane .ct-hook-line,
.ct-crane .ct-sling {
  stroke: rgba(203, 213, 225, 0.6);
  stroke-width: 1;
}

.ct-crane .ct-beam {
  stroke: rgba(254, 93, 1, 0.85);
  fill: rgba(254, 93, 1, 0.18);
}

/* Resting pose: trolley in, hook up, nothing on the hook. */
.ct-trolley {
  transform: translateX(0);
}

.ct-cable {
  transform: scaleY(0.135);
  transform-box: fill-box;
  transform-origin: top;
}

.ct-hook {
  transform: translateY(-192px);
}

.ct-load {
  opacity: 0;
}

/* One lift during roof and close-in: lower, pick, hoist, run out,
   set the load down, then park with the trolley out. */
.is-s4 .ct-trolley { animation: ct-run 1.8s ease-in-out forwards; }
.is-s4 .ct-cable { animation: ct-cable 1.8s ease-in-out forwards; }
.is-s4 .ct-hook { animation: ct-hook 1.8s ease-in-out forwards; }
.is-s4 .ct-load { animation: ct-load 1.8s linear forwards; }

@keyframes ct-run {
  0%, 46% { transform: translateX(0); }
  76%, 100% { transform: translateX(180px); }
}

@keyframes ct-cable {
  0% { transform: scaleY(0.135); }
  20%, 26% { transform: scaleY(1); }
  46%, 76% { transform: scaleY(0.135); }
  88%, 91% { transform: scaleY(0.55); }
  100% { transform: scaleY(0.135); }
}

@keyframes ct-hook {
  0% { transform: translateY(-192px); }
  20%, 26% { transform: translateY(0); }
  46%, 76% { transform: translateY(-192px); }
  88%, 91% { transform: translateY(-100px); }
  100% { transform: translateY(-192px); }
}

@keyframes ct-load {
  0%, 21% { opacity: 0; }
  23%, 89% { opacity: 1; }
  92%, 100% { opacity: 0; }
}

.ct-crane .ct-beacon {
  stroke: none;
  fill: #FE5D01;
}

.is-s6 .ct-beacon {
  animation: ct-blink 1.4s ease-in-out infinite;
}

@keyframes ct-blink {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 4px rgba(254, 93, 1, 0.9)); }
  50% { opacity: 0.25; filter: none; }
}

/* ---------- Schedule tracker ---------- */

.ct-schedule {
  margin-top: 1.75rem;
  text-align: center;
}

.ct-bars {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.3rem;
  max-width: 13rem;
  margin: 0 auto;
}

.ct-bars i {
  height: 3px;
  border-radius: 3px;
  background-color: rgba(148, 163, 184, 0.2);
  transition: background-color 0.4s ease;
}

.ct-bars i.is-on {
  background-color: #FE5D01;
}

.ct-label {
  margin-top: 0.7rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #64748b;
}

.ct-num,
.ct-name {
  color: #cbd5e1;
}

.is-s6 .ct-name {
  color: #FE8A39;
}

/* Reduced motion: the finished house, no build. */
@media (prefers-reduced-motion: reduce) {
  .ct-site *,
  .ct-site *::before {
    transition: none !important;
    animation: none !important;
  }
}