/* The coming soon page. One job: make somebody want to come back.
 *
 * The render is the argument, so it is full bleed and everything else gets out
 * of its way. Type sits over a veil heavy enough to keep contrast whatever the
 * video is doing at that instant, which is the part that is easy to get wrong:
 * a fractal drop can go from near black to near white in three frames. */

body.soon {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
  /* Shows through if the clip is missing, still loading, or refused by a
   * reduced motion preference. Never an empty black page. */
  background: radial-gradient(85% 70% at 50% 46%, #2a1f6b, #0d0b1e 55%, #07070c);
}

body.soon video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.6s cubic-bezier(.4, 0, .2, 1);
  z-index: 0;
}
body.soon video.ready { opacity: 1; }
@media (prefers-reduced-motion: reduce) { body.soon video { display: none; } }

.veil {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7,7,12,.55) 0%, rgba(7,7,12,.15) 32%, rgba(7,7,12,.82) 100%),
    radial-gradient(90% 70% at 50% 62%, rgba(7,7,12,.72), transparent 70%);
}

body.soon main {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 40px 28px 56px;
  max-width: 640px;
}

.mark {
  width: 34px; height: 34px; margin: 0 auto 34px;
  border-radius: 10px;
  background: linear-gradient(140deg, #6d5ef8, #a78bfa 65%, #f0abfc);
  box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset,
              0 10px 40px -8px rgba(109,94,248,.7);
}

body.soon h1 {
  font-size: clamp(40px, 8vw, 68px);
  line-height: 1.02;
  letter-spacing: -.04em;
  font-weight: 600;
  margin: 0 0 22px;
  text-shadow: 0 2px 40px rgba(0,0,0,.6);
}

body.soon .lede {
  font-size: 17.5px;
  line-height: 1.6;
  color: #cbcdd8;
  max-width: 44ch;
  margin: 0 auto 38px;
  text-shadow: 0 1px 24px rgba(0,0,0,.7);
}

#join {
  display: flex;
  gap: 10px;
  max-width: 460px;
  margin: 0 auto;
}
#join input {
  flex: 1;
  /* Translucent rather than solid, so the render is still visible behind the
   * one piece of chrome on the page. */
  background: rgba(12,12,18,.62);
  backdrop-filter: blur(14px);
  border-color: rgba(255,255,255,.18);
}
#join input:focus { background: rgba(12,12,18,.86); }
#join button { flex: none; }

@media (max-width: 520px) {
  #join { flex-direction: column; }
  #join button { width: 100%; }
}

#msg { margin-top: 16px; font-size: 15px; min-height: 22px; }
#msg.ok { color: #34d399; }
#msg.bad { color: #fb7185; }

.fine {
  margin-top: 30px;
  font-size: 13px;
  color: #7c8090;
}