:root {
  --red: #C21F2B;
  --blue: #0B2D6B;
  --white: #F2F3F5;
  --black: #050608;
  --dim: #8A909C;
  --display: "Bebas Neue", "Arial Narrow", sans-serif;
  --body: "IBM Plex Sans", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--black); color: var(--white); }
body { font-family: var(--body); -webkit-font-smoothing: antialiased; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.billboard {
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 80px 20px 40px;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(11,45,107,.18), transparent 40%),
    linear-gradient(0deg, rgba(194,31,43,.12), transparent 35%),
    var(--black);
}

.stamp {
  margin: 0;
  font-size: clamp(11px, 1.4vw, 14px);
  font-weight: 600;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--dim);
  animation: in .9s ease both;
}

.mega {
  margin: .08em 0 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(120px, 34vw, 420px);
  line-height: .82;
  letter-spacing: .02em;
  color: var(--white);
  animation: in 1.1s ease .1s both;
}

.rule {
  display: flex; width: min(280px, 50vw); height: 4px; margin: 22px 0 18px;
  animation: in 1s ease .35s both;
}
.rule i { flex: 1; }
.rule i:nth-child(1) { background: var(--red); }
.rule i:nth-child(2) { background: var(--white); }
.rule i:nth-child(3) { background: var(--blue); }

.coming {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(22px, 4vw, 40px);
  letter-spacing: .18em;
  text-transform: uppercase;
  animation: in 1s ease .45s both;
}
.coming em { font-style: normal; color: var(--red); }

.place {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 18px 0 0;
  font-size: 11px; font-weight: 500; letter-spacing: .32em;
  text-transform: uppercase; color: var(--dim);
  font-variant-numeric: tabular-nums;
  animation: in 1s ease .55s both;
}
.place__dash {
  width: 36px; height: 1px; background: var(--red);
}

.omen {
  margin: 10px 0 0;
  font-size: 11px; font-weight: 600; letter-spacing: .4em;
  text-transform: uppercase; color: var(--white);
  animation: in 1s ease .62s both;
}

.mark {
  margin-top: clamp(22px, 5vh, 44px);
  height: min(28vh, 220px);
  aspect-ratio: 900 / 2075;
  background: var(--white);
  -webkit-mask: url("/assets/droid-silhouette.png") center / contain no-repeat;
  mask: url("/assets/droid-silhouette.png") center / contain no-repeat;
  opacity: .92;
  animation: in 1.2s ease .7s both;
}

.join {
  border-top: 1px solid rgba(242,243,245,.1);
  padding: 72px 20px;
  display: flex; justify-content: center;
}
.join__inner { width: 100%; max-width: 520px; text-align: center; }
.join h2 {
  margin: 0 0 28px;
  font-family: var(--display);
  font-size: clamp(32px, 6vw, 48px);
  letter-spacing: .04em;
}

.form__interest {
  border: 0; margin: 0 0 18px; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
}
.form__interest legend {
  width: 100%; margin-bottom: 12px;
  font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--dim);
}
.form__interest input { position: absolute; opacity: 0; pointer-events: none; }
.form__interest span {
  display: inline-block; padding: 8px 14px;
  border: 1px solid rgba(242,243,245,.25);
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim);
  cursor: pointer;
}
.form__interest input:checked + span { color: var(--white); border-color: var(--white); }

.form__row { display: flex; border: 1px solid rgba(242,243,245,.3); }
.form__row input {
  flex: 1; border: 0; outline: 0; background: transparent;
  color: var(--white); font: inherit; font-size: 16px; padding: 16px;
}
.form__row button {
  border: 0; background: var(--white); color: var(--black);
  font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; padding: 0 18px; cursor: pointer;
}
.form__hp { position: absolute; left: -9999px; }
.form__status { min-height: 1.2em; margin: 14px 0 0; font-size: 13px; color: var(--dim); }
.form__status.is-ok { color: var(--white); }
.form__status.is-err { color: #ff8a92; }
.form__fine { margin: 8px 0 0; font-size: 12px; color: var(--dim); }
.form.is-done .form__interest, .form.is-done .form__row, .form.is-done .form__fine { display: none; }

footer {
  text-align: center; padding: 40px 20px 56px;
  border-top: 1px solid rgba(242,243,245,.08);
}
footer p { margin: 0 0 6px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }

@keyframes in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
}