:root {
  color-scheme: dark;

  --ink: #0b0a08;
  --paper: #fff4cc;
  --warning: #f3bd2c;
  --warning-light: #ffe27a;
  --warning-dark: #12100a;
  --button-edge: #f7d35f;
  --metal: #24251f;
  --metal-dark: #070705;
  --metal-edge: #555850;
  --display-font: "Tektur", "Arial Black", system-ui, sans-serif;

  --cover-left-vw: 0;
  --cover-top-dvh: 0;
  --cover-width-vw: 100;
  --cover-height-dvh: 100;
  --ui-scale: 1.6;
  --logo-top-dvh: 7;
  --stack-top-dvh: 16;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--display-font);
}

body {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
}

.landing {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  isolation: isolate;
}

.cover-art {
  position: fixed;
  left: calc(var(--cover-left-vw) * 1vw);
  top: calc(var(--cover-top-dvh) * 1dvh);
  z-index: 0;
  width: calc(var(--cover-width-vw) * 1vw);
  height: calc(var(--cover-height-dvh) * 1dvh);
  object-fit: cover;
  pointer-events: none;
}

.brand-logo {
  position: absolute;
  top: calc(var(--logo-top-dvh) * 1dvh);
  left: 50%;
  z-index: 1;
  width: min(42em, calc(100vw - 2em));
  height: auto;
  font-size: calc(var(--ui-scale) * 1vmin);
  font-size: calc(var(--ui-scale) * 1dvmin);
  filter:
    drop-shadow(0 0.18em 0 rgb(0 0 0 / 0.92))
    drop-shadow(0 0.7em 0.8em rgb(0 0 0 / 0.52));
  pointer-events: none;
  transform: translateX(-50%);
  user-select: none;
}

.landing-stack {
  position: absolute;
  top: calc(var(--stack-top-dvh) * 1dvh);
  left: 50%;
  z-index: 1;
  display: grid;
  width: calc(100vw - 2em);
  justify-items: center;
  font-size: calc(var(--ui-scale) * 1vmin);
  font-size: calc(var(--ui-scale) * 1dvmin);
  opacity: 0;
  visibility: hidden;
  translate: 0 14em;
  animation: launch-fly-in 720ms cubic-bezier(0.16, 1, 0.3, 1) 3s both;
  transform: translateX(-50%);
}

.legal-footer {
  position: absolute;
  right: 1rem;
  bottom: max(0.85rem, env(safe-area-inset-bottom));
  left: 1rem;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 0.9rem;
  align-items: center;
  color: rgb(255 244 204 / 0.78);
  font: 600 0.78rem / 1.2 var(--display-font);
  text-align: center;
  text-shadow:
    0 0.12rem 0 rgb(0 0 0 / 0.9),
    0 0.22rem 0.7rem rgb(0 0 0 / 0.82);
}

.legal-footer a {
  color: rgb(255 226 122 / 0.92);
  text-decoration: none;
}

.legal-footer a:hover,
.legal-footer a:focus-visible {
  color: var(--warning-light);
  text-decoration: underline;
}

.sr-only {
  position: absolute;
  width: 1em;
  height: 1em;
  margin: -1em;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.launch-button {
  position: relative;
  display: block;
  width: 18.2em;
  height: 5.85em;
  isolation: isolate;
  background: transparent;
  color: var(--paper);
  text-align: center;
  text-decoration: none;
  transform: translateY(0);
  scale: 1;
  animation: launch-pulse 10s ease-in-out infinite;
  transition:
    filter 140ms ease,
    transform 140ms ease;
}

.launch-button::before {
  position: absolute;
  inset: 0.72em 0 0.02em;
  z-index: -1;
  background:
    linear-gradient(180deg, rgb(40 42 38 / 0.95), rgb(2 2 2 / 0.98));
  box-shadow: 0 0.62em 1.5em rgb(0 0 0 / 0.64);
  clip-path: polygon(
    0 28%,
    7% 0,
    93% 0,
    100% 28%,
    100% 78%,
    93% 100%,
    7% 100%,
    0 78%
  );
  content: "";
  pointer-events: none;
}

.launch-button::after {
  position: absolute;
  inset: 0.54em 0.18em 0.2em;
  z-index: 0;
  background:
    linear-gradient(180deg, rgb(123 126 117 / 0.98), transparent 12%),
    linear-gradient(
      180deg,
      rgb(52 55 50 / 0.99),
      rgb(22 24 21 / 0.99) 48%,
      rgb(6 7 6 / 0.99)
    );
  box-shadow:
    0 0 0 0.14em var(--metal-dark),
    0 0.18em 0 rgb(0 0 0 / 0.94),
    inset 0 0 0 0.12em rgb(138 142 131 / 0.9),
    inset 0 0.34em 0 rgb(255 255 255 / 0.08),
    inset 0 -0.34em 0 rgb(0 0 0 / 0.7);
  clip-path: polygon(
    0 27%,
    7% 0,
    93% 0,
    100% 27%,
    100% 77%,
    93% 100%,
    7% 100%,
    0 77%
  );
  content: "";
  pointer-events: none;
}

.launch-button:hover,
.launch-button:focus-visible {
  filter: brightness(1.12);
  transform: translateY(-0.16em);
}

.launch-button:active {
  filter: brightness(0.96);
  transform: translateY(0.18em);
}

.launch-button:focus-visible {
  outline: 0.22em solid var(--paper);
  outline-offset: 0.22em;
}

.launch-badge {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
}

.launch-badge::before {
  position: absolute;
  inset: 1.28em 1.05em 0.72em;
  z-index: 1;
  border: 0.12em solid rgb(112 115 105 / 0.95);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.07), transparent 34%),
    linear-gradient(180deg, rgb(17 18 16 / 0.99), rgb(3 3 2 / 0.99));
  box-shadow:
    inset 0 0 0 0.1em rgb(0 0 0 / 0.72),
    inset 0 -0.2em 0 rgb(0 0 0 / 0.64);
  content: "";
  pointer-events: none;
}

.launch-badge::after {
  position: absolute;
  right: 1.42em;
  bottom: 0.42em;
  left: 1.42em;
  z-index: 2;
  height: 0.46em;
  border: 0.07em solid rgb(0 0 0 / 0.74);
  background:
    repeating-linear-gradient(
      135deg,
      var(--warning-light) 0,
      var(--warning-light) 0.48em,
      var(--warning-dark) 0.48em,
      var(--warning-dark) 0.96em
    );
  box-shadow:
    0 0.08em 0 rgb(0 0 0 / 0.82),
    inset 0 0.08em 0 rgb(255 255 255 / 0.26);
  clip-path: polygon(4% 0, 96% 0, 100% 100%, 0 100%);
  content: "";
  pointer-events: none;
}

.launch-badge__wing {
  position: absolute;
  top: 1.36em;
  z-index: 2;
  width: 1.42em;
  height: 3.72em;
  background:
    linear-gradient(180deg, rgb(122 126 117 / 0.98), rgb(37 40 36 / 0.98)),
    var(--metal);
  box-shadow:
    inset 0.16em 0 0 rgb(255 255 255 / 0.12),
    inset -0.18em 0 0 rgb(0 0 0 / 0.52),
    0 0.16em 0 rgb(0 0 0 / 0.85);
  clip-path: polygon(0 19%, 36% 0, 100% 0, 100% 100%, 36% 100%, 0 81%);
}

.launch-badge__wing--left {
  left: 0.28em;
}

.launch-badge__wing--right {
  right: 0.28em;
  transform: scaleX(-1);
}

.launch-badge__status {
  position: absolute;
  top: 0.22em;
  left: 50%;
  display: inline-flex;
  z-index: 5;
  width: 13.7em;
  height: 1.16em;
  align-items: center;
  justify-content: center;
  padding: 0 0.72em;
  overflow: hidden;
  border: 0.08em solid var(--warning-dark);
  background:
    linear-gradient(
      180deg,
      var(--warning-light),
      var(--warning) 66%,
      #b97f12
    );
  box-shadow:
    0 0 0 0.1em rgb(20 20 17 / 0.98),
    0 0.16em 0 rgb(0 0 0 / 0.82),
    0 0.34em 0.54em rgb(0 0 0 / 0.42),
    inset 0 0.08em 0 rgb(255 255 255 / 0.34),
    inset 0 -0.08em 0 rgb(0 0 0 / 0.22);
  clip-path: polygon(
    3% 0,
    97% 0,
    100% 20%,
    100% 80%,
    97% 100%,
    3% 100%,
    0 80%,
    0 20%
  );
  color: #11100c;
  font: 800 0.78em / 1 var(--display-font);
  letter-spacing: 0;
  white-space: nowrap;
  text-shadow:
    0 0.05em 0 rgb(255 250 211 / 0.65),
    0.04em 0.04em 0 rgb(255 250 211 / 0.34);
  transform: translateX(-50%);
}

.launch-badge__panel {
  position: absolute;
  top: 1.44em;
  bottom: 0.92em;
  left: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 13.6em;
  border: 0.12em solid rgb(83 86 78 / 0.98);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.05), transparent 24%),
    linear-gradient(180deg, rgb(14 14 12 / 0.99), rgb(0 0 0 / 0.99));
  box-shadow:
    inset 0 0 0 0.08em rgb(0 0 0 / 0.72),
    inset 0 -0.18em 0 rgb(0 0 0 / 0.7),
    0 0.12em 0 rgb(0 0 0 / 0.82);
  transform: translateX(-50%);
}

.launch-badge__label {
  display: block;
  font-family: var(--display-font);
  font-weight: 800;
  font-size: 3.2em;
  line-height: 0.88;
  letter-spacing: 0;
  color: var(--paper);
  white-space: nowrap;
  text-shadow:
    0.04em 0 0 #fff9dc,
    0.07em 0.07em 0 #7e5f20,
    0.12em 0.12em 0 var(--warning-dark),
    0.18em 0.18em 0 rgb(0 0 0 / 0.9),
    0 0.22em 0.22em rgb(0 0 0 / 0.66);
  transform: translateY(-0.04em);
}

.launch-badge__rail {
  position: absolute;
  right: 4.35em;
  bottom: 0.22em;
  left: 4.35em;
  z-index: 4;
  height: 0.28em;
  background: linear-gradient(180deg, var(--warning-light), var(--warning));
  box-shadow:
    0 0.08em 0 rgb(0 0 0 / 0.86),
    inset 0 -0.08em 0 rgb(0 0 0 / 0.34);
}

.launch-badge__bolt {
  position: absolute;
  z-index: 5;
  width: 0.44em;
  height: 0.44em;
  border: 0.06em solid rgb(4 5 4 / 0.95);
  background:
    linear-gradient(135deg, rgb(156 160 149 / 0.98), rgb(42 45 40 / 0.98));
  box-shadow:
    inset 0.06em 0.06em 0 rgb(255 255 255 / 0.18),
    inset -0.08em -0.08em 0 rgb(0 0 0 / 0.52),
    0 0.08em 0 rgb(0 0 0 / 0.78);
}

.launch-badge__bolt--top-left {
  top: 1.23em;
  left: 0.98em;
}

.launch-badge__bolt--top-right {
  top: 1.23em;
  right: 0.98em;
}

.launch-badge__bolt--bottom-left {
  bottom: 0.54em;
  left: 0.98em;
}

.launch-badge__bolt--bottom-right {
  right: 0.98em;
  bottom: 0.54em;
}

@keyframes launch-pulse {
  0%,
  86%,
  100% {
    filter: brightness(1);
    scale: 1;
  }

  90% {
    filter: brightness(1.14);
    scale: 1.045;
  }

  94% {
    filter: brightness(1.04);
    scale: 1.01;
  }
}

@keyframes launch-fly-in {
  0% {
    opacity: 0;
    visibility: hidden;
    translate: 0 14em;
  }

  1% {
    visibility: visible;
  }

  100% {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-stack {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
    animation: none;
  }

  .launch-button {
    animation: none;
  }
}