:root {
  --bg: #ffffff;
  --orange: #c2410c;    /* dark orange */
  --ink: #1c1917;       /* near-black for "io" on the white background */
  --black: #000000;
  --muted: #a8a29e;
}

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

html, body { height: 100%; background: var(--bg); color-scheme: light; }

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background: var(--bg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-align: center;
  padding: 2rem;
}

.wordmark {
  font-size: clamp(3rem, 12vw, 7.5rem);
  font-weight: 650;
  letter-spacing: -0.035em;
  line-height: 1;
}

.pomero { color: var(--orange); }
.dot    { color: var(--black); }
.io     { color: var(--ink); }

/* Everything dances: the words in opposite phase, the dot bouncing
   between them a quarter-beat apart. Two independent sine motions
   (vertical 2.6s, horizontal 5.2s) compose into a smooth figure-eight. */
.pomero, .io {
  display: inline-block;
  animation: sway 5.2s ease-in-out infinite;
  will-change: transform;
}

.bob, .dot {
  display: inline-block;
  animation: bob 2.6s ease-in-out infinite;
  will-change: transform;
}

.io       { animation-delay: -2.6s; }
.io .bob  { animation-delay: -1.3s; }
.dot      { animation-delay: -0.65s; }

@keyframes bob {
  0%, 100% { transform: translateY(0.02em); }
  50%      { transform: translateY(-0.06em); }
}

@keyframes sway {
  0%, 100% { transform: translateX(-0.018em); }
  50%      { transform: translateX(0.018em); }
}

@media (prefers-reduced-motion: reduce) {
  .pomero, .io, .bob, .dot { animation: none; }
}

/* used by 404.html */
.soon {
  margin-top: 1.75rem;
  color: var(--muted);
  font-size: clamp(0.8rem, 1.6vw, 0.95rem);
  font-weight: 400;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  text-indent: 0.45em; /* balance the trailing letter-spacing so it centers optically */
}