:root {
  color-scheme: dark;
  --ink: #f3efe7;
  --muted: #9e9a91;
  --night: #080a0d;
  --panel: #13171d;
  --amber: #ffb000;
  --amber-pale: #ffd26b;
  --rust: #6b4420;
  --display: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-family: var(--display);
  font-synthesis: none;
  background: var(--night);
  color: var(--ink);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 20rem;
  overflow-x: clip;
  background: var(--night);
}

a { color: inherit; }
img, svg { display: block; }

.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.site-header {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: clamp(1rem, 2vw, 1.75rem) clamp(1.25rem, 4vw, 4rem);
  border-bottom: 1px solid rgb(255 255 255 / 8%);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
}

.brand-mark { width: 2.15rem; height: 2.15rem; }

.brand-name {
  font-family: var(--mono);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .13em;
}

.brand-name span { color: var(--amber); }

.system-state,
.render-credit,
.scroll-cue,
.approach-copy > p,
.eyebrow,
footer {
  font-family: var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.system-state {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: 0;
  color: #bbb6ac;
  font-size: .66rem;
}

.system-state > span {
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: #79b58d;
  box-shadow: 0 0 .75rem #79b58d;
}

.landing-sequence {
  height: 190svh;
  view-timeline-name: --landing-timeline;
  view-timeline-axis: block;
}

.landing-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 36rem;
  overflow: hidden;
  isolation: isolate;
  background: #000;
}

.starfield {
  position: absolute;
  z-index: -3;
  inset: 0;
  background:
    radial-gradient(circle at 14% 22%, rgb(255 255 255 / 72%) 0 1px, transparent 1.4px),
    radial-gradient(circle at 72% 16%, rgb(255 208 128 / 62%) 0 1px, transparent 1.5px),
    radial-gradient(circle at 88% 58%, rgb(190 214 255 / 62%) 0 1px, transparent 1.5px),
    radial-gradient(circle at 35% 72%, rgb(255 255 255 / 45%) 0 1px, transparent 1.4px),
    radial-gradient(circle at 54% 42%, rgb(255 255 255 / 30%) 0 1px, transparent 1.4px),
    linear-gradient(180deg, #07090d 0%, #020304 100%);
  background-size: 17rem 17rem, 23rem 23rem, 29rem 29rem, 31rem 31rem, 37rem 37rem, 100% 100%;
}

.starfield::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .17;
  background-image: repeating-linear-gradient(0deg, transparent 0 3px, rgb(255 255 255 / 5%) 3px 4px);
  pointer-events: none;
}

.asteroid-layer {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .94;
  filter: saturate(.52) contrast(1.16) brightness(.76);
}

.landing-stage::after {
  content: "";
  position: absolute;
  z-index: 8;
  inset: 0;
  background: linear-gradient(90deg, rgb(0 0 0 / 46%), transparent 38% 68%, rgb(0 0 0 / 28%)), linear-gradient(0deg, rgb(0 0 0 / 56%), transparent 32%);
  pointer-events: none;
}

.approach-copy {
  position: absolute;
  z-index: 10;
  top: clamp(6.5rem, 16vh, 10rem);
  left: clamp(1.25rem, 6vw, 6rem);
  width: min(35rem, calc(100% - 2.5rem));
}

.approach-copy > p {
  margin: 0 0 .9rem;
  color: var(--amber-pale);
  font-size: .68rem;
}

.approach-copy h1 {
  max-width: 12ch;
  margin: 0;
  font-size: clamp(2.6rem, 6.4vw, 6.7rem);
  font-weight: 660;
  letter-spacing: -.055em;
  line-height: .87;
  text-wrap: balance;
}

.approach-copy .approach-coordinates {
  margin-top: 1.3rem;
  color: rgb(243 239 231 / 55%);
}

.background-flight {
  position: absolute;
  z-index: 2;
  top: 38%;
  left: 0;
  width: clamp(2rem, 4.2vw, 4.4rem);
  opacity: 0;
  transform: translateX(-180%) rotate(-3deg);
  filter: saturate(.9) brightness(1.3) contrast(1.05) drop-shadow(0 .4rem .5rem rgb(0 0 0 / 35%));
  will-change: transform, opacity;
}

.background-flight img { width: 100%; height: auto; }

.ship-flight {
  position: absolute;
  z-index: 4;
  top: 80%;
  left: 58%;
  width: clamp(10rem, 21vw, 22rem);
  transform: translate(-50%, -50%);
  transform-origin: 50% 65%;
  filter: drop-shadow(0 1.3rem 1rem rgb(0 0 0 / 48%));
}

.ship-flight img { width: 100%; height: auto; }

.engine-wash {
  position: absolute;
  z-index: -1;
  top: 67%;
  left: 50%;
  width: 34%;
  height: 72%;
  opacity: .8;
  transform: translateX(-50%) scaleY(1);
  transform-origin: 50% 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff3d6, rgb(255 176 0 / 46%) 34%, transparent 100%);
  filter: blur(.65rem);
}

.contact-status {
  position: absolute;
  z-index: 10;
  left: 0;
  bottom: 0;
  display: flex;
  width: min(36rem, 72vw);
  min-height: 10.75rem;
  align-items: center;
  gap: 1.35rem;
  padding: 2.45rem clamp(1.25rem, 4vw, 4rem) 1.25rem;
  border: 0;
  color: #74684d;
  opacity: .88;
  background:
    linear-gradient(180deg, rgb(31 37 45 / 96%), rgb(10 13 17 / 98%)),
    repeating-linear-gradient(90deg, transparent 0 2.9rem, rgb(255 255 255 / 3%) 2.9rem 3rem);
  clip-path: polygon(0 21%, 5% 21%, 8% 0, 86% 0, 90% 21%, 100% 21%, 100% 100%, 0 100%);
  backdrop-filter: blur(.8rem);
}

.panel-outline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: inherit;
  filter: none;
  pointer-events: none;
}

.panel-outline path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.contact-status::before {
  content: "GATECORP LANDING SYSTEM / LMP-02";
  position: absolute;
  top: .75rem;
  left: clamp(4rem, 10vw, 8rem);
  color: rgb(205 213 224 / 48%);
  font: .52rem/1 var(--mono);
  letter-spacing: .16em;
}

.contact-lamp { width: clamp(6rem, 10vw, 8.5rem); height: clamp(6rem, 10vw, 8.5rem); flex: 0 0 auto; filter: grayscale(1) brightness(.35); }
.contact-status span { display: grid; gap: .25rem; }
.contact-status strong { font: 800 clamp(1.2rem, 2.4vw, 2rem)/1 var(--mono); letter-spacing: .18em; }
.contact-status small { font: .62rem/1 var(--mono); letter-spacing: .16em; }

.scroll-cue {
  position: absolute;
  z-index: 10;
  bottom: 1.65rem;
  right: clamp(1.25rem, 4vw, 4rem);
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 0;
  color: rgb(243 239 231 / 55%);
  font-size: .58rem;
  white-space: nowrap;
}

.scroll-cue span {
  width: 2.5rem;
  height: 1px;
  background: var(--amber);
  transform-origin: left;
}

.render-credit {
  position: absolute;
  z-index: 10;
  bottom: 4.25rem;
  right: clamp(1.25rem, 4vw, 4rem);
  margin: 0;
  color: rgb(243 239 231 / 28%);
  font-size: .52rem;
}

@keyframes ship-approach {
  0% { opacity: .45; transform: translate(calc(-50% + 2.8vw), calc(-50% - 72vh)) scale(1) rotate(1.5deg); }
  14% { opacity: 1; }
  58% { transform: translate(calc(-50% + 1.1vw), calc(-50% - 24vh)) scale(.48) rotate(.6deg); }
  87% { transform: translate(calc(-50% + .15vw), calc(-50% - 2.4vh)) scale(.16) rotate(.1deg); }
  94% { transform: translate(-50%, -48.8%) scale(.12) rotate(-.15deg); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(.125) rotate(0); }
}

@keyframes traffic-cross {
  0% { opacity: 0; transform: translateX(-180%) translateY(0) rotate(-3deg); }
  8% { opacity: .82; }
  92% { opacity: .82; }
  100% { opacity: 0; transform: translateX(calc(100vw + 180%)) translateY(-8vh) rotate(-1deg); }
}

@keyframes engines-cut {
  0%, 72% { opacity: .85; transform: translateX(-50%) scaleY(1); }
  100% { opacity: 0; transform: translateX(-50%) scaleY(.08); }
}

@keyframes contact-on {
  0%, 89% { opacity: .88; color: #74684d; border-color: rgb(153 166 184 / 28%); box-shadow: none; }
  93% { opacity: 1; color: var(--amber-pale); border-color: var(--amber); box-shadow: 0 0 3.5rem rgb(255 176 0 / 28%), inset 0 0 2.5rem rgb(255 176 0 / 10%); }
  100% { opacity: 1; color: var(--amber-pale); border-color: rgb(255 176 0 / 68%); box-shadow: 0 0 2rem rgb(255 176 0 / 18%); }
}

@keyframes mark-on {
  0%, 89% { filter: grayscale(1) brightness(.35); }
  93%, 100% { filter: grayscale(0) brightness(1); }
}

@keyframes approach-clear {
  0%, 57% { opacity: 1; transform: translateY(0); }
  82%, 100% { opacity: 0; transform: translateY(-1.5rem); }
}

@keyframes cue-progress { from { transform: scaleX(.08); } to { transform: scaleX(1); } }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ship-flight,
    .background-flight,
    .engine-wash,
    .contact-status,
    .contact-lamp,
    .approach-copy,
    .scroll-cue span {
      animation-timeline: --landing-timeline;
      animation-range-start: cover 34%;
      animation-range-end: cover 66%;
      animation-fill-mode: both;
      animation-timing-function: linear;
    }
    .ship-flight { animation-name: ship-approach; }
    .background-flight { animation-name: traffic-cross; }
    .engine-wash { animation-name: engines-cut; }
    .contact-status { animation-name: contact-on; }
    .contact-lamp { animation-name: mark-on; }
    .approach-copy { animation-name: approach-clear; }
    .scroll-cue span { animation-name: cue-progress; }
  }
}

.contact-status.is-landed {
  opacity: 1;
  color: var(--amber-pale);
  border-color: rgb(255 176 0 / 68%);
  box-shadow: 0 0 1.3rem rgb(255 176 0 / 18%);
}

.contact-status.is-landed .contact-lamp { filter: grayscale(0) brightness(1); }

.welcome {
  position: relative;
  z-index: 12;
  padding: clamp(5rem, 12vw, 10rem) clamp(1.25rem, 7vw, 7rem) 4rem;
  overflow: hidden;
  color: #171614;
  background: #eee9df;
}

.welcome::before {
  content: "02C";
  position: absolute;
  top: -5vw;
  right: -1vw;
  color: rgb(107 68 32 / 6%);
  font: 800 clamp(12rem, 31vw, 36rem)/.8 var(--display);
  letter-spacing: -.1em;
  pointer-events: none;
}

.welcome-intro { position: relative; max-width: 76rem; }

.eyebrow {
  margin: 0 0 1.2rem;
  color: #785527;
  font-size: .66rem;
  font-weight: 700;
}

.welcome h2 {
  max-width: 11ch;
  margin: 0;
  font-size: clamp(3.5rem, 9.5vw, 9.5rem);
  font-weight: 680;
  letter-spacing: -.065em;
  line-height: .84;
}

.welcome .lede {
  max-width: 52rem;
  margin: 2rem 0 0;
  color: #6b4420;
  font-size: clamp(1.2rem, 2.1vw, 2rem);
  font-weight: 550;
  line-height: 1.25;
}

.welcome-brief {
  max-width: 47rem;
  margin: 2rem 0 0;
  color: #4f4a42;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  line-height: 1.6;
}

.gameplay-loop {
  position: relative;
  margin-top: clamp(5rem, 12vw, 10rem);
}

.loop-header {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(18rem, .65fr);
  gap: clamp(2rem, 6vw, 7rem);
  align-items: end;
  border-top: 1px solid rgb(23 22 20 / 18%);
  padding-top: 2rem;
}

.loop-header .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
.loop-header h3 { margin: 0; font-size: clamp(2.7rem, 6vw, 6rem); letter-spacing: -.055em; line-height: .9; }
.loop-header > p:last-child { max-width: 32rem; margin: 0; color: #625d54; font-size: 1.05rem; line-height: 1.55; }

.gameplay-step {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(19rem, .85fr);
  min-height: clamp(31rem, 48vw, 46rem);
  margin-top: clamp(1rem, 2vw, 2rem);
  overflow: hidden;
  color: var(--ink);
  background: #15181d;
}

.gameplay-step:nth-of-type(even) { background: #0f1318; }
.gameplay-step--reverse .step-visual { order: 2; }
.gameplay-step--reverse .step-copy { order: 1; }

.step-visual {
  position: relative;
  min-height: 28rem;
  margin: 0;
  overflow: hidden;
  background: #03050a;
}

.step-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 58%, rgb(2 4 7 / 76%));
  pointer-events: none;
}

.step-visual > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.74) contrast(1.08) brightness(.88);
}

.step-visual--crew > img { object-position: 50% 54%; }
.step-visual--explore > img { object-position: 67% 42%; filter: saturate(.72) contrast(1.12) brightness(.8); }
.step-visual--claim > img, .step-visual--home > img { object-position: center; }

.step-visual figcaption {
  position: absolute;
  z-index: 2;
  right: 1.25rem;
  bottom: 1rem;
  left: 1.25rem;
  color: rgb(243 239 231 / 52%);
  font: .54rem/1.4 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.step-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.5rem, 6vw, 6rem);
}

.step-number {
  margin: 0 0 1.4rem;
  color: var(--amber-pale);
  font: 700 .64rem/1 var(--mono);
  letter-spacing: .13em;
}

.step-copy h4 {
  max-width: 9ch;
  margin: 0;
  font-size: clamp(2.6rem, 5.3vw, 5.5rem);
  font-weight: 670;
  letter-spacing: -.055em;
  line-height: .88;
}

.step-copy > p:not(.step-number, .operator-note) {
  max-width: 34rem;
  margin: 1.7rem 0 0;
  color: #c2beb5;
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.55;
}

.capability-list {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: 1.7rem 0 0;
  padding: 0;
  list-style: none;
}

.capability-list li {
  padding: .55rem .65rem;
  border: 1px solid rgb(255 176 0 / 34%);
  color: #d7d1c7;
  font: .58rem/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.operator-note {
  max-width: 34rem;
  margin: 2rem 0 0;
  border-top: 1px solid rgb(243 239 231 / 13%);
  padding-top: 1rem;
  color: #77736b;
  font: .61rem/1.55 var(--mono);
}

.step-visual--refit { display: grid; place-items: center; }

.refit-readout {
  width: min(82%, 42rem);
  color: #aaa69e;
  font: .58rem/1 var(--mono);
  letter-spacing: .11em;
}

.refit-readout > span { display: block; border-bottom: 1px solid rgb(255 176 0 / 38%); padding-bottom: .8rem; color: var(--amber-pale); }
.refit-readout > img { width: min(90%, 28rem); height: auto; margin: clamp(2rem, 6vw, 5rem) auto; filter: drop-shadow(0 1.2rem 1.2rem rgb(0 0 0 / 55%)); }
.refit-readout dl { display: grid; gap: .7rem; margin: 0; }
.refit-readout dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; align-items: center; }
.refit-readout dt, .refit-readout dd { margin: 0; }
.refit-readout dd { height: 2px; background: rgb(243 239 231 / 12%); }
.refit-readout i { display: block; width: var(--value); height: 100%; background: var(--amber); box-shadow: 0 0 .7rem rgb(255 176 0 / 40%); }

.cta-panel {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3rem;
  align-items: end;
  margin-top: clamp(5rem, 12vw, 10rem);
  padding: clamp(2rem, 5vw, 4.5rem);
  color: var(--ink);
  background: #17191d;
}

.cta-panel h3 { max-width: 12ch; margin: 0; font-size: clamp(2rem, 4vw, 4rem); letter-spacing: -.045em; line-height: .95; }
.cta-panel h3 strong { color: var(--amber); font: inherit; }
.cta-panel p:not(.eyebrow) { max-width: 39rem; margin: 1rem 0 0; color: #aaa69e; font-size: 1.05rem; line-height: 1.5; }

.waitlist-form { align-self: center; min-width: min(34rem, 42vw); }
.waitlist-form > label { display: block; margin-bottom: .65rem; color: #d3cec5; font: .62rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.waitlist-form > div { display: grid; grid-template-columns: minmax(10rem, 1fr) auto; }
.waitlist-form input,
.waitlist-form button {
  min-height: 3.35rem;
  border: 1px solid #706b62;
  border-radius: 0;
  font: 700 .7rem/1.2 var(--mono);
  letter-spacing: .05em;
}

.waitlist-form input {
  min-width: 0;
  padding: 0 1rem;
  border-right: 0;
  color: #aaa69e;
  background: #0c0f13;
}

.waitlist-form button {
  display: grid;
  place-items: center;
  padding: 0 1.2rem;
  color: #332200;
  background: #8f6a1d;
  cursor: not-allowed;
  text-transform: uppercase;
}

.waitlist-form small { display: block; margin-top: .65rem; color: #817d75; font: .53rem/1.4 var(--mono); letter-spacing: .13em; }

.fine-print {
  margin-top: 2.5rem;
  color: #716b62;
  font: .62rem/1.65 var(--mono);
}

.fine-print p { max-width: 92rem; margin: 0; }

footer {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 2rem;
  align-items: center;
  padding: 2rem clamp(1.25rem, 4vw, 4rem);
  color: #77736b;
  background: var(--night);
  font-size: .55rem;
}

.footer-brand { display: flex; align-items: center; gap: .65rem; color: var(--ink); }
.footer-brand svg { width: 1.5rem; height: 1.5rem; }
footer p { margin: 0; }

@media (max-width: 760px) {
  .system-state { display: none; }
  .landing-stage { min-height: 34rem; }
  .approach-copy { top: 7rem; }
  .approach-copy h1 { font-size: clamp(3rem, 15vw, 5rem); }
  .asteroid-layer { object-position: 53% 50%; }
  .ship-flight { top: 77%; left: 64%; width: clamp(10rem, 48vw, 15rem); }
  .background-flight { top: 60%; width: clamp(2rem, 9.6vw, 3rem); }
  .contact-status { width: 92vw; min-height: 9rem; padding-top: 2rem; }
  .contact-status::before { left: 3rem; }
  .contact-lamp { width: 5.5rem; height: 5.5rem; }
  .scroll-cue { bottom: 10rem; }
  .render-credit { display: none; }
  .loop-header, .gameplay-step, .cta-panel { grid-template-columns: 1fr; }
  .loop-header { gap: 1.5rem; }
  .gameplay-step { min-height: 0; }
  .gameplay-step--reverse .step-visual, .gameplay-step--reverse .step-copy { order: initial; }
  .step-visual { min-height: 20rem; }
  .step-copy { min-height: 27rem; }
  .waitlist-form { width: 100%; min-width: 0; }
  .waitlist-form > div { grid-template-columns: 1fr; }
  .waitlist-form input { border-right: 1px solid #706b62; border-bottom: 0; }
  footer { grid-template-columns: 1fr; gap: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .landing-sequence { height: 100svh; }
  .ship-flight { transform: translate(-50%, -50%) scale(.125); }
  .background-flight { display: none; }
  .engine-wash { display: none; }
  .contact-status { opacity: 1; color: var(--amber-pale); border-color: rgb(255 176 0 / 68%); }
  .contact-lamp { filter: grayscale(0) brightness(1); }
  .scroll-cue { display: none; }
}

@media (forced-colors: active) {
  .starfield, .landing-stage::after { display: none; }
  .contact-status { border: 2px solid CanvasText; }
}