:root {
  --bg: #faf6f0;
  --text: #2b1d14;
  --muted: #6e5a4c;
  --accent: #b5562b;
  --surface: #ffffff;
  --border: #eadfd3;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17110d;
    --text: #f3e9df;
    --muted: #bba795;
    --accent: #e07a45;
    --surface: #221913;
    --border: #3a2c22;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: Inter, system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  text-align: center;
  line-height: 1.6;
}

.logo {
  font-family: Fraunces, Georgia, serif;
  font-weight: 700;
  font-size: 1.5rem;
  margin-bottom: 32px;
}
.logo span { color: var(--accent); }

h1 {
  font-family: Poppins, system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(2rem, 6vw, 3.5rem);
  line-height: 1.15;
  margin-bottom: 20px;
}

.contact { color: var(--muted); font-size: 1.1rem; }
.contact a { color: var(--accent); font-weight: 500; }

/* Animated "website being built" graphic */
.build {
  width: min(320px, 100%);
  height: auto;
  margin: 0 auto 32px;
  display: block;
  overflow: visible;
}
.build .window { fill: var(--surface); stroke: var(--border); stroke-width: 2; }
.build .window-bar { fill: var(--border); }
.build .dot { fill: var(--muted); opacity: .45; }
.build .accent { fill: var(--accent); }
.build .soft { fill: var(--accent); opacity: .25; }
.build .line { fill: var(--muted); opacity: .35; }
.build .cursor { fill: var(--text); stroke: var(--surface); stroke-width: 1.5; }
.build .gear path { fill: var(--muted); }
.build .gear .hole { fill: var(--bg); }

/* Each block drops in on a 7s loop, then the page clears and rebuilds */
.build .blk { transform-box: fill-box; transform-origin: center; opacity: 0; animation: 7s ease-out infinite; }
.build .b1 { animation-name: b1; }
.build .b2 { animation-name: b2; }
.build .b3 { animation-name: b3; }
.build .b4 { animation-name: b4; }
.build .b5 { animation-name: b5; }
.build .b6 { animation-name: b6; }
@keyframes b1 { 0%,4% { opacity:0; transform:translateY(-14px) scale(.9);} 10%,86% { opacity:1; transform:none;} 94%,100% { opacity:0; transform:none;} }
@keyframes b2 { 0%,13% { opacity:0; transform:translateY(-14px) scale(.9);} 19%,86% { opacity:var(--o,1); transform:none;} 94%,100% { opacity:0; transform:none;} }
@keyframes b3 { 0%,22% { opacity:0; transform:translateY(-14px) scale(.9);} 28%,86% { opacity:var(--o,1); transform:none;} 94%,100% { opacity:0; transform:none;} }
@keyframes b4 { 0%,31% { opacity:0; transform:translateY(-14px) scale(.9);} 37%,86% { opacity:var(--o,1); transform:none;} 94%,100% { opacity:0; transform:none;} }
@keyframes b5 { 0%,40% { opacity:0; transform:translateY(-14px) scale(.9);} 46%,86% { opacity:1; transform:none;} 94%,100% { opacity:0; transform:none;} }
@keyframes b6 { 0%,49% { opacity:0; transform:translateY(-14px) scale(.9);} 55%,86% { opacity:var(--o,1); transform:none;} 94%,100% { opacity:0; transform:none;} }
.build .soft { --o: .25; }
.build .line { --o: .35; }

/* Cursor visits each block as it lands */
.build .cursor { animation: cursor 7s ease-in-out infinite; }
@keyframes cursor {
  0%   { transform: translate(250px, 200px); }
  8%   { transform: translate(150px, 70px); }
  17%  { transform: translate(80px, 128px); }
  26%  { transform: translate(210px, 99px); }
  35%  { transform: translate(196px, 119px); }
  44%  { transform: translate(178px, 150px); }
  53%  { transform: translate(150px, 181px); }
  70%  { transform: translate(236px, 150px); }
  100% { transform: translate(250px, 200px); }
}

.build .gear path, .build .gear .hole { transform-box: view-box; }
.build .g1 > * { animation: spin 6s linear infinite; }
.build .g2 > * { animation: spin 4s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .build .blk { animation: none; opacity: var(--o, 1); }
  .build .cursor, .build .gear > * { animation: none; }
  .build .cursor { transform: translate(178px, 150px); }
}