Add animated 3D house printing sequence

index.html

@@ -180,6 +180,181 @@ a{color:inherit;text-decoration:none}
 .hero-float b{color:var(--ink);font-size:13px}
 .hf1{left:4%;bottom:20%}.hf2{right:5%;top:16%}
 
+
+/* ───── Motion 3D printed house ───── */
+.motion-house-wrap{
+  position:relative;
+  width:100%;
+  height:100%;
+  display:grid;
+  place-items:center;
+  perspective:1200px;
+}
+.motion-house-svg{
+  width:100%;
+  height:100%;
+  overflow:visible;
+  filter:drop-shadow(0 30px 28px rgba(0,0,0,.10));
+}
+.mh-base{
+  opacity:1;
+}
+.mh-layer{
+  fill:none;
+  stroke:#c81e1e;
+  stroke-width:6;
+  stroke-linecap:round;
+  stroke-linejoin:round;
+  stroke-dasharray:850;
+  stroke-dashoffset:850;
+  opacity:.2;
+  animation:mh-print 8s ease-in-out infinite;
+}
+.mh-l2{animation-delay:.18s}
+.mh-l3{animation-delay:.36s}
+.mh-l4{animation-delay:.54s}
+.mh-l5{animation-delay:.72s}
+.mh-l6{animation-delay:.90s}
+.mh-l7{animation-delay:1.08s}
+.mh-l8{animation-delay:1.26s}
+@keyframes mh-print{
+  0%,8%{stroke-dashoffset:850;opacity:.12}
+  40%,72%{stroke-dashoffset:0;opacity:1}
+  88%,100%{stroke-dashoffset:0;opacity:.28}
+}
+.mh-side-layer{
+  fill:none;
+  stroke:#9f1717;
+  stroke-width:5;
+  stroke-linecap:round;
+  stroke-dasharray:500;
+  stroke-dashoffset:500;
+  opacity:.14;
+  animation:mh-sideprint 8s ease-in-out infinite;
+}
+.mh-s2{animation-delay:.22s}
+.mh-s3{animation-delay:.44s}
+.mh-s4{animation-delay:.66s}
+.mh-s5{animation-delay:.88s}
+@keyframes mh-sideprint{
+  0%,12%{stroke-dashoffset:500;opacity:.08}
+  46%,72%{stroke-dashoffset:0;opacity:.9}
+  88%,100%{stroke-dashoffset:0;opacity:.24}
+}
+.mh-nozzle{
+  transform-box:fill-box;
+  transform-origin:center;
+  animation:mh-nozzle 8s cubic-bezier(.45,.05,.55,.95) infinite;
+}
+@keyframes mh-nozzle{
+  0%{transform:translate(-155px,54px)}
+  10%{transform:translate(145px,54px)}
+  20%{transform:translate(-155px,37px)}
+  30%{transform:translate(145px,37px)}
+  40%{transform:translate(-155px,20px)}
+  50%{transform:translate(145px,20px)}
+  60%{transform:translate(-155px,3px)}
+  70%{transform:translate(145px,3px)}
+  78%,100%{transform:translate(0,-80px)}
+}
+.mh-gantry{
+  transform-box:fill-box;
+  transform-origin:center;
+  animation:mh-gantry 8s ease-in-out infinite;
+}
+@keyframes mh-gantry{
+  0%,70%{opacity:1;transform:translateY(0)}
+  80%,100%{opacity:0;transform:translateY(-35px)}
+}
+.mh-roof{
+  opacity:0;
+  transform:translateY(-26px);
+  transform-box:fill-box;
+  transform-origin:center;
+  animation:mh-roof 8s ease-in-out infinite;
+}
+@keyframes mh-roof{
+  0%,60%{opacity:0;transform:translateY(-26px)}
+  72%,90%{opacity:1;transform:translateY(0)}
+  100%{opacity:.9;transform:translateY(0)}
+}
+.mh-openings{
+  opacity:0;
+  animation:mh-openings 8s ease-in-out infinite;
+}
+@keyframes mh-openings{
+  0%,68%{opacity:0}
+  78%,96%{opacity:1}
+  100%{opacity:.9}
+}
+.mh-mep{
+  opacity:0;
+  stroke-dasharray:220;
+  stroke-dashoffset:220;
+  animation:mh-mep 8s ease-in-out infinite;
+}
+@keyframes mh-mep{
+  0%,70%{opacity:0;stroke-dashoffset:220}
+  80%,96%{opacity:1;stroke-dashoffset:0}
+  100%{opacity:.85;stroke-dashoffset:0}
+}
+.mh-glow{
+  opacity:.0;
+  animation:mh-glow 8s ease-in-out infinite;
+}
+@keyframes mh-glow{
+  0%,73%{opacity:0}
+  86%,96%{opacity:.75}
+  100%{opacity:.25}
+}
+.mh-status{
+  position:absolute;
+  left:50%;
+  bottom:5%;
+  transform:translateX(-50%);
+  display:inline-flex;
+  align-items:center;
+  gap:8px;
+  padding:8px 12px;
+  border-radius:999px;
+  background:rgba(255,255,255,.88);
+  backdrop-filter:blur(16px);
+  -webkit-backdrop-filter:blur(16px);
+  border:1px solid rgba(0,0,0,.08);
+  font-size:10px;
+  color:#6e6e73;
+  white-space:nowrap;
+}
+.mh-status-dot{
+  width:7px;height:7px;border-radius:50%;
+  background:#c81e1e;
+  box-shadow:0 0 0 5px rgba(200,30,30,.08);
+  animation:mh-pulse 1.2s ease-in-out infinite;
+}
+@keyframes mh-pulse{
+  0%,100%{transform:scale(.85);opacity:.65}
+  50%{transform:scale(1.15);opacity:1}
+}
+.mh-status-text::after{
+  content:"Printing wall layers";
+  animation:mh-statuscopy 8s steps(1,end) infinite;
+}
+@keyframes mh-statuscopy{
+  0%,59%{content:"Printing wall layers"}
+  60%,74%{content:"Setting roof structure"}
+  75%,87%{content:"Adding MEP + openings"}
+  88%,100%{content:"House complete"}
+}
+@media(prefers-reduced-motion:reduce){
+  .mh-layer,.mh-side-layer,.mh-nozzle,.mh-gantry,.mh-roof,.mh-openings,.mh-mep,.mh-glow,.mh-status-dot,.mh-status-text::after{
+    animation:none!important;
+  }
+  .mh-layer,.mh-side-layer{stroke-dashoffset:0!important;opacity:1!important}
+  .mh-roof,.mh-openings,.mh-mep{opacity:1!important;transform:none!important;stroke-dashoffset:0!important}
+  .mh-gantry{opacity:.35!important}
+  .mh-status-text::after{content:"Finished house"!important}
+}
+
 /* ───── Shared ───── */
 section{scroll-margin-top:110px}
 .section{
@@ -638,36 +813,115 @@ section{scroll-margin-top:110px}
 <section class="hero shell" id="overview">
   <div class="hero-eyebrow">3D construction feasibility</div>
   <h1>Will it actually cost less?</h1>
-  <p class="hero-copy">3D printing can make walls faster. PrintHome compares whether the <b>whole project</b> becomes faster, cheaper, and more profitable.</p>
+  <p class="hero-copy">3D printing can make walls faster. Watch the house build itself, then see whether the <b>whole project</b> becomes faster, cheaper, and more profitable.</p>
   <div class="hero-links">
     <button class="text-link" data-scroll="#configure">Analyze a project</button>
     <button class="text-link" data-scroll="#story">See how it works</button>
   </div>
 
   <div class="house-stage">
-    <svg class="hero-house" viewBox="0 0 1000 520" role="img" aria-label="Stylized 3D printed house">
-      <defs>
-        <linearGradient id="wallg" x1="0" x2="1"><stop stop-color="#e8edf4"/><stop offset=".52" stop-color="#ffffff"/><stop offset="1" stop-color="#dce4ee"/></linearGradient>
-        <linearGradient id="roofg" x1="0" x2="1"><stop stop-color="#bbbcc0"/><stop offset="1" stop-color="#e6e6e9"/></linearGradient>
-        <filter id="sh"><feDropShadow dx="0" dy="18" stdDeviation="16" flood-opacity=".14"/></filter>
-      </defs>
-      <ellipse cx="500" cy="442" rx="330" ry="30" fill="#000" opacity=".055"/>
-      <g filter="url(#sh)">
-        <path d="M245 252 502 94 760 252 699 284 502 167 304 285Z" fill="url(#roofg)" stroke="#b6b7bc" stroke-width="2"/>
-        <path d="M300 282 501 165 704 282v145H300z" fill="url(#wallg)" stroke="#c4cbd4" stroke-width="2"/>
-        <path d="M300 318h404M300 339h404M300 360h404M300 381h404M300 402h404" stroke="#aebed0" stroke-width="5" opacity=".55"/>
-        <rect x="464" y="315" width="76" height="112" rx="4" fill="#cfe4f5" stroke="#9eb5c8" stroke-width="2"/>
-        <rect x="354" y="312" width="67" height="66" rx="5" fill="#d9ebf9" stroke="#b0c7d9" stroke-width="2"/>
-        <rect x="579" y="312" width="67" height="66" rx="5" fill="#d9ebf9" stroke="#b0c7d9" stroke-width="2"/>
-      </g>
-      <g opacity=".9">
-        <rect x="472" y="208" width="59" height="46" rx="9" fill="#2f3338"/>
-        <path d="M487 254h30l-7 25h-16z" fill="#c81e1e"/>
-        <path d="M501 279v20" stroke="#c81e1e" stroke-width="5"/>
-      </g>
-    </svg>
-    <div class="hero-float hf1">Wall print <b>7 days</b></div>
-    <div class="hero-float hf2">Whole project <b>192 days</b></div>
+    <div class="motion-house-wrap" aria-label="Animated 3D printer building a house">
+      <svg class="motion-house-svg" viewBox="0 0 1000 560" role="img" aria-label="3D printed house being built layer by layer">
+        <defs>
+          <linearGradient id="mhRoof" x1="0" x2="1">
+            <stop offset="0" stop-color="#b8bbc1"/>
+            <stop offset="1" stop-color="#ececef"/>
+          </linearGradient>
+          <linearGradient id="mhGlass" x1="0" x2="1">
+            <stop offset="0" stop-color="#b9dcf4"/>
+            <stop offset="1" stop-color="#eaf7ff"/>
+          </linearGradient>
+          <linearGradient id="mhWall" x1="0" x2="1">
+            <stop offset="0" stop-color="#f1f1f3"/>
+            <stop offset=".52" stop-color="#ffffff"/>
+            <stop offset="1" stop-color="#e6e7ea"/>
+          </linearGradient>
+          <filter id="mhShadow">
+            <feDropShadow dx="0" dy="18" stdDeviation="18" flood-opacity=".13"/>
+          </filter>
+          <filter id="mhSoftGlow">
+            <feGaussianBlur stdDeviation="14"/>
+          </filter>
+        </defs>
+
+        <ellipse cx="500" cy="492" rx="320" ry="32" fill="#000" opacity=".055"/>
+
+        <!-- slab -->
+        <g class="mh-base" filter="url(#mhShadow)">
+          <path d="M205 420 480 505 790 414 514 339Z" fill="#d4d6da" stroke="#b8bbc1" stroke-width="2"/>
+          <path d="M220 410 481 489 770 406" fill="none" stroke="#bfc2c7" stroke-width="4"/>
+        </g>
+
+        <!-- faint wall masses for 3D perspective -->
+        <g opacity=".22">
+          <path d="M267 239 497 135 704 226 704 405 491 472 267 404Z" fill="url(#mhWall)" stroke="#bfc5cc" stroke-width="2"/>
+          <path d="M704 226 786 270 786 378 704 405Z" fill="#d9dde3" stroke="#b8bec5" stroke-width="2"/>
+        </g>
+
+        <!-- front red printed layers -->
+        <path class="mh-layer mh-l1" d="M273 398 491 465 704 398"/>
+        <path class="mh-layer mh-l2" d="M273 377 491 444 704 377"/>
+        <path class="mh-layer mh-l3" d="M273 356 491 423 704 356"/>
+        <path class="mh-layer mh-l4" d="M273 335 491 402 704 335"/>
+        <path class="mh-layer mh-l5" d="M273 314 491 381 704 314"/>
+        <path class="mh-layer mh-l6" d="M273 293 491 360 704 293"/>
+        <path class="mh-layer mh-l7" d="M273 272 491 339 704 272"/>
+        <path class="mh-layer mh-l8" d="M273 251 491 318 704 251"/>
+
+        <!-- side printed layers -->
+        <path class="mh-side-layer mh-s1" d="M704 398 783 373"/>
+        <path class="mh-side-layer mh-s2" d="M704 369 783 344"/>
+        <path class="mh-side-layer mh-s3" d="M704 340 783 315"/>
+        <path class="mh-side-layer mh-s4" d="M704 311 783 286"/>
+        <path class="mh-side-layer mh-s5" d="M704 282 783 257"/>
+
+        <!-- printer gantry -->
+        <g class="mh-gantry">
+          <path d="M205 168V460M803 168V435M205 180H803" stroke="#62656b" stroke-width="10" stroke-linecap="round"/>
+          <path d="M244 222H761" stroke="#8d9096" stroke-width="8" stroke-linecap="round"/>
+          <g class="mh-nozzle">
+            <rect x="474" y="196" width="54" height="48" rx="8" fill="#2f3237"/>
+            <path d="M488 244h26l-7 25h-12z" fill="#c81e1e"/>
+            <path d="M501 269v23" stroke="#c81e1e" stroke-width="6" stroke-linecap="round"/>
+            <circle cx="501" cy="295" r="4" fill="#c81e1e"/>
+          </g>
+        </g>
+
+        <!-- roof -->
+        <g class="mh-roof" filter="url(#mhShadow)">
+          <path d="M243 244 493 116 735 228 704 255 492 158 273 270Z" fill="url(#mhRoof)" stroke="#aaaeb4" stroke-width="2"/>
+          <path d="M735 228 805 263 780 284 704 255Z" fill="#aeb2b8" stroke="#999ea4" stroke-width="2"/>
+        </g>
+
+        <!-- door and windows -->
+        <g class="mh-openings">
+          <rect x="454" y="344" width="78" height="118" rx="5" fill="url(#mhGlass)" stroke="#8aaac0" stroke-width="2"/>
+          <rect x="330" y="320" width="72" height="70" rx="5" fill="url(#mhGlass)" stroke="#9ab4c6" stroke-width="2"/>
+          <rect x="582" y="320" width="72" height="70" rx="5" fill="url(#mhGlass)" stroke="#9ab4c6" stroke-width="2"/>
+          <rect x="726" y="300" width="38" height="58" rx="4" fill="#c9e5f7" stroke="#9eb8ca" stroke-width="2"/>
+        </g>
+
+        <!-- plumbing / electrical traces -->
+        <g class="mh-mep" fill="none" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M313 401v-74h55" stroke="#0071e3" stroke-width="5"/>
+          <path d="M671 399v-92h-66" stroke="#ff7a00" stroke-width="5"/>
+          <path d="M494 429v-109" stroke="#16803c" stroke-width="5"/>
+          <circle cx="368" cy="327" r="6" fill="#0071e3" stroke="none"/>
+          <circle cx="605" cy="307" r="6" fill="#ff7a00" stroke="none"/>
+        </g>
+
+        <!-- completion glow -->
+        <ellipse class="mh-glow" cx="505" cy="330" rx="270" ry="170" fill="#70b9ff" opacity=".14" filter="url(#mhSoftGlow)"/>
+      </svg>
+
+      <div class="mh-status">
+        <span class="mh-status-dot"></span>
+        <span class="mh-status-text"></span>
+      </div>
+
+      <div class="hero-float hf1">Wall print <b>7 days</b></div>
+      <div class="hero-float hf2">Whole project <b>192 days</b></div>
+    </div>
   </div>
 </section>