/* The go-rocket sky (2026-08-30). Extracted from gorocket-mission.css so the
 * LANDING page can wear the same background as Mission Control (Felix's
 * call): two parallax star tracks, the dim planet, and the rocket gliding
 * right-to-left. Loaded by the mission templates (next to
 * gorocket-mission.css) AND by gorocket/landing.html.
 *
 * Perf/SEO contract: pure CSS/SVG, no images, no JS; the layer is
 * position:fixed + contain:strict + pointer-events:none + aria-hidden in
 * the markup (templates/ugc/_mission_sky.html); only the two star tracks
 * and the craft animate, all transform/opacity-only (compositor work, no
 * layout, no CLS). prefers-reduced-motion stops everything.
 */

.mc-sky {
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none; contain: strict;
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(255, 90, 31, 0.10), transparent 58%),
    radial-gradient(90% 70% at 12% 88%, rgba(0, 212, 255, 0.06), transparent 60%),
    var(--bg-primary, #070a12);
}
/* Cockpit window frame: inset vignette, calm and static. */
.mc-sky::after {
  content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 0 140px 40px rgba(2, 4, 10, 0.85);
}

/* The landing wears the sky BEHIND everything: negative z-index paints it
 * above the page canvas but under all content, so no landing element needs
 * a stacking-context change (the mission pages keep z-index:0 +
 * .mc-content instead). */
.mc-sky--landing { z-index: -1; }
/* Landing visits are short: start the glide mid-flight (-60s of the 240s
 * loop puts the craft around 3/4 across) so the rocket is on screen at
 * first paint instead of 4 minutes later. */
.mc-sky--landing .mc-craft { animation-delay: -60s; }

/* Two star layers, two speeds = the parallax. Each track is 200vw wide and
 * carries the same field twice (spans at x and x+100vw), so translateX(-50%)
 * loops seamlessly - the landing cruise-sky recipe. */
.mc-sky__track {
  position: absolute; top: 0; left: 0;
  width: 200vw; height: 100%;
  will-change: transform;
  animation: mc-drift 120s linear infinite;
}
.mc-sky__track--far { animation-duration: 260s; opacity: 0.55; }

.mc-star {
  position: absolute; display: block;
  width: 2.5px; height: 2.5px; border-radius: 50%;
  background: #e6f6ff;
  animation: mc-twinkle 3.8s ease-in-out infinite;
}
.mc-star--soft { background: #bfeaff; width: 2px; height: 2px; }
.mc-star--dim { background: #9fd8ff; width: 1.6px; height: 1.6px; opacity: 0.7; }
.mc-star:nth-child(3n) { animation-delay: 1.3s; }
.mc-star:nth-child(3n + 1) { animation-delay: 2.5s; }
.mc-star:nth-child(4n) { animation-duration: 5.2s; }

/* Distant planet, low in the corner, deliberately dim. */
.mc-planet {
  position: absolute; left: -90px; bottom: -140px;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(120% 120% at 42% 16%,
    #24344f 0%, #16223a 42%, #0a1120 78%);
  box-shadow: 0 0 90px rgba(0, 212, 255, 0.08);
  opacity: 0.8;
}

/* The craft: the landing rocket, small, gliding right-to-left with a calm
 * bob. Two nested elements so glide and bob stay independent transforms. */
.mc-craft {
  position: absolute; top: 16%; left: 0; width: 100%; height: 60px;
  animation: mc-glide 240s linear infinite;
}
.mc-craft__bob { animation: mc-bob 7s ease-in-out infinite; width: 44px; opacity: 0.55; }
.mc-craft svg { display: block; transform: rotate(-90deg); }

@keyframes mc-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes mc-twinkle { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes mc-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes mc-glide {
  from { transform: translateX(104vw); }
  to { transform: translateX(-10vw); }
}

/* Mission content rides above the sky on its own stacking context. */
.mc-content { position: relative; z-index: 1; isolation: isolate; }

@media (max-width: 640px) {
  /* Small screens drop the far track everywhere; the craft stays on the
   * LANDING (Felix: the rocket is the point) - one transform animation. */
  .mc-sky__track--far { display: none; }
  .mc-sky:not(.mc-sky--landing) .mc-craft { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mc-sky__track, .mc-star, .mc-craft, .mc-craft__bob {
    animation: none !important;
  }
}