/* The pre-launch page. Always black. Monospace, quiet motion. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body.soon { background: #000; color: #f2f2f2; font-family: "Martian Mono", ui-monospace, monospace; -webkit-font-smoothing: antialiased; color-scheme: dark; }
.soon-main { min-height: 100svh; display: grid; place-content: center; justify-items: center; gap: clamp(2rem, 5vw, 3.2rem); padding: 2rem 16px; text-align: center; }
.soon-mark { width: clamp(2rem, 3.2vw, 2.5rem); height: auto; color: #f2f2f2; }

.soon-cd { display: flex; gap: clamp(1.1rem, 4.4vw, 3.6rem); }
.unit { display: grid; justify-items: center; gap: clamp(.7rem, 1.4vw, 1.1rem); }
.unit b { display: flex; font-weight: 200; font-size: clamp(2.6rem, 9vw, 7.4rem); line-height: 1; letter-spacing: -.05em; }
.dg { position: relative; display: inline-block; width: .62em; height: 1em; }
.dg-n { position: absolute; inset: 0; display: grid; place-items: center; }
.lbl { font-size: clamp(.55rem, .85vw, .66rem); font-weight: 300; letter-spacing: .3em; text-transform: uppercase; color: #565656; padding-left: .3em; }
.soon-when { margin: 0; font-size: clamp(.6rem, .9vw, .7rem); font-weight: 300; letter-spacing: .3em; text-transform: uppercase; color: #565656; padding-left: .3em; }
::selection { background: #f2f2f2; color: #000; }

@media (prefers-reduced-motion: no-preference) {
  .soon-mark { animation: fade 1.2s ease both; }
  .soon-cd { animation: fade 1.2s .25s ease both; }
  .soon-when { animation: fade 1.2s .5s ease both; }
  .dg-n.in { animation: fade .45s ease both; }
  .dg-n.out { animation: fade-out .45s ease forwards; }
  @keyframes fade { from { opacity: 0; } }
  @keyframes fade-out { to { opacity: 0; } }
}