@font-face {
  font-family: "Volkhov";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./assets/fonts/volkhov-400-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Volkhov";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./assets/fonts/volkhov-700-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./assets/fonts/inter-var-latin.woff2") format("woff2");
}

:root {
  color-scheme: light dark;
  --carta-navy: #011a39;
  --heirloom-slate: #4a5568;
  --transfer-teal: #1f8d9b;
  --record-gold: #a1824a;
  --clean-vellum: #faf8f5;
  --vellum-soft: #f1ede4;
  --line: #d9d1c3;
  --page-background: #faf8f5;
  --page-tint: #edf5f6;
  --text: #011a39;
  --muted: #4a5568;
  --accent: #1f8d9b;
  --glint: rgb(161 130 74 / 0.16);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--page-background);
}

body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  background: var(--page-background);
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

.launch-shell {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 100dvh;
  place-items: center;
  overflow: hidden;
  padding: 48px 22px;
  background:
    linear-gradient(135deg, var(--page-background) 0%, var(--page-background) 48%, var(--page-tint) 100%);
}

.launch-shell::before {
  position: absolute;
  z-index: -1;
  content: "";
  pointer-events: none;
}

.launch-shell::before {
  inset: 0;
  background:
    linear-gradient(90deg, var(--glint), transparent 32%),
    linear-gradient(180deg, transparent 0%, rgb(1 26 57 / 0.04) 100%);
}

.launch {
  display: grid;
  width: min(100%, 960px);
  justify-items: center;
  gap: 16px;
  text-align: center;
}

.logo-mark {
  width: min(78%, 390px);
  height: auto;
  margin-bottom: 2px;
  filter: drop-shadow(0 24px 42px rgb(1 26 57 / 0.12));
}

.platform {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  line-height: 1.4;
  text-transform: uppercase;
}

.brand-name {
  margin: 0;
  color: var(--text);
  font-family: "Volkhov", Georgia, serif;
  font-size: 4.6rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 0.94;
}

.brand-name span {
  color: var(--heirloom-slate);
  font-weight: 400;
}

.brand-name strong {
  color: var(--carta-navy);
  font-weight: 700;
}

.promise {
  max-width: 640px;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.5;
}

.soon {
  margin: 2px 0 0;
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
}

@media (min-width: 720px) {
  .launch-shell {
    padding: 64px 44px;
  }

  .launch {
    gap: 18px;
  }

  .logo-mark {
    width: 420px;
  }

  .brand-name {
    font-size: 8rem;
  }

  .promise {
    font-size: 1.32rem;
  }
}

@media (min-width: 1120px) {
  .launch {
    gap: 20px;
  }

  .logo-mark {
    width: 460px;
  }

  .brand-name {
    font-size: 10.5rem;
  }
}

@media (max-width: 420px) {
  .launch-shell {
    padding: 40px 18px;
  }

  .launch {
    gap: 14px;
  }

  .logo-mark {
    width: 280px;
  }

  .brand-name {
    font-size: 3.2rem;
  }

  .promise {
    font-size: 1.04rem;
  }

  .soon {
    font-size: 0.76rem;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --page-background: #07182b;
    --page-tint: #082b33;
    --text: #faf8f5;
    --muted: #c5ccd3;
    --accent: #82cad0;
    --glint: rgb(161 130 74 / 0.1);
  }

  .brand-name span,
  .brand-name strong {
    color: var(--text);
  }

  .logo-mark {
    filter: drop-shadow(0 26px 50px rgb(0 0 0 / 0.28));
  }
}

@media (prefers-reduced-motion: no-preference) {
  .launch > * {
    animation: rise-in 760ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .platform {
    animation-delay: 70ms;
  }

  .brand-name {
    animation-delay: 120ms;
  }

  .promise {
    animation-delay: 170ms;
  }

  .soon {
    animation-delay: 220ms;
  }
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}