@font-face {
  font-family: "Geist Mono";
  src: url("/assets/geist-mono.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root { color-scheme: dark; }

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  background: #000;
  color: #fff;
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  -webkit-font-smoothing: antialiased;
}

main {
  min-height: 100%;
  min-height: 100dvh; /* the visible viewport on mobile, so nothing sits below the fold */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.75rem, 5vw, 3rem);
  padding: 2rem 16px;
  text-align: center;
}

h1 { margin: 0; line-height: 0; }

h1 img {
  width: min(520px, 82vw);
  height: auto;
  animation: rise 1.2s cubic-bezier(.2, .7, .2, 1) both;
}

.soon {
  margin: 0;
  font-size: clamp(.8rem, 2.4vw, 1rem);
  font-weight: 400;
  letter-spacing: .5em;
  text-transform: uppercase;
  color: #a1a1aa;
  /* letter-spacing pads the right edge; offset it so the text stays optically centred */
  padding-left: .5em;
  animation: fade 1.2s .5s ease both;
}

.cursor {
  color: #fff;
  animation: blink 1.1s steps(1) infinite;
}

.legal {
  /* sits directly under "Coming soon"; pull it closer than main's gap */
  margin: calc(-1 * clamp(1rem, 3.5vw, 2rem)) 0 0;
  max-width: 100%;
  text-align: center;
  font-size: .5rem;
  letter-spacing: .02em;
  color: #52525b;
  animation: fade 1.2s .9s ease both;
}

.legal a { color: #a1a1aa; text-decoration: none; border-bottom: 1px solid #3f3f46; }
.legal a:hover, .legal a:focus-visible { color: #fff; border-bottom-color: #fff; outline: none; }

@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  h1 img, .soon, .cursor, .legal { animation: none; }
}