/*
 * The homepage's scene (components/deep-field.js): the launch countdown, flight instruments, the
 * hero over the Earth, the Kuiper belt's beacon, the crew deck with the hobbies wheel, and
 * splashdown. Space Mono for the instruments. The games galaxy's colours are the --g-* tokens.
 */
:root {
  --space: #02030a;
  --mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --hud: #9fe8ff;
  --hud-dim: rgb(159 232 255 / 0.55);
  --hot: #ffb070;
}

.scene {
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  pointer-events: none;
}

/* ---------- Loader: the countdown ---------- */
.count { position: relative; display: grid; justify-items: center; gap: 0.9rem; }

/* ---------- Flight instruments ---------- */
.hud {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  font: 400 0.68rem/1 var(--mono);
  letter-spacing: 0.08em;
  color: var(--hud);
  transition: color 0.4s ease;
}
.hud__corner { position: absolute; width: 1.4rem; height: 1.4rem; border: 0 solid rgb(159 232 255 / 0.35); }
.hud__corner--tl { left: 0.6rem; top: 0.6rem; border-width: 1px 0 0 1px; }
.hud__corner--tr { right: 0.6rem; top: 0.6rem; border-width: 1px 1px 0 0; }
.hud__corner--bl { left: 0.6rem; bottom: 0.6rem; border-width: 0 0 1px 1px; }
.hud__corner--br { right: 0.6rem; bottom: 0.6rem; border-width: 0 1px 1px 0; }
.hud__tele {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 1.6rem;
  padding: 1.8rem var(--gutter) calc(1rem + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(rgb(2 3 10 / 0), rgb(2 3 10 / 0.9) 55%, rgb(2 3 10 / 0.96));
  text-transform: uppercase;
}
.hud__tele em { margin-right: 0.35rem; font-style: normal; color: var(--hud-dim); }
.hud__tele b { font-weight: 400; font-variant-numeric: tabular-nums; }
.hud__stage { color: var(--gold); }
.hud__stage::before { content: ""; display: inline-block; width: 0.45rem; height: 0.45rem; margin-right: 0.55rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; vertical-align: 0.05em; }
.motion .hud__stage::before { animation: twinkle 1.8s ease-in-out infinite; }
.hud.is-hot { color: var(--hot); }
.hud.is-hot .hud__stage { color: #ff7a4a; }

.hud__map { position: absolute; right: 1.4rem; top: 50%; width: 1.6rem; height: min(46vh, 22rem); transform: translateY(-50%); pointer-events: auto; }
.hud__map::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(rgb(159 232 255 / 0.08), rgb(159 232 255 / 0.4) 15% 85%, rgb(159 232 255 / 0.08)); }
.hud__map ol { position: absolute; inset: 0; }
.hud__map li { position: absolute; left: 0; top: calc(var(--p, 0) * 100%); display: grid; place-items: center; width: 1.6rem; height: 1.6rem; margin-top: -0.8rem; cursor: pointer; }
.hud__map li i { width: 0.5rem; height: 0.5rem; border: 1px solid var(--hud); border-radius: 50%; background: var(--space); transition: background-color 0.3s ease, transform 0.3s ease, border-color 0.3s ease; }
.hud__map li.is-past i { background: var(--hud); }
.hud__map li.is-here i { transform: scale(1.5); border-color: var(--gold); background: var(--gold); }
.hud__map li span { position: absolute; right: 1.9rem; top: 50%; padding: 0.35rem 0.55rem; border: 1px solid rgb(159 232 255 / 0.3); border-radius: 0.3rem; background: rgb(2 3 10 / 0.85); white-space: nowrap; text-transform: uppercase; opacity: 0; transform: translate(4px, -50%); transition: opacity 0.2s ease, transform 0.2s ease; }
.hud__map li:hover span { opacity: 1; transform: translate(0, -50%); }
.hud__ship { position: absolute; left: 50%; top: calc(var(--ship, 0) * 100%); width: 0; height: 0; border-left: 0.36rem solid transparent; border-right: 0.36rem solid transparent; border-top: 0.62rem solid var(--gold); transform: translate(-50%, -50%); filter: drop-shadow(0 0 6px var(--gold)); }

/* ---------- Hero: in orbit, the Earth below ---------- */
.hero--orbit { align-content: start; padding-top: max(7rem, 17vh); }
.hero--orbit .hero__hint, .hero--orbit .hero__down { bottom: calc(3.6rem + env(safe-area-inset-bottom, 0px)); z-index: 2; }
.earth-grip { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 33%; cursor: grab; touch-action: pan-y; }
.earth-grip.is-dragging { cursor: grabbing; }

/* ---------- Intro ---------- */
.intro { padding-top: clamp(4rem, 12vh, 7rem); }

/* ---------- Websites: the planetary fly-by ---------- */
.system {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  max-width: var(--wrap);
  margin: 0 auto;
}
.system + .system { margin-top: var(--gap-item); }
 /* room for the record's readout */

/* Lokust's rings are record grooves, with its moon in the gap */

/* Each project has its own page later: the front page keeps a summary and leads there */

/* ---------- The Kuiper belt and its beacon ---------- */
.belt { position: relative; padding: var(--gap-section) var(--gutter); }
.belt__hint { max-width: var(--wrap); margin: 0 auto 1rem; font: 400 0.68rem/1.5 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--hud); }
.belt__hint b { font-weight: 400; color: var(--gold); }
.signal--beacon {
  position: relative;
  margin-top: 0;
  background:
    radial-gradient(circle at calc(100% - 2.6rem) 2.6rem, rgb(242 196 109 / 0.2), transparent 9rem),
    repeating-radial-gradient(circle at calc(100% - 2.6rem) 2.6rem, transparent 0 38px, color-mix(in srgb, var(--gold) 14%, transparent) 38px 39px),
    rgb(10 14 30 / 0.6);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.signal--beacon::after { content: ""; position: absolute; right: 2.2rem; top: 2.2rem; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px var(--gold); }
.motion .signal--beacon::after { animation: beacon 2.2s ease-out infinite; }
@keyframes beacon { 0% { box-shadow: 0 0 12px var(--gold), 0 0 0 0 rgb(242 196 109 / 0.55); } 70%, 100% { box-shadow: 0 0 12px var(--gold), 0 0 0 2.4rem rgb(242 196 109 / 0); } }

/* ---------- Games galaxy: calm colours  ---------- */
.games { --accent: var(--g-accent, var(--gold)); --on-accent: var(--g-on-accent, var(--on-gold)); }
.games .chapter__title { background: linear-gradient(90deg, var(--g-title-a, var(--star)), var(--g-title-b, var(--gold)) 75%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.games .chapter__sub { max-width: 34ch; }
.games .tx__head { color: var(--g-signal, var(--teal)); }
.games .tx__dot { background: var(--g-signal, var(--teal)); box-shadow: 0 0 10px var(--g-signal, var(--teal)); }
.games .tx__wave { stroke: var(--g-signal, var(--teal)); filter: drop-shadow(0 0 6px var(--g-signal, var(--teal))); }
.games .tx { background: rgb(10 14 30 / 0.72); }

/* ---------- Crew deck ---------- */
.about--crew { position: relative; isolation: isolate; }
.station { position: absolute; right: -4%; top: -3rem; z-index: -1; width: min(38rem, 58vw); height: auto; opacity: 0.4; pointer-events: none; }
.st-truss { fill: #8a91a3; }
.st-lattice { fill: none; stroke: #4b5163; stroke-width: 1; }
.st-array { fill: url(#st-arr); stroke: #3d2b0c; stroke-width: 1; }
.st-grid { fill: none; stroke: rgb(40 26 4 / 0.6); stroke-width: 0.8; }
.st-rad { fill: #e9edf5; stroke: #9aa2b4; stroke-width: 0.8; }
.st-mod { fill: url(#st-mod); stroke: #6d7487; stroke-width: 0.8; }
.st-port { fill: #0b1124; stroke: var(--gold); stroke-width: 1.2; }
.st-light { fill: #ff5f5f; }
.st-light--b { fill: #5fff9a; }
.st-light--c { fill: #fff; }
.motion .st-light { animation: blink 1.6s steps(1) infinite; }
.motion .st-light--b { animation-delay: 0.8s; }
@keyframes blink { 50% { opacity: 0.12; } }

.crew__card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.4rem;
  align-items: center;
  margin: 1.4rem 0;
  padding: 1.2rem;
  border: 1px solid var(--line);
  border-radius: 1.2rem;
  background: var(--panel);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.patch { position: relative; width: clamp(8.5rem, 13vw, 10.5rem); aspect-ratio: 1; margin: 0; }
.patch__ring { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.patch__edge { fill: none; stroke: var(--gold); stroke-width: 2.5; }
.patch__band { fill: none; stroke: rgb(242 196 109 / 0.35); stroke-width: 1; }
.patch__line { fill: none; stroke: var(--gold); stroke-width: 1.5; }
.patch__text { font: 700 10.5px/1 var(--mono); fill: var(--gold); }
.patch__star { fill: var(--gold); }
.patch::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, #101a3a, #070b1a 70%); }
.patch img { position: absolute; inset: 17.5%; width: 65%; height: 65%; border-radius: 50%; object-fit: cover; }
.crew__facts div { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: 0.6rem; padding: 0.45rem 0; border-top: 1px solid var(--line); }
.crew__facts div:first-child { border-top: 0; }
.crew__facts dt { font: 400 0.66rem/2 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--hud); }
.crew__facts dd { margin: 0; }
.about--crew .wheel { width: min(100%, 30rem); }
/* the station drifts across the gap above the crew deck, clear of the wheel */
.about--crew .station { top: -12rem; right: 1%; width: min(30rem, 44vw); opacity: 0.45; }
.about--crew .wheel__readout .cat { font-size: 1rem; }

/* ---------- Re-entry and splashdown ---------- */
.signoff__title { margin-top: 0.6rem; font: 300 clamp(2.2rem, 6vw, 5rem)/1 var(--font); letter-spacing: 0.06em; text-transform: uppercase; color: var(--star); }
.splash { display: flex; align-items: center; gap: 0.6rem; margin-top: 1.6rem; font: 400 0.7rem/1.5 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--hud); }
.splash__dot { flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--hud); box-shadow: 0 0 8px var(--hud); }
.signoff__base { padding-bottom: 3rem; }

/* ---------- Responsive ---------- */
@media (max-width: 70em) {
  .hud__map { display: none; }
}
@media (max-width: 62em) {
  .system { grid-template-columns: minmax(0, 1fr); }
  .planet { --size: min(72vw, 20rem); }
  .station, .about--crew .station { width: 70vw; right: -10%; top: -7rem; opacity: 0.32; }
}
@media (max-width: 40em) {
  .hud__corner, .hud__met, .hud__stage { display: none; }
  .hud__tele { gap: 0.3rem 1.2rem; padding-bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px)); }
  .crew__card { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .crew__facts { width: 100%; }
  .crew__facts div { grid-template-columns: 5rem minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .hero--orbit .hero__hint { display: none; }
  .motion .hud__stage::before, .motion .flyby i, .motion .signal--beacon::after, .motion .st-light { animation: none; }
}