@font-face {
  font-family: "Departure Mono";
  src: url("assets/fonts/departure-mono/DepartureMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

:root {
  color-scheme: dark;
  --bg: #000;
  --going: #cfcfc9;
  --nowhere: #fff;
  --faded: #2a2a2a;
  --mono: "Departure Mono", ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--nowhere);
  font-family: var(--mono);
  overflow: hidden;
}

.threshold {
  height: 100%;
  display: grid;
  place-content: center;
  gap: 22px;
  text-align: center;
}

.wordmark {
  margin: 0;
  font-weight: 400;
  font-size: 44px;
  line-height: 1;
  letter-spacing: 0.04em;
  display: flex;
  gap: 0.6em;
  justify-content: center;
}

.wordmark__going { color: var(--going); }

.wordmark__nowhere span {
  transition: color 320ms steps(2, end), opacity 320ms steps(2, end);
}

/* GOING NOW HERE : the space appears */
.wordmark[data-state="nowhere"] .w { color: var(--nowhere); }
.wordmark[data-state="now-here"] .w { color: var(--going); opacity: 0.35; }
.wordmark[data-state="now-here"] .no,
.wordmark[data-state="now-here"] .here { color: var(--nowhere); }

/* GOING WHERE? : NO recedes into the black */
.wordmark[data-state="where"] .no { color: var(--faded); }
.wordmark[data-state="where"] .w,
.wordmark[data-state="where"] .here { color: var(--nowhere); }

.line {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--going);
}

/* Phones: one line, tracking 0. Stays 44px down to a 375px screen,
   then shrinks with the viewport so it never clips (11.75vw = 44px at 375px). */
@media (max-width: 600px) {
  .wordmark { font-size: min(44px, 11.75vw); letter-spacing: 0; white-space: nowrap; }
  .line { white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .wordmark__nowhere span { transition: none; }
}