/* The front door. Everything here is scoped to #landing-root (plus the
   body.landing-active gate that hides the arcade shell), so the game's own
   styles are untouched. Approved mock: landing-mockup.html, 2026-08-24. */

body.landing-active .arcade-shell { display: none; }
/* the game centers its shell with a grid body; the landing is a normal page */
body.landing-active { display: block; }
#landing-root { width: 100%; }

#landing-root { display: none; }
body.landing-active #landing-root { display: block; }
/* During the launch swap the landing-active class drops (the shell must lay out
   and boot beneath), but the combat-link bridge keeps covering until removal. */
#landing-root.is-launching { display: block; }
#landing-root.is-launching .ld-topbar,
#landing-root.is-launching .ld-hero,
#landing-root.is-launching .ld-report { display: none; }

/* ---------- shared type ---------- */
#landing-root .ld-kicker, #landing-root .ld-eyebrow, #landing-root .ld-hint {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
#landing-root .ld-eyebrow { color: var(--muted); }
#landing-root .ld-kicker--amber { color: var(--amber); }
#landing-root .ld-kicker--red { color: var(--red); }
#landing-root .ld-display {
  margin: 0;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Narrow", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: 0.015em;
}
#landing-root .ld-prose {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--cream);
}
#landing-root .ld-prose--muted { color: var(--muted); }

/* ---------- buttons (base .primary-button comes from styles.css) ---------- */
#landing-root .ld-play.is-controller-pressed {
  background: var(--cyan);
  color: var(--ink);
  transform: translateY(2px);
  box-shadow: inset 0 3px 12px rgba(5, 7, 13, 0.44), 0 0 26px rgba(111, 247, 255, 0.28);
}
#landing-root .primary-button.is-linking {
  background: rgba(6, 20, 26, 0.9);
  color: var(--cream);
  border-color: var(--cyan-dim);
  pointer-events: none;
  position: relative;
  overflow: hidden;
}
#landing-root .primary-button.is-linking::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  width: 100%;
  transform-origin: left;
  transform: scaleX(var(--link-progress, 0));
  background: var(--cyan);
  transition: transform 120ms linear;
}

/* ---------- hero: the battlefield, first person ---------- */
#landing-root .ld-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 48px clamp(24px, 5vw, 64px) 18px;
  overflow: hidden;
  text-align: center;
}
/* the matted plate (tools/matte-homeworld-orbit.py): body alpha 1, glow
   partial, space 0. Layered OVER the starfield so the artwork's own alpha
   occludes the stars at any viewport; the level is a brightness knob because
   element opacity would let stars shine through the body again. */
#landing-root .ld-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background-image: url("assets/f333881331b16ca5d5d3/images/side-panels/homeworld-orbit-matted.png");
  background-repeat: no-repeat;
  background-position: right -160px center;
  background-size: auto 120%;
  filter: brightness(var(--planet-lum, 1));
  pointer-events: none;
}
#landing-root .ld-hero::after {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  background:
    radial-gradient(ellipse 70% 34% at 50% -6%, rgba(255, 77, 87, 0.13), transparent 70%),
    linear-gradient(0deg, var(--ink) 0%, transparent 20%),
    linear-gradient(180deg, rgba(5, 7, 13, 0.85) 0%, transparent 22%);
  pointer-events: none;
}
#landing-root #ld-starfield { position: absolute; inset: 0; width: 100%; height: 100%; }

#landing-root .ld-swarm-label {
  position: relative; z-index: 4;
  margin: 10px 0 0;
  font-size: 11px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--red);
}
@media (prefers-reduced-motion: no-preference) {
  #landing-root .ld-swarm-label { animation: ld-hint-pulse 2.2s ease-in-out infinite; }
}
@keyframes ld-hint-pulse { 50% { opacity: 0.35; } }
#landing-root .ld-flight-layer {
  position: absolute; inset: 0; z-index: 3; /* ships pass in front of the planet */
  overflow: hidden;
  pointer-events: none;
}
#landing-root .ld-flight-layer img.ld-ship { position: absolute; top: 0; left: 0; will-change: transform; }
#landing-root .ld-flight-layer .ld-bolt {
  position: absolute; top: 0; left: 0;
  width: 13px; height: 3px;
  background: linear-gradient(90deg, transparent, var(--red));
  box-shadow: 0 0 6px rgba(255, 77, 87, 0.6);
  will-change: transform, opacity;
}

/* still frame for prefers-reduced-motion */
#landing-root .ld-static-swarm { display: none; position: absolute; inset: 0; z-index: 3; pointer-events: none; }
#landing-root .ld-static-swarm img { position: absolute; }
@media (prefers-reduced-motion: reduce) { #landing-root .ld-static-swarm { display: block; } }

#landing-root .ld-hero-copy { position: relative; z-index: 4; display: flex; flex-direction: column; align-items: center; }
#landing-root .ld-hero-copy::before {
  content: "";
  position: absolute; inset: -60px -120px;
  background: radial-gradient(ellipse 52% 48% at 50% 46%, rgba(5, 7, 13, 0.65), transparent 72%);
  z-index: -1;
}
/* the wordmark is optically centered: VANTA's center sits 10.1% left of the
   image center (the red ship trails off-right), so shift by that much */
#landing-root .ld-hero-logo {
  width: min(92vw, 750px); height: auto;
  transform: translateX(10.1%);
  filter: drop-shadow(0 10px 40px rgba(0, 0, 0, 0.6));
}
#landing-root .ld-hero-sub { margin: 26px auto 0; max-width: 60ch; font-size: 16px; }
#landing-root .ld-cta-row { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 30px; flex-wrap: wrap; }
#landing-root .ld-cta-row .primary-button { font-size: 17px; padding: 18px 48px; }
/* personalization lives quietly in the corner, out of the copy stack */
#landing-root .ld-pilot-chip {
  display: none;
  position: absolute; top: 20px; right: 24px; z-index: 5;
  align-items: center; gap: 9px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--panel-edge);
  border-left: 3px solid var(--green);
  background: rgba(3, 9, 18, 0.8);
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}
#landing-root .ld-pilot-chip b { color: var(--green); font-weight: 700; }
#landing-root.is-returning .ld-pilot-chip { display: flex; }
@media (max-width: 640px) { #landing-root .ld-pilot-chip { top: 14px; right: 14px; } }

#landing-root .ld-pilot { position: relative; z-index: 4; display: flex; flex-direction: column; align-items: center; margin-top: 12px; }
/* the ready line: transparent canvas, hero starfield shows through behind the
   cradle (drawn by landing.js; approved mock landing-moon-ship-mockup.html) */
#landing-root .ld-pilot canvas { display: block; width: 240px; height: 236px; }
/* the takeoff's stage: spans the hero (the climb sliced off at the cradle
   canvas edge otherwise), above the copy — it is the player's own launch */
#landing-root #ld-pilot-flight {
  position: absolute; inset: 0; z-index: 4;
  pointer-events: none;
}
#landing-root .ld-scroll-cue { margin: 8px 0 0; color: var(--muted); font-size: 11px; letter-spacing: 0.28em; }

/* ---------- report-for-duty band ---------- */
#landing-root .ld-report {
  position: relative;
  padding: clamp(90px, 12vw, 160px) 24px;
  text-align: center;
  overflow: hidden;
  border-top: 1px solid var(--line);
}
#landing-root .ld-report::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("assets/f333881331b16ca5d5d3/images/side-panels/homeworld-city.png");
  background-size: cover;
  background-position: center 30%;
  opacity: 0.38;
}
#landing-root .ld-report::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--ink) 0%, rgba(5, 7, 13, 0.5) 40%, var(--ink) 100%);
}
#landing-root .ld-report .ld-band-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  max-width: 1160px; margin: 0 auto;
}
#landing-root .ld-report .ld-display { font-size: clamp(34px, 5vw, 56px); }
#landing-root .ld-report .primary-button { font-size: 17px; padding: 18px 48px; }
#landing-root .ld-report .ld-hint { color: var(--muted); }

/* ---------- game controls interstitial ---------- */
#landing-root .ld-controls-overlay {
  position: fixed; inset: 0; z-index: 85;
  display: flex;
  align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(5, 7, 13, 0.92);
  backdrop-filter: blur(6px);
  /* fade instead of snap: the Play click also fires the pilot ship's launch
     (landing.js ready line), and the ignition must read before the card
     covers it. visibility flips at once on open, after the fade on close. */
  visibility: hidden; opacity: 0;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}
#landing-root .ld-controls-overlay.is-open {
  visibility: visible; opacity: 1;
  transition: opacity 0.5s ease;
}
@media (prefers-reduced-motion: reduce) {
  #landing-root .ld-controls-overlay { transition: none; }
}
#landing-root .ld-controls-card {
  width: min(100%, 780px);
  max-height: calc(100svh - 48px);
  overflow-y: auto;
  background: rgba(3, 9, 18, 0.96);
  border: 1px solid var(--panel-edge);
  border-top: 2px solid var(--amber);
  border-bottom: 2px solid var(--amber);
  padding: 34px 38px 30px;
  text-align: center;
}
#landing-root .ld-controls-card .ld-kicker--amber { margin-bottom: 10px; }
#landing-root .ld-controls-card h2.ld-display { font-size: clamp(30px, 4vw, 42px); }
#landing-root .ld-controls-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 28px; text-align: left; }
#landing-root .ld-controls-col {
  border: 1px solid var(--panel-edge);
  background: rgba(5, 10, 20, 0.7);
  padding: 20px 22px 22px;
}
#landing-root .ld-controls-col h4 { margin: 0 0 16px; font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--amber); }
#landing-root .ld-control-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
#landing-root .ld-control-row:last-child { border-bottom: 0; }
#landing-root .ld-control-row .ld-what { font-size: 12.5px; font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: var(--muted); }
#landing-root kbd {
  font: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--cream);
  background: linear-gradient(180deg, #1a2130, #10141f);
  border: 1px solid var(--panel-edge);
  border-bottom-width: 3px;
  padding: 4px 8px;
  border-radius: 3px;
  white-space: nowrap;
}
#landing-root .ld-keys { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
#landing-root .ld-controls-note { margin: 22px auto 0; max-width: 56ch; }
#landing-root .ld-controls-note .ld-prose { color: var(--muted); font-size: 13.5px; margin: 0; }
#landing-root .ld-controls-card .primary-button { margin-top: 26px; }
/* Keyboard/gamepad arrivals (.is-armed, set by landing.js) always see which
   control the next press activates — programmatic focus() doesn't reliably
   match :focus-visible (tutorial-card precedent in styles.css). */
#landing-root .ld-controls-overlay.is-armed .primary-button:focus {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}
#landing-root .ld-controls-card .ld-continue-hint {
  margin: 14px 0 0;
  font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
  animation: ld-hint-pulse 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { #landing-root .ld-controls-card .ld-continue-hint { animation: none; } }
@media (prefers-reduced-motion: reduce) { #landing-root .ld-play.is-controller-pressed { transform: none; } }
/* The pad half of the hint (.hint-pad / body.has-pad) and the chip itself come
   from the shared gamepad glyph vocabulary in styles.css. */

/* ---------- combat-link bridge ---------- */
#landing-root .ld-link-overlay {
  position: fixed; inset: 0; z-index: 90;
  display: none;
  align-items: center; justify-content: center;
  background: var(--ink);
  flex-direction: column;
  gap: 26px;
}
#landing-root .ld-link-overlay.is-open { display: flex; }
#landing-root .ld-link-overlay .ld-kicker--red { font-size: 14px; }
#landing-root .ld-link-overlay .ld-stage { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; color: var(--muted); min-height: 1.2em; }
#landing-root .ld-signal { display: flex; gap: 5px; align-items: flex-end; height: 22px; }
#landing-root .ld-signal span { width: 5px; background: var(--cyan); }
#landing-root .ld-signal span:nth-child(1) { height: 30%; }
#landing-root .ld-signal span:nth-child(2) { height: 55%; }
#landing-root .ld-signal span:nth-child(3) { height: 90%; }
#landing-root .ld-signal span:nth-child(4) { height: 65%; }
#landing-root .ld-signal span:nth-child(5) { height: 40%; }
@media (prefers-reduced-motion: no-preference) {
  #landing-root .ld-link-overlay .ld-signal span { animation: ld-pulse 900ms ease-in-out infinite alternate; }
  #landing-root .ld-link-overlay .ld-signal span:nth-child(2) { animation-delay: 120ms; }
  #landing-root .ld-link-overlay .ld-signal span:nth-child(3) { animation-delay: 240ms; }
  #landing-root .ld-link-overlay .ld-signal span:nth-child(4) { animation-delay: 360ms; }
  #landing-root .ld-link-overlay .ld-signal span:nth-child(5) { animation-delay: 480ms; }
}
@keyframes ld-pulse { from { transform: scaleY(0.4); } to { transform: scaleY(1.15); } }

/* ---------- responsive ---------- */
/* shorter desktop viewports: keep the whole tableau above the fold */
@media (max-height: 980px) and (min-width: 641px) {
  #landing-root .ld-hero { padding-top: 44px; }
  #landing-root .ld-hero-logo { width: min(88vw, 560px); }
  #landing-root .ld-hero-sub { font-size: 15px; }
  #landing-root .ld-pilot canvas { width: 216px; height: auto; }
}
/* The overhead-planet layout only works where the plate spans the full width.
   Drawn plate width = 0.6 x hero height (image aspect 0.5 x size 120%), so
   gate on aspect ratio, not a pixel width: centered at W <= 0.6H, right-aligned
   (right edge off-screen by construction) everywhere wider — otherwise there is
   a band where the centered plate's right edge cuts through the planet body. */
@media (max-aspect-ratio: 3/5) {
  /* portrait keeps its shipped share of the level: 0.22/0.32 of the desktop 1.00 */
  #landing-root .ld-hero::before { background-position: center -120px; --planet-lum: 0.69; }
}
@media (max-width: 640px) {
  #landing-root .ld-hero { padding-top: 56px; }
  #landing-root .ld-cta-row { flex-direction: column; }
  #landing-root .ld-hero-logo { width: min(94vw, 430px); }
  #landing-root .ld-pilot canvas { width: 196px; height: auto; }
  #landing-root .ld-controls-grid { grid-template-columns: 1fr; }
  #landing-root .ld-controls-card { padding: 26px 22px 24px; }
}