/* SynCad landing page motion: pure CSS + SVG (the page's CSP allows no scripts).
   A 10 s loop: walls draft in, the door swings, hatch fills, dimensions and labels appear. */
:root { --loop: 10s; }
.w { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: draft var(--loop) cubic-bezier(0.6, 0, 0.3, 1) infinite; }
.w2 { animation-delay: 0.5s; } .w3 { animation-delay: 0.8s; } .w4 { animation-delay: 1.1s; }
@keyframes draft { 0% { stroke-dashoffset: 1400; } 22%, 92% { stroke-dashoffset: 0; } 98%, 100% { stroke-dashoffset: 1400; } }
.door, .hatchfill, .dims, .labels { opacity: 0; animation: appear var(--loop) ease-out infinite; }
.door { animation-delay: 2.2s; } .hatchfill { animation-delay: 3s; } .dims { animation-delay: 3.8s; } .labels { animation-delay: 4.6s; }
@keyframes appear { 0% { opacity: 0; } 6%, 70% { opacity: 1; } 76%, 100% { opacity: 0; } }
.cursor { animation: cursor var(--loop) ease-in-out infinite; }
@keyframes cursor { 0% { transform: translate(60px, 60px); } 12% { transform: translate(460px, 60px); } 22% { transform: translate(460px, 360px); } 34% { transform: translate(180px, 220px); }
  48% { transform: translate(120px, 300px); } 62% { transform: translate(460px, 30px); } 80% { transform: translate(360px, 160px); } 100% { transform: translate(60px, 60px); } }
.typed { animation: typing var(--loop) steps(9, end) infinite; }
@keyframes typing { 0%, 36% { width: 0; } 46%, 90% { width: 9ch; } 96%, 100% { width: 0; } }
@media (prefers-reduced-motion: reduce) {
  .w, .door, .hatchfill, .dims, .labels, .cursor, .typed { animation: none; }
  .w { stroke-dashoffset: 0; } .door, .hatchfill, .dims, .labels { opacity: 1; } .typed { width: 9ch; }
  .tool, .btn { transition: none; }
  html { scroll-behavior: auto; }
}