:root { color-scheme: dark; --ink: #f9f4e8; --muted: #b8c2d0; --accent: #edc57e; --space: #060d19; }

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: var(--space); }

body { color: var(--ink); font-family: "Segoe UI", Arial, sans-serif; -webkit-font-smoothing: antialiased; }

button, a { -webkit-tap-highlight-color: transparent; }

button { font: inherit; cursor: pointer; }

button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 7px; }

.mission { position: relative; min-height: 640px; height: 100svh; overflow: hidden; isolation: isolate; }

.scene, .scene-art, .scene-shade, .stars, .navigation-orbits, .foreground-motes { position: absolute; inset: 0; pointer-events: none; }

.scene { z-index: -2; overflow: hidden; }

.scene-art {
  background:
    radial-gradient(circle at 50% 35%, rgba(20, 42, 72, 0.38) 0%, transparent 45%),
    linear-gradient(180deg, #07111f 0%, #040b16 55%, #020711 100%);
  transform: scale(1.025) translate(var(--parallax-x, 0px), var(--parallax-y, 0px));
  transition: transform 1.3s ease-out, filter 5s;
}
.scene-shade { background: linear-gradient(180deg, #040b18a6 0%, transparent 18%, transparent 52%, #030a1766 65%, #030915de 87%, #030915f5 100%); }

.masthead { position: absolute; top: 30px; left: 3.5%; right: 3.5%; display: flex; align-items: center; justify-content: space-between; z-index: 5; }

.brand { display: inline-flex; gap: 10px; align-items: center; color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 600; letter-spacing: 4px; }

.brand svg { width: 34px; height: 34px; fill: none; stroke: var(--accent); stroke-width: 1; }

.brand .orbit-dot { fill: var(--accent); }

.brand-caption { display: none; }

.mission-index { display: flex; align-items: center; gap: 12px; font-size: 8px; letter-spacing: 2px; color: #e1d9c9; }

.index-line { width: 22px; height: 1px; background: #c7b79277; }

.edition { color: #c7b792; margin-left: 8px; }

.intro { position: absolute; bottom: 11.5%; left: 4%; right: 4%; z-index: 2; text-align: center; transition: opacity 1.3s, transform 2s; }

.eyebrow { display: flex; justify-content: center; align-items: center; gap: 14px; font-size: 9px; letter-spacing: 4px; font-weight: 500; color: #f0d6a9; }

.intro .eyebrow span { width: 35px; height: 1px; background: #e2c38a77; }

h1 { margin: 13px 0 23px; color: var(--ink, #f9f4e8); font-family: Georgia, "Times New Roman", serif; font-size: clamp(46px, 5.2vw, 88px); line-height: 1.06; letter-spacing: -2px; font-weight: 400; text-shadow: 0 3px 24px #020713, 0 1px 4px #020713; }
h1 span { color: #f3d29a; }

.launch-button { position: relative; display: inline-flex; justify-content: space-between; align-items: center; gap: 43px; min-height: 55px; padding: 0 25px 0 30px; border-radius: 2px; border: 1px solid #ffe4ad; background: linear-gradient(120deg, #edcc92, #e4b96d); color: #20202a; font-size: 13px; font-weight: 650; letter-spacing: .6px; box-shadow: 0 0 0 4px #e9c57e0d, 0 5px 30px #dfa44926, inset 0 1px #fff3d1; transition: transform .25s, box-shadow .3s, background .3s; }

.launch-button::before, .launch-button::after { content: ""; position: absolute; top: 50%; width: 50px; height: 1px; background: linear-gradient(90deg, transparent, #e2c38a99); right: calc(100% + 18px); }

.launch-button::after { left: calc(100% + 18px); right: auto; transform: rotate(180deg); }

.launch-button svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.5; transition: transform .3s; }

.launch-button:hover { background: #f6d79e; transform: translateY(-3px); box-shadow: 0 0 0 4px #e9c57e18, 0 8px 40px #dca74c44; }

.launch-button:hover svg { transform: translateX(4px); }

.launch-button:active { transform: translateY(0) scale(.98); }

.launch-button:disabled { cursor: default; }

.launch-caption { font-size: 7px; letter-spacing: 2.6px; color: #c2c8d2; margin-top: 17px; }

.mission-footer { position: absolute; bottom: 22px; left: 3.5%; right: 3.5%; display: flex; align-items: center; justify-content: space-between; z-index: 7; }

.location { display: flex; align-items: center; gap: 10px; font-size: 7px; letter-spacing: 1.5px; color: #c9cfd7; }

.indonesia-flag { width: 19px; height: 12px; background: linear-gradient(#db484b 50%, #eee9df 50%); border-radius: 1px; }

.location-detail { display: block; font-size: 6px; color: #9daabc; letter-spacing: 1.7px; margin-top: 6px; }

.flight-status { display: flex; align-items: center; gap: 8px; font-size: 6px; letter-spacing: 1.5px; color: #a9b5c6; }

.status-dot { width: 4px; height: 4px; display: inline-block; flex: 0 0 auto; border-radius: 50%; background: #b4cdbf; }

.audio-control { display: flex; gap: 9px; align-items: center; min-height: 44px; padding: 8px 0 8px 12px; border: 0; color: #c1cbd9; background: transparent; font-size: 7px; letter-spacing: 1.4px; transition: color .2s; }

.audio-control:hover { color: #fff; }

.speaker-icon { width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }

.sound-slash, .is-muted .sound-waves { display: none; }

.is-muted .sound-slash { display: block; }

.navigation-orbits { width: 100%; height: 100%; fill: none; stroke: #dfbc76; stroke-width: .65; opacity: .5; transform: translate(var(--orbit-x, 0px), var(--orbit-y, 0px)); transition: transform 1.8s ease-out; }

.orbit-secondary { opacity: .32; stroke-dasharray: 2 12; }

.navigation-point { fill: #ffe0a6; stroke: none; }

.foreground-motes { transform: translate(var(--foreground-x, 0px), var(--foreground-y, 0px)); transition: transform 1.1s ease-out; }

.foreground-motes i { position: absolute; bottom: 19%; left: 16%; width: 3px; height: 3px; border-radius: 50%; background: #f4d19b; box-shadow: 0 0 8px #d9ae6880; animation: mote-rise 14s ease-in-out infinite; }

.foreground-motes i:nth-child(2) { bottom: 28%; left: 80%; animation-delay: -4s; width: 2px; height: 2px; }

.foreground-motes i:nth-child(3) { bottom: 12%; left: 69%; animation-delay: -8s; }

.foreground-motes i:nth-child(4) { bottom: 37%; left: 27%; animation-delay: -11s; width: 1px; height: 1px; }

.stars i { position: absolute; width: 2px; height: 2px; background: #dbeeff; border-radius: 50%; animation: twinkle 5s ease-in-out infinite alternate; }

.stars i:nth-child(1) { top: 20%; left: 30%; }

.stars i:nth-child(2) { top: 13%; left: 60%; animation-delay: -2s; }

.stars i:nth-child(3) { top: 26%; left: 89%; animation-delay: -3s; }

.stars i:nth-child(4) { top: 11%; left: 44%; animation-delay: -4s; }

.stars i:nth-child(5) { top: 37%; left: 52%; animation-delay: -1s; }

.stars i:nth-child(6) { top: 9%; left: 12%; animation-delay: -2.5s; }

.vapor { position: absolute; left: 24%; top: 58%; width: 18%; height: 8%; border-radius: 50%; background: radial-gradient(ellipse, #c3ccdd26, transparent 65%); filter: blur(9px); animation: vapor-drift 12s ease-in-out infinite; }

.vapor-two { left: 30%; top: 62%; animation-delay: -6s; }

.engine-glow { position: absolute; left: 23%; top: 53%; width: 18%; height: 18%; background: radial-gradient(ellipse, #ffb96640, transparent 70%); opacity: .15; mix-blend-mode: screen; transition: opacity 2s, transform 5s; }

.beacon { position: absolute; left: 39%; top: 9%; height: 3px; width: 3px; border-radius: 50%; background: #f3b96e; animation: beacon 4s ease-in-out infinite; }

.preparation { position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%); width: min(290px, 75%); display: grid; gap: 12px; text-align: center; opacity: 0; transition: opacity 1s; pointer-events: none; font-size: 12px; color: #e2e6ec; z-index: 4; }
.preparation-label { font-size: 7px; letter-spacing: 3px; color: var(--accent); }

.preparation-track { height: 1px; width: 100%; background: #d0d7e733; margin-top: 4px; }

.preparation-track span { height: 100%; width: 100%; display: block; transform: scaleX(0); transform-origin: left; background: var(--accent); }

.is-preparing .intro { opacity: 0; transform: translateY(-12px); pointer-events: none; transition: opacity .7s .25s, transform 1.1s; }
.is-preparing .launch-button { animation: launch-confirm .45s ease-out both; }
.is-preparing .scene-art { transform: scale(1.09); transition: transform 7s ease-in-out; }

.is-preparing .engine-glow { opacity: 1; transform: scale(1.8); }

.is-preparing .beacon { animation-duration: 1s; }

.is-preparing .preparation { opacity: 1; }

.mission-ending { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #040c19f2; backdrop-filter: blur(8px); text-align: center; opacity: 0; transition: opacity 1.8s; padding: 30px; }
.mission-ending[hidden] { display: none; }

.is-complete .mission-ending { opacity: 1; }

.mission-ending .eyebrow { margin: 34px 0 8px; font-size: 8px; }

.mission-ending h2 { font-family: Georgia, serif; font-size: clamp(30px, 4vw, 56px); letter-spacing: -1px; font-weight: 400; margin: 12px 0; outline: none; }

.mission-ending > p:not(.eyebrow) { font-size: 13px; color: #a9b8cd; }

.ending-orbit { width: 64px; height: 64px; border: 1px solid #e8c48b88; border-radius: 50%; position: relative; transform: rotate(-30deg); }

.ending-orbit::after { content: ""; position: absolute; inset: 20px -20px; border: 1px solid #d9b89a66; border-radius: 50%; }

.ending-orbit span { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); right: 5px; top: 6px; }

.replay-button { margin-top: 28px; padding: 12px 16px; background: transparent; border: 1px solid #d9e0eb33; border-radius: 2px; color: #c0cada; font-size: 11px; }

.replay-button span { margin-right: 8px; font-size: 16px; }

.replay-button:hover { border-color: #f3b78a88; color: var(--accent); }

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

.noscript-note { position: absolute; bottom: 80px; width: 100%; text-align: center; font-size: 12px; color: #fff; }

@keyframes twinkle { from { opacity: .15; } to { opacity: .8; } }

@keyframes mote-rise { 0%, 100% { opacity: 0; transform: translate(0, 12px); } 30%, 60% { opacity: .6; } 90% { opacity: 0; transform: translate(18px, -60px); } }

@keyframes vapor-drift { 0% { transform: translate(-12px, 12px) scale(.7); opacity: 0; } 45% { opacity: .6; } 100% { transform: translate(-70px, -23px) scale(1.6); opacity: 0; } }

@keyframes beacon { 0%, 80%, 100% { opacity: .15; } 85%, 92% { opacity: .8; } }

@media (max-aspect-ratio: 4/3) and (min-width: 701px) { .scene-art { background-position: 56% top; } .intro { bottom: 13%; } h1 { font-size: clamp(48px, 7vw, 76px); } h1 span { display: block; } .flight-status { display: none; } }

@media (min-aspect-ratio: 2/1) { .scene-art { background-position: center 24%; } .intro { bottom: 12%; } h1 { font-size: 58px; } }

@media (max-width: 700px) {

  .mission { min-height: 640px; }

  .masthead { top: 22px; left: 6%; right: 6%; }

  .brand { font-size: 12px; letter-spacing: 3px; gap: 8px; }

  .brand svg { width: 27px; height: 27px; }

  .mission-index { font-size: 6px; letter-spacing: 1px; gap: 0; }

  .mission-index .index-line, .mission-index .edition { display: none; }



  .scene-shade { background: linear-gradient(180deg, #040b1899, transparent 16%, transparent 50%, #03091555 61%, #030915ed 89%, #030915 100%); }

  .intro { bottom: 12%; left: 5%; right: 5%; }

  .eyebrow { font-size: 6px; letter-spacing: 2.8px; gap: 10px; }

  .intro .eyebrow span { width: 19px; }

  h1 { font-size: clamp(40px, 10vw, 60px); letter-spacing: -1.3px; line-height: 1.02; margin: 12px 0 22px; }

  h1 span { display: block; margin-top: 3px; font-size: 1.2em; }

  .launch-button { min-height: 51px; padding: 0 21px 0 26px; gap: 32px; font-size: 12px; }

  .launch-button::before, .launch-button::after { width: 27px; }

  .launch-caption { font-size: 6px; letter-spacing: 1.8px; margin-top: 15px; }

  .mission-footer { left: 6%; right: 6%; bottom: 15px; }

  .location { font-size: 6px; letter-spacing: .8px; gap: 8px; }

  .location-detail { font-size: 5px; letter-spacing: 1px; }

  .flight-status { display: none; }

  .audio-control { font-size: 6px; letter-spacing: .7px; gap: 6px; }

  .engine-glow { left: 13%; top: 48%; width: 30%; }

  .vapor { left: 13%; top: 51%; width: 30%; }

  .beacon { display: none; }

  .navigation-orbits { opacity: .24; }

  .preparation { bottom: 13%; }
  .is-preparing .scene-art { transform: scale(1.055); }

}

@media (max-height: 700px) and (min-width: 701px) { .intro { bottom: 13%; } h1 { margin: 10px 0 17px; font-size: 54px; } .launch-caption { margin-top: 12px; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; } .scene-art, .is-preparing .scene-art, .navigation-orbits, .foreground-motes { transform: none; } .navigation-point { display: none; } }

.is-backgrounded *, .is-backgrounded *::before, .is-backgrounded *::after { animation-play-state: paused !important; }

/* Flight is driven by one shared JS timeline; no unrelated animation timers. */
.launch-stage { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; overflow: hidden; }
.launch-stage[hidden] { display: none; }
.launch-sky { position: absolute; inset: -3%; background: radial-gradient(ellipse at 50% 70%, #14263a 0%, #081424 43%, #030a16 80%); }
.launch-horizon { position: absolute; width: 150%; height: 30%; left: -25%; bottom: -20%; border: 1px solid #edc57e44; border-radius: 50%; box-shadow: 0 -12px 90px #abc6e412, 0 -1px 18px #edc57e18; }
.launch-bloom { position: absolute; left: 50%; top: 52%; width: min(75vw, 720px); height: 75%; transform: translate(-50%, -30%); background: radial-gradient(ellipse, #ffe3b855, #d8974318 33%, transparent 68%); opacity: 0; mix-blend-mode: screen; }
.launch-particles { position: absolute; inset: 0; width: 100%; height: 100%; }
.launch-vehicle { position: absolute; top: 17%; left: 50%; width: clamp(116px, 12vw, 174px); aspect-ratio: 1 / 3; transform: translate3d(-50%, 110vh, 0); will-change: transform; --engine-power: 0; --plume-length: .2; }
.rocket-body { position: relative; display: block; width: 100%; height: 100%; z-index: 2; filter: drop-shadow(0 0 12px #b7d5ff18); }
.engine-aura { position: absolute; width: 180%; height: 75%; top: 68%; left: -40%; background: radial-gradient(ellipse, #fff1c877, #e7a4472b 30%, transparent 68%); opacity: var(--engine-power); mix-blend-mode: screen; }
.exhaust-plume { position: absolute; top: 94%; left: 35%; width: 30%; height: 55%; transform-origin: 50% 0; transform: scaleY(var(--plume-length)); opacity: var(--engine-power); background: linear-gradient(180deg, #f8fdff 0%, #c6dcff 9%, #fff4cf 21%, #ffc677 45%, #da83355c 73%, transparent 98%); border-radius: 28% 28% 50% 50% / 5% 5% 95% 95%; filter: blur(1.8px); }
.exhaust-core { position: absolute; inset: 0 26% 23%; border-radius: 15% 15% 50% 50% / 5% 5% 95% 95%; background: linear-gradient(#fff, #ecf6ff 25%, #fff3d6 60%, transparent); }
.launch-vignette { position: absolute; inset: 0; background: linear-gradient(0deg, #040c19dd, transparent 27%, transparent 82%, #040c1980); }
.is-preparing .masthead { opacity: .65; transition: opacity 1s; }
.is-complete .masthead { opacity: 1; }
@keyframes launch-confirm { 0% { transform: scale(1); } 35% { transform: scale(.96); box-shadow: 0 0 0 8px #e9c57e18, 0 0 55px #dca74c66; } 100% { transform: scale(1.015); } }
@media (max-width: 700px) { .launch-vehicle { top: 18%; width: clamp(108px, 27vw, 140px); } .launch-bloom { top: 53%; width: 130vw; } }
@media (max-height: 700px) and (min-width: 701px) { .launch-vehicle { width: 118px; top: 12%; } }
@media (prefers-reduced-motion: reduce) { .launch-vehicle { will-change: auto; } .launch-particles { display: none; } }

/* Directional Venus ↔ Earth travel. Planet rendering stays inside each scene;
   these temporary classes only coordinate the cinematic panorama handoff. */
.is-planet-transitioning .earth-scene,
.is-planet-transitioning .venus-scene { pointer-events: none; }
.planet-transition-layer { background: transparent !important; }
.planet-transition-layer .earth-space-haze,
.planet-transition-layer .earth-edge-shade,
.planet-transition-layer .venus-space-haze,
.planet-transition-layer .venus-edge-shade { opacity: 0 !important; }
.planet-transition-source .earth-information,
.planet-transition-target .earth-information,
.planet-transition-source .venus-caption,
.planet-transition-target .venus-caption,
.planet-transition-source .venus-credit,
.planet-transition-target .venus-credit {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Global panorama hero lifecycle. The mission transition state starts on the same
   click that starts physical recede. From that moment until final settle, no
   planet/object hero UI may ride along with the camera. This intentionally copies
   the compact Earth exit language: fast fade + small translated retreat. */
.mission.is-planet-transitioning :is(
  .earth-information,
  .mars-caption,
  .venus-caption,
  .mercury-caption,
  .sun-caption,
  .asteroid-caption,
  .jupiter-caption,
  .saturn-caption,
  .uranus-caption,
  .neptune-caption
) {
  opacity: 0 !important;
  transform: translate3d(-8px, 5px, 0) !important;
  pointer-events: none !important;
  transition: opacity .45s ease, transform .55s ease !important;
}

.mission.is-planet-transitioning :is(
  .mars-credit,
  .venus-credit,
  .mercury-credit,
  .sun-credit,
  .jupiter-credit,
  .saturn-credit,
  .uranus-credit,
  .neptune-credit
) {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .3s ease !important;
}

@media (prefers-reduced-motion: reduce) {
  .mission.is-planet-transitioning :is(
    .earth-information,
    .mars-caption,
    .venus-caption,
    .mercury-caption,
    .sun-caption,
    .asteroid-caption,
    .jupiter-caption,
    .saturn-caption,
    .uranus-caption,
    .neptune-caption
  ) {
    transition-duration: .01ms !important;
  }
}

/* ================================================================
   OPENING EXPERIENCE V2
   Hand-built vector scene + staged launch. The planet systems below
   remain untouched; this layer only owns the pre-Earth experience.
   ================================================================ */
.mission:not(.is-earth):not(.is-venus):not(.is-mars) .scene { z-index: 0; }
.scene { background: #030914; }
.scene-art {
  background:
    radial-gradient(circle at 50% 29%, rgba(79, 128, 169, .24), transparent 34%),
    radial-gradient(ellipse at 18% 48%, rgba(49, 80, 115, .18), transparent 34%),
    radial-gradient(ellipse at 84% 36%, rgba(157, 119, 73, .10), transparent 28%),
    linear-gradient(180deg, #071321 0%, #06101c 46%, #030914 100%);
  transform: scale(1.035) translate(var(--parallax-x, 0px), var(--parallax-y, 0px));
  transition: transform 1.6s cubic-bezier(.2,.7,.2,1), filter 3s ease, opacity 1s ease;
}
.scene-art::before,
.scene-art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.scene-art::before {
  background-image:
    radial-gradient(circle, rgba(219,235,255,.72) 0 1px, transparent 1.35px),
    radial-gradient(circle, rgba(237,197,126,.65) 0 .8px, transparent 1.2px);
  background-size: 98px 98px, 157px 157px;
  background-position: 8px 12px, 41px 64px;
  opacity: .32;
  animation: sky-drift 34s linear infinite;
}
.scene-art::after {
  background:
    radial-gradient(ellipse at 50% 26%, transparent 0 28%, rgba(2,7,15,.18) 66%, rgba(2,7,15,.58) 100%),
    linear-gradient(180deg, rgba(3,9,20,.12), rgba(3,9,20,.02) 48%, rgba(3,9,20,.42) 100%);
}
.cosmic-ribbon {
  position: absolute;
  width: 72vw;
  height: 16vw;
  min-height: 110px;
  border-radius: 50%;
  filter: blur(28px);
  opacity: .12;
  mix-blend-mode: screen;
  transform: rotate(-13deg);
  animation: ribbon-breathe 11s ease-in-out infinite alternate;
}
.cosmic-ribbon-one { top: 3%; left: -7%; background: linear-gradient(90deg, transparent, #6b9fc7, #b3d0e3, transparent); }
.cosmic-ribbon-two { top: 23%; right: -28%; background: linear-gradient(90deg, transparent, #b78d61, #557b9c, transparent); animation-delay: -5s; }
.opening-world {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: translate(calc(var(--parallax-x, 0px) * .35), calc(var(--parallax-y, 0px) * .35));
  transition: transform 1.7s cubic-bezier(.2,.7,.2,1), opacity 1s ease, filter 2s ease;
}
.world-distant { transform-origin: 50% 55%; animation: horizon-breathe 12s ease-in-out infinite alternate; }
.launch-facility { transform-origin: 50% 70%; }
.observatory { transform-origin: 50% 100%; animation: observatory-idle 9s ease-in-out infinite alternate; }
.deck-lights circle { animation: deck-light 4.6s ease-in-out infinite; }
.deck-lights circle:nth-child(2), .deck-lights circle:nth-child(5) { animation-delay: -1.7s; }
.deck-lights circle:nth-child(3), .deck-lights circle:nth-child(6) { animation-delay: -3.1s; }
.crew { transform-box: fill-box; transform-origin: 50% 100%; animation: crew-breathe 5.4s ease-in-out infinite; }
.crew-b { animation-delay: -1.9s; }
.crew-c { animation-delay: -3.2s; }
.crew-pointing-arm { transform-box: fill-box; transform-origin: 0% 100%; animation: pointing-gesture 4.8s ease-in-out infinite; }
.crew-ponytail { transform-box: fill-box; transform-origin: 10% 10%; animation: ponytail-sway 4.6s ease-in-out infinite; }
.crew-tablet { filter: drop-shadow(0 0 5px rgba(112, 198, 239, .28)); animation: tablet-pulse 3.8s ease-in-out infinite; }

.hero-craft-wrap {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 9.5%;
  width: clamp(102px, 8.7vw, 142px);
  aspect-ratio: 1 / 3;
  transform: translate3d(-50%, 0, 0);
  transform-origin: 50% 84%;
  transition: opacity .4s ease, filter .8s ease;
  filter: drop-shadow(0 22px 38px rgba(0,0,0,.34));
}
.hero-craft { position: relative; z-index: 2; display: block; width: 100%; height: 100%; }
.hero-craft-halo {
  position: absolute;
  z-index: 0;
  left: -90%;
  top: 26%;
  width: 280%;
  height: 66%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(119,181,222,.12), rgba(237,197,126,.05) 40%, transparent 69%);
  filter: blur(10px);
  animation: craft-halo 5s ease-in-out infinite alternate;
}
.hero-craft-engine {
  position: absolute;
  z-index: 1;
  left: 31%;
  top: 90%;
  width: 38%;
  height: 25%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,244,207,.5), rgba(242,168,82,.2) 35%, transparent 72%);
  opacity: .18;
  filter: blur(5px);
  transform-origin: 50% 0;
  animation: engine-idle 2.7s ease-in-out infinite;
}
.hero-craft-label {
  position: absolute;
  left: 50%;
  top: 65%;
  display: flex;
  gap: 7px;
  align-items: center;
  transform: translateX(calc(-50% + 92px));
  padding: 7px 9px;
  border: 1px solid rgba(214, 193, 151, .25);
  background: rgba(5, 13, 23, .64);
  backdrop-filter: blur(8px);
  color: rgba(232, 222, 199, .74);
  font-size: 6px;
  letter-spacing: 1.8px;
  white-space: nowrap;
}
.hero-craft-label i { width: 5px; height: 5px; border-radius: 50%; background: #9bc7ae; box-shadow: 0 0 8px rgba(155,199,174,.5); animation: status-pulse 2.6s ease-in-out infinite; }

.scene-shade {
  z-index: 3;
  background:
    linear-gradient(90deg, rgba(2,7,15,.36), transparent 28%, transparent 72%, rgba(2,7,15,.28)),
    linear-gradient(180deg, rgba(3,9,20,.48) 0%, transparent 17%, transparent 55%, rgba(3,9,20,.23) 67%, rgba(3,9,20,.83) 91%, rgba(3,9,20,.96) 100%);
}
.navigation-orbits { z-index: 4; opacity: .32; }
.foreground-motes, .stars { z-index: 4; }
.stars i { box-shadow: 0 0 8px rgba(207,230,255,.5); }
.vapor { z-index: 2; left: 40%; top: 56%; width: 20%; height: 9%; opacity: .55; }
.vapor-two { left: 48%; top: 59%; }
.beacon { z-index: 3; left: calc(50% - 92px); top: 19%; }

.masthead { z-index: 10; }
.intro {
  z-index: 8;
  bottom: 8.4%;
  text-shadow: 0 2px 24px rgba(0,0,0,.36);
}
.intro .eyebrow { color: #ead4aa; }
h1 { margin: 11px 0 20px; font-size: clamp(47px, 5vw, 82px); text-shadow: 0 7px 30px #01050d, 0 2px 7px #01050d; }
.launch-button {
  min-height: 57px;
  border-radius: 999px;
  padding: 0 24px 0 30px;
  gap: 36px;
  box-shadow: 0 0 0 5px rgba(233,197,126,.07), 0 12px 40px rgba(220,167,76,.20), inset 0 1px rgba(255,255,255,.55);
}
.launch-button::before, .launch-button::after { width: 42px; }
.launch-caption { color: rgba(199,210,224,.82); letter-spacing: 2.2px; }
.mission-footer { z-index: 10; }

/* The visible hero craft and the cinematic craft share the exact same silhouette and screen anchor. */
.launch-stage { z-index: 12; background: transparent; }
.launch-sky {
  inset: -4%;
  opacity: var(--space-mix, 0);
  background:
    radial-gradient(circle at 50% 44%, rgba(30,78,120,.20), transparent 28%),
    radial-gradient(ellipse at 50% 70%, #132840 0%, #071422 45%, #020712 82%);
  transition: none;
}
.launch-horizon {
  width: 160%;
  height: 34%;
  left: -30%;
  bottom: -24%;
  opacity: calc(1 - var(--space-mix, 0));
  border-color: rgba(237,197,126,.30);
  box-shadow: 0 -12px 80px rgba(171,198,228,.07), 0 -1px 20px rgba(237,197,126,.10);
}
.launch-bloom { top: 48%; width: min(82vw, 790px); height: 83%; }
.launch-vehicle {
  top: 9.5%;
  width: clamp(102px, 8.7vw, 142px);
  transform: translate3d(-50%, 0, 0);
  filter: drop-shadow(0 22px 38px rgba(0,0,0,.34));
}
.launch-vignette {
  background:
    radial-gradient(circle at 50% 48%, transparent 0 30%, rgba(2,7,15,.05) 56%, rgba(2,7,15,.34) 100%),
    linear-gradient(0deg, rgba(2,7,15,.88), transparent 24%, transparent 80%, rgba(2,7,15,.38));
}
.flight-grid {
  position: absolute;
  inset: 0;
  opacity: var(--grid-opacity, 0);
  perspective: 600px;
  overflow: hidden;
}
.flight-grid::before,
.flight-grid::after,
.flight-grid i {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 72vh;
  transform-origin: 50% 0;
  background: linear-gradient(180deg, rgba(152,199,232,.48), transparent);
  filter: blur(.3px);
}
.flight-grid::before { transform: translate(-50%, -3%) rotate(22deg); }
.flight-grid::after { transform: translate(-50%, -3%) rotate(-22deg); }
.flight-grid i:nth-child(1) { transform: translate(-50%, -3%) rotate(42deg); }
.flight-grid i:nth-child(2) { transform: translate(-50%, -3%) rotate(-42deg); }
.flight-grid i:nth-child(3) { transform: translate(-50%, -3%) rotate(70deg); opacity: .45; }
.arrival-earth {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 48%;
  width: min(48vh, 42vw);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.08);
  background: #0d3152 url("assets/textures/earth-blue-marble-4k.jpg") center / auto 100%;
  box-shadow:
    inset -6.5vw -1.5vw 8vw rgba(0,4,12,.88),
    inset 1vw .8vw 2vw rgba(191,226,255,.12),
    0 0 2px rgba(188,226,255,.8),
    0 0 35px rgba(76,151,213,.28),
    0 0 110px rgba(41,111,174,.13);
  filter: saturate(.88) contrast(1.05);
  will-change: transform, opacity;
}
.arrival-earth::after {
  content: "";
  position: absolute;
  inset: -1.7%;
  border-radius: 50%;
  border: 1px solid rgba(147,205,245,.40);
  box-shadow: 0 0 13px rgba(101,184,235,.28);
}
.arrival-earth-shine {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 27% 22%, rgba(255,255,255,.12), transparent 23%);
  mix-blend-mode: screen;
}

.is-preparing .scene-art { transform: scale(1.055) translate(var(--parallax-x, 0px), var(--parallax-y, 0px)); filter: saturate(.82) brightness(.72); }
.is-preparing .opening-world { filter: brightness(.72) saturate(.78); }
.is-preparing .hero-craft-wrap { opacity: 0; transition-delay: .16s; }
.is-preparing .crew-a { animation: crew-react-left .85s cubic-bezier(.2,.8,.2,1) both; }
.is-preparing .crew-b { animation: crew-react-center .9s cubic-bezier(.2,.8,.2,1) both; }
.is-preparing .crew-c { animation: crew-react-right .9s cubic-bezier(.2,.8,.2,1) both; }
.is-preparing .preparation { z-index: 14; bottom: 7.8%; }
.is-preparing .masthead { z-index: 15; opacity: .7; }

@keyframes sky-drift { to { background-position: 106px 34px, 190px 86px; } }
@keyframes ribbon-breathe { from { transform: rotate(-13deg) translate3d(-1%, 0, 0) scale(.96); opacity: .07; } to { transform: rotate(-10deg) translate3d(2%, -1%, 0) scale(1.05); opacity: .15; } }
@keyframes horizon-breathe { from { opacity: .86; } to { opacity: 1; } }
@keyframes observatory-idle { from { transform: translateY(0); } to { transform: translateY(-2px); } }
@keyframes deck-light { 0%,70%,100% { opacity: .3; } 78%,86% { opacity: 1; filter: drop-shadow(0 0 5px rgba(237,197,126,.7)); } }
@keyframes crew-breathe { 0%,100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-1px) scaleY(1.006); } }
@keyframes pointing-gesture { 0%,100% { transform: rotate(0deg); } 48% { transform: rotate(-3deg); } }
@keyframes ponytail-sway { 0%,100% { transform: rotate(-1deg); } 50% { transform: rotate(4deg); } }
@keyframes tablet-pulse { 0%,100% { opacity: .78; } 50% { opacity: 1; } }
@keyframes craft-halo { from { opacity: .48; transform: scale(.96); } to { opacity: .9; transform: scale(1.04); } }
@keyframes engine-idle { 0%,100% { opacity: .09; transform: scaleY(.82); } 50% { opacity: .22; transform: scaleY(1.08); } }
@keyframes status-pulse { 0%,100% { opacity: .45; } 45%,60% { opacity: 1; } }
@keyframes crew-react-left { to { transform: translateY(2px) rotate(-1deg); } }
@keyframes crew-react-center { to { transform: translateY(3px) rotate(1.2deg); } }
@keyframes crew-react-right { to { transform: translateY(2px) rotate(-1.1deg); } }

@media (max-aspect-ratio: 4/3) and (min-width: 701px) {
  .hero-craft-wrap, .launch-vehicle { top: 12%; width: clamp(96px, 11vw, 128px); }
  .intro { bottom: 9.5%; }
}

@media (max-width: 700px) {
  .scene-art { background: radial-gradient(circle at 50% 28%, rgba(76,124,165,.28), transparent 38%), linear-gradient(180deg, #071321 0%, #06101c 45%, #030914 100%); }
  .opening-world { width: 177.8vh; left: 50%; right: auto; transform: translateX(-50%); }
  .hero-craft-wrap, .launch-vehicle { top: 12.5%; width: clamp(82px, 22vw, 108px); }
  .hero-craft-label { top: 64%; transform: translateX(calc(-50% + 64px)); padding: 5px 7px; font-size: 5px; letter-spacing: 1.1px; }
  .scene-shade { background: linear-gradient(180deg, rgba(3,9,20,.38) 0%, transparent 16%, transparent 48%, rgba(3,9,20,.30) 64%, rgba(3,9,20,.94) 89%, #030914 100%); }
  .navigation-orbits { opacity: .18; }
  .intro { bottom: 8.2%; left: 6%; right: 6%; }
  .intro .eyebrow { font-size: 5.7px; letter-spacing: 2.2px; }
  h1 { font-size: clamp(39px, 11vw, 58px); margin: 10px 0 18px; }
  h1 span { font-size: 1.08em; }
  .launch-button { min-height: 52px; padding: 0 19px 0 24px; gap: 27px; }
  .launch-caption { max-width: 290px; margin-inline: auto; line-height: 1.5; }
  .is-preparing .preparation { bottom: 9.5%; }
  .arrival-earth { width: min(55vh, 82vw); }
  .flight-grid i:nth-child(3) { display: none; }
}

@media (max-height: 700px) and (min-width: 701px) {
  .hero-craft-wrap, .launch-vehicle { top: 8%; width: 92px; }
  .intro { bottom: 7%; }
  .launch-caption { display: none; }
  .opening-world { transform: translateY(-3%); }
}

@media (prefers-reduced-motion: reduce) {
  .opening-world, .hero-craft-wrap { transform: none; }
  .hero-craft-wrap { left: 50%; transform: translateX(-50%); }
  .cosmic-ribbon, .crew, .crew-pointing-arm, .crew-ponytail, .deck-lights circle { animation: none !important; }
}

/* =============================================================
   ANTARA cockpit journey
   Layered first-person launch experience. Planet scenes below are untouched.
   ============================================================= */

.brand-caption { display: block; margin-top: 4px; font-size: 5.5px; letter-spacing: 2.2px; color: rgba(225,217,201,.66); font-weight: 500; }
.intro { bottom: 9%; z-index: 8; }
.intro-copy { width: min(560px, 76vw); margin: -8px auto 20px; color: rgba(211,220,231,.84); font-size: clamp(11px, 1.05vw, 14px); line-height: 1.65; text-shadow: 0 2px 15px rgba(0,0,0,.55); }
.scene-art { background: radial-gradient(circle at 50% 24%, rgba(39,82,128,.24), transparent 35%), linear-gradient(180deg,#061222 0%,#071627 48%,#030a14 100%); }
.scene-shade { background: linear-gradient(180deg, rgba(2,7,15,.30), transparent 20%, transparent 66%, rgba(2,7,15,.72) 100%); }

.launch-stage {
  --space-mix: 0;
  --earth-reveal: 0;
  --handoff: 0;
  --engine-power: 0;
  --cam-x: 0px;
  --cam-y: 0px;
  --cam-tilt: 0deg;
  --char-a-x: 0px;
  --char-a-y: 0px;
  --char-b-x: 0px;
  --char-b-y: 0px;
  position: absolute;
  inset: 0;
  z-index: 4;
  display: block;
  overflow: hidden;
  opacity: 1;
  pointer-events: none;
  background: #061321;
  transition: opacity .8s ease;
}
.launch-stage[hidden] { display: none; }
.cockpit-world { position: absolute; inset: 0; overflow: hidden; transform: translate3d(calc(var(--cam-x) * -.2), calc(var(--cam-y) * -.2), 0) scale(1.018); transform-origin: 50% 50%; }
.launch-sky {
  position: absolute;
  inset: -8%;
  opacity: 1;
  transform: scale(calc(1 + var(--space-mix) * .055));
  background:
    radial-gradient(circle at 78% 17%, rgba(216,232,248,.9) 0 1px, transparent 1.7px),
    radial-gradient(circle at 61% 13%, rgba(216,232,248,.7) 0 1px, transparent 1.7px),
    radial-gradient(circle at 32% 19%, rgba(216,232,248,.65) 0 1px, transparent 1.7px),
    radial-gradient(circle at 50% 24%, rgba(112,166,212,.20), transparent 24%),
    linear-gradient(180deg,
      color-mix(in srgb, #17395e calc((1 - var(--space-mix)) * 100%), #020713 calc(var(--space-mix) * 100%)) 0%,
      color-mix(in srgb, #315d7d calc((1 - var(--space-mix)) * 100%), #050b18 calc(var(--space-mix) * 100%)) 48%,
      color-mix(in srgb, #d7a774 calc((1 - var(--space-mix)) * 100%), #081324 calc(var(--space-mix) * 100%)) 100%);
}
.launch-sky::before,
.launch-sky::after { content:""; position:absolute; inset:0; opacity: calc(.08 + var(--space-mix) * .92); background-image: radial-gradient(circle,#dfefff 0 1px,transparent 1.3px); background-size: 72px 72px; background-position: 13px 21px; animation: cockpit-star-drift 42s linear infinite; }
.launch-sky::after { background-size: 113px 113px; background-position: 41px 8px; opacity: calc(.04 + var(--space-mix) * .55); animation-duration: 63s; }
.launch-horizon { position:absolute; left:-10%; right:-10%; bottom:31%; height:32%; width:auto; border:0; border-radius:0; background: linear-gradient(180deg, transparent, rgba(73,111,139,.12) 30%, rgba(23,45,65,.72) 70%, rgba(6,16,27,.98)); clip-path: polygon(0 64%,8% 54%,18% 66%,29% 45%,40% 62%,53% 49%,65% 66%,78% 44%,88% 59%,100% 48%,100% 100%,0 100%); box-shadow:none; opacity: calc(1 - var(--space-mix)); transform: translateY(calc(var(--space-mix) * 20vh)); }
.atmosphere-glow { position:absolute; left:50%; bottom:24%; width:115%; height:33%; transform:translateX(-50%); background:radial-gradient(ellipse, rgba(245,190,123,.28), rgba(113,164,204,.10) 36%, transparent 70%); filter:blur(14px); opacity:calc(1 - var(--space-mix) * .75); }

.cloud-layer { position:absolute; left:-20%; width:140%; height:42%; border-radius:50%; filter:blur(17px); opacity:0; will-change:transform,opacity; }
.cloud-layer::before,.cloud-layer::after { content:""; position:absolute; inset:0; border-radius:50%; background:radial-gradient(ellipse at 20% 50%,rgba(241,246,249,.88),transparent 24%),radial-gradient(ellipse at 47% 42%,rgba(216,229,238,.78),transparent 26%),radial-gradient(ellipse at 76% 55%,rgba(235,242,247,.86),transparent 25%); }
.cloud-far { bottom:-8%; transform:translate3d(0,var(--cloud-far-y,0px),0) scale(1.1); opacity:var(--cloud-far-opacity,0); filter:blur(24px); }
.cloud-mid { bottom:-15%; transform:translate3d(var(--cloud-mid-x,0px),var(--cloud-mid-y,0px),0) scale(1.22); opacity:var(--cloud-mid-opacity,0); }
.cloud-near { bottom:-26%; transform:translate3d(var(--cloud-near-x,0px),var(--cloud-near-y,0px),0) scale(1.45); opacity:var(--cloud-near-opacity,0); filter:blur(11px); }
.launch-particles { position:absolute; inset:0; width:100%; height:100%; opacity:calc(.12 + var(--space-mix) * .88); }

.arrival-earth { z-index:2; left:50%; top:42%; width:min(49vh,44vw); opacity:var(--earth-reveal); transform:translate(-50%, -50%) scale(calc(.12 + var(--earth-reveal) * .9)); filter:saturate(.9) contrast(1.06); }

.cockpit-camera { position:absolute; inset:0; z-index:5; transform:translate3d(var(--cam-x),var(--cam-y),0) rotate(var(--cam-tilt)); transform-origin:50% 84%; will-change:transform,opacity; opacity:calc(1 - var(--handoff) * .96); }
.cockpit-roof { position:absolute; left:-5%; right:-5%; top:-3%; height:17%; background:linear-gradient(180deg,#07101c 0%,#111f2c 58%,rgba(10,19,28,.96)); clip-path:polygon(0 0,100% 0,96% 38%,70% 78%,30% 78%,4% 38%); border-bottom:1px solid rgba(230,199,141,.26); box-shadow:0 12px 35px rgba(0,0,0,.36); }
.cockpit-roof span { position:absolute; top:67%; width:23%; height:2px; background:linear-gradient(90deg,transparent,rgba(137,191,227,.55),transparent); }
.cockpit-roof span:first-child { left:15%; transform:rotate(6deg); }
.cockpit-roof span:last-child { right:15%; transform:rotate(-6deg); }
.cockpit-pillar { position:absolute; top:8%; bottom:18%; width:9%; background:linear-gradient(90deg,#050b13,#152434 54%,#070e17); box-shadow:inset 0 0 0 1px rgba(224,195,142,.13),0 0 30px rgba(0,0,0,.32); }
.pillar-left { left:-2%; clip-path:polygon(0 0,78% 0,100% 100%,0 100%); }
.pillar-right { right:-2%; clip-path:polygon(22% 0,100% 0,100% 100%,0 100%); }
.cockpit-dashboard { position:absolute; left:-4%; right:-4%; bottom:-6%; height:25%; background:linear-gradient(180deg,#152536 0%,#0b1623 24%,#040a12 100%); clip-path:polygon(0 26%,13% 8%,34% 17%,50% 4%,66% 17%,87% 8%,100% 26%,100% 100%,0 100%); border-top:1px solid rgba(227,199,146,.23); box-shadow:0 -10px 42px rgba(0,0,0,.42); }
.cockpit-brand { position:absolute; left:50%; top:28%; transform:translateX(-50%); display:grid; place-items:center; gap:3px; color:#f0d29a; letter-spacing:3px; text-shadow:0 0 16px rgba(237,197,126,.2); }
.cockpit-brand strong { font-size:10px; font-weight:650; }
.cockpit-brand small { color:#90a2b6; font-size:5px; letter-spacing:1.8px; }
.dashboard-lights { position:absolute; left:12%; top:42%; display:flex; gap:8px; }
.dashboard-lights i { width:4px; height:4px; border-radius:50%; background:#78b5d9; box-shadow:0 0 8px rgba(120,181,217,.55); animation:dashboard-blink 3.2s ease-in-out infinite; }
.dashboard-lights i:nth-child(2n){ animation-delay:-1.2s; background:#d7bb79; }
.dashboard-screen { position:absolute; right:10%; top:32%; min-width:150px; padding:8px 11px; border:1px solid rgba(127,173,207,.23); background:rgba(3,11,20,.58); color:#9fc1d9; font-size:6px; letter-spacing:1.4px; border-radius:3px; }
.dashboard-screen b { display:block; width:100%; height:1px; margin-top:7px; background:linear-gradient(90deg,#6eb7e1,transparent); transform:scaleX(calc(.08 + var(--engine-power) * .92)); transform-origin:left; }

.companion { position:absolute; z-index:7; bottom:9.5%; width:clamp(180px,22vw,315px); height:auto; opacity:calc(1 - var(--handoff) * 1.35); filter:drop-shadow(0 20px 24px rgba(0,0,0,.34)); will-change:transform,opacity; }
.companion-a { left:4.5%; transform:translate3d(var(--char-a-x),var(--char-a-y),0); }
.companion-b { right:4.5%; transform:translate3d(var(--char-b-x),var(--char-b-y),0); }
.character-rig { display:block; width:100%; overflow:visible; }
.character-shadow ellipse { fill:rgba(0,0,0,.28); }
.companion .hair-back,.companion .hair-front,.companion .hair-strand { fill:#121826; }
.companion-b .hair-back,.companion-b .hair-front,.companion-b .hair-strand { fill:#20252e; }
.companion .face,.companion .ears ellipse { fill:#d79b79; stroke:#f3bf98; stroke-width:1; }
.companion-b .face,.companion-b .ears ellipse { fill:#c98b68; }
.companion .eye { fill:#faf6ef; stroke:#2b2730; stroke-width:2; }
.companion .pupil { fill:#284557; }
.companion-b .pupil { fill:#4a382b; }
.companion .brow,.companion .nose { fill:none; stroke:#593b35; stroke-width:2.1; stroke-linecap:round; }
.companion .mouth { stroke:#6e3740; stroke-width:2.2; stroke-linecap:round; transform-origin:center; }
.companion .mouth-open,.companion .mouth-half { fill:#8f4650; opacity:0; }
.companion .mouth-closed { fill:none; opacity:1; }
.companion .jacket { fill:#1c3350; stroke:#7092ad; stroke-opacity:.32; stroke-width:2; }
.companion-b .jacket { fill:#3b4557; stroke:#c1a96f; stroke-opacity:.28; }
.companion .shirt { fill:#d9d7ce; }
.companion-b .shirt { fill:#c9d5dc; }
.companion .collar { fill:#0d1c2c; }
.companion-b .collar { fill:#182532; }
.companion .arm,.companion .gesture-arm path { fill:none; stroke:#d79b79; stroke-width:20; stroke-linecap:round; }
.companion-b .arm,.companion-b .gesture-arm path { stroke:#c98b68; }
.companion .gesture-arm circle { fill:#d79b79; }
.companion-b .gesture-arm circle { fill:#c98b68; }
.companion .seatbelt { fill:none; stroke:#d1b36f; stroke-width:8; stroke-linecap:round; opacity:.76; }
.companion-b .seatbelt { stroke:#79a8c9; }
.antara-patch { fill:none; stroke:#efcf91; stroke-width:2.3; opacity:.8; }
.character-body { transform-origin:50% 100%; animation:character-breathe 4.8s ease-in-out infinite; }
.character-head { transform-origin:50% 72%; animation:head-idle 6.2s ease-in-out infinite; }
.hair-strand { transform-origin:50% 0%; animation:hair-idle 4s ease-in-out infinite; }
.companion-b .character-body { animation-delay:-1.9s; }
.companion-b .character-head { animation-delay:-2.6s; }
.companion-b .hair-strand { animation-delay:-1.2s; }
.companion .eyes { transform-box:fill-box; transform-origin:center; transition:transform 70ms linear; }
.companion.is-blinking .eyes { transform:scaleY(.06); }
.companion.is-talking .mouth-closed { animation:mouth-closed-cycle .34s steps(1,end) infinite; }
.companion.is-talking .mouth-half { animation:mouth-half-cycle .34s steps(1,end) infinite; }
.companion.is-talking .mouth-open { animation:mouth-open-cycle .34s steps(1,end) infinite; }
.companion.is-talking .character-head { animation:head-talk 1.15s ease-in-out infinite alternate; }
.gesture-point { opacity:0; transform-box:fill-box; transform-origin:50% 100%; transition:opacity .24s ease,transform .5s cubic-bezier(.2,.8,.2,1); transform:rotate(8deg) translateY(10px); }
.companion[data-state="pointing"] .gesture-point,.companion[data-state="looking-earth"] .gesture-point { opacity:1; transform:rotate(0) translateY(0); }
.companion[data-state="excited"] .character-head { animation:head-excited .7s ease-in-out infinite alternate; }
.companion[data-state="launching"] .character-body { animation:launch-body .42s ease-in-out infinite alternate; }
.companion[data-state="launching"] .hair-strand,.companion[data-state="turbulence"] .hair-strand { animation:hair-launch .33s ease-in-out infinite alternate; }
.companion[data-state="turbulence"] .character-head { animation:turbulence-head .23s ease-in-out infinite alternate; }
.companion[data-state="looking-earth"] .character-head { transform:rotate(var(--look-rotation,0deg)); animation:none; }
.companion-a[data-state="looking-earth"] { --look-rotation:5deg; }
.companion-b[data-state="looking-earth"] { --look-rotation:-7deg; }
.companion-name { position:absolute; bottom:13%; left:50%; transform:translateX(-50%); padding:5px 8px; border:1px solid rgba(229,201,148,.17); background:rgba(3,10,18,.55); color:#d8c59e; font-size:5.5px; letter-spacing:1.7px; border-radius:999px; opacity:.72; }

.speech-bubble { position:absolute; z-index:9; width:min(290px,30vw); padding:13px 16px 14px; border:1px solid rgba(224,202,161,.34); border-radius:12px; background:linear-gradient(145deg,rgba(9,20,32,.94),rgba(5,13,23,.88)); color:#eef3f7; box-shadow:0 14px 34px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.06); backdrop-filter:blur(10px); opacity:1; transform:translateY(0) scale(1); transition:left .45s ease,right .45s ease,opacity .22s ease,transform .22s ease; }
.speech-bubble strong { display:block; margin-bottom:5px; color:#efcb8a; font-size:8px; letter-spacing:1.8px; text-transform:uppercase; }
.speech-bubble span { display:block; font-size:clamp(11px,1vw,13px); line-height:1.45; }
.speech-bubble::after { content:""; position:absolute; bottom:-9px; width:16px; height:16px; background:#07111d; border-right:1px solid rgba(224,202,161,.34); border-bottom:1px solid rgba(224,202,161,.34); transform:rotate(45deg); }
.speech-bubble.speaker-a { left:19%; right:auto; bottom:49%; }
.speech-bubble.speaker-a::after { left:24%; }
.speech-bubble.speaker-b { right:19%; left:auto; bottom:49%; }
.speech-bubble.speaker-b::after { right:24%; }
.speech-bubble.is-changing { opacity:0; transform:translateY(8px) scale(.96); }

.launch-vignette { z-index:10; pointer-events:none; background:radial-gradient(ellipse at 50% 45%,transparent 0 34%,rgba(2,7,14,.09) 62%,rgba(2,7,14,.46) 100%),linear-gradient(180deg,rgba(2,7,14,.32),transparent 16%,transparent 76%,rgba(2,7,14,.45)); }
.preparation { z-index:14; bottom:5.7%; width:min(390px,64vw); text-shadow:0 2px 10px #000; }
.is-preparing .preparation { opacity:1; }
.is-preparing .masthead { opacity:.72; }
.is-preparing .mission-footer { opacity:.72; }
.is-preparing .scene-art { transform:none; filter:none; }
.is-preparing .intro { opacity:0; transform:translateY(-12px); }
.mission.is-earth .masthead,.mission.is-earth .mission-footer { transition:opacity .6s ease; }

@keyframes cockpit-star-drift { to { background-position:13px 93px; } }
@keyframes dashboard-blink { 0%,72%,100%{opacity:.25} 79%,88%{opacity:1} }
@keyframes character-breathe { 0%,100%{transform:translateY(0) scaleY(1)} 50%{transform:translateY(-2px) scaleY(1.009)} }
@keyframes head-idle { 0%,100%{transform:translate(0,0) rotate(0)} 35%{transform:translate(1px,-1px) rotate(.6deg)} 70%{transform:translate(-1px,0) rotate(-.5deg)} }
@keyframes hair-idle { 0%,100%{transform:rotate(-2deg)} 50%{transform:rotate(3deg)} }
@keyframes head-talk { from{transform:translateY(0) rotate(-.4deg)} to{transform:translateY(-1.5px) rotate(.8deg)} }
@keyframes head-excited { from{transform:translateY(0) rotate(-1deg)} to{transform:translateY(-3px) rotate(1.3deg)} }
@keyframes launch-body { from{transform:translateY(1px) scaleY(.998)} to{transform:translateY(5px) scaleY(1.008)} }
@keyframes hair-launch { from{transform:rotate(-8deg) translateY(0)} to{transform:rotate(9deg) translateY(2px)} }
@keyframes turbulence-head { from{transform:translate(-1.5px,1px) rotate(-1deg)} to{transform:translate(1.5px,-1px) rotate(1deg)} }
@keyframes mouth-closed-cycle { 0%,24%,75%,100%{opacity:1} 25%,74%{opacity:0} }
@keyframes mouth-half-cycle { 0%,24%,50%,75%,100%{opacity:0} 25%,49%,76%,99%{opacity:1} }
@keyframes mouth-open-cycle { 0%,49%,76%,100%{opacity:0} 50%,75%{opacity:1} }

@media (max-width: 900px) {
  .companion { width:clamp(155px,27vw,230px); bottom:10%; }
  .companion-a { left:1%; }
  .companion-b { right:1%; }
  .speech-bubble { width:min(245px,36vw); }
  .speech-bubble.speaker-a { left:11%; bottom:51%; }
  .speech-bubble.speaker-b { right:11%; bottom:51%; }
}
@media (max-width: 700px) {
  .brand-caption { display:block; font-size:4.7px; letter-spacing:1.5px; }
  .mission-index { display:none; }
  .intro { bottom:13%; left:5%; right:5%; }
  .intro-copy { width:min(420px,86vw); font-size:10.5px; margin-top:-6px; margin-bottom:16px; }
  .launch-caption { display:none; }
  .companion { width:clamp(145px,43vw,190px); bottom:11%; }
  .companion-a { left:-7%; }
  .companion-b { right:-7%; }
  .companion-name { display:none; }
  .speech-bubble { width:min(210px,58vw); padding:10px 12px 11px; }
  .speech-bubble.speaker-a { left:5%; bottom:52%; }
  .speech-bubble.speaker-b { right:5%; bottom:52%; }
  .cockpit-pillar { width:13%; }
  .cockpit-dashboard { height:24%; }
  .dashboard-screen { right:7%; min-width:116px; font-size:5px; }
  .cockpit-brand { left:24%; }
  .cockpit-brand small { display:none; }
  .preparation { bottom:7.5%; width:70vw; }
  .arrival-earth { width:min(51vh,78vw); }
}
@media (max-height: 700px) and (min-width: 701px) {
  .companion { width:clamp(160px,18vw,220px); bottom:7%; }
  .speech-bubble { bottom:47% !important; }
  .intro { bottom:7%; }
  .intro-copy { display:none; }
  .preparation { bottom:4.5%; }
}
@media (prefers-reduced-motion: reduce) {
  .cockpit-world,.cockpit-camera,.companion { transform:none !important; }
  .character-body,.character-head,.hair-strand,.launch-sky::before,.launch-sky::after { animation:none !important; }
  .companion.is-talking .mouth-closed,.companion.is-talking .mouth-half,.companion.is-talking .mouth-open { animation-duration:.7s !important; }
}
.is-preparing .launch-stage { z-index: 12; }
.companion .brow,.companion .pupil,.companion .eye { transform-box:fill-box; transform-origin:center; transition:transform .25s ease,opacity .25s ease; }
.companion[data-expression="bright"] .brow { transform:translateY(-1.8px); }
.companion[data-expression="bright"] .pupil { transform:translateY(-.8px); }
.companion[data-expression="focused"] .brow-left { transform:translateY(1px) rotate(7deg); }
.companion[data-expression="focused"] .brow-right { transform:translateY(1px) rotate(-7deg); }
.companion[data-expression="soft"] .brow { transform:translateY(1px); opacity:.86; }
.companion[data-expression="soft"] .pupil { transform:translateY(1px); }
.speech-bubble { opacity: calc(1 - var(--handoff)); }
.speech-bubble.is-changing { opacity: 0; }

/* ==============================================================
   OPENING QUALITY PASS — scene isolation + believable ascent
   This block intentionally wins over earlier experimental opening
   rules without changing Earth / Venus / Mars scene implementations.
   ============================================================== */

/* One experience state at a time. Home artwork can never leak into planets. */
.mission[data-experience="home"] .launch-stage { visibility: hidden; opacity: 0; }
.mission[data-experience="launch"] .intro,
.mission[data-experience="launch"] .scene,
.mission[data-experience="launch"] .location {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.mission[data-experience="launch"] .mission-index { opacity: .28; }
.mission[data-experience="launch"] .launch-stage { visibility: visible; }
.mission[data-experience="planet"] .intro,
.mission[data-experience="planet"] .scene,
.mission[data-experience="planet"] .launch-stage,
.mission[data-experience="planet"] .location,
.mission[data-experience="planet"] .mission-index {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.mission[data-experience="planet"] .mission-footer { pointer-events: none; }
.mission[data-experience="planet"] .audio-control { margin-left: auto; pointer-events: auto; }
.mission[data-experience="planet"] .masthead { pointer-events: none; }
.mission[data-experience="planet"] .brand { pointer-events: auto; }

/* No opening loader or technical-location clutter. */
.preparation,
.location-detail,
.companion-name { display: none !important; }

/* Cockpit view: keep the center window open and the frame restrained. */
.cockpit-world { background: #061426; }
.launch-sky {
  z-index: 0;
  inset: -5%;
  opacity: 1;
  background:
    radial-gradient(ellipse at 50% 93%, rgba(255,193,128,.48) 0%, rgba(223,151,99,.16) 20%, transparent 45%),
    linear-gradient(180deg, #103b64 0%, #245f86 42%, #6f98af 74%, #c4aa97 100%);
}
.launch-sky::before,
.launch-sky::after { display: none; }
.launch-space-layer {
  position: absolute;
  z-index: 1;
  inset: -4%;
  opacity: var(--space-mix);
  background:
    radial-gradient(circle at 51% 46%, rgba(31,73,118,.18), transparent 31%),
    radial-gradient(circle at 17% 23%, rgba(124,164,207,.08), transparent 18%),
    linear-gradient(180deg, #071427 0%, #020814 52%, #01050d 100%);
  transition: none;
}
.launch-space-layer::before,
.launch-space-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: var(--star-opacity);
  background-image: radial-gradient(circle, rgba(232,244,255,.95) 0 1px, transparent 1.3px);
  background-size: 86px 86px;
  background-position: 9px 21px;
  animation: cockpit-star-drift 58s linear infinite;
}
.launch-space-layer::after {
  background-size: 137px 137px;
  background-position: 44px 8px;
  opacity: calc(var(--star-opacity) * .55);
  animation-duration: 81s;
}

/* Ground actually recedes as the craft climbs. */
.ground-world {
  position: absolute;
  z-index: 2;
  left: -8%;
  right: -8%;
  bottom: -4%;
  height: 57%;
  opacity: var(--ground-opacity);
  transform-origin: 50% 100%;
  transform: translate3d(0, calc(var(--ground-progress) * 34vh), 0) scale(calc(1 - var(--ground-progress) * .29));
  will-change: transform, opacity;
  overflow: hidden;
}
.ground-world::before {
  content: "";
  position: absolute;
  left: -4%;
  right: -4%;
  top: -14%;
  height: 30%;
  z-index: 5;
  background: linear-gradient(180deg, rgba(214,234,246,.36), rgba(184,220,240,.16) 38%, rgba(236,194,150,.08) 68%, transparent 100%);
  filter: blur(10px);
  pointer-events: none;
}
.terrain-far {
  position: absolute;
  inset: 18% 0 19%;
  background: linear-gradient(180deg, #1b3547 0%, #102533 64%, #0a1823 100%);
  clip-path: polygon(0 70%, 7% 54%, 14% 63%, 22% 43%, 31% 67%, 40% 47%, 48% 61%, 57% 39%, 67% 64%, 76% 46%, 87% 62%, 94% 48%, 100% 66%, 100% 100%, 0 100%);
  filter: saturate(.72);
}
.city-layer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12%;
  height: 31%;
  opacity: .92;
  background:
    linear-gradient(90deg,
      transparent 0 3%, #101f2b 3% 5.2%, transparent 5.2% 7%, #142735 7% 10.4%, transparent 10.4% 13%,
      #0e1c28 13% 15%, transparent 15% 18%, #162b39 18% 22%, transparent 22% 25%, #0c1b26 25% 27%,
      transparent 27% 30%, #132634 30% 35%, transparent 35% 38%, #0e1e2b 38% 41%, transparent 41% 44%,
      #142937 44% 47%, transparent 47% 51%, #0c1c28 51% 54%, transparent 54% 58%, #152b39 58% 63%,
      transparent 63% 66%, #0f202d 66% 70%, transparent 70% 74%, #132735 74% 78%, transparent 78% 81%,
      #0b1a25 81% 84%, transparent 84% 88%, #152936 88% 93%, transparent 93% 96%, #0d1c28 96% 100%);
  clip-path: polygon(0 100%,0 58%,3% 58%,3% 42%,5% 42%,5% 65%,7% 65%,7% 35%,10% 35%,10% 62%,13% 62%,13% 47%,15% 47%,15% 70%,18% 70%,18% 31%,22% 31%,22% 61%,25% 61%,25% 50%,27% 50%,27% 72%,30% 72%,30% 36%,35% 36%,35% 62%,38% 62%,38% 41%,41% 41%,41% 68%,44% 68%,44% 34%,47% 34%,47% 60%,51% 60%,51% 45%,54% 45%,54% 71%,58% 71%,58% 30%,63% 30%,63% 59%,66% 59%,66% 42%,70% 42%,70% 70%,74% 70%,74% 37%,78% 37%,78% 61%,81% 61%,81% 45%,84% 45%,84% 69%,88% 69%,88% 32%,93% 32%,93% 63%,96% 63%,96% 43%,100% 43%,100% 100%);
}
.city-far { bottom: 24%; transform: scale(.82); opacity: .48; filter: blur(.7px); }
.city-mid { bottom: 8%; transform: scale(1.03); }
.city-light-field {
  position: absolute;
  left: 4%; right: 4%; bottom: 10%; height: 25%;
  opacity: calc(.88 - var(--ground-progress) * .55);
  background-image:
    radial-gradient(circle, rgba(255,213,147,.8) 0 1px, transparent 1.7px),
    radial-gradient(circle, rgba(132,199,235,.5) 0 1px, transparent 1.6px);
  background-size: 51px 27px, 83px 39px;
  background-position: 7px 4px, 29px 16px;
  mask-image: linear-gradient(180deg, transparent, #000 42%, #000 100%);
}
.launch-base-view {
  position: absolute;
  left: 14%; right: 14%; bottom: 0; height: 18%;
  border-top: 1px solid rgba(205,220,231,.18);
  background:
    linear-gradient(90deg, transparent 0 16%, rgba(118,160,188,.15) 16% 16.3%, transparent 16.3% 49.8%, rgba(118,160,188,.15) 49.8% 50.2%, transparent 50.2% 83.7%, rgba(118,160,188,.15) 83.7% 84%, transparent 84%),
    linear-gradient(180deg, rgba(16,33,45,.96), rgba(5,15,24,.99));
  box-shadow: 0 -14px 45px rgba(244,179,103,.08);
}

.launch-horizon {
  z-index: 2;
  left: -10%; right: -10%; bottom: 29%; width: auto; height: 26%;
  border: 0; border-radius: 0; box-shadow: none;
  background: linear-gradient(180deg, transparent, rgba(87,134,165,.16) 36%, rgba(25,54,73,.42) 72%, transparent);
  clip-path: none;
  opacity: calc(var(--ground-opacity) * .76);
  transform: translateY(calc(var(--ground-progress) * 22vh));
}
.atmosphere-glow {
  z-index: 3;
  left: 50%; bottom: 21%; width: 126%; height: 31%;
  background: radial-gradient(ellipse, rgba(255,213,156,.32), rgba(131,184,216,.13) 34%, transparent 68%);
  filter: blur(18px);
  opacity: calc((1 - var(--space-mix)) * .82);
}

/* Volumetric cloud bands: translucent, layered and never an all-white sheet. */
.cloud-layer {
  z-index: 4;
  left: -22%;
  width: 144%;
  height: 52%;
  border-radius: 45%;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}
.cloud-layer::before,
.cloud-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 48%;
  background:
    radial-gradient(ellipse at 10% 61%, rgba(231,240,246,.72) 0 9%, transparent 21%),
    radial-gradient(ellipse at 27% 42%, rgba(205,222,233,.66) 0 12%, transparent 25%),
    radial-gradient(ellipse at 47% 63%, rgba(239,245,248,.73) 0 11%, transparent 25%),
    radial-gradient(ellipse at 66% 40%, rgba(206,224,236,.64) 0 12%, transparent 27%),
    radial-gradient(ellipse at 86% 58%, rgba(235,243,247,.72) 0 11%, transparent 25%);
}
.cloud-layer::after {
  transform: translate3d(6%, 10%, 0) scale(.88);
  filter: blur(9px);
  opacity: .7;
}
.cloud-far { bottom: -3%; filter: blur(19px); transform: translate3d(0,var(--cloud-far-y,0px),0) scale(1.05); opacity: var(--cloud-far-opacity,0); }
.cloud-mid { bottom: -13%; filter: blur(12px); transform: translate3d(var(--cloud-mid-x,0px),var(--cloud-mid-y,0px),0) scale(1.18); opacity: var(--cloud-mid-opacity,0); }
.cloud-near { bottom: -26%; filter: blur(7px); transform: translate3d(var(--cloud-near-x,0px),var(--cloud-near-y,0px),0) scale(1.4); opacity: var(--cloud-near-opacity,0); }
.cloud-far::after { box-shadow: 0 -28px 75px rgba(220,236,245,.17); }

.launch-particles { z-index: 5; opacity: 1; }
.arrival-earth { z-index: 3; }

/* Cleaner cockpit frame, more window, less UI junk. */
.cockpit-roof { height: 14%; background: linear-gradient(180deg,#050b13 0%,#132331 64%,rgba(8,16,24,.96)); }
.cockpit-pillar { width: 7.2%; opacity: .94; }
.cockpit-dashboard { height: 20.5%; bottom: -5%; }
.cockpit-brand { left: 50%; top: 31%; opacity: .72; }
.cockpit-brand strong { font-size: 9px; letter-spacing: 2.6px; }
.cockpit-brand small { font-size: 4.5px; letter-spacing: 1.4px; }
.dashboard-lights { left: 10%; top: 44%; opacity: .76; }
.dashboard-screen { right: 9%; top: 34%; min-width: 128px; padding: 7px 9px; border-color: rgba(127,173,207,.16); background: rgba(3,11,20,.43); color: #b8d2e4; }

/* Refined donghua-influenced vector rig: fair skin, softer rendering, elegant silhouettes. */
.companion {
  bottom: 6.4%;
  width: clamp(170px,18.5vw,270px);
  filter: drop-shadow(0 24px 34px rgba(0,0,0,.38));
}
.companion-a { left: 1.8%; }
.companion-b { right: 1.8%; }
.companion-a .hair-back,.companion-a .hair-front,.companion-a .hair-strand { fill: url(#hair-a); }
.companion-b .hair-back,.companion-b .hair-front,.companion-b .hair-strand { fill: url(#hair-b); }
.companion-a .face,.companion-a .ears ellipse { fill: url(#skin-a); stroke: rgba(255,231,219,.68); stroke-width: .9; }
.companion-b .face,.companion-b .ears ellipse { fill: url(#skin-b); stroke: rgba(255,231,219,.62); stroke-width: .9; }
.companion .face-highlight { fill: rgba(255,255,255,.11); filter: blur(4px); pointer-events: none; }
.companion .eye { fill: #fffaf7; stroke: #30323d; stroke-width: 1.65; }
.companion-a .pupil { fill: #315f78; }
.companion-b .pupil { fill: #5c4938; }
.companion .eye-glint { fill: rgba(255,255,255,.92); }
.companion .brow,.companion .nose { stroke: #765951; stroke-width: 1.8; }
.companion .mouth { stroke: #9b5963; stroke-width: 1.8; }
.companion .mouth-open,.companion .mouth-half { fill: #a95e69; }
.companion-a .jacket { fill: url(#jacket-a); stroke: rgba(129,177,211,.42); }
.companion-b .jacket { fill: url(#jacket-b); stroke: rgba(196,183,148,.36); }
.companion .shirt { fill: #e8e8e3; }
.companion-b .shirt { fill: #dbe5e8; }
.companion-a .arm,.companion-a .gesture-arm path { stroke: #f0cbb9; }
.companion-b .arm,.companion-b .gesture-arm path { stroke: #edcdbb; }
.companion-a .gesture-arm circle { fill: #f0cbb9; }
.companion-b .gesture-arm circle { fill: #edcdbb; }
.companion .seatbelt { stroke-width: 7; opacity: .68; }
.companion .antara-patch { opacity: .58; }

/* Bubbles hug the speakers and leave the center window clear. */
.speech-bubble {
  width: min(255px,24vw);
  padding: 11px 14px 12px;
  border-radius: 14px;
  border-color: rgba(193,214,229,.22);
  background: linear-gradient(145deg,rgba(6,16,27,.91),rgba(7,18,29,.80));
  box-shadow: 0 16px 42px rgba(0,0,0,.25), inset 0 1px rgba(255,255,255,.05);
}
.speech-bubble strong { color: #e9c98f; font-size: 7.5px; }
.speech-bubble span { font-size: clamp(11px,.92vw,13px); }
.speech-bubble.speaker-a { left: 13.5%; bottom: 47%; }
.speech-bubble.speaker-b { right: 13.5%; bottom: 47%; }
.speech-bubble::after { background: #07131f; border-color: rgba(193,214,229,.22); }

/* Phase-specific lighting tells the ascent story instead of relying on fog. */
.launch-stage[data-phase="ignition"] .launch-sky { filter: brightness(1.03) saturate(1.04); }
.launch-stage[data-phase="liftoff"] .ground-world,
.launch-stage[data-phase="climb"] .ground-world { filter: saturate(.86) brightness(.9); }
.launch-stage[data-phase="cloud-approach"] .launch-sky { filter: saturate(.9) brightness(.96); }
.launch-stage[data-phase="clouds"] .launch-sky { filter: saturate(.78) brightness(.9); }
.launch-stage[data-phase="clouds"] .cockpit-camera { filter: brightness(.95); }
.launch-stage[data-phase="above-clouds"] .launch-sky { filter: saturate(.86) brightness(1.06); }
.launch-stage[data-phase="upper-atmosphere"] .launch-sky { filter: saturate(.62) brightness(.72); }
.launch-stage[data-phase="space"] .launch-sky,
.launch-stage[data-phase="earth-reveal"] .launch-sky,
.launch-stage[data-phase="approach"] .launch-sky { filter: brightness(.36) saturate(.48); }

@media (max-width: 900px) {
  .companion { width: clamp(155px,22vw,215px); bottom: 7%; }
  .companion-a { left: -.5%; }
  .companion-b { right: -.5%; }
  .speech-bubble { width: min(230px,31vw); }
  .speech-bubble.speaker-a { left: 7%; }
  .speech-bubble.speaker-b { right: 7%; }
}

@media (max-width: 700px) {
  .mission[data-experience="launch"] .masthead { opacity: .62; }
  .companion { width: clamp(135px,39vw,178px); bottom: 8%; }
  .companion-a { left: -9%; }
  .companion-b { right: -9%; }
  .speech-bubble { width: min(196px,54vw); padding: 9px 11px 10px; }
  .speech-bubble.speaker-a { left: 3%; bottom: 50%; }
  .speech-bubble.speaker-b { right: 3%; bottom: 50%; }
  .cockpit-pillar { width: 10%; }
  .cockpit-dashboard { height: 19%; }
  .cockpit-brand { left: 24%; }
  .dashboard-screen { right: 5%; min-width: 108px; }
  .ground-world { height: 52%; }
}

@media (prefers-reduced-motion: reduce) {
  .ground-world { transform: translateY(calc(var(--ground-progress) * 22vh)) scale(calc(1 - var(--ground-progress) * .18)); }
  .launch-space-layer::before,.launch-space-layer::after { animation: none !important; }
}


/* ==============================================================
   OPENING EXPERIENCE V3 — live cockpit from the first frame
   ============================================================== */
.mission[data-experience="home"] .scene { display:none !important; }
.mission[data-experience="home"] .launch-stage {
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:none;
}
.mission[data-experience="home"] .masthead { z-index:18; }
.mission[data-experience="home"] .mission-index { opacity:.52; }
.mission[data-experience="home"] .mission-footer { justify-content:flex-end; }
.mission[data-experience="home"] .cockpit-world { animation:cockpit-idle-view 10s ease-in-out infinite alternate; }
.mission[data-experience="home"] .cockpit-camera { animation:cockpit-idle-frame 8s ease-in-out infinite alternate; }
.mission[data-experience="home"] .ground-world { animation:ground-heat-breathe 7s ease-in-out infinite alternate; }
.mission[data-experience="launch"] .launch-stage { visibility:visible !important; opacity:1 !important; }
.location { display:none !important; }

/* Briefing typography floats inside the live window instead of replacing it. */
.intro { inset:0; bottom:auto; z-index:16; pointer-events:none; text-align:center; }
.intro .eyebrow { position:absolute; top:14.2%; left:50%; transform:translateX(-50%); margin:0; white-space:nowrap; opacity:.8; }
.intro h1 { position:absolute; top:17.2%; left:50%; width:min(760px,75vw); transform:translateX(-50%); margin:0; font-size:clamp(32px,4.6vw,68px); text-shadow:0 4px 28px rgba(0,0,0,.48); }
.intro-copy { position:absolute; top:29%; left:50%; transform:translateX(-50%); width:min(520px,60vw); margin:0; font-size:clamp(10px,.9vw,13px); color:rgba(231,237,243,.79); }
.launch-button { position:absolute; left:50%; bottom:18.4%; transform:translateX(-50%); pointer-events:auto; backdrop-filter:blur(12px); background:linear-gradient(180deg,rgba(236,206,151,.98),rgba(218,178,104,.94)); box-shadow:0 12px 40px rgba(0,0,0,.28),0 0 0 1px rgba(255,240,205,.32) inset,0 0 34px rgba(223,184,111,.15); }
.launch-button:hover { transform:translateX(-50%) translateY(-2px); }

/* Detailed departure city with roads, launch complex and depth cues. */
.city-road-grid { position:absolute; left:-4%; right:-4%; bottom:1%; height:35%; opacity:calc(.8 - var(--ground-progress) * .58); transform:perspective(460px) rotateX(58deg); transform-origin:50% 100%; background:linear-gradient(90deg,transparent 49.7%,rgba(122,180,209,.14) 49.8% 50.2%,transparent 50.3%),linear-gradient(0deg,transparent 49.65%,rgba(232,183,111,.10) 49.8% 50.2%,transparent 50.35%); background-size:82px 82px,82px 82px; mask-image:linear-gradient(180deg,transparent,#000 30%,#000 100%); }
.launch-complex { position:absolute; left:50%; bottom:7%; width:min(520px,58vw); height:25%; transform:translateX(-50%); opacity:calc(.94 - var(--ground-progress) * .72); filter:drop-shadow(0 10px 18px rgba(0,0,0,.35)); }
.launch-tower { position:absolute; left:48%; bottom:20%; width:15px; height:72%; border:1px solid rgba(117,155,178,.45); background:repeating-linear-gradient(0deg,rgba(31,55,70,.96) 0 8px,rgba(102,138,159,.26) 8px 10px),linear-gradient(90deg,#101f2a,#263d4b,#0c1922); clip-path:polygon(35% 0,65% 0,100% 100%,0 100%); }
.launch-tower::before { content:""; position:absolute; left:50%; top:-15%; width:1px; height:16%; background:#9cc4d7; box-shadow:0 0 8px rgba(182,224,240,.5); }
.hangar { position:absolute; bottom:12%; width:24%; height:30%; background:linear-gradient(180deg,#213948,#0c1923); border:1px solid rgba(126,164,185,.22); box-shadow:inset 0 12px 18px rgba(118,173,205,.05); }
.hangar::after { content:""; position:absolute; inset:18% 10% 0; background:repeating-linear-gradient(90deg,rgba(108,156,182,.12) 0 1px,transparent 1px 18px); }
.hangar-a { left:7%; clip-path:polygon(8% 0,92% 0,100% 100%,0 100%); }
.hangar-b { right:7%; clip-path:polygon(8% 0,92% 0,100% 100%,0 100%); }
.terminal-strip { position:absolute; left:24%; right:24%; bottom:7%; height:8%; background:linear-gradient(90deg,transparent,rgba(119,169,195,.27),rgba(236,192,119,.35),rgba(119,169,195,.27),transparent); border-top:1px solid rgba(189,211,222,.17); }
.beacon { position:absolute; bottom:43%; width:4px; height:4px; border-radius:50%; background:#f2cb7f; box-shadow:0 0 10px #f2cb7f; animation:city-beacon 2.8s steps(1) infinite; }
.beacon-a { left:29%; }.beacon-b { right:28%; animation-delay:-1.4s; }
.city-light-field { animation:city-light-shimmer 5.8s ease-in-out infinite alternate; }
.launch-base-view::after { content:""; position:absolute; left:14%; right:14%; top:16%; height:2px; background:repeating-linear-gradient(90deg,rgba(245,204,126,.72) 0 3px,transparent 3px 27px); box-shadow:0 0 9px rgba(236,192,115,.18); }

/* Deep cloud volume: multiple lobes, shadows, wisps and a visible cloud deck. */
.cloud-layer { mix-blend-mode:normal; overflow:visible; }
.cloud-layer::before { background:radial-gradient(ellipse at 8% 64%,rgba(247,250,252,.90) 0 8%,rgba(214,228,238,.44) 15%,transparent 27%),radial-gradient(ellipse at 24% 42%,rgba(240,247,251,.84) 0 11%,rgba(192,214,229,.34) 20%,transparent 30%),radial-gradient(ellipse at 44% 66%,rgba(251,252,252,.92) 0 10%,rgba(207,224,235,.38) 18%,transparent 29%),radial-gradient(ellipse at 63% 38%,rgba(235,245,250,.87) 0 12%,rgba(179,205,223,.30) 21%,transparent 31%),radial-gradient(ellipse at 84% 61%,rgba(248,251,252,.90) 0 10%,rgba(202,221,233,.37) 19%,transparent 30%); }
.cloud-layer::after { background:radial-gradient(ellipse at 18% 58%,rgba(116,151,176,.24) 0 12%,transparent 30%),radial-gradient(ellipse at 52% 70%,rgba(104,142,169,.22) 0 15%,transparent 34%),radial-gradient(ellipse at 77% 48%,rgba(122,158,181,.19) 0 14%,transparent 31%); filter:blur(13px); opacity:.7; }
.cloud-far { transform:translate3d(var(--cloud-far-x,0px),var(--cloud-far-y,0px),0) scale(1.06); }
.cloud-deck { position:absolute; z-index:3; left:-10%; right:-10%; bottom:-10%; height:48%; opacity:var(--cloud-deck-opacity); transform:translateY(calc(var(--space-mix) * 15vh)); background:radial-gradient(ellipse at 10% 35%,rgba(240,247,250,.92) 0 10%,transparent 22%),radial-gradient(ellipse at 27% 52%,rgba(225,238,246,.92) 0 13%,transparent 26%),radial-gradient(ellipse at 48% 35%,rgba(248,251,252,.95) 0 12%,transparent 25%),radial-gradient(ellipse at 70% 50%,rgba(219,235,244,.94) 0 14%,transparent 28%),radial-gradient(ellipse at 91% 36%,rgba(242,248,251,.92) 0 11%,transparent 23%),linear-gradient(180deg,transparent 5%,rgba(219,235,244,.50) 55%,rgba(170,201,220,.30)); filter:blur(7px); box-shadow:0 -30px 90px rgba(238,248,255,.10); }
.cloud-wisps { position:absolute; z-index:5; inset:0; pointer-events:none; opacity:0; }
.cloud-wisps i { position:absolute; width:44vw; height:11vw; min-height:55px; border-radius:50%; background:radial-gradient(ellipse,rgba(244,250,252,.38),rgba(201,220,233,.13) 44%,transparent 73%); filter:blur(18px); }
.cloud-wisps i:nth-child(1){left:-12%;top:30%;}.cloud-wisps i:nth-child(2){right:-14%;top:45%;}.cloud-wisps i:nth-child(3){left:20%;top:61%;}.cloud-wisps i:nth-child(4){right:18%;top:22%;}
.launch-stage[data-phase="cloud-approach"] .cloud-wisps { opacity:.22; animation:wisp-drift 5s ease-in-out infinite alternate; }
.launch-stage[data-phase="clouds"] .cloud-wisps { opacity:.62; animation:wisp-drift 2.8s ease-in-out infinite alternate; }
.launch-stage[data-phase="above-clouds"] .cloud-wisps { opacity:.16; transition:opacity .8s ease; }

/* Cockpit frame and readable vehicle controls. */
.cockpit-roof { height:13.5%; border-bottom-color:rgba(231,203,151,.20); }
.cockpit-roof::after { content:""; position:absolute; left:33%; right:33%; bottom:18%; height:8px; border:1px solid rgba(115,167,199,.18); border-radius:3px; background:linear-gradient(90deg,transparent,rgba(116,181,215,.12),transparent); box-shadow:0 0 18px rgba(89,157,194,.07) inset; }
.cockpit-pillar { width:7%; }
.cockpit-dashboard { height:23%; bottom:-5.5%; overflow:hidden; background:linear-gradient(180deg,#1a2e3d 0%,#0c1825 25%,#040a12 100%); }
.cockpit-dashboard::before { content:""; position:absolute; inset:0; opacity:.16; background:linear-gradient(90deg,transparent 0 49.8%,rgba(145,191,218,.14) 50%,transparent 50.2%),repeating-linear-gradient(0deg,transparent 0 13px,rgba(142,181,202,.035) 13px 14px); }
.console-bank { position:absolute; top:29%; height:54%; border:1px solid rgba(116,165,195,.13); border-radius:6px; background:linear-gradient(180deg,rgba(8,21,33,.62),rgba(2,9,16,.48)); box-shadow:inset 0 1px rgba(255,255,255,.025); }
.console-left { left:7.3%; width:23%; }.console-center { left:36%; width:28%; }.console-right { right:7.3%; width:23%; }
.instrument-ring { position:absolute; left:8%; top:17%; width:44px; height:44px; border:1px solid rgba(111,181,217,.32); border-radius:50%; box-shadow:inset 0 0 0 7px rgba(62,112,141,.06),0 0 14px rgba(79,151,189,.08); }
.instrument-ring::before,.instrument-ring::after { content:""; position:absolute; left:50%; top:50%; background:rgba(128,192,223,.35); transform-origin:0 50%; }
.instrument-ring::before { width:16px;height:1px;transform:rotate(-42deg); }.instrument-ring::after { width:12px;height:1px;transform:rotate(32deg); }
.instrument-ring i { position:absolute; inset:5px; border-radius:50%; border:1px dashed rgba(137,184,207,.16); animation:instrument-spin 18s linear infinite; }
.instrument-ring span { position:absolute; left:50%; bottom:-13px; transform:translateX(-50%); font-size:5px; letter-spacing:1.4px; color:#7f9eb0; }
.mini-readout { position:absolute; left:32%; top:26%; display:flex; align-items:baseline; gap:4px; color:#9ec8dd; }.mini-readout b{font:500 10px/1 monospace;}.mini-readout small{font-size:5px;color:#6f8da0;}
.toggle-row { position:absolute; left:8%; right:8%; bottom:13%; display:flex; gap:8px; align-items:center; }
.toggle-row i { width:16px; height:5px; border-radius:99px; background:#172d3b; border:1px solid rgba(130,174,197,.13); position:relative; }
.toggle-row i::after { content:""; position:absolute; top:1px; left:1px; width:3px; height:3px; border-radius:50%; background:#79b6d3; box-shadow:0 0 5px rgba(121,182,211,.6); }
.toggle-row i:nth-child(2n)::after { left:auto; right:1px; background:#d8b96e; box-shadow:0 0 5px rgba(216,185,110,.5); }
.nav-display { position:absolute; left:9%; right:9%; top:13%; height:45%; border:1px solid rgba(103,171,207,.16); border-radius:4px; background:radial-gradient(circle,rgba(57,110,139,.13),rgba(2,9,16,.28) 68%); overflow:hidden; }
.nav-display::before { content:""; position:absolute; inset:10%; border:1px solid rgba(111,172,203,.14); border-radius:50%; }
.nav-display i { position:absolute; width:42%; height:42%; left:29%; top:29%; border:1px solid rgba(223,190,124,.25); border-radius:50%; animation:instrument-spin 12s linear infinite reverse; }
.nav-display b { position:absolute; right:7px; bottom:5px; font-size:4.8px; font-weight:500; letter-spacing:1.3px; color:#6f91a4; }
.nav-crosshair::before,.nav-crosshair::after { content:""; position:absolute; left:50%; top:50%; background:rgba(112,182,216,.22); transform:translate(-50%,-50%); }.nav-crosshair::before{width:58%;height:1px}.nav-crosshair::after{width:1px;height:70%}
.console-buttons { position:absolute; left:13%; right:13%; bottom:12%; display:flex; justify-content:space-between; }.console-buttons i{width:7px;height:7px;border-radius:2px;background:#1b3444;border:1px solid rgba(126,179,207,.15);box-shadow:0 0 8px rgba(77,151,188,.05)}.console-buttons i:nth-child(3){background:#735c35;box-shadow:0 0 7px rgba(223,186,111,.16)}
.telemetry-bars { position:absolute; left:9%; right:9%; top:19%; display:flex; gap:6px; align-items:flex-end; height:44%; }.telemetry-bars i{flex:1; height:40%; background:linear-gradient(180deg,#6c9db6,#233f50); opacity:.72; animation:telemetry-pulse 2.8s ease-in-out infinite alternate;}.telemetry-bars i:nth-child(2){height:72%;animation-delay:-.8s}.telemetry-bars i:nth-child(3){height:55%;animation-delay:-1.6s}.telemetry-bars i:nth-child(4){height:86%;animation-delay:-2.2s}
.cockpit-brand { top:22%; z-index:3; }.dashboard-lights { left:8.2%; top:22%; z-index:3; }.dashboard-screen { right:8.2%; top:20%; z-index:3; min-width:132px; }

/* Rebuilt 2D crew art: cleaner anime-inspired faces and richer line/shading detail. */
.companion { bottom:5.8%; width:clamp(178px,19vw,286px); filter:drop-shadow(0 26px 38px rgba(0,0,0,.42)); }
.companion-a { left:1.3%; }.companion-b { right:1.3%; }
.companion .hair-highlight { fill:rgba(153,179,219,.10); }
.companion .neck { fill:url(#skin-a); }.companion-b .neck { fill:url(#skin-b); }
.companion .face-shadow { fill:rgba(178,102,88,.07); }
.companion .blush { fill:url(#cheek-a); }.companion-b .blush { fill:url(#cheek-b); }
.companion .lash { fill:none; stroke:#292936; stroke-width:2.2; stroke-linecap:round; }
.companion-a .iris { fill:url(#iris-a); }.companion-b .iris { fill:url(#iris-b); }
.companion .jacket-panel { fill:rgba(5,17,30,.18); stroke:rgba(199,222,236,.12); stroke-width:1; }
.companion .uniform-detail path { fill:none; stroke:rgba(206,225,236,.18); stroke-width:1.4; }.companion .uniform-detail circle{fill:none;stroke:rgba(234,203,144,.5);stroke-width:1.5}
.companion .character-head { transform-origin:50% 78%; }
.companion[data-state="pointing"] .gesture-point,.companion[data-state="looking-earth"] .gesture-point { opacity:1; }
.companion .gesture-point { opacity:0; transition:opacity .35s ease; }
.companion.is-talking .character-head { animation-duration:.38s; }

/* Speech remains beside the crew and never covers the forward flight path. */
.speech-bubble { z-index:15; width:min(248px,23vw); border-color:rgba(177,210,229,.23); background:linear-gradient(145deg,rgba(6,17,28,.91),rgba(8,21,33,.78)); }
.speech-bubble.speaker-a { left:12.5%; bottom:48%; }.speech-bubble.speaker-b { right:12.5%; bottom:48%; }

/* More intentional phase lighting. */
.launch-stage[data-phase="ignition"] .cockpit-dashboard { box-shadow:0 -10px 46px rgba(0,0,0,.42),0 -4px 28px rgba(94,160,195,.08); }
.launch-stage[data-phase="liftoff"] .city-light-field { filter:blur(.4px); }
.launch-stage[data-phase="clouds"] .cockpit-camera { filter:brightness(.93) contrast(1.02); }
.launch-stage[data-phase="above-clouds"] .launch-sky { background:linear-gradient(180deg,#236398 0%,#67a5ca 46%,#d8edf7 100%); }
.launch-stage[data-phase="upper-atmosphere"] .launch-sky { background:linear-gradient(180deg,#071a35 0%,#16385c 50%,#6f9ab2 100%); }

@keyframes cockpit-idle-view { from{transform:translate3d(-1px,1px,0) scale(1.018)} to{transform:translate3d(2px,-1px,0) scale(1.022)} }
@keyframes cockpit-idle-frame { from{transform:translate3d(-.5px,0,0) rotate(-.025deg)} to{transform:translate3d(.7px,.5px,0) rotate(.025deg)} }
@keyframes ground-heat-breathe { from{filter:brightness(.98) saturate(.98)} to{filter:brightness(1.035) saturate(1.03)} }
@keyframes city-beacon { 0%,72%,100%{opacity:.18} 76%,86%{opacity:1} }
@keyframes city-light-shimmer { from{filter:brightness(.9)} to{filter:brightness(1.12)} }
@keyframes wisp-drift { from{transform:translate3d(-2%,2%,0) scale(1)} to{transform:translate3d(3%,-3%,0) scale(1.06)} }
@keyframes instrument-spin { to{transform:rotate(360deg)} }
@keyframes telemetry-pulse { from{opacity:.35;transform:scaleY(.85)} to{opacity:.85;transform:scaleY(1)} }

@media (max-width:900px){
  .intro h1{top:18%;font-size:clamp(30px,6vw,50px)} .intro-copy{top:28.5%;width:68vw}.launch-button{bottom:19.5%}
  .console-left{left:4%;width:26%}.console-right{right:4%;width:26%}.console-center{left:34%;width:32%}.instrument-ring{transform:scale(.86);transform-origin:left top}.mini-readout{left:39%}
  .companion{width:clamp(155px,22vw,220px)}
}
@media (max-width:700px){
  .intro .eyebrow{top:12.8%;font-size:6px}.intro h1{top:16%;width:88vw;font-size:clamp(28px,9vw,42px)}.intro-copy{top:26.5%;width:78vw;font-size:10px}.launch-button{bottom:20.8%}
  .cockpit-dashboard{height:22%}.console-center{display:none}.console-left{left:8%;width:38%}.console-right{right:8%;width:38%}.dashboard-screen{right:9%;top:17%;min-width:104px}.cockpit-brand{left:28%;top:20%}
  .launch-complex{width:86vw}.companion{bottom:7%;width:clamp(138px,39vw,182px)}.companion-a{left:-10%}.companion-b{right:-10%}.speech-bubble{width:min(190px,52vw)}.speech-bubble.speaker-a{left:2.5%;bottom:50%}.speech-bubble.speaker-b{right:2.5%;bottom:50%}
}
@media (max-height:700px) and (min-width:701px){ .intro h1{top:14.5%;font-size:clamp(28px,4vw,48px)}.intro .eyebrow{top:11.5%}.intro-copy{display:none}.launch-button{bottom:20%}.companion{bottom:6%;width:clamp(160px,18vw,215px)} }
@media (prefers-reduced-motion:reduce){
  .mission[data-experience="home"] .cockpit-world,.mission[data-experience="home"] .cockpit-camera,.mission[data-experience="home"] .ground-world,.city-light-field,.beacon,.instrument-ring i,.nav-display i,.telemetry-bars i{animation:none !important}
}

/* ==============================================================
   INTRO COCKPIT V4
   Layered cockpit UI with image sprite companions.
   Planet scenes remain unchanged.
   ============================================================== */
.mission[data-experience="home"] .masthead,
.mission[data-experience="launch"] .masthead {
  display: none !important;
}

.mission[data-experience="home"] .mission-footer,
.mission[data-experience="launch"] .mission-footer {
  z-index: 30;
}

.intro {
  inset: 0;
  z-index: 24;
  pointer-events: none;
  text-align: center;
}
.intro-brand-mark {
  position: absolute;
  left: 50%;
  top: 10.2%;
  width: clamp(48px, 4.6vw, 72px);
  transform: translateX(-50%);
  color: #f3f5f7;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.34));
}
.intro-brand-mark svg { width: 100%; height: auto; overflow: visible; }
.intro-brand-mark path:first-child { fill: currentColor; stroke: none; }
.intro-brand-mark path:nth-child(2) { fill: none; stroke: #ddb36d; stroke-width: 2.2; stroke-linecap: round; }
.intro-brand-mark circle { fill: #ddb36d; }
.intro h1 {
  top: 18%;
  width: auto;
  color: #f5f7fa;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(46px, 5.7vw, 88px);
  font-weight: 400;
  letter-spacing: .18em;
  line-height: .92;
  text-indent: .18em;
  text-shadow: 0 8px 32px rgba(0,0,0,.42);
}
.intro-kicker {
  position: absolute;
  left: 50%;
  top: 29.2%;
  transform: translateX(-50%);
  margin: 0;
  width: min(520px, 62vw);
  color: rgba(236,240,244,.78);
  font-size: clamp(6px, .7vw, 10px);
  letter-spacing: .31em;
  line-height: 1.7;
}
.intro-copy {
  top: 36.5%;
  width: min(470px, 48vw);
  color: rgba(238,242,247,.82);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(13px, 1.15vw, 18px);
  line-height: 1.45;
  text-shadow: 0 4px 22px rgba(0,0,0,.5);
}
.launch-button {
  z-index: 32;
  bottom: 27.5%;
  min-width: clamp(205px, 18vw, 290px);
  min-height: 52px;
  justify-content: center;
  gap: 28px;
  padding: 0 26px;
  border-radius: 999px;
  border-color: rgba(255,231,187,.9);
  color: #161716;
  font-size: 13px;
  letter-spacing: .11em;
  box-shadow: 0 18px 44px rgba(0,0,0,.34), 0 0 0 1px rgba(255,247,224,.5) inset, 0 0 35px rgba(231,184,97,.12);
}
.launch-button::before,
.launch-button::after { display: none; }
.launch-button:hover { transform: translateX(-50%) translateY(-2px); }
.intro-motto {
  position: absolute;
  left: 50%;
  bottom: 22.7%;
  transform: translateX(-50%);
  margin: 0;
  color: rgba(229,235,240,.6);
  font-size: 6px;
  line-height: 1.6;
  letter-spacing: .27em;
}

.cockpit-camera { z-index: 12; pointer-events: none; }
.cockpit-window-depth { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.cockpit-window-depth span { position: absolute; display: block; }
.window-depth-top {
  left: 10%; right: 10%; top: 8%; height: 6.5%;
  clip-path: polygon(4% 0,96% 0,100% 100%,0 100%);
  background: linear-gradient(180deg,#1d3041,#08111d 72%);
  border-bottom: 1px solid rgba(236,199,133,.25);
  box-shadow: 0 12px 26px rgba(0,0,0,.38), inset 0 -1px rgba(255,255,255,.04);
}
.window-depth-bottom {
  left: 8%; right: 8%; bottom: 25.8%; height: 4.1%;
  clip-path: polygon(2% 0,98% 0,100% 100%,0 100%);
  background: linear-gradient(180deg,#22394d,#0a1421 78%);
  border-top: 1px solid rgba(239,199,126,.34);
  box-shadow: 0 -8px 28px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.04);
}
.window-depth-left,
.window-depth-right {
  top: 10%; bottom: 25%; width: 7.8%;
  background: linear-gradient(90deg,#07101b 0%,#203548 56%,#0b1623 100%);
  box-shadow: inset 0 0 0 1px rgba(226,190,126,.12), 8px 0 24px rgba(0,0,0,.28);
}
.window-depth-left { left: 0; clip-path: polygon(0 0,80% 8%,100% 100%,0 94%); }
.window-depth-right { right: 0; transform: scaleX(-1); clip-path: polygon(0 0,80% 8%,100% 100%,0 94%); }

.cockpit-roof {
  z-index: 4;
  left: -4%; right: -4%; top: -2.5%; height: 13.4%;
  background: linear-gradient(180deg,#050a11 0%,#122235 62%,#07101a 100%);
  box-shadow: 0 16px 34px rgba(0,0,0,.42), inset 0 -1px rgba(229,195,130,.14);
}
.cockpit-roof::before {
  content: "";
  position: absolute;
  left: 8%; right: 8%; bottom: 4%; height: 4px;
  background: linear-gradient(90deg,transparent,rgba(238,196,118,.8) 17%,rgba(119,189,223,.25) 50%,rgba(238,196,118,.8) 83%,transparent);
  filter: blur(.2px);
  opacity: .65;
}
.cockpit-pillar { z-index: 5; top: 7%; bottom: 23%; width: 8.1%; opacity: 1; }
.pillar-left { left: -1.6%; transform: perspective(540px) rotateY(-7deg); }
.pillar-right { right: -1.6%; transform: perspective(540px) rotateY(7deg); }

.cockpit-side-module {
  position: absolute;
  z-index: 7;
  top: 19%;
  width: 4.5%;
  height: 44%;
  border: 1px solid rgba(212,181,123,.13);
  background: linear-gradient(180deg,rgba(25,45,60,.94),rgba(4,10,17,.96));
  box-shadow: inset 0 0 24px rgba(65,126,157,.08), 0 18px 34px rgba(0,0,0,.3);
}
.side-module-left { left: 4.4%; clip-path: polygon(18% 0,100% 7%,90% 100%,0 92%); }
.side-module-right { right: 4.4%; clip-path: polygon(0 7%,82% 0,100% 92%,10% 100%); }
.cockpit-side-module i {
  position: absolute;
  left: 29%; right: 29%;
  height: 4px;
  border-radius: 10px;
  background: #d7ad64;
  box-shadow: 0 0 8px rgba(232,186,102,.34);
}
.cockpit-side-module i:nth-child(1) { top: 23%; }
.cockpit-side-module i:nth-child(2) { top: 49%; background: #74b6d7; box-shadow: 0 0 8px rgba(107,185,224,.3); }
.cockpit-side-module i:nth-child(3) { top: 75%; }

.cockpit-dashboard {
  z-index: 10;
  left: -3.5%; right: -3.5%; bottom: -6.2%; height: 31.5%;
  clip-path: polygon(0 22%,12% 6%,32% 13%,43% 4%,57% 4%,68% 13%,88% 6%,100% 22%,100% 100%,0 100%);
  background: linear-gradient(180deg,#1e3447 0%,#0b1725 21%,#050b13 100%);
  border-top-color: rgba(232,196,128,.32);
  box-shadow: 0 -18px 48px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.035);
}
.cockpit-dashboard::after {
  content: "";
  position: absolute;
  left: 16%; right: 16%; top: 15%; height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg,transparent,#d7ad64 14%,#72b4d4 50%,#d7ad64 86%,transparent);
  opacity: .38;
  filter: blur(.3px);
}
.console-bank {
  top: 31%;
  height: 57%;
  border-color: rgba(123,174,203,.2);
  background: linear-gradient(180deg,rgba(7,19,31,.92),rgba(2,8,14,.88));
  box-shadow: inset 0 1px rgba(255,255,255,.04), inset 0 0 22px rgba(68,128,159,.06), 0 10px 20px rgba(0,0,0,.2);
}
.console-left { left: 9.2%; width: 24.5%; }
.console-center { left: 36.2%; width: 27.6%; }
.console-right { right: 9.2%; width: 24.5%; }
.nav-display { top: 10%; height: 52%; border-radius: 7px; }
.nav-display::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%,rgba(100,169,202,.1),transparent 58%), linear-gradient(180deg,rgba(255,255,255,.02),transparent 40%);
}
.cockpit-brand { top: 20%; }
.dashboard-lights { left: 10%; top: 20%; }
.dashboard-screen { right: 10%; top: 18%; }

/* Image sprite companions */
.companion {
  z-index: 16;
  bottom: 8.7%;
  width: clamp(300px,29vw,480px);
  height: min(76vh,760px);
  filter: drop-shadow(0 28px 34px rgba(0,0,0,.46));
  transition: opacity .2s ease;
  pointer-events: none;
}
.companion-a { left: -1.5%; transform: translate3d(var(--char-a-x),var(--char-a-y),0); }
.companion-b { right: -1.5%; transform: translate3d(var(--char-b-x),var(--char-b-y),0); }
.character-sprite-frame { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; overflow: visible; }
.character-sprite {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: 50% 100%;
  animation: sprite-breathe 5.8s ease-in-out infinite;
  transition: opacity .15s ease, transform .18s ease, filter .18s ease;
}
.companion-b .character-sprite { animation-delay: -2.4s; }
.companion.is-sprite-changing .character-sprite { opacity: .15; transform: translateY(4px) scale(.992); filter: blur(.4px); }
.companion.is-talking .character-sprite { animation: sprite-talk .48s ease-in-out infinite alternate; }
.character-identity {
  position: absolute;
  top: 27%;
  width: 108px;
  padding: 12px 12px 13px;
  border-top: 1px solid rgba(218,178,104,.72);
  border-bottom: 1px solid rgba(117,169,198,.16);
  background: linear-gradient(90deg,rgba(232,240,246,.1),transparent);
  color: rgba(233,239,244,.78);
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.identity-left { left: 7%; }
.identity-right { right: 7%; text-align: right; background: linear-gradient(-90deg,rgba(232,240,246,.1),transparent); }
.character-identity strong { display: block; margin-bottom: 8px; color: #f1f4f7; font-size: 13px; letter-spacing: .11em; }
.character-identity span { display: block; font-size: 7.5px; line-height: 1.55; letter-spacing: .03em; }

.speech-bubble {
  z-index: 22;
  width: min(260px,22vw);
  bottom: 53%;
  border-radius: 9px;
  background: linear-gradient(145deg,rgba(7,17,28,.91),rgba(5,12,20,.82));
  box-shadow: 0 14px 40px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.04);
}
.speech-bubble.speaker-a { left: 21%; }
.speech-bubble.speaker-b { right: 21%; }

@keyframes sprite-breathe {
  0%,100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.004); }
}
@keyframes sprite-talk {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-2px) scale(1.006); }
}

@media (max-width: 1100px) {
  .companion { width: clamp(270px,30vw,390px); }
  .character-identity { display: none; }
  .speech-bubble.speaker-a { left: 16%; }
  .speech-bubble.speaker-b { right: 16%; }
  .intro h1 { font-size: clamp(42px,6vw,68px); }
}
@media (max-width: 900px) {
  .intro-brand-mark { top: 9%; }
  .intro h1 { top: 17%; }
  .intro-kicker { top: 28%; width: 68vw; }
  .intro-copy { top: 35%; width: 62vw; }
  .launch-button { bottom: 28.5%; }
  .intro-motto { bottom: 23.4%; }
  .companion { width: clamp(235px,33vw,330px); bottom: 9.5%; }
  .companion-a { left: -6%; }
  .companion-b { right: -6%; }
  .speech-bubble { width: min(225px,30vw); }
  .speech-bubble.speaker-a { left: 12%; }
  .speech-bubble.speaker-b { right: 12%; }
  .cockpit-dashboard { height: 30%; }
}
@media (max-width: 700px) {
  .intro-brand-mark { top: 8%; width: 46px; }
  .intro h1 { top: 15.5%; font-size: clamp(34px,10vw,48px); }
  .intro-kicker { top: 25%; width: 78vw; font-size: 5.5px; }
  .intro-copy { top: 31.5%; width: 70vw; font-size: 11px; }
  .launch-button { bottom: 27.5%; min-width: 182px; min-height: 47px; }
  .intro-motto { bottom: 21.7%; }
  .companion { width: clamp(185px,45vw,260px); height: 58vh; bottom: 11.5%; }
  .companion-a { left: -15%; }
  .companion-b { right: -15%; }
  .speech-bubble { width: min(185px,52vw); bottom: 49%; }
  .speech-bubble.speaker-a { left: 3%; }
  .speech-bubble.speaker-b { right: 3%; }
  .window-depth-left,.window-depth-right { width: 11%; }
  .cockpit-side-module { display: none; }
  .cockpit-dashboard { height: 28%; bottom: -5%; }
  .console-left { left: 7%; width: 39%; }
  .console-right { right: 7%; width: 39%; }
}
@media (max-height: 700px) and (min-width: 701px) {
  .intro-brand-mark { top: 7%; width: 46px; }
  .intro h1 { top: 14%; font-size: 48px; }
  .intro-kicker { top: 24%; }
  .intro-copy { top: 30.5%; display: block; }
  .launch-button { bottom: 29%; min-height: 44px; }
  .intro-motto { bottom: 23.2%; }
  .companion { width: clamp(235px,27vw,330px); height: 68vh; bottom: 8.5%; }
  .speech-bubble { bottom: 48% !important; }
}
@media (prefers-reduced-motion: reduce) {
  .character-sprite { animation: none !important; }
}

/* ==============================================================
   CHARACTER + SIDE STRUCTURE STRICT FIX V3
   STEP 1: clean framing and lower-body-only occlusion.
   STEP 2: side structures read as cockpit architecture, behind crew.
   ============================================================== */

/* STEP 1 — character framing. The sprite assets are already trimmed to their
   visible alpha bounds, so the layout no longer scales hundreds of transparent
   pixels above the characters. This keeps the real head/torso position stable. */
.cockpit-camera {
  z-index: 12;
  pointer-events: none;
}

.companion {
  z-index: 8;
  bottom: 10.6%;
  width: clamp(330px, 30vw, 500px);
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 24px 30px rgba(0,0,0,.40));
}
.companion-a { left: 2.1%; }
.companion-b {
  right: 1.8%;
  width: clamp(390px, 36vw, 620px);
}

.character-sprite-frame {
  position: relative;
  inset: auto;
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.character-sprite {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  object-fit: contain;
  object-position: center bottom;
}

/* The foreground now intersects only the lower body. It is intentionally
   shallower than the previous version, so it cannot cover chest/shoulders. */
.cockpit-dashboard {
  z-index: 10;
  height: 22.5%;
  bottom: -5%;
  clip-path: polygon(0 25%,12% 9%,32% 15%,43% 7%,57% 7%,68% 15%,88% 9%,100% 25%,100% 100%,0 100%);
}

/* UI stays above the local cockpit depth stack. */
.speech-bubble { z-index: 22; }
.launch-button { z-index: 32; }

/* STEP 2 — side cockpit structure. These pieces stay BEHIND the companions,
   so they add physical spacecraft depth without covering faces or torsos. */
.window-depth-left,
.window-depth-right {
  z-index: 3;
  top: 9.5%;
  bottom: 21.5%;
  width: 8.6%;
  background:
    linear-gradient(90deg,rgba(2,7,13,.98) 0 13%,rgba(31,54,72,.98) 35%,rgba(10,22,34,.98) 68%,rgba(4,10,17,.99) 100%);
  border: 1px solid rgba(222,188,126,.15);
  box-shadow: inset 0 0 0 1px rgba(110,168,200,.07), 10px 0 28px rgba(0,0,0,.30);
}
.window-depth-left { left: -1%; clip-path: polygon(0 0,70% 0,100% 13%,88% 45%,100% 100%,0 94%); }
.window-depth-right { right: -1%; transform: none; clip-path: polygon(30% 0,100% 0,100% 94%,0 100%,12% 45%,0 13%); }

.cockpit-pillar {
  z-index: 5;
  top: 8%;
  bottom: 21%;
  width: 7.6%;
  opacity: 1;
  border: 1px solid rgba(225,190,126,.13);
  background:
    linear-gradient(105deg,rgba(255,255,255,.035) 0 8%,transparent 8% 22%,rgba(112,171,202,.07) 22% 28%,transparent 28%),
    linear-gradient(90deg,#040a11 0%,#1d3143 45%,#0a1521 72%,#040910 100%);
  box-shadow: inset 0 0 22px rgba(82,145,178,.08), 0 18px 34px rgba(0,0,0,.34);
}
.pillar-left {
  left: -.8%;
  transform: none;
  clip-path: polygon(0 0,67% 3%,100% 18%,79% 54%,100% 100%,0 94%);
}
.pillar-right {
  right: -.8%;
  transform: none;
  clip-path: polygon(33% 3%,100% 0,100% 94%,0 100%,21% 54%,0 18%);
}
.cockpit-pillar::before,
.cockpit-pillar::after {
  content: "";
  position: absolute;
  height: 2px;
  width: 76%;
  background: linear-gradient(90deg,transparent,rgba(232,189,112,.62),rgba(112,180,213,.25),transparent);
  box-shadow: 0 0 9px rgba(220,176,98,.18);
}
.cockpit-pillar::before { top: 29%; left: 10%; transform: rotate(8deg); }
.cockpit-pillar::after { bottom: 25%; left: 14%; transform: rotate(-7deg); }
.pillar-right::before { transform: rotate(-8deg); }
.pillar-right::after { transform: rotate(7deg); }

.cockpit-side-module {
  z-index: 7;
  top: 17.5%;
  width: 5.4%;
  height: 47%;
  border: 1px solid rgba(216,183,120,.14);
  background:
    linear-gradient(115deg,rgba(255,255,255,.035),transparent 24%),
    linear-gradient(180deg,#1b3041 0%,#0b1825 47%,#050b12 100%);
  box-shadow: inset 0 0 24px rgba(64,128,160,.09), 0 18px 30px rgba(0,0,0,.28);
}
.side-module-left {
  left: 5.1%;
  clip-path: polygon(28% 0,100% 8%,82% 43%,100% 100%,0 91%,15% 50%,0 14%);
}
.side-module-right {
  right: 5.1%;
  clip-path: polygon(0 8%,72% 0,100% 14%,85% 50%,100% 91%,0 100%,18% 43%);
}
.cockpit-side-module::before {
  content: "";
  position: absolute;
  inset: 10% 23%;
  border: 1px solid rgba(109,169,201,.15);
  background: linear-gradient(180deg,rgba(3,11,19,.36),rgba(2,7,13,.72));
  clip-path: polygon(12% 0,100% 8%,88% 100%,0 92%);
}
.cockpit-side-module::after {
  content: "";
  position: absolute;
  top: 8%; bottom: 8%; width: 2px;
  background: linear-gradient(180deg,transparent,rgba(229,184,104,.66) 22%,rgba(103,176,210,.36) 53%,rgba(229,184,104,.55) 78%,transparent);
  filter: drop-shadow(0 0 5px rgba(222,175,94,.25));
}
.side-module-left::after { right: 17%; transform: rotate(4deg); }
.side-module-right::after { left: 17%; transform: rotate(-4deg); }
.cockpit-side-module i {
  left: 34%; right: 34%; height: 3px; border-radius: 999px;
}

@media (max-width: 1100px) {
  .companion { bottom: 10.8%; width: clamp(285px, 31vw, 405px); }
  .companion-b { width: clamp(315px, 35vw, 465px); }
  .companion-a { left: .5%; }
  .companion-b { right: .5%; }
  .cockpit-dashboard { height: 22%; bottom: -4.8%; }
}

@media (max-width: 900px) {
  .companion { bottom: 11%; width: clamp(245px, 36vw, 345px); }
  .companion-b { width: clamp(265px, 39vw, 385px); }
  .companion-a { left: -4%; }
  .companion-b { right: -4%; }
  .cockpit-dashboard { height: 22%; bottom: -4.5%; }
  .cockpit-side-module { width: 5.8%; }
}

@media (max-width: 700px) {
  .companion { bottom: 12%; width: clamp(190px, 45vw, 270px); }
  .companion-b { width: clamp(205px, 47vw, 290px); }
  .companion-a { left: -12%; }
  .companion-b { right: -12%; }
  .cockpit-dashboard { height: 23%; bottom: -4%; }
  .cockpit-side-module { display: none; }
}

@media (max-height: 700px) and (min-width: 701px) {
  .companion { bottom: 9.8%; width: clamp(260px, 29vw, 390px); }
  .companion-b { width: clamp(285px, 34vw, 455px); }
  .cockpit-dashboard { height: 22%; bottom: -4.5%; }
}
\n\n/* ==============================================================
   TARGETED ASCENT REFINEMENT — requested 2026-09-24
   Only center copy, persistent branding, window detail, timing-linked
   cockpit telemetry, and first-bubble presentation are affected.
   ============================================================== */

/* Persistent ANTARA lockup. It sits outside the moving cockpit camera, so
   turbulence, camera translation and handoff cannot clip or move it away. */
.launch-brand-lockup {
  position: absolute;
  z-index: 34;
  top: 3.4%;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 2px;
  width: 150px;
  color: #f4f6f8;
  pointer-events: none;
  opacity: 1;
  filter: drop-shadow(0 5px 18px rgba(0,0,0,.42));
}
.launch-brand-lockup svg { width: 39px; height: 39px; overflow: visible; }
.launch-brand-lockup svg path:first-child { fill: currentColor; }
.launch-brand-lockup svg path:nth-child(2) { fill: none; stroke: #ddb36d; stroke-width: 2.2; stroke-linecap: round; }
.launch-brand-lockup svg circle { fill: #ddb36d; }
.launch-brand-lockup strong { font: 500 14px/1.1 Georgia,"Times New Roman",serif; letter-spacing: .28em; text-indent: .28em; }
.launch-brand-lockup small { color: rgba(229,235,240,.62); font-size: 5px; letter-spacing: .22em; }
.mission[data-experience="home"] .launch-brand-lockup,
.mission[data-experience="launch"] .launch-brand-lockup { display: grid; visibility: visible; opacity: 1; }

/* Exact requested center title, resized only so the longer copy fits cleanly. */
.intro h1 {
  top: 16.8%;
  width: min(840px,76vw);
  font-family: Georgia,"Times New Roman",serif;
  font-size: clamp(27px,3.35vw,52px);
  line-height: 1.08;
  letter-spacing: .015em;
  text-indent: 0;
}
.intro-kicker { top: 28.3%; }
.intro-copy { top: 35.4%; }

/* More specific early-stage depth through the window. These layers stay in
   the existing 2D cockpit-world and fade/recede with the established ascent. */
.atmosphere-bands {
  position: absolute;
  z-index: 1;
  inset: 0;
  opacity: calc(.78 - var(--space-mix) * .68);
  background:
    linear-gradient(180deg,transparent 0 26%,rgba(124,181,215,.06) 37%,transparent 50%),
    radial-gradient(ellipse at 50% 57%,rgba(235,194,139,.18),rgba(111,164,201,.07) 32%,transparent 64%);
  pointer-events: none;
}
.horizon-cloud-bank {
  position: absolute;
  z-index: 3;
  left: -12%; right: -12%; bottom: 31%; height: 23%;
  opacity: calc(var(--ground-opacity) * .72);
  transform: translate3d(calc(var(--cam-x) * -.06),calc(var(--ground-progress) * 12vh),0) scale(calc(1 + var(--ground-progress) * .12));
  background:
    radial-gradient(ellipse at 8% 72%,rgba(241,247,250,.74) 0 8%,rgba(190,214,228,.25) 15%,transparent 26%),
    radial-gradient(ellipse at 27% 58%,rgba(247,250,252,.68) 0 10%,rgba(190,215,230,.23) 18%,transparent 29%),
    radial-gradient(ellipse at 49% 70%,rgba(235,244,249,.72) 0 11%,rgba(175,205,223,.22) 20%,transparent 31%),
    radial-gradient(ellipse at 71% 56%,rgba(246,250,252,.70) 0 10%,rgba(188,214,229,.22) 19%,transparent 30%),
    radial-gradient(ellipse at 92% 68%,rgba(239,247,250,.72) 0 9%,rgba(181,208,225,.20) 18%,transparent 29%);
  filter: blur(5px);
  pointer-events: none;
}
.urban-haze {
  position: absolute;
  z-index: 0;
  left: -4%; right: -4%; bottom: 23%; height: 40%;
  background: linear-gradient(180deg,transparent,rgba(137,174,196,.12) 47%,rgba(220,174,112,.12) 75%,transparent);
  filter: blur(10px);
  opacity: calc(.78 - var(--ground-progress) * .58);
}
.skyline-detail {
  position: absolute;
  left: -2%; right: -2%;
  transform-origin: 50% 100%;
  background: repeating-linear-gradient(90deg,#0b1a25 0 8px,transparent 8px 13px,#142a38 13px 22px,transparent 22px 29px,#0d202c 29px 34px,transparent 34px 42px);
  mask-image: linear-gradient(180deg,#000,#000 80%,transparent);
}
.skyline-back {
  z-index: 1;
  bottom: 29%; height: 16%; opacity: calc(.48 - var(--ground-progress) * .34);
  transform: scale(.86) translateY(calc(var(--ground-progress) * 5vh));
  filter: blur(.55px);
  clip-path: polygon(0 100%,0 63%,4% 63%,4% 41%,7% 41%,7% 71%,11% 71%,11% 30%,14% 30%,14% 61%,18% 61%,18% 48%,22% 48%,22% 70%,26% 70%,26% 37%,30% 37%,30% 57%,34% 57%,34% 28%,38% 28%,38% 64%,43% 64%,43% 42%,47% 42%,47% 68%,51% 68%,51% 33%,56% 33%,56% 56%,61% 56%,61% 25%,65% 25%,65% 63%,70% 63%,70% 39%,74% 39%,74% 68%,79% 68%,79% 34%,84% 34%,84% 58%,89% 58%,89% 43%,94% 43%,94% 65%,100% 65%,100% 100%);
}
.skyline-front {
  z-index: 3;
  bottom: 12%; height: 24%; opacity: calc(.86 - var(--ground-progress) * .62);
  transform: scale(1.04) translateY(calc(var(--ground-progress) * 8vh));
  clip-path: polygon(0 100%,0 68%,3% 68%,3% 43%,6% 43%,6% 76%,9% 76%,9% 26%,13% 26%,13% 58%,16% 58%,16% 38%,20% 38%,20% 71%,24% 71%,24% 32%,28% 32%,28% 61%,31% 61%,31% 21%,35% 21%,35% 66%,39% 66%,39% 41%,43% 41%,43% 73%,47% 73%,47% 30%,51% 30%,51% 58%,55% 58%,55% 24%,59% 24%,59% 65%,63% 65%,63% 36%,67% 36%,67% 72%,71% 72%,71% 29%,75% 29%,75% 60%,79% 60%,79% 40%,83% 40%,83% 70%,87% 70%,87% 33%,91% 33%,91% 57%,95% 57%,95% 45%,100% 45%,100% 100%);
}
.urban-depth-lights {
  position: absolute;
  z-index: 4;
  left: 2%; right: 2%; bottom: 9%; height: 29%;
  opacity: calc(.9 - var(--ground-progress) * .66);
  background-image:
    radial-gradient(circle,rgba(255,214,147,.92) 0 1px,transparent 1.6px),
    radial-gradient(circle,rgba(113,190,229,.66) 0 1px,transparent 1.6px),
    linear-gradient(90deg,transparent 0 49.8%,rgba(238,191,116,.12) 49.9% 50.1%,transparent 50.2%);
  background-size: 37px 21px,59px 33px,96px 100%;
  background-position: 4px 7px,19px 14px,0 0;
  mask-image: linear-gradient(180deg,transparent,#000 26%,#000 100%);
}

/* Functional lower cockpit telemetry. */
.panel-heading {
  position: absolute;
  left: 7%; right: 7%; top: 8%;
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  color: #718fa2; font-size: 5.5px; letter-spacing: .16em;
}
.panel-heading b { color: #b7d4e5; font: 600 7.5px/1 monospace; letter-spacing: .05em; }
.altitude-chart { position: absolute; left: 7%; right: 7%; top: 28%; width: 86%; height: 47%; overflow: visible; }
.altitude-grid { fill: none; stroke: rgba(112,166,197,.10); stroke-width: .7; }
#altitude-chart-line { fill: none; stroke: #82c2df; stroke-width: 1.9; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 3px rgba(112,193,229,.38)); }
#altitude-chart-dot { fill: #ebc77f; filter: drop-shadow(0 0 3px rgba(235,199,127,.65)); }
.climb-readout { position: absolute; left: 7%; right: 7%; bottom: 7%; display: flex; justify-content: space-between; align-items: baseline; }
.climb-readout small { color: #607e91; font-size: 5px; letter-spacing: .16em; }
.climb-readout strong { color: #d5b775; font: 600 6.8px/1 monospace; }

.mission-track { position: absolute; left: 8%; right: 8%; top: 39%; height: 28px; }
.track-line { position: absolute; left: 8%; right: 8%; top: 50%; height: 1px; background: linear-gradient(90deg,#6aa8c8,#d8b66f); box-shadow: 0 0 6px rgba(110,173,205,.22); }
.track-line::before,.track-line::after { content:""; position:absolute; top:50%; width:5px; height:5px; transform:translateY(-50%); border:1px solid rgba(218,184,111,.65); border-radius:50%; background:#0b1a27; }
.track-line::before { left:0; }.track-line::after { right:0; }
.track-origin,.track-destination { position:absolute; top:21px; color:#5f7d8e; font-size:4.5px; letter-spacing:.12em; }
.track-origin { left:5%; }.track-destination { right:4%; }
.rocket-marker { position:absolute; left:8%; top:50%; width:23px; height:12px; transform:translate(-50%,-50%); transition:left .12s linear; filter:drop-shadow(0 0 5px rgba(230,191,114,.35)); }
.rocket-marker svg { display:block; width:100%; height:100%; fill:#e5bd72; stroke:#f2d79d; stroke-width:.4; }
.mission-stage-text { position:absolute; left:8%; right:8%; bottom:8%; text-align:center; color:#8fb6cd; font:500 5.5px/1 monospace; letter-spacing:.13em; }

.flight-data-grid { position:absolute; left:8%; right:8%; top:30%; display:grid; grid-template-columns:auto 1fr; column-gap:10px; row-gap:8px; align-items:baseline; }
.flight-data-grid span { color:#58788b; font-size:5px; letter-spacing:.13em; }
.flight-data-grid strong { color:#9ec7db; font:600 6.6px/1 monospace; text-align:right; }
.flight-data-grid strong:nth-of-type(2) { color:#d7b873; }

/* Keep telemetry legible without changing the cockpit geometry. */
.altitude-panel,.mission-progress-panel,.flight-data-panel { overflow:hidden; }

@media (max-width:900px) {
  .launch-brand-lockup { top:2.7%; transform:translateX(-50%) scale(.88); transform-origin:50% 0; }
  .intro h1 { top:15.8%; width:82vw; font-size:clamp(25px,5.5vw,42px); }
  .intro-kicker { top:27.2%; }
  .intro-copy { top:34.5%; }
  .panel-heading { font-size:4.8px; }
  .panel-heading b { font-size:6.5px; }
}
@media (max-width:700px) {
  .launch-brand-lockup { top:2%; transform:translateX(-50%) scale(.78); }
  .intro h1 { top:14.5%; width:88vw; font-size:clamp(23px,7vw,34px); }
  .intro-kicker { top:25.8%; }
  .intro-copy { top:32.2%; }
  .flight-data-grid { row-gap:6px; }
}

/* Keep all three required telemetry panels present on narrow layouts too. */
@media (max-width:700px) {
  .cockpit-dashboard { height:30%; }
  .console-left,.console-center,.console-right { display:block; top:34%; width:29%; height:54%; }
  .console-left { left:3%; }
  .console-center { left:35.5%; }
  .console-right { right:3%; }
  .panel-heading { left:6%; right:6%; font-size:4.1px; letter-spacing:.09em; }
  .panel-heading b { font-size:5.4px; }
  .altitude-chart { left:6%; right:6%; width:88%; }
  .climb-readout strong { font-size:5.3px; }
  .track-origin,.track-destination { font-size:3.8px; }
  .mission-stage-text { font-size:4.4px; }
  .flight-data-grid { left:6%; right:6%; column-gap:4px; row-gap:5px; }
  .flight-data-grid span { font-size:3.8px; }
  .flight-data-grid strong { font-size:4.8px; }
  .dashboard-screen { display:none; }
}

/* ==============================================================
   TARGETED COCKPIT REFINEMENT — rocket track / active roof / city / top brand
   Requested changes only. Planet scenes and character systems are untouched.
   ============================================================== */

/* STEP 1 — center lower panel: a single, unmistakable horizontal spacecraft track. */
.mission-progress-panel {
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(8,20,31,.96), rgba(2,8,14,.94));
}
.mission-progress-panel::before,
.mission-progress-panel::after { content: none !important; }
.mission-progress-panel .mission-track {
  left: 7%;
  right: 7%;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}
.mission-progress-panel .track-line {
  left: 4%;
  right: 4%;
  top: 50%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(100,171,207,.30), rgba(111,188,223,.82) 32%, rgba(226,189,112,.88) 100%);
  box-shadow: 0 0 9px rgba(105,178,214,.18);
}
.mission-progress-panel .track-line::before,
.mission-progress-panel .track-line::after {
  width: 7px;
  height: 7px;
  border-color: rgba(229,191,113,.72);
  background: #07131f;
  box-shadow: 0 0 8px rgba(225,184,105,.2);
}
.mission-progress-panel .rocket-marker {
  left: 8%;
  top: 50%;
  width: clamp(36px, 3.2vw, 54px);
  height: auto;
  aspect-ratio: 58 / 24;
  transform: translate(-50%,-50%);
  transition: left .12s linear;
  filter: drop-shadow(0 0 7px rgba(232,194,116,.42));
}
.mission-progress-panel .rocket-marker svg { width: 100%; height: 100%; overflow: visible; }
.rocket-body-icon { fill: #e8c47f; stroke: #ffe1a6; stroke-width: .6; }
.rocket-wing-icon { fill: #aac9d9; stroke: #d7ecf5; stroke-width: .5; }
.rocket-window-icon { fill: #163b52; stroke: #d8eff7; stroke-width: .6; }
.rocket-flame-icon {
  fill: #f2b366;
  stroke: #ffe1a0;
  stroke-width: .4;
  transform-origin: 100% 50%;
  animation: antara-rocket-flame .58s ease-in-out infinite alternate;
}
@keyframes antara-rocket-flame {
  from { transform: scaleX(.72); opacity: .62; }
  to { transform: scaleX(1.16); opacity: 1; }
}

/* STEP 2 — the upper black cockpit structure now has restrained live instrumentation. */
.cockpit-roof {
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(72,115,143,.08), transparent 22%, transparent 78%, rgba(72,115,143,.08)),
    linear-gradient(180deg,#040910 0%,#101f2e 58%,#07101a 100%);
}
.cockpit-roof::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 12%;
  bottom: 14%;
  border-top: 1px solid rgba(143,183,207,.09);
  border-bottom: 1px solid rgba(222,187,122,.08);
  background:
    linear-gradient(105deg, transparent 0 44%, rgba(112,178,211,.08) 48%, rgba(236,194,115,.14) 50%, rgba(112,178,211,.08) 52%, transparent 56% 100%);
  transform: translateX(-36%);
  animation: cockpit-roof-sweep 6.8s ease-in-out infinite;
  pointer-events: none;
}
.roof-instrumentation {
  position: absolute;
  inset: 18% 9% 22%;
  z-index: 2;
  pointer-events: none;
}
.roof-status-bank {
  position: absolute;
  top: 36%;
  display: flex;
  gap: clamp(5px, .6vw, 10px);
  align-items: center;
}
.roof-status-left { left: 4%; }
.roof-status-right { right: 4%; }
.roof-status-bank i {
  width: clamp(3px,.32vw,5px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #6eb2d3;
  box-shadow: 0 0 8px rgba(110,178,211,.48);
  opacity: .32;
  animation: cockpit-roof-pulse 3.3s ease-in-out infinite;
}
.roof-status-bank i:nth-child(2) { background:#ddb76f; box-shadow:0 0 8px rgba(221,183,111,.45); animation-delay:-.8s; }
.roof-status-bank i:nth-child(3) { animation-delay:-1.7s; }
.roof-status-bank i:nth-child(4) { background:#ddb76f; box-shadow:0 0 8px rgba(221,183,111,.45); animation-delay:-2.4s; }
.roof-sensor-strip {
  position: absolute;
  left: 29%;
  right: 29%;
  top: 34%;
  height: 9px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8%;
  border: 1px solid rgba(111,170,201,.11);
  border-radius: 999px;
  background: rgba(2,8,14,.38);
  box-shadow: inset 0 0 12px rgba(80,148,181,.06);
}
.roof-sensor-strip b {
  display: block;
  width: 14%;
  height: 2px;
  border-radius: 999px;
  background: rgba(112,181,215,.35);
  animation: cockpit-sensor-wave 2.5s ease-in-out infinite;
}
.roof-sensor-strip b:nth-child(2) { animation-delay:-.45s; }
.roof-sensor-strip b:nth-child(3) { background:rgba(224,184,108,.45); animation-delay:-.9s; }
.roof-sensor-strip b:nth-child(4) { animation-delay:-1.35s; }
.roof-sensor-strip b:nth-child(5) { animation-delay:-1.8s; }
@keyframes cockpit-roof-sweep {
  0%,12% { transform: translateX(-38%); opacity:.10; }
  48%,62% { opacity:.62; }
  88%,100% { transform: translateX(38%); opacity:.08; }
}
@keyframes cockpit-roof-pulse {
  0%,68%,100% { opacity:.22; transform:scale(.82); }
  76%,88% { opacity:.95; transform:scale(1); }
}
@keyframes cockpit-sensor-wave {
  0%,100% { opacity:.22; transform:scaleX(.58); }
  50% { opacity:.82; transform:scaleX(1); }
}

/* STEP 1 — strengthen the previously empty top area with subtle canopy structure and living cockpit detail. */
.cockpit-window-depth::before {
  content: "";
  position: absolute;
  left: 9%;
  right: 9%;
  top: 2.8%;
  height: 8.5%;
  border-top: 1px solid rgba(210,228,241,.12);
  border-left: 1px solid rgba(114,164,193,.08);
  border-right: 1px solid rgba(114,164,193,.08);
  border-radius: 22px 22px 110px 110px / 18px 18px 90px 90px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(91,139,168,.02) 48%, transparent 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 24px rgba(0,0,0,.12);
  opacity: .78;
  pointer-events: none;
}
.cockpit-window-depth::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  top: 5.8%;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent 0%, rgba(119,175,205,.10) 12%, rgba(244,206,131,.32) 50%, rgba(119,175,205,.10) 88%, transparent 100%);
  animation: cockpit-top-glint 5.8s ease-in-out infinite;
  pointer-events: none;
}
.cockpit-roof::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 9%;
  height: 26%;
  border-top: 1px solid rgba(134,188,217,.12);
  border-bottom: 1px solid rgba(222,187,122,.06);
  background:
    radial-gradient(circle at 12% 55%, rgba(115,191,224,.22) 0 2px, transparent 2.6px),
    radial-gradient(circle at 21% 55%, rgba(222,187,122,.24) 0 2px, transparent 2.6px),
    radial-gradient(circle at 79% 55%, rgba(222,187,122,.24) 0 2px, transparent 2.6px),
    radial-gradient(circle at 88% 55%, rgba(115,191,224,.22) 0 2px, transparent 2.6px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 16px);
  border-radius: 999px;
  opacity: .9;
  animation: cockpit-top-pulse 4.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes cockpit-top-glint {
  0%,100% { opacity: .2; transform: scaleX(.92); }
  50% { opacity: .85; transform: scaleX(1); }
}
@keyframes cockpit-top-pulse {
  0%,100% { opacity: .58; }
  48%,60% { opacity: .9; }
}

/* STEP 2 — dedicated 2D anime-style launch-center environment replaces the generic street/city view. */
.ground-world { background: transparent; }
.anime-city-backdrop {
  position: absolute;
  z-index: 1;
  left: -4%;
  right: -4%;
  top: -62%;
  bottom: -4%;
  background: url("assets/environment/launch-center-early.svg") center bottom / cover no-repeat;
  filter: saturate(.96) contrast(1.025) brightness(.94);
  transform: translate3d(0,0,0) scale(1.02);
  transform-origin: 50% 100%;
  will-change: transform, filter;
  animation: anime-city-breathe 9s ease-in-out infinite alternate;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 16%, rgba(0,0,0,1) 32%, rgba(0,0,0,1) 100%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 16%, rgba(0,0,0,1) 32%, rgba(0,0,0,1) 100%);
}
.anime-city-backdrop::after {
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(214,235,247,.22) 0%, rgba(140,188,217,.16) 18%, transparent 34%, rgba(236,171,103,.08) 64%, rgba(4,13,21,.14) 100%),
    radial-gradient(ellipse at 50% 55%, transparent 0 38%, rgba(4,13,21,.08) 78%, rgba(3,9,15,.18) 100%);
  pointer-events:none;
}
.anime-city-atmosphere {
  position: absolute;
  z-index: 2;
  left: -10%; right: -10%; top: -34%; height: 88%;
  background:
    radial-gradient(ellipse at 50% 78%, rgba(255,218,172,.20), transparent 50%),
    linear-gradient(180deg, rgba(226,239,246,.14), rgba(188,223,242,.11) 24%, rgba(236,194,150,.12) 70%, transparent 100%);
  filter: blur(8px);
  pointer-events: none;
  animation: anime-city-haze 7.5s ease-in-out infinite alternate;
}
@keyframes anime-city-breathe {
  from { transform: translate3d(-.35%,.2%,0) scale(1.02); filter:saturate(.94) contrast(1.02) brightness(.93); }
  to { transform: translate3d(.35%,-.2%,0) scale(1.024); filter:saturate(1) contrast(1.03) brightness(.97); }
}
@keyframes anime-city-haze {
  from { opacity:.70; transform:translateX(-.7%) translateY(0); }
  to { opacity:.92; transform:translateX(.7%) translateY(-.4%); }
}
.launch-stage[data-phase="liftoff"] .anime-city-backdrop,
.launch-stage[data-phase="climb"] .anime-city-backdrop { filter:saturate(.88) contrast(1.02) brightness(.88); }

/* STEP 4 — the two unwanted center text blocks were removed from HTML. */

/* STEP 5 — ANTARA is anchored visually to the active upper cockpit structure. */
.launch-brand-lockup {
  z-index: 36;
  top: 1.25%;
  left: 50%;
  width: clamp(112px, 9vw, 150px);
  gap: 1px;
  transform: translateX(-50%) translate3d(var(--cam-x),var(--cam-y),0) rotate(var(--cam-tilt));
  transform-origin: 50% 50%;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.5));
}
.launch-brand-lockup svg { width: clamp(28px,2.5vw,38px); height: auto; }
.launch-brand-lockup strong { font-size: clamp(10px,.85vw,14px); letter-spacing:.24em; text-indent:.24em; }
.launch-brand-lockup small { font-size: clamp(3.8px,.34vw,5px); letter-spacing:.18em; }

@media (max-width: 900px) {
  .launch-brand-lockup { top: 1.1%; transform: translateX(-50%) translate3d(var(--cam-x),var(--cam-y),0) rotate(var(--cam-tilt)) scale(.9); }
  .roof-sensor-strip { left:31%; right:31%; }
  .anime-city-backdrop { left:-14%; right:-14%; top:-57%; }
  .mission-progress-panel .rocket-marker { width:clamp(33px,4.4vw,45px); }
}
@media (max-width: 700px) {
  .launch-brand-lockup { top: .75%; transform: translateX(-50%) translate3d(var(--cam-x),var(--cam-y),0) rotate(var(--cam-tilt)) scale(.78); }
  .roof-instrumentation { inset:20% 6% 20%; }
  .roof-status-bank { gap:4px; }
  .roof-sensor-strip { left:34%; right:34%; padding:0 5%; }
  .anime-city-backdrop { left:-30%; right:-30%; top:-42%; background-position:50% 100%; }
  .mission-progress-panel { display:block !important; }
  .mission-progress-panel .mission-track { left:5%; right:5%; height:34px; }
  .mission-progress-panel .rocket-marker { width:34px; }
}
@media (prefers-reduced-motion: reduce) {
  .roof-status-bank i,.roof-sensor-strip b,.cockpit-roof::after,.anime-city-backdrop,.anime-city-atmosphere,.rocket-flame-icon { animation:none !important; }
}


/* ==============================================================
   STRICT TARGETED SYNC / ENVIRONMENT FIX
   Only the requested ground scene, its motion, dialogue-character sync,
   and upper cockpit detail are overridden below.
   ============================================================== */

/* STEP 1 + 2: replace the weak ground view with a stronger illustrated anime
   city / launch-area scene, then keep it alive with restrained layered motion. */
.anime-city-backdrop {
  background-image: url("assets/environment/anime-launch-city-v3.png");
  background-position: 50% 100%;
  background-size: cover;
  left: -8%;
  right: -8%;
  top: -68%;
  bottom: -7%;
  filter: saturate(1.07) contrast(1.04) brightness(.985);
  animation: launch-city-parallax 11s ease-in-out infinite alternate;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.15) 8%, rgba(0,0,0,.72) 22%, #000 38%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.15) 8%, rgba(0,0,0,.72) 22%, #000 38%, #000 100%);
}
.anime-city-backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 55%, rgba(248,229,196,.16), transparent 44%), linear-gradient(180deg, rgba(220,238,247,.13), rgba(171,211,233,.06) 36%, transparent 56%);
  mix-blend-mode: screen;
  opacity: .72;
  animation: launch-city-horizon 8.8s ease-in-out infinite alternate;
  pointer-events: none;
}
.anime-city-backdrop::after {
  background:
    linear-gradient(180deg, rgba(182,220,240,.16) 0%, rgba(199,227,241,.08) 19%, transparent 36%, rgba(235,189,140,.08) 66%, rgba(4,13,21,.10) 100%),
    radial-gradient(ellipse at 50% 59%, rgba(255,223,176,.09), transparent 47%, rgba(4,13,21,.06) 76%, rgba(3,9,15,.15) 100%);
}
.anime-city-lights {
  position:absolute;
  z-index:2;
  left:-9%; right:-9%; bottom:9%; height:36%;
  opacity:calc(.76 - var(--ground-progress) * .5);
  background:
    radial-gradient(circle at 8% 74%, rgba(246,202,112,.95) 0 2px, transparent 3px),
    radial-gradient(circle at 15% 61%, rgba(109,185,219,.72) 0 2px, transparent 3px),
    radial-gradient(circle at 27% 78%, rgba(246,202,112,.84) 0 2px, transparent 3px),
    radial-gradient(circle at 38% 65%, rgba(109,185,219,.60) 0 2px, transparent 3px),
    radial-gradient(circle at 63% 77%, rgba(246,202,112,.84) 0 2px, transparent 3px),
    radial-gradient(circle at 74% 64%, rgba(109,185,219,.62) 0 2px, transparent 3px),
    radial-gradient(circle at 87% 58%, rgba(246,202,112,.92) 0 2px, transparent 3px),
    radial-gradient(circle at 95% 75%, rgba(246,202,112,.88) 0 2px, transparent 3px);
  background-size: 250px 94px,300px 112px,320px 124px,270px 98px,340px 126px,310px 112px,300px 100px,360px 132px;
  filter: drop-shadow(0 0 7px rgba(234,190,103,.35));
  animation: launch-city-lights-drift 7.4s linear infinite;
  pointer-events:none;
}
.anime-city-cloud-band {
  position:absolute;
  z-index:3;
  left:-12%; right:-12%; top:-10%; height:47%;
  opacity:calc(.74 - var(--ground-progress) * .54);
  pointer-events:none;
  filter:blur(2px);
  overflow:hidden;
}
.anime-city-cloud-band i {
  position:absolute;
  width:28%; height:18%;
  border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(242,248,252,.36), rgba(210,232,244,.13) 56%, transparent 74%);
  animation: launch-cloud-drift 15s ease-in-out infinite alternate;
}
.anime-city-cloud-band i:nth-child(1){left:1%;top:20%;transform:scale(1.15);}
.anime-city-cloud-band i:nth-child(2){left:37%;top:6%;width:35%;animation-delay:-5s;}
.anime-city-cloud-band i:nth-child(3){right:0;top:28%;width:32%;animation-delay:-9s;}
.anime-city-atmosphere {
  top:-44%;
  height:104%;
  opacity:.84;
  background:
    radial-gradient(ellipse at 50% 73%, rgba(255,220,176,.20), transparent 48%),
    linear-gradient(180deg, rgba(220,239,248,.16), rgba(181,218,238,.10) 30%, rgba(236,194,150,.12) 74%, transparent 100%);
  animation: launch-haze-shift 9s ease-in-out infinite alternate;
}
@keyframes launch-city-parallax {
  from { transform:translate3d(-.9%, .45%, 0) scale(1.03); }
  to { transform:translate3d(.9%, -.55%, 0) scale(1.04); }
}
@keyframes launch-city-horizon {
  from { opacity:.55; transform:translate3d(-.8%, .25%, 0) scale(1.01); }
  to { opacity:.82; transform:translate3d(.8%, -.45%, 0) scale(1.025); }
}
@keyframes launch-city-lights-drift {
  from { background-position:0 0,0 0,0 0,0 0,0 0,0 0,0 0,0 0; }
  to { background-position:38px -6px,-32px 5px,24px -5px,-26px 5px,42px -7px,-28px 4px,30px -5px,-34px 8px; }
}
@keyframes launch-cloud-drift {
  from { translate:-3% 0; opacity:.46; }
  to { translate:4.5% -6%; opacity:.78; }
}
@keyframes launch-haze-shift {
  from { transform:translate3d(-.7%, .3%, 0) scale(1.01); filter:blur(8px); }
  to { transform:translate3d(.8%, -.8%, 0) scale(1.028); filter:blur(10px); }
}

/* STEP 3: visual state belongs to the current dialogue cue. Flight phases no
   longer replace sprites. Only the current speaker receives talk motion while
   the listener remains intentionally calmer until the next ~3-second cue. */
.character-sprite { animation:none !important; }
.companion.is-focused { opacity:1; }
.companion.is-focused .character-sprite { filter:brightness(1.02) saturate(1.025); }
.companion.is-talking .character-sprite { animation:sprite-dialogue-active .72s ease-in-out infinite alternate !important; }
.companion.is-listening .character-sprite { animation:sprite-dialogue-listen 3s ease-in-out infinite !important; opacity:.97; }
@keyframes sprite-dialogue-active {
  from { transform:translateY(0) scale(1); }
  to { transform:translateY(-2px) scale(1.004); }
}
@keyframes sprite-dialogue-listen {
  0%,100% { transform:translateY(0) scale(1); }
  50% { transform:translateY(-1px) scale(1.0015); }
}

/* STEP 4: denser but restrained upper cockpit instrumentation. */
.roof-micro-panel {
  position:absolute;
  top:6%;
  width:19%;
  height:25%;
  display:grid;
  grid-template-columns:auto 1fr 1fr 1fr;
  align-items:center;
  gap:5px;
  padding:0 8px;
  border:1px solid rgba(111,173,204,.10);
  border-radius:4px;
  background:linear-gradient(180deg,rgba(10,25,37,.62),rgba(3,10,17,.40));
  box-shadow:inset 0 0 14px rgba(86,151,181,.05);
  opacity:.78;
}
.roof-micro-left { left:8%; }
.roof-micro-right { right:8%; }
.roof-micro-panel span {
  font-size:clamp(3.5px,.33vw,5px);
  letter-spacing:.16em;
  color:rgba(196,217,230,.56);
}
.roof-micro-panel b {
  display:block;
  height:2px;
  border-radius:999px;
  background:rgba(111,184,217,.28);
  animation:roof-data-bar 2.8s ease-in-out infinite;
}
.roof-micro-panel b:nth-of-type(2){background:rgba(226,188,111,.38);animation-delay:-.7s;}
.roof-micro-panel b:nth-of-type(3){animation-delay:-1.4s;}
.roof-center-scan {
  position:absolute;
  left:38%; right:38%; bottom:3%;
  height:20%;
  display:flex;
  align-items:end;
  justify-content:space-between;
  padding:0 8%;
  border-bottom:1px solid rgba(105,174,206,.13);
}
.roof-center-scan i {
  width:7%;
  height:28%;
  border-radius:2px 2px 0 0;
  background:linear-gradient(180deg,rgba(121,194,226,.75),rgba(121,194,226,.16));
  box-shadow:0 0 5px rgba(104,183,218,.15);
  animation:roof-scan-meter 1.9s ease-in-out infinite alternate;
}
.roof-center-scan i:nth-child(2){height:48%;animation-delay:-.3s;}
.roof-center-scan i:nth-child(3){height:68%;animation-delay:-.6s;background:linear-gradient(180deg,rgba(232,194,119,.76),rgba(232,194,119,.15));}
.roof-center-scan i:nth-child(4){height:52%;animation-delay:-.9s;}
.roof-center-scan i:nth-child(5){height:74%;animation-delay:-1.2s;background:linear-gradient(180deg,rgba(232,194,119,.74),rgba(232,194,119,.14));}
.roof-center-scan i:nth-child(6){height:38%;animation-delay:-1.5s;}
@keyframes roof-data-bar { 0%,100%{opacity:.28;transform:scaleX(.65)} 50%{opacity:.9;transform:scaleX(1)} }
@keyframes roof-scan-meter { from{opacity:.34;transform:scaleY(.62)} to{opacity:.88;transform:scaleY(1)} }
.roof-instrumentation::before {
  content:"";
  position:absolute;
  left:18%; right:18%; top:-10%;
  height:18%;
  border-top:1px solid rgba(171,213,236,.12);
  border-bottom:1px solid rgba(230,194,121,.06);
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(126,180,209,.02) 50%, transparent 100%);
  box-shadow: inset 0 0 12px rgba(110,170,201,.04);
  opacity:.82;
  pointer-events:none;
}
.roof-instrumentation::after {
  content:"";
  position:absolute;
  left:26%; right:26%; top:5%;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg, transparent 0%, rgba(111,184,217,.10) 12%, rgba(226,188,111,.30) 50%, rgba(111,184,217,.10) 88%, transparent 100%);
  animation: roof-status-sweep 5.4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes roof-status-sweep {
  0%,100% { opacity:.24; transform:scaleX(.92); }
  50% { opacity:.82; transform:scaleX(1); }
}

@media (max-width:900px){
  .anime-city-backdrop{left:-18%;right:-18%;top:-62%;}
  .roof-micro-panel{width:22%;padding:0 5px;gap:3px;}
  .roof-center-scan{left:40%;right:40%;}
}
@media (max-width:700px){
  .anime-city-backdrop{left:-34%;right:-34%;top:-48%;}
  .roof-micro-panel span{display:none;}
  .roof-micro-panel{grid-template-columns:1fr 1fr 1fr;width:20%;}
  .roof-center-scan{left:42%;right:42%;}
}
@media (prefers-reduced-motion:reduce){
  .anime-city-lights,.anime-city-cloud-band i,.roof-micro-panel b,.roof-center-scan i{animation:none !important;}
}


/* ========================================================================
   TARGETED REFINEMENT: window life, side cockpit activity, ascent-to-Earth continuity.
   Existing layout/characters/dialogue/planet systems are intentionally untouched.
   ======================================================================== */

/* STEP 1 — Phase-aware detail in the large cockpit window. */
.window-environment-detail {
  position:absolute;
  inset:0;
  z-index:4;
  overflow:hidden;
  pointer-events:none;
}
.ground-beacon-field {
  position:absolute;
  left:4%; right:4%; bottom:16%; height:28%;
  opacity:calc(var(--ground-opacity) * .82);
  transform:translate3d(calc(var(--cam-x) * -.05), calc(var(--ground-progress) * 9vh), 0);
  transition:opacity .3s linear;
}
.ground-beacon-field i {
  position:absolute;
  bottom:var(--y,12%);
  left:var(--x,10%);
  width:4px; height:4px;
  border-radius:50%;
  background:#efc875;
  box-shadow:0 0 7px rgba(239,200,117,.72),0 0 16px rgba(239,200,117,.22);
  animation:window-beacon-pulse 2.7s ease-in-out infinite;
}
.ground-beacon-field i::after {
  content:"";
  position:absolute;
  left:50%; top:7px;
  width:1px; height:clamp(14px,2.1vh,24px);
  background:linear-gradient(180deg,rgba(238,198,113,.42),transparent);
  transform:translateX(-50%);
}
.ground-beacon-field i:nth-child(1){--x:7%;--y:20%;animation-delay:-.2s}
.ground-beacon-field i:nth-child(2){--x:19%;--y:8%;background:#75badb;box-shadow:0 0 8px rgba(117,186,219,.7);animation-delay:-1.1s}
.ground-beacon-field i:nth-child(3){--x:31%;--y:27%;animation-delay:-1.9s}
.ground-beacon-field i:nth-child(4){--x:43%;--y:12%;background:#75badb;box-shadow:0 0 8px rgba(117,186,219,.65);animation-delay:-.65s}
.ground-beacon-field i:nth-child(5){--x:58%;--y:21%;animation-delay:-2.25s}
.ground-beacon-field i:nth-child(6){--x:71%;--y:9%;background:#75badb;box-shadow:0 0 8px rgba(117,186,219,.65);animation-delay:-1.45s}
.ground-beacon-field i:nth-child(7){--x:83%;--y:28%;animation-delay:-.9s}
.ground-beacon-field i:nth-child(8){--x:94%;--y:16%;animation-delay:-2.55s}

.distant-structure-lights {
  position:absolute;
  left:8%; right:8%; bottom:34%; height:13%;
  opacity:calc(var(--ground-opacity) * .62);
  background:
    linear-gradient(90deg,transparent 0 8%,rgba(8,25,38,.30) 8% 8.5%,transparent 8.5% 22%,rgba(8,25,38,.26) 22% 22.6%,transparent 22.6% 42%,rgba(8,25,38,.33) 42% 42.5%,transparent 42.5% 68%,rgba(8,25,38,.28) 68% 68.6%,transparent 68.6% 88%,rgba(8,25,38,.25) 88% 88.5%,transparent 88.5% 100%);
  transform:translateY(calc(var(--ground-progress) * 7vh));
  filter:blur(.2px);
}
.distant-structure-lights i {
  position:absolute;
  bottom:15%;
  left:var(--x,10%);
  width:3px; height:3px;
  border-radius:50%;
  background:#eac16e;
  box-shadow:0 0 8px rgba(234,193,110,.52);
  animation:window-beacon-pulse 3.3s ease-in-out infinite;
}
.distant-structure-lights i:nth-child(1){--x:10%;animation-delay:-.4s}
.distant-structure-lights i:nth-child(2){--x:26%;animation-delay:-1.7s}
.distant-structure-lights i:nth-child(3){--x:51%;animation-delay:-2.6s}
.distant-structure-lights i:nth-child(4){--x:72%;animation-delay:-.95s}
.distant-structure-lights i:nth-child(5){--x:91%;animation-delay:-2.1s}

.high-altitude-moon {
  position:absolute;
  right:12%; top:16%;
  width:clamp(36px,5.2vw,78px); aspect-ratio:1;
  border-radius:50%;
  opacity:calc(var(--space-mix) * .34);
  transform:translate3d(calc(var(--cam-x) * -.025),calc(var(--cam-y) * -.025),0) scale(calc(.78 + var(--space-mix) * .22));
  background:
    radial-gradient(circle at 34% 31%,rgba(244,248,250,.86),rgba(180,202,218,.58) 45%,rgba(76,102,124,.42) 74%,rgba(34,52,70,.18) 100%);
  box-shadow:inset -10px -7px 18px rgba(13,29,45,.35),0 0 28px rgba(164,209,235,.10);
  filter:saturate(.78);
  transition:opacity .4s linear;
}
.high-altitude-moon::after {
  content:"";
  position:absolute;
  width:20%;height:14%;left:25%;top:28%;border-radius:50%;
  background:rgba(72,91,107,.15);
  box-shadow:18px 12px 0 rgba(72,91,107,.10),9px 28px 0 -2px rgba(72,91,107,.12);
}

.orbital-glints {
  position:absolute;
  inset:8% 8% 30%;
  opacity:calc(var(--star-opacity) * .78);
  transition:opacity .35s linear;
}
.orbital-glints i {
  position:absolute;
  left:var(--x);top:var(--y);
  width:2px;height:2px;border-radius:50%;
  background:#dceeff;
  box-shadow:0 0 7px rgba(205,233,251,.75);
  animation:window-star-twinkle 3.9s ease-in-out infinite;
}
.orbital-glints i:nth-child(1){--x:18%;--y:24%;animation-delay:-.5s}
.orbital-glints i:nth-child(2){--x:38%;--y:12%;animation-delay:-1.8s}
.orbital-glints i:nth-child(3){--x:67%;--y:31%;animation-delay:-2.7s}
.orbital-glints i:nth-child(4){--x:84%;--y:17%;animation-delay:-1.15s}
.orbital-glints i::before,
.orbital-glints i::after {content:"";position:absolute;left:50%;top:50%;background:rgba(210,235,251,.32);transform:translate(-50%,-50%)}
.orbital-glints i::before{width:8px;height:1px}
.orbital-glints i::after{width:1px;height:8px}
@keyframes window-beacon-pulse {0%,100%{opacity:.28;transform:scale(.76)}44%,58%{opacity:1;transform:scale(1)}}
@keyframes window-star-twinkle {0%,100%{opacity:.24;transform:scale(.72)}48%{opacity:.9;transform:scale(1.14)}}

/* More depth in atmospheric layers, without changing the existing ascent timeline. */
.atmosphere-bands { animation:window-atmosphere-drift 11s ease-in-out infinite alternate; }
.horizon-cloud-bank { animation:window-horizon-drift 13s ease-in-out infinite alternate; }
@keyframes window-atmosphere-drift {from{transform:translateX(-.45%)}to{transform:translateX(.45%)}}
@keyframes window-horizon-drift {from{margin-left:-.4%}to{margin-left:.4%}}

/* STEP 2 — left/right cockpit structures now behave like active ship systems. */
.cockpit-side-module {
  isolation:isolate;
}
.cockpit-side-module i {
  animation:side-indicator-pulse 2.35s ease-in-out infinite;
  transform-origin:center;
}
.cockpit-side-module i:nth-child(1){animation-delay:-.2s}
.cockpit-side-module i:nth-child(2){animation-delay:-.95s}
.cockpit-side-module i:nth-child(3){animation-delay:-1.7s}
.side-module-right i:nth-child(1){animation-delay:-1.35s}
.side-module-right i:nth-child(2){animation-delay:-.5s}
.side-module-right i:nth-child(3){animation-delay:-2.05s}
.cockpit-side-module::after {
  animation:side-energy-sweep 3.8s ease-in-out infinite;
  transform-origin:50% 50%;
}
.side-module-right::after { animation-delay:-1.9s; }
.cockpit-pillar::before,
.cockpit-pillar::after { animation:pillar-signal-pulse 4.2s ease-in-out infinite; }
.pillar-right::before { animation-delay:-1.2s; }
.pillar-right::after { animation-delay:-2.7s; }
@keyframes side-indicator-pulse {
  0%,100%{opacity:.24;box-shadow:0 0 3px rgba(102,180,216,.08);transform:scaleX(.72)}
  45%,58%{opacity:.92;box-shadow:0 0 8px rgba(111,190,224,.38);transform:scaleX(1)}
}
@keyframes side-energy-sweep {
  0%,100%{opacity:.28;filter:drop-shadow(0 0 2px rgba(222,175,94,.12)) brightness(.8)}
  50%{opacity:.92;filter:drop-shadow(0 0 7px rgba(222,175,94,.34)) brightness(1.18)}
}
@keyframes pillar-signal-pulse {0%,100%{opacity:.28}52%{opacity:.72}}

/* STEP 3 — Earth is not a tiny planet flying toward the cockpit. It appears as
   the broad limb of the planet we have just climbed away from, then crossfades
   into the existing Earth scene which begins on a similarly dominant scale. */
.arrival-earth {
  left:50%;
  top:113%;
  width:min(142vh,138vw);
  max-width:none;
  opacity:calc(var(--earth-reveal) * .94);
  transform:translate(-50%,-50%) scale(calc(.78 + var(--earth-reveal) * .18));
  transform-origin:50% 50%;
  background-position:50% 34%;
  box-shadow:
    inset -12vw -5vw 16vw rgba(0,4,12,.80),
    inset 3vw 1vw 5vw rgba(191,226,255,.12),
    0 -2px 2px rgba(188,226,255,.74),
    0 -18px 48px rgba(76,151,213,.24),
    0 -64px 150px rgba(41,111,174,.12);
  filter:saturate(.9) contrast(1.05) brightness(calc(.82 + var(--earth-reveal) * .18));
}
.arrival-earth::before {
  content:"";
  position:absolute;
  inset:-2%;
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 4%,rgba(137,202,244,.20),transparent 31%);
  pointer-events:none;
}
.arrival-earth-shine { background:radial-gradient(circle at 42% 5%,rgba(255,255,255,.13),transparent 24%); }
.launch-stage[data-phase="earth-reveal"] .arrival-earth,
.launch-stage[data-phase="approach"] .arrival-earth { animation:earth-limb-breathe 5.4s ease-in-out infinite alternate; }
@keyframes earth-limb-breathe {from{background-position:49.4% 34%}to{background-position:50.6% 34%}}

/* During the handoff, the cockpit recedes while the planet limb remains the
   spatial anchor. This removes the old distant-planet rush impression. */
.launch-stage[data-phase="approach"] .cockpit-camera {
  transform:translate3d(var(--cam-x),calc(var(--cam-y) - var(--handoff) * 3px),0) rotate(var(--cam-tilt));
}

@media (max-width:700px) {
  .ground-beacon-field{left:1%;right:1%;bottom:18%}
  .high-altitude-moon{right:8%;top:17%;width:clamp(34px,11vw,54px)}
  .arrival-earth{width:min(138vh,190vw);top:116%}
}
@media (prefers-reduced-motion:reduce) {
  .ground-beacon-field i,.distant-structure-lights i,.orbital-glints i,.cockpit-side-module i,.cockpit-side-module::after,.cockpit-pillar::before,.cockpit-pillar::after,.atmosphere-bands,.horizon-cloud-bank,.arrival-earth { animation:none !important; }
}
/* Final crossfade: once the Earth limb is established, fade the launch-world
   layers themselves so the real Earth renderer underneath takes over smoothly. */
.launch-stage[data-phase="approach"] .cockpit-world {
  opacity: calc(1 - var(--handoff) * .94);
  transition: opacity .08s linear;
}

/* ========================================================================
   STRICT CEILING-ONLY CORRECTION
   The upper cockpit roof is the only target here. The large blue viewport is
   intentionally left untouched and receives no ceiling overlay or tint.
   ======================================================================== */

/* Remove the previous top treatment that was attached to the viewport layer.
   This keeps the main front glass visually clean and independent from the roof. */
.cockpit-window-depth::before,
.cockpit-window-depth::after {
  content: none !important;
  display: none !important;
}

/* Keep every added detail physically clipped to the ceiling container. */
.cockpit-roof {
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(90deg, rgba(91,142,171,.07), transparent 15%, transparent 85%, rgba(91,142,171,.07)),
    repeating-linear-gradient(90deg, transparent 0 11.5%, rgba(151,188,209,.035) 11.5% 11.65%, transparent 11.65% 23%),
    linear-gradient(180deg, #04080e 0%, #0d1b28 50%, #09131d 78%, #050b12 100%);
  border-bottom: 1px solid rgba(226,191,126,.18);
  box-shadow:
    0 16px 34px rgba(0,0,0,.43),
    inset 0 -1px rgba(235,200,134,.10),
    inset 0 -12px 24px rgba(52,101,128,.05);
}

/* Static mechanical framing and panel seams, entirely inside .cockpit-roof. */
.roof-structure-detail {
  position: absolute;
  inset: 7% 6% 9%;
  z-index: 1;
  pointer-events: none;
  border-top: 1px solid rgba(158,196,217,.08);
  border-bottom: 1px solid rgba(225,190,124,.06);
  background:
    linear-gradient(112deg, transparent 0 19%, rgba(126,171,196,.055) 19.2% 19.45%, transparent 19.7% 80%, rgba(126,171,196,.055) 80.3% 80.55%, transparent 80.8%),
    linear-gradient(90deg, transparent 0 49.92%, rgba(222,188,126,.055) 50%, transparent 50.08% 100%);
  clip-path: polygon(1% 0,99% 0,96% 100%,4% 100%);
}

.roof-rib {
  position: absolute;
  top: -5%;
  bottom: -8%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(138,183,207,.20) 24%, rgba(223,189,127,.12) 62%, transparent);
  box-shadow: 1px 0 rgba(255,255,255,.018);
  opacity: .82;
}
.roof-rib-left { left: 28%; transform: rotate(7deg); transform-origin: 50% 100%; }
.roof-rib-center { left: 50%; opacity: .48; }
.roof-rib-right { right: 28%; transform: rotate(-7deg); transform-origin: 50% 100%; }

/* Thin roof-mounted light rails, not viewport overlays. */
.roof-light-rail {
  position: absolute;
  top: 17%;
  width: 17%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(119,188,219,.58) 18%, rgba(238,200,128,.72) 52%, rgba(119,188,219,.45) 82%, transparent);
  box-shadow: 0 0 7px rgba(109,181,214,.12), 0 0 12px rgba(230,191,118,.07);
  opacity: .62;
  animation: roof-light-breathe 4.8s ease-in-out infinite;
}
.roof-light-left { left: 11%; transform: rotate(1.5deg); }
.roof-light-right { right: 11%; transform: rotate(-1.5deg); animation-delay: -2.4s; }

/* Tiny service/status nodes embedded in the roof frame. */
.roof-service-node {
  position: absolute;
  bottom: 16%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #72b9da;
  box-shadow: 0 0 6px rgba(114,185,218,.45);
  opacity: .32;
  animation: roof-node-blink 3.6s steps(1,end) infinite;
}
.node-left { left: 18%; }
.node-right { right: 18%; background: #dfb870; box-shadow: 0 0 6px rgba(223,184,112,.42); animation-delay: -1.8s; }

/* Roof-only reflection sweep. It is clipped by .cockpit-roof and never enters
   the main glass area. */
.cockpit-roof::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 18%;
  right: 18%;
  top: 14%;
  bottom: 13%;
  border-top: 1px solid rgba(164,204,224,.07);
  border-bottom: 1px solid rgba(229,194,127,.055);
  background: linear-gradient(105deg, transparent 0 42%, rgba(106,176,208,.06) 47%, rgba(236,198,124,.12) 50%, rgba(106,176,208,.06) 53%, transparent 58% 100%);
  transform: translateX(-32%);
  opacity: .24;
  animation: roof-reflection-sweep 7.6s ease-in-out infinite;
  pointer-events: none;
}

/* Refine the existing dedicated roof instrumentation so it reads as active
   cockpit hardware without becoming visual noise. */
.roof-instrumentation {
  inset: 16% 8% 18%;
  z-index: 3;
}
.roof-status-bank { top: 46%; }
.roof-status-bank i { opacity: .38; }
.roof-sensor-strip {
  top: 43%;
  border-color: rgba(121,181,211,.14);
  background: rgba(2,8,14,.50);
}
.roof-micro-panel {
  top: 2%;
  height: 31%;
  border-color: rgba(120,180,210,.13);
  background: linear-gradient(180deg,rgba(11,27,40,.70),rgba(3,10,17,.48));
  box-shadow: inset 0 0 13px rgba(86,151,181,.06), 0 3px 8px rgba(0,0,0,.13);
}
.roof-center-scan { bottom: 1%; height: 23%; }

@keyframes roof-light-breathe {
  0%,100% { opacity:.40; filter:brightness(.82); }
  50% { opacity:.78; filter:brightness(1.12); }
}
@keyframes roof-node-blink {
  0%,64%,100% { opacity:.22; transform:scale(.82); }
  68%,74% { opacity:.92; transform:scale(1); }
  78%,86% { opacity:.35; transform:scale(.9); }
  90%,94% { opacity:.72; transform:scale(1); }
}
@keyframes roof-reflection-sweep {
  0%,12% { transform:translateX(-32%); opacity:.08; }
  48%,58% { opacity:.40; }
  88%,100% { transform:translateX(32%); opacity:.07; }
}

@media (max-width:700px) {
  .roof-structure-detail { inset:8% 4% 10%; }
  .roof-light-rail { width:14%; }
  .roof-rib-left { left:24%; }
  .roof-rib-right { right:24%; }
  .roof-service-node { width:3px; height:3px; }
}

@media (prefers-reduced-motion:reduce) {
  .roof-light-rail,
  .roof-service-node,
  .cockpit-roof::after { animation:none !important; }
}

/* ========================================================================
   STRICT EXTERIOR-SCENERY ENHANCEMENT
   Only the world seen through the front windshield is enriched here.
   Cockpit glass, roof, frame, characters, dashboard and runway geometry stay untouched.
   ======================================================================== */

/* This layer already lives inside .cockpit-world, below .cockpit-camera.
   Clip only the added scenery so it cannot leak through cockpit structure. */
.window-environment-detail {
  clip-path: polygon(7.5% 8%, 92.5% 8%, 87.2% 77%, 12.8% 77%);
  -webkit-clip-path: polygon(7.5% 8%, 92.5% 8%, 87.2% 77%, 12.8% 77%);
  isolation: isolate;
}

/* Sparse atmospheric points, intentionally concentrated away from the title center. */
.exterior-starfield {
  position: absolute;
  z-index: 0;
  inset: 8% 8% 36%;
  opacity: calc(.11 + var(--star-opacity) * .38);
  pointer-events: none;
  transition: opacity .45s linear;
}
.exterior-starfield i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s, 1.5px);
  height: var(--s, 1.5px);
  border-radius: 50%;
  background: rgba(226,241,250,.78);
  box-shadow: 0 0 5px rgba(189,225,244,.34);
  animation: exterior-star-soft-twinkle var(--d, 5.6s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
.exterior-starfield i:nth-child(1){--x:9%;--y:26%;--s:1px;--d:6.7s;--delay:-1.2s}
.exterior-starfield i:nth-child(2){--x:17%;--y:45%;--s:1.4px;--d:5.2s;--delay:-3.1s}
.exterior-starfield i:nth-child(3){--x:25%;--y:16%;--s:1px;--d:7.1s;--delay:-.7s}
.exterior-starfield i:nth-child(4){--x:31%;--y:54%;--s:1.2px;--d:6.1s;--delay:-4.2s}
.exterior-starfield i:nth-child(5){--x:69%;--y:49%;--s:1.1px;--d:7.4s;--delay:-2.4s}
.exterior-starfield i:nth-child(6){--x:76%;--y:19%;--s:1.5px;--d:5.8s;--delay:-1.6s}
.exterior-starfield i:nth-child(7){--x:84%;--y:39%;--s:1px;--d:6.9s;--delay:-4.8s}
.exterior-starfield i:nth-child(8){--x:92%;--y:24%;--s:1.3px;--d:5.4s;--delay:-2.8s}
.exterior-starfield i:nth-child(9){--x:12%;--y:66%;--s:1px;--d:8s;--delay:-5.2s}
.exterior-starfield i:nth-child(10){--x:21%;--y:72%;--s:1.1px;--d:6.4s;--delay:-3.7s}
.exterior-starfield i:nth-child(11){--x:80%;--y:69%;--s:1px;--d:7.2s;--delay:-1.9s}
.exterior-starfield i:nth-child(12){--x:90%;--y:61%;--s:1.2px;--d:5.9s;--delay:-4.4s}

/* Very soft cloud fragments give the blue atmosphere depth without becoming a cloud wall. */
.exterior-cloud-haze {
  position: absolute;
  z-index: 1;
  inset: 16% 3% 35%;
  opacity: calc(.52 - var(--space-mix) * .38);
  overflow: hidden;
  pointer-events: none;
}
.exterior-cloud-haze i {
  position: absolute;
  width: 24%;
  height: 16%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(238,247,251,.18), rgba(207,229,241,.08) 52%, transparent 74%);
  filter: blur(4px);
  animation: exterior-cloud-drift var(--cloud-duration, 28s) ease-in-out infinite alternate;
}
.exterior-cloud-haze i:nth-child(1){left:-3%;top:21%;--cloud-duration:31s}
.exterior-cloud-haze i:nth-child(2){left:18%;top:58%;width:18%;--cloud-duration:35s;animation-delay:-11s}
.exterior-cloud-haze i:nth-child(3){right:17%;top:49%;width:19%;--cloud-duration:33s;animation-delay:-17s}
.exterior-cloud-haze i:nth-child(4){right:-4%;top:14%;width:25%;--cloud-duration:37s;animation-delay:-8s}

/* Distant launch-city silhouette. The center stays deliberately low and quiet
   so the main title remains the visual focus. */
.spaceport-skyline {
  position: absolute;
  z-index: 2;
  left: 7%;
  right: 7%;
  bottom: 34.2%;
  height: 15.5%;
  opacity: calc(var(--ground-opacity) * .82);
  transform-origin: 50% 100%;
  transform: translate3d(calc(var(--cam-x) * -.035), calc(var(--ground-progress) * 9vh), 0) scale(calc(1 - var(--ground-progress) * .12));
  pointer-events: none;
  transition: opacity .32s linear;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.10));
}
.spaceport-skyline::after {
  content: "";
  position: absolute;
  left: 3%; right: 3%; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(130,181,210,.26) 18%, rgba(224,186,111,.24) 50%, rgba(130,181,210,.24) 82%, transparent);
  box-shadow: 0 0 11px rgba(127,187,219,.08);
}
.spaceport-cluster {
  position: absolute;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  gap: clamp(4px,.48vw,8px);
  height: 100%;
}
.spaceport-cluster-left { left: 0; width: 35%; justify-content: flex-start; }
.spaceport-cluster-center { left: 42%; width: 16%; height: 43%; justify-content: center; opacity: .67; }
.spaceport-cluster-right { right: 0; width: 35%; justify-content: flex-end; }
.spaceport-cluster i {
  position: relative;
  display: block;
  width: clamp(9px,1.12vw,18px);
  height: var(--h, 42%);
  min-height: 10px;
  border: 1px solid rgba(105,151,179,.12);
  border-bottom: 0;
  background:
    repeating-linear-gradient(180deg, transparent 0 5px, rgba(126,184,216,.12) 5px 6px, transparent 6px 10px),
    linear-gradient(180deg, rgba(30,59,76,.82), rgba(8,25,36,.94));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.018);
}
.spaceport-cluster i::after {
  content: "";
  position: absolute;
  left: 22%; right: 22%; top: 22%;
  height: 2px;
  background: rgba(230,195,124,.38);
  box-shadow: 0 12px 0 rgba(115,185,219,.26), 0 24px 0 rgba(230,195,124,.22);
  opacity: .64;
}
.spaceport-cluster-left i:nth-child(1){--h:34%;width:clamp(13px,1.5vw,24px)}
.spaceport-cluster-left i:nth-child(2){--h:57%;width:clamp(8px,.8vw,13px)}
.spaceport-cluster-left i:nth-child(3){--h:43%;width:clamp(15px,1.7vw,26px)}
.spaceport-cluster-left i:nth-child(4){--h:72%;width:clamp(8px,.78vw,12px)}
.spaceport-cluster-left i:nth-child(5){--h:48%;width:clamp(12px,1.3vw,20px)}
.spaceport-cluster-left i:nth-child(6){--h:36%;width:clamp(16px,1.9vw,29px)}
.spaceport-cluster-left i:nth-child(7){--h:54%;width:clamp(9px,.92vw,14px)}
.spaceport-cluster-center i:nth-child(1){--h:36%;width:22%}
.spaceport-cluster-center i:nth-child(2){--h:54%;width:16%}
.spaceport-cluster-center i:nth-child(3){--h:31%;width:28%}
.spaceport-cluster-center i:nth-child(4){--h:42%;width:18%}
.spaceport-cluster-right i:nth-child(1){--h:50%;width:clamp(9px,.95vw,14px)}
.spaceport-cluster-right i:nth-child(2){--h:35%;width:clamp(16px,1.8vw,28px)}
.spaceport-cluster-right i:nth-child(3){--h:62%;width:clamp(9px,.9vw,14px)}
.spaceport-cluster-right i:nth-child(4){--h:44%;width:clamp(13px,1.45vw,22px)}
.spaceport-cluster-right i:nth-child(5){--h:75%;width:clamp(8px,.78vw,12px)}
.spaceport-cluster-right i:nth-child(6){--h:47%;width:clamp(15px,1.7vw,26px)}
.spaceport-cluster-right i:nth-child(7){--h:32%;width:clamp(12px,1.35vw,21px)}

.spaceport-control-tower,
.spaceport-antenna {
  position: absolute;
  bottom: 0;
  display: block;
  background: linear-gradient(180deg, rgba(37,70,89,.88), rgba(8,25,36,.96));
}
.spaceport-control-tower { width: clamp(10px,.78vw,13px); height: 78%; }
.spaceport-control-tower::before {
  content: "";
  position: absolute;
  left: 50%; top: -8%;
  width: 190%; height: 12%;
  transform: translateX(-50%);
  border: 1px solid rgba(134,188,217,.20);
  background: rgba(35,68,87,.86);
}
.spaceport-control-tower b,
.spaceport-antenna b {
  position: absolute;
  left: 50%; top: -12%;
  width: 3px; height: 3px;
  border-radius: 50%;
  transform: translate(-50%,-50%);
  background: #e2b86b;
  box-shadow: 0 0 7px rgba(226,184,107,.58);
  animation: exterior-beacon-a 3.7s steps(1,end) infinite;
}
.tower-left { left: 24.5%; }
.tower-right { right: 23.2%; height: 64%; }
.tower-right b { animation-name: exterior-beacon-b; animation-duration: 4.9s; animation-delay: -1.3s; }
.spaceport-antenna { width: 1px; height: 53%; background: rgba(97,148,177,.62); }
.spaceport-antenna::before { content:""; position:absolute; left:-6px; top:22%; width:13px; height:1px; background:rgba(115,170,200,.40); }
.spaceport-antenna b { top:-2%; width:2px; height:2px; background:#86c1de; box-shadow:0 0 6px rgba(134,193,222,.65); }
.antenna-left { left: 13.5%; }
.antenna-right { right: 10.5%; height: 46%; }
.antenna-left b { animation-name: exterior-beacon-c; animation-duration: 5.6s; animation-delay:-2.2s; }
.antenna-right b { animation-name: exterior-beacon-b; animation-duration: 6.2s; animation-delay:-4.1s; }

.spaceport-horizon-lights {
  position: absolute;
  z-index: 3;
  left: 9%; right: 9%; bottom: 32.8%; height: 2%;
  opacity: calc(var(--ground-opacity) * .75);
  transform: translateY(calc(var(--ground-progress) * 9vh));
  pointer-events: none;
}
.spaceport-horizon-lights i {
  position: absolute;
  left: var(--x);
  bottom: 0;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: var(--light, #e4bc70);
  box-shadow: 0 0 7px color-mix(in srgb, var(--light, #e4bc70) 60%, transparent);
  animation: exterior-horizon-pulse var(--d, 4.2s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
.spaceport-horizon-lights i:nth-child(1){--x:2%;--d:4.8s;--delay:-.6s}
.spaceport-horizon-lights i:nth-child(2){--x:12%;--light:#7dbbd8;--d:5.4s;--delay:-2.7s}
.spaceport-horizon-lights i:nth-child(3){--x:24%;--d:3.9s;--delay:-1.8s}
.spaceport-horizon-lights i:nth-child(4){--x:36%;--light:#7dbbd8;--d:5.9s;--delay:-4.4s}
.spaceport-horizon-lights i:nth-child(5){--x:46%;--d:4.4s;--delay:-3.1s}
.spaceport-horizon-lights i:nth-child(6){--x:57%;--light:#7dbbd8;--d:5.1s;--delay:-1.2s}
.spaceport-horizon-lights i:nth-child(7){--x:68%;--d:4.7s;--delay:-3.8s}
.spaceport-horizon-lights i:nth-child(8){--x:78%;--light:#7dbbd8;--d:6.1s;--delay:-2.4s}
.spaceport-horizon-lights i:nth-child(9){--x:88%;--d:4.1s;--delay:-.9s}
.spaceport-horizon-lights i:nth-child(10){--x:98%;--light:#7dbbd8;--d:5.7s;--delay:-4.9s}

/* The optional moon is now faintly visible in atmosphere instead of appearing only in space. */
.high-altitude-moon {
  right: 13.5%;
  top: 17.5%;
  width: clamp(28px,3.6vw,54px);
  opacity: calc(.10 + var(--space-mix) * .18);
  filter: saturate(.68) brightness(1.04);
}

/* Existing utility lights stay understated so the new skyline does not turn neon. */
.ground-beacon-field { opacity: calc(var(--ground-opacity) * .58); }
.distant-structure-lights { opacity: calc(var(--ground-opacity) * .42); }

@keyframes exterior-star-soft-twinkle {
  0%,100% { opacity:.28; transform:scale(.82); }
  47% { opacity:.72; transform:scale(1.08); }
}
@keyframes exterior-cloud-drift {
  from { transform:translate3d(-2.5%,0,0); opacity:.45; }
  to { transform:translate3d(3.5%,-5%,0); opacity:.74; }
}
@keyframes exterior-beacon-a { 0%,72%,100%{opacity:.18} 76%,82%{opacity:1} 87%{opacity:.26} }
@keyframes exterior-beacon-b { 0%,54%,100%{opacity:.20} 58%,66%{opacity:.92} 70%{opacity:.28} }
@keyframes exterior-beacon-c { 0%,80%,100%{opacity:.16} 84%,89%{opacity:.86} 93%{opacity:.25} }
@keyframes exterior-horizon-pulse { 0%,100%{opacity:.30;transform:scale(.85)} 48%{opacity:.88;transform:scale(1.06)} }

@media (max-width: 900px) {
  .window-environment-detail {
    clip-path: polygon(9% 8%, 91% 8%, 88% 77%, 12% 77%);
    -webkit-clip-path: polygon(9% 8%, 91% 8%, 88% 77%, 12% 77%);
  }
  .spaceport-skyline { left:5%; right:5%; bottom:34.5%; height:14%; }
  .spaceport-cluster-center { opacity:.48; }
  .spaceport-control-tower { transform:scale(.88); transform-origin:50% 100%; }
}
@media (max-width: 700px) {
  .window-environment-detail {
    clip-path: polygon(10% 8%, 90% 8%, 89% 76%, 11% 76%);
    -webkit-clip-path: polygon(10% 8%, 90% 8%, 89% 76%, 11% 76%);
  }
  .exterior-starfield { inset:9% 6% 39%; }
  .exterior-starfield i:nth-child(4),
  .exterior-starfield i:nth-child(9),
  .exterior-starfield i:nth-child(11) { display:none; }
  .spaceport-skyline { left:3%; right:3%; bottom:35%; height:12.5%; }
  .spaceport-cluster { gap:3px; }
  .spaceport-cluster-center { display:none; }
  .spaceport-control-tower { height:68%; }
  .tower-left { left:27%; }
  .tower-right { right:26%; height:55%; }
  .spaceport-horizon-lights { left:7%; right:7%; bottom:33.8%; }
  .high-altitude-moon { right:13%; top:18%; width:30px; }
}
@media (prefers-reduced-motion: reduce) {
  .exterior-starfield i,
  .exterior-cloud-haze i,
  .spaceport-control-tower b,
  .spaceport-antenna b,
  .spaceport-horizon-lights i { animation:none !important; }
}


/* ANTARA object-specific primary CTA accents. Layout intentionally unchanged. */
#sun-explore-button{background:linear-gradient(120deg,#e2b44f,#bb7a26)!important;border-color:#efc96d!important;color:#19130a!important}
#mercury-explore-button{background:linear-gradient(120deg,#c8c1b6,#8f8980)!important;border-color:#d9d2c7!important;color:#171716!important}
#venus-explore-button{background:linear-gradient(120deg,#ddc583,#b9924c)!important;border-color:#ead6a3!important;color:#17140d!important}
#earth-explore-button{background:linear-gradient(120deg,#2f6fa8,#235987)!important;border-color:#80b9e2!important;color:#f8fbff!important}
#mars-explore-button{background:linear-gradient(120deg,#c97553,#b36b52)!important;border-color:#d99072!important;color:#1a0e08!important}
#asteroid-explore-button{background:linear-gradient(120deg,#a8adb2,#7f8790)!important;border-color:#bdc2c6!important;color:#11171c!important}
#jupiter-explore-button{background:linear-gradient(120deg,#d1ad83,#aa7956)!important;border-color:#dfc3a0!important;color:#1b130e!important}
#saturn-explore-button{background:linear-gradient(120deg,#dbc899,#ad8e5f)!important;border-color:#e5d5ad!important;color:#1b160e!important}
#uranus-explore-button{background:linear-gradient(120deg,#9adce0,#5eaeb7)!important;border-color:#b2e8e9!important;color:#07191d!important}
#neptune-explore-button{background:linear-gradient(120deg,#426bb4,#2b4f9f)!important;border-color:#7299e1!important;color:#f8fbff!important}
#sun-explore-button:hover,#mercury-explore-button:hover,#venus-explore-button:hover,#earth-explore-button:hover,#mars-explore-button:hover,#asteroid-explore-button:hover,#jupiter-explore-button:hover,#saturn-explore-button:hover,#uranus-explore-button:hover,#neptune-explore-button:hover{filter:brightness(1.08)}

/* ==============================================================
   ANTARA CREW PROFILE HUD V2
   Left-anchored identity socket integrated into the existing top rail.
   ============================================================== */
.cockpit-profile-hud {
  --profile-gold: #d9af68;
  --profile-gold-soft: rgba(217,175,104,.42);
  --profile-cyan: #72b8da;
  --profile-cyan-soft: rgba(114,184,218,.34);
  --profile-ink: rgba(3,10,18,.92);
  --profile-edge: rgba(231,194,124,.52);
  position: absolute;
  z-index: 20;
  left: 10.7%;
  right: 10.7%;
  top: 7.7%;
  height: clamp(50px,5.6vh,58px);
  transform: translate3d(var(--cam-x),var(--cam-y),0) rotate(var(--cam-tilt));
  transform-origin: 50% 84%;
  pointer-events: none;
  isolation: isolate;
  opacity: 1;
  transition: opacity .35s ease, filter .35s ease;
}

/* The long continuation line belongs to the existing upper cockpit strip. */
.cockpit-profile-hud::before,
.cockpit-profile-hud::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.cockpit-profile-hud::before {
  z-index: -2;
  left: 0;
  right: 0;
  top: 50%;
  height: clamp(44px,5.05vh,52px);
  transform: translateY(-50%);
  clip-path: polygon(0 34%,1.2% 0,98.8% 0,100% 34%,100% 66%,98.8% 100%,1.2% 100%,0 66%);
  background:
    linear-gradient(180deg,rgba(14,29,43,.72),rgba(4,11,19,.78)),
    linear-gradient(90deg,rgba(217,175,104,.07),transparent 18%,transparent 82%,rgba(114,184,218,.06));
  border-top: 1px solid rgba(125,183,211,.13);
  border-bottom: 1px solid rgba(217,175,104,.16);
  box-shadow: inset 0 1px rgba(255,255,255,.018), inset 0 -6px 14px rgba(0,0,0,.12);
}
.cockpit-profile-hud::after {
  z-index: -1;
  display: none;
  left: 0;
  right: 1.5%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg,var(--profile-gold-soft),rgba(114,184,218,.28) 16%,rgba(114,184,218,.08) 58%,transparent);
  box-shadow: 0 -10px 0 rgba(114,184,218,.045), 0 10px 0 rgba(217,175,104,.035);
}

.profile-hud-trigger {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: auto clamp(12px,1.2vw,18px) minmax(205px,1fr);
  align-items: center;
  gap: 0;
  width: clamp(285px,31vw,350px);
  height: 100%;
  padding: 0;
  border: 0;
  color: #eef4f8;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  pointer-events: auto;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.profile-hud-trigger:focus-visible {
  outline: 1px solid rgba(235,198,129,.82);
  outline-offset: 5px;
}

.profile-hud-rail {
  position: absolute;
  top: 50%;
  height: 1px;
  pointer-events: none;
  opacity: .78;
}
.profile-hud-rail::after {
  content: "";
  position: absolute;
  top: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--profile-gold);
  box-shadow: 0 0 7px rgba(217,175,104,.4);
}
.profile-hud-rail-left {
  left: -1.8%;
  width: clamp(15px,2.4vw,38px);
  transform: translateY(-50%);
  background: linear-gradient(90deg,transparent,rgba(112,180,214,.28),rgba(222,181,108,.52));
}
.profile-hud-rail-left::after { right: 0; }
.profile-hud-rail-right {
  display: none;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  background: linear-gradient(90deg,rgba(222,181,108,.44),rgba(112,180,214,.2) 18%,transparent 92%);
}
.profile-hud-rail-right::after { left: 0; }

/* Explorer identity socket: circular core inside an angular mechanical cradle. */
.profile-avatar-frame {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(42px,4vw,50px);
  aspect-ratio: 1;
  flex: 0 0 auto;
  filter: drop-shadow(0 4px 7px rgba(0,0,0,.22));
  transform: translateY(0);
  transition: transform .24s cubic-bezier(.2,.75,.2,1), filter .24s ease;
}
.profile-avatar-frame::before,
.profile-avatar-frame::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.profile-avatar-frame::before {
  inset: 8% -4%;
  clip-path: polygon(16% 0,84% 0,100% 18%,100% 82%,84% 100%,16% 100%,0 82%,0 18%);
  border-left: 1px solid rgba(224,183,109,.54);
  border-right: 1px solid rgba(114,184,218,.32);
  background: transparent;
}
.profile-avatar-frame::after {
  left: -5%;
  right: -5%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg,var(--profile-gold-soft),transparent 28%,transparent 72%,var(--profile-cyan-soft));
}
.profile-avatar-tech {
  position: absolute;
  inset: -8%;
  width: 116%;
  height: 116%;
  overflow: visible;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-origin: 50% 50%;
  animation: profile-ring-idle 8s ease-in-out infinite alternate;
}
.profile-ring-base { stroke: rgba(106,163,194,.42); stroke-width: 1.25; }
.profile-ring-dash { stroke-width: 1.15; stroke-dasharray: 9 7 3 12; transform-origin: 50% 50%; }
.profile-ring-dash-a { stroke: rgba(219,177,103,.78); }
.profile-ring-dash-b { stroke: rgba(102,180,217,.48); stroke-dasharray: 3 15 13 9; transform: rotate(17deg); }
.profile-ring-segment { stroke: rgba(234,197,128,.88); stroke-width: 1.7; }
.profile-ring-blade { stroke: rgba(98,157,190,.72); stroke-width: 2; }
.profile-avatar-orbit {
  position: absolute;
  width: 108%;
  height: 46%;
  left: -4%;
  top: 24%;
  border: 1px solid rgba(217,175,104,.45);
  border-left-color: transparent;
  border-right-color: rgba(108,184,218,.26);
  border-radius: 50%;
  transform: rotate(-20deg);
  pointer-events: none;
}
.profile-avatar-orbit-b {
  width: 103%;
  height: 34%;
  left: -1.5%;
  top: 31%;
  border-color: rgba(107,180,215,.3) transparent rgba(218,177,103,.26);
  transform: rotate(24deg);
}
.profile-avatar-orbit-a::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  right: 5%;
  top: 10%;
  border-radius: 50%;
  background: #e6bf78;
  box-shadow: 0 0 8px rgba(230,191,120,.48);
}
.profile-avatar-core {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 68%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid rgba(141,196,223,.34);
  background: radial-gradient(circle at 50% 35%,rgba(82,136,169,.16),transparent 55%), linear-gradient(180deg,#142638,#07111d);
  box-shadow: inset 0 0 0 2px rgba(3,10,17,.62), inset 0 0 14px rgba(80,145,177,.12), 0 0 0 1px rgba(218,177,104,.08);
}
.profile-avatar-core::after {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  border-top: 1px solid rgba(225,190,124,.44);
  border-right: 1px solid transparent;
  transform: rotate(-28deg);
  pointer-events: none;
}
.profile-avatar-core img { width:100%; height:100%; object-fit:cover; object-position:center; }
.profile-login-glyph {
  width: 52%; height: 52%; fill: none; stroke: rgba(225,235,242,.84); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px rgba(113,183,217,.18));
}
.profile-login-mark { stroke: var(--profile-gold); }
.profile-avatar-initials { color:#eef3f6; font:600 clamp(10px,1vw,14px)/1 system-ui,sans-serif; letter-spacing:.08em; text-indent:.08em; }
.profile-avatar-status {
  position:absolute; z-index:3; right:8%; bottom:8%; width:6px; height:6px; border-radius:50%; border:1px solid #09131f;
  background:var(--profile-gold); box-shadow:0 0 8px rgba(217,175,104,.56);
}
.cockpit-profile-hud[data-profile-state="logged-in"] .profile-avatar-status { background:#83c4dc; box-shadow:0 0 8px rgba(112,190,220,.62); }

/* Short mechanical bridge makes the avatar socket physically feed into login frame. */
.profile-hud-connector {
  position: relative;
  align-self: stretch;
  display: grid;
  place-items: center;
  min-width: 12px;
}
.profile-hud-connector::before,
.profile-hud-connector::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,var(--profile-gold-soft),rgba(114,184,218,.36));
}
.profile-hud-connector::before { top: 35%; transform: skewX(-24deg); }
.profile-hud-connector::after { bottom: 35%; transform: skewX(24deg); }
.profile-hud-connector i {
  position:absolute; width:4px; height:4px; border:1px solid rgba(221,181,109,.64); transform:rotate(45deg); background:transparent;
}
.profile-hud-connector i:first-child { left: 2px; }
.profile-hud-connector i:last-child { right: 2px; border-color:rgba(114,184,218,.54); }
.profile-hud-connector b {
  width: 64%; height: 1px; background: linear-gradient(90deg,var(--profile-gold),var(--profile-cyan)); opacity:.62;
  transform-origin:left center; transition:transform .24s ease, opacity .24s ease;
}

/* Login text is framed only by lightweight technical strokes. The main top bar remains the sole background. */
.profile-login-frame {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: clamp(7px,.7vw,10px);
  min-width: 0;
  height: clamp(36px,4.25vh,43px);
  padding: 0 clamp(10px,.9vw,13px) 0 clamp(10px,.85vw,12px);
  background: transparent;
  border: 0;
  box-shadow: none;
  transition: filter .2s ease;
}
.profile-login-frame::before,
.profile-login-frame::after {
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  height: 7px;
  pointer-events:none;
  opacity:.9;
}
.profile-login-frame::before {
  top: 0;
  background:
    linear-gradient(135deg,transparent 0 7px,rgba(217,175,104,.62) 7px 8px,transparent 8px) left top/18px 8px no-repeat,
    linear-gradient(90deg,rgba(217,175,104,.62) 0 34px,transparent 34px 48px,rgba(217,175,104,.36) 48px 72%,transparent 72% 80%,rgba(114,184,218,.42) 80% 92%,transparent 92%) left top/100% 1px no-repeat;
}
.profile-login-frame::after {
  bottom: 0;
  background:
    linear-gradient(45deg,transparent 0 7px,rgba(114,184,218,.42) 7px 8px,transparent 8px) right bottom/18px 8px no-repeat,
    linear-gradient(90deg,transparent 0 9%,rgba(217,175,104,.28) 9% 28%,transparent 28% 42%,rgba(114,184,218,.34) 42% 72%,transparent 72% 82%,rgba(217,175,104,.52) 82% 100%) left bottom/100% 1px no-repeat;
}
.profile-login-bracket { position:absolute; left:17px; width:38px; height:1px; pointer-events:none; }
.profile-login-bracket::after { content:""; position:absolute; right:-5px; top:-2px; width:4px; height:4px; background:var(--profile-gold); transform:rotate(45deg); opacity:.65; }
.profile-login-bracket-top { top:-1px; background:linear-gradient(90deg,var(--profile-gold),transparent); }
.profile-login-bracket-bottom { bottom:-1px; left:auto; right:22px; background:linear-gradient(270deg,var(--profile-cyan),transparent); }
.profile-login-bracket-bottom::after { right:auto; left:-5px; background:var(--profile-cyan); }

.profile-hud-copy { min-width:0; display:grid; align-content:center; gap:2px; }
.profile-hud-kicker {
  display:flex; align-items:center; gap:6px; color:rgba(161,191,208,.72); font-size:clamp(5px,.42vw,6.5px);
  font-weight:600; letter-spacing:.23em; white-space:nowrap;
}
.profile-hud-kicker i { width:15px; height:1px; flex:0 0 auto; background:linear-gradient(90deg,var(--profile-gold),transparent); }
.profile-hud-copy strong {
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#f1f4f6;
  font:500 clamp(9px,.78vw,11px)/1.12 Georgia,"Times New Roman",serif; letter-spacing:.11em; text-transform:uppercase;
  text-shadow:0 2px 8px rgba(0,0,0,.48); transition:color .2s ease, letter-spacing .2s ease;
}
.profile-hud-copy small {
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:rgba(218,226,233,.54);
  font-size:clamp(4.5px,.39vw,5.8px); font-weight:600; letter-spacing:.15em;
}
.profile-hud-action {
  display:grid; grid-template-columns:auto 18px; align-items:center; gap:8px; padding-left:10px;
  border-left:1px solid rgba(115,174,204,.14); color:rgba(157,195,215,.52); font-size:5px; letter-spacing:.14em;
}
.profile-hud-action svg { width:18px; height:18px; stroke:var(--profile-gold); stroke-width:1.4; transition:transform .22s ease, stroke .22s ease; }

.profile-hud-scan {
  position:absolute; z-index:4; top:9%; bottom:9%; left:1%; width:1px; opacity:0; pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(141,211,238,.72),rgba(229,192,122,.45),transparent);
}
.profile-hud-node {
  position:absolute; top:50%; width:3px; height:3px; margin-top:-1.5px; border-radius:50%; pointer-events:none;
  background:#6aaed0; box-shadow:0 0 6px rgba(106,174,208,.46); animation:profile-node-pulse 4.8s ease-in-out infinite;
}
.profile-hud-node-a { left:.8%; }
.profile-hud-node-b { right:1.4%; animation-delay:-2.3s; background:#d8ae67; box-shadow:0 0 6px rgba(216,174,103,.42); }

/* Boot: line draw + one scan + restrained socket resolve. */
.mission[data-experience="home"] .cockpit-profile-hud { animation:profile-hud-deploy .72s cubic-bezier(.2,.76,.18,1) both; }
.mission[data-experience="home"] .profile-avatar-frame { animation:profile-avatar-deploy .62s .2s cubic-bezier(.2,.8,.2,1) both; }
.mission[data-experience="home"] .profile-login-frame { animation:profile-login-reveal .58s .34s ease both; }
.mission[data-experience="home"] .profile-hud-scan { animation:profile-boot-scan 1.05s .34s cubic-bezier(.22,.62,.2,1) both; }

.profile-hud-trigger:hover .profile-login-frame::before,
.profile-hud-trigger:focus-visible .profile-login-frame::before,
.profile-hud-trigger:hover .profile-login-frame::after,
.profile-hud-trigger:focus-visible .profile-login-frame::after { opacity:1; filter:brightness(1.18); }
.profile-hud-trigger:hover .profile-hud-connector b,
.profile-hud-trigger:focus-visible .profile-hud-connector b { transform:scaleX(1.16); opacity:1; }
.profile-hud-trigger:hover .profile-hud-action svg,
.profile-hud-trigger:focus-visible .profile-hud-action svg { transform:translateX(3px); stroke:#f0ca83; }
.profile-hud-trigger:hover .profile-hud-copy strong,
.profile-hud-trigger:focus-visible .profile-hud-copy strong { color:#fff7e7; letter-spacing:.135em; }
.profile-hud-trigger:hover ~ .profile-hud-scan,
.profile-hud-trigger:focus-visible ~ .profile-hud-scan { animation:profile-hover-scan .62s ease both; }

/* Immediate click feedback before auth/profile flow continues. */
.cockpit-profile-hud.is-activating .profile-login-frame::before,
.cockpit-profile-hud.is-activating .profile-login-frame::after { animation:profile-click-flash .18s ease both; }
.cockpit-profile-hud.is-activating .profile-hud-connector b { transform:scaleX(1.35); opacity:1; }
.cockpit-profile-hud.is-activating .profile-hud-copy strong { color:#fff3d5; }
.cockpit-profile-hud.is-activating .profile-hud-action svg { transform:translateX(4px); }

.mission[data-experience="launch"] .cockpit-profile-hud { opacity:.42; filter:saturate(.76); pointer-events:none; }
.mission[data-experience="planet"] .cockpit-profile-hud { display:none; }

@keyframes profile-hud-deploy {
  from { opacity:0; transform:translate3d(var(--cam-x),var(--cam-y),0) rotate(var(--cam-tilt)) translateY(-5px); }
  to { opacity:1; transform:translate3d(var(--cam-x),var(--cam-y),0) rotate(var(--cam-tilt)) translateY(0); }
}
@keyframes profile-avatar-deploy { from{opacity:0;transform:scale(.8) rotate(-5deg)} to{opacity:1;transform:scale(1) rotate(0)} }
@keyframes profile-login-reveal { from{opacity:0;clip-path:inset(0 100% 0 0)} to{opacity:1;clip-path:inset(0 0 0 0)} }
@keyframes profile-boot-scan { 0%{left:1%;opacity:0} 16%{opacity:.78} 78%{opacity:.64} 100%{left:62%;opacity:0} }
@keyframes profile-hover-scan { 0%{left:4%;opacity:0} 18%{opacity:.5} 100%{left:58%;opacity:0} }
@keyframes profile-ring-idle { from{transform:rotate(-3deg)} to{transform:rotate(4deg)} }
@keyframes profile-node-pulse { 0%,78%,100%{opacity:.28} 84%,91%{opacity:.92} }
@keyframes profile-click-flash { 0%{filter:brightness(1)} 45%{filter:brightness(1.22)} 100%{filter:brightness(1.06)} }

/* Laptop: keep the left-anchored composition but shorten ornament lengths. */
@media (max-width: 1366px) {
  .cockpit-profile-hud { left:10%; right:10%; top:7.55%; height:clamp(48px,5.6vh,56px); }
  .profile-hud-trigger { width:clamp(270px,30vw,330px); grid-template-columns:auto 14px minmax(195px,1fr); }
  .profile-avatar-frame { width:clamp(40px,3.8vw,47px); }
  .profile-login-frame { height:clamp(35px,4.2vh,41px); padding-left:10px; padding-right:10px; }
  .cockpit-profile-hud::after,.profile-hud-rail-right { display:none; }
}

@media (max-width: 1100px) {
  .cockpit-profile-hud { left:9.2%; right:9.2%; top:7.35%; }
  .profile-hud-trigger { width:clamp(260px,40vw,315px); grid-template-columns:auto 13px minmax(185px,1fr); }
  .profile-hud-action span { display:none; }
  .profile-hud-action { grid-template-columns:16px; padding-left:8px; }
  .profile-hud-action svg { width:16px; height:16px; }
  .cockpit-profile-hud::after,.profile-hud-rail-right { display:none; }
}

@media (max-width: 900px) {
  .cockpit-profile-hud { left:8%; right:8%; top:7.1%; }
  .profile-hud-trigger { width:clamp(250px,48vw,300px); grid-template-columns:auto 12px minmax(175px,1fr); }
  .profile-hud-copy small { display:none; }
  .profile-hud-kicker { letter-spacing:.18em; }
  .profile-login-frame { padding-right:12px; }
  .cockpit-profile-hud::after,.profile-hud-rail-right { display:none; }
}

/* Mobile gets a compact equivalent, not a microscopic desktop header. */
@media (max-width: 700px) {
  .cockpit-profile-hud {
    left: 8%; right: 8%; top: 6.65%; height: 46px;
    transform: translate3d(var(--cam-x),var(--cam-y),0) rotate(var(--cam-tilt));
  }
  .cockpit-profile-hud::before { height: 40px; opacity:.82; }
  .cockpit-profile-hud::after,.profile-hud-rail-right { display:none; }
  .profile-hud-trigger { width:min(100%,275px); grid-template-columns:38px 10px minmax(0,1fr); }
  .profile-avatar-frame { width:38px; }
  .profile-hud-connector { min-width:10px; }
  .profile-hud-connector i { display:none; }
  .profile-hud-connector::before { top:42%; }
  .profile-hud-connector::after { bottom:42%; }
  .profile-login-frame {
    height:36px; min-width:0; grid-template-columns:minmax(0,1fr) 15px; gap:6px;
    padding:0 8px 0 9px;
  }
  .profile-hud-kicker,.profile-hud-copy small,.profile-hud-action span { display:none; }
  .profile-hud-copy strong { font-size:9px; letter-spacing:.085em; }
  .profile-hud-action { border-left:0; padding-left:0; grid-template-columns:15px; }
  .profile-hud-action svg { width:15px; height:15px; }
  .profile-hud-rail-left { left:-3%; width:18px; opacity:.55; }
  .profile-hud-node { display:none; }
}

@media (max-height: 700px) and (min-width: 701px) {
  .cockpit-profile-hud { top:6.35%; height:46px; }
  .profile-avatar-frame { width:39px; }
  .profile-login-frame { height:35px; }
  .profile-hud-copy small { display:none; }
}
@media (max-height: 560px) {
  .cockpit-profile-hud { top:5.3%; height:42px; }
  .profile-avatar-frame { width:36px; }
  .profile-login-frame { height:33px; }
  .profile-hud-kicker { display:none; }
  .profile-hud-copy strong { font-size:9px; }
}

@media (prefers-reduced-motion: reduce) {
  .cockpit-profile-hud,.profile-avatar-frame,.profile-login-frame,.profile-hud-scan,.profile-avatar-tech,.profile-hud-node {
    animation:none !important; transition-duration:.01ms !important;
  }
}


/* 2026-09-30 correction: identity module must live fully inside the long main rail. */
.profile-login-frame,
.profile-login-frame:hover,
.profile-hud-trigger:hover .profile-login-frame,
.profile-hud-trigger:focus-visible .profile-login-frame {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.profile-hud-trigger { max-width: 350px; }
.profile-hud-rail-right,
.cockpit-profile-hud::after { display: none !important; }

/* 2026-09-30 sharp main-container restoration
   Keep the original long black trapezoid as the ONLY major top container.
   Identity/profile module lives inside it, compact and left-aligned. */
.cockpit-profile-hud {
  left: 9.8% !important;
  right: 9.8% !important;
  top: 7.55% !important;
  height: clamp(50px,5.8vh,60px) !important;
  pointer-events: none;
}

.cockpit-profile-hud::before {
  z-index: -3 !important;
  left: 0 !important;
  right: 0 !important;
  top: 50% !important;
  height: clamp(50px,5.8vh,60px) !important;
  transform: translateY(-50%) !important;
  /* Long, sharp cockpit bar matching the reference silhouette. */
  clip-path: polygon(
    3.9% 0,
    96.1% 0,
    100% 100%,
    0 100%
  ) !important;
  background:
    linear-gradient(180deg,#091724 0%,#030b13 100%) !important;
  border-top: 1px solid rgba(96,153,183,.15) !important;
  border-bottom: 1px solid rgba(218,176,102,.22) !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.018),
    inset 0 -8px 16px rgba(0,0,0,.17),
    0 8px 18px rgba(0,0,0,.18) !important;
}

/* No second long rail/background inside the sharp main container. */
.cockpit-profile-hud::after,
.profile-hud-rail,
.profile-hud-node,
.profile-hud-scan {
  display: none !important;
}

.profile-hud-trigger {
  position: absolute !important;
  left: clamp(30px,3.15vw,52px) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: clamp(255px,25vw,330px) !important;
  max-width: 330px !important;
  height: clamp(40px,4.7vh,48px) !important;
  grid-template-columns: auto clamp(10px,.9vw,14px) minmax(0,1fr) !important;
  pointer-events: auto;
}

.profile-avatar-frame {
  width: clamp(38px,3.5vw,46px) !important;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.2)) !important;
}

.profile-avatar-tech {
  inset: -5% !important;
  width: 110% !important;
  height: 110% !important;
}

.profile-avatar-orbit {
  width: 102% !important;
  left: -1% !important;
}

.profile-avatar-frame::before {
  inset: 11% 0 !important;
}

.profile-login-frame {
  height: clamp(34px,4vh,40px) !important;
  min-width: 0 !important;
  padding: 0 8px 0 10px !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  gap: 6px !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* Keep the sci-fi text frame short. It ends at the login copy/action. */
.profile-login-frame::before,
.profile-login-frame::after {
  left: 0 !important;
  right: 0 !important;
}

.profile-hud-copy strong {
  font-size: clamp(9px,.74vw,11px) !important;
  letter-spacing: .105em !important;
}
.profile-hud-kicker {
  font-size: clamp(4.8px,.4vw,6px) !important;
  letter-spacing: .2em !important;
}
.profile-hud-copy small {
  font-size: clamp(4.2px,.34vw,5.2px) !important;
}
.profile-hud-action {
  padding-left: 7px !important;
  gap: 5px !important;
}
.profile-hud-action span { display:none !important; }
.profile-hud-action svg { width:15px !important; height:15px !important; }

@media (max-width: 1366px) {
  .cockpit-profile-hud { left:9.2% !important; right:9.2% !important; }
  .profile-hud-trigger { left:clamp(26px,2.9vw,40px) !important; width:clamp(245px,27vw,310px) !important; }
}

@media (max-width: 900px) {
  .cockpit-profile-hud { left:8% !important; right:8% !important; }
  .profile-hud-trigger { left:clamp(20px,2.6vw,30px) !important; width:min(72%,290px) !important; }
}

@media (max-width: 700px) {
  .cockpit-profile-hud {
    left:6.5% !important;
    right:6.5% !important;
    top:6.65% !important;
    height:44px !important;
  }
  .cockpit-profile-hud::before {
    height:44px !important;
    clip-path:polygon(5.5% 0,94.5% 0,100% 100%,0 100%) !important;
  }
  .profile-hud-trigger {
    left:18px !important;
    width:min(calc(100% - 36px),255px) !important;
    height:36px !important;
    grid-template-columns:34px 9px minmax(0,1fr) !important;
  }
  .profile-avatar-frame { width:34px !important; }
  .profile-login-frame { height:31px !important; padding:0 6px 0 8px !important; }
  .profile-hud-kicker,.profile-hud-copy small { display:none !important; }
  .profile-hud-copy strong { font-size:8.5px !important; letter-spacing:.08em !important; }
}

/* 2026-09-30 compact identity alignment refinement
   Keep the sharp main container unchanged. Center the identity module vertically,
   align its left edge to the container's angled inset, and reduce its footprint. */
.cockpit-profile-hud .profile-hud-trigger {
  left: calc(3.9% + 8px) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: clamp(220px,21.5vw,280px) !important;
  max-width: 280px !important;
  height: clamp(34px,4vh,40px) !important;
  align-items: center !important;
  grid-template-columns: auto clamp(8px,.65vw,10px) minmax(0,1fr) !important;
}

.cockpit-profile-hud .profile-avatar-frame {
  width: clamp(32px,3vw,38px) !important;
  align-self: center !important;
}
.cockpit-profile-hud .profile-avatar-tech {
  inset: -3% !important;
  width: 106% !important;
  height: 106% !important;
}
.cockpit-profile-hud .profile-avatar-orbit {
  width: 100% !important;
  left: 0 !important;
}
.cockpit-profile-hud .profile-avatar-frame::before {
  inset: 13% 2% !important;
}

.cockpit-profile-hud .profile-hud-connector {
  min-width: 8px !important;
}
.cockpit-profile-hud .profile-hud-connector i {
  width: 3px !important;
  height: 3px !important;
}

.cockpit-profile-hud .profile-login-frame {
  height: clamp(29px,3.45vh,34px) !important;
  padding: 0 6px 0 8px !important;
  gap: 4px !important;
  align-self: center !important;
}
.cockpit-profile-hud .profile-hud-copy {
  gap: 1px !important;
  align-content: center !important;
}
.cockpit-profile-hud .profile-hud-copy strong {
  font-size: clamp(8px,.67vw,10px) !important;
  letter-spacing: .095em !important;
}
.cockpit-profile-hud .profile-hud-kicker {
  font-size: clamp(4.3px,.35vw,5.4px) !important;
  letter-spacing: .18em !important;
}
.cockpit-profile-hud .profile-hud-kicker i {
  width: 11px !important;
}
.cockpit-profile-hud .profile-hud-copy small {
  font-size: clamp(3.8px,.3vw,4.7px) !important;
}
.cockpit-profile-hud .profile-hud-action {
  padding-left: 5px !important;
  gap: 3px !important;
}
.cockpit-profile-hud .profile-hud-action svg {
  width: 13px !important;
  height: 13px !important;
}
.cockpit-profile-hud .profile-login-bracket {
  width: 28px !important;
}

@media (max-width: 1366px) {
  .cockpit-profile-hud .profile-hud-trigger {
    left: calc(3.9% + 7px) !important;
    width: clamp(215px,23vw,260px) !important;
  }
}

@media (max-width: 900px) {
  .cockpit-profile-hud .profile-hud-trigger {
    left: calc(3.9% + 6px) !important;
    width: min(68%,245px) !important;
  }
}

@media (max-width: 700px) {
  .cockpit-profile-hud .profile-hud-trigger {
    left: calc(5.5% + 5px) !important;
    width: min(calc(100% - 34px),225px) !important;
    height: 32px !important;
    grid-template-columns: 30px 7px minmax(0,1fr) !important;
  }
  .cockpit-profile-hud .profile-avatar-frame { width:30px !important; }
  .cockpit-profile-hud .profile-login-frame { height:28px !important; padding:0 5px 0 7px !important; }
  .cockpit-profile-hud .profile-hud-copy strong { font-size:8px !important; }
  .cockpit-profile-hud .profile-hud-action svg { width:12px !important; height:12px !important; }
}

/* 2026-09-30 requested refinement: keep the previous identity/login design,
   preserve the animated profile border, add breathing room between profile and login,
   and give the sharp main container a light sci-fi perimeter treatment. */

/* Keep the profile border alive with cheap stroke/orbit motion. */
.cockpit-profile-hud .profile-ring-dash-a {
  animation: profile-ring-dash-flow-a 7.5s linear infinite !important;
}
.cockpit-profile-hud .profile-ring-dash-b {
  animation: profile-ring-dash-flow-b 9.5s linear infinite !important;
}
.cockpit-profile-hud .profile-avatar-orbit-a {
  animation: profile-orbit-idle-a 5.8s ease-in-out infinite alternate !important;
}
.cockpit-profile-hud .profile-avatar-orbit-b {
  animation: profile-orbit-idle-b 7.2s ease-in-out infinite alternate !important;
}

@keyframes profile-ring-dash-flow-a {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -48; }
}
@keyframes profile-ring-dash-flow-b {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: 52; }
}
@keyframes profile-orbit-idle-a {
  from { transform: rotate(-20deg) scaleX(.99); opacity: .72; }
  to { transform: rotate(-15deg) scaleX(1.015); opacity: 1; }
}
@keyframes profile-orbit-idle-b {
  from { transform: rotate(24deg) scaleX(1); opacity: .55; }
  to { transform: rotate(19deg) scaleX(.985); opacity: .82; }
}

/* A little more breathing room between the profile socket and login frame. */
.cockpit-profile-hud .profile-hud-trigger {
  grid-template-columns: auto clamp(13px,1vw,17px) minmax(0,1fr) !important;
}
.cockpit-profile-hud .profile-hud-connector {
  min-width: clamp(13px,1vw,17px) !important;
}

/* Sci-fi perimeter for the existing sharp black main container.
   Transparent overlay only: no second panel/background is introduced. */
.cockpit-profile-hud::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: -1 !important;
  left: 0 !important;
  right: 0 !important;
  top: 50% !important;
  height: clamp(50px,5.8vh,60px) !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
  clip-path: polygon(3.9% 0,96.1% 0,100% 100%,0 100%) !important;
  background:
    linear-gradient(90deg,
      transparent 0 5.2%,
      rgba(221,180,104,.72) 5.2% 15%,
      transparent 15% 18.2%,
      rgba(111,184,218,.55) 18.2% 24%,
      transparent 24% 73%,
      rgba(221,180,104,.42) 73% 82%,
      transparent 82% 90.5%,
      rgba(111,184,218,.46) 90.5% 95%,
      transparent 95% 100%) top / 100% 1px no-repeat,
    linear-gradient(90deg,
      transparent 0 8%,
      rgba(111,184,218,.36) 8% 14%,
      transparent 14% 29%,
      rgba(221,180,104,.62) 29% 48%,
      transparent 48% 78%,
      rgba(111,184,218,.42) 78% 87%,
      transparent 87% 100%) bottom / 100% 1px no-repeat,
    linear-gradient(58deg,
      transparent 0 42%,
      rgba(221,180,104,.62) 43% 47%,
      transparent 48% 100%) left / 5% 100% no-repeat,
    linear-gradient(-58deg,
      transparent 0 42%,
      rgba(111,184,218,.52) 43% 47%,
      transparent 48% 100%) right / 5% 100% no-repeat !important;
  opacity: .9 !important;
}

@media (max-width: 700px) {
  .cockpit-profile-hud .profile-hud-trigger {
    grid-template-columns: 30px 10px minmax(0,1fr) !important;
  }
  .cockpit-profile-hud .profile-hud-connector {
    min-width: 10px !important;
  }
  .cockpit-profile-hud::after {
    height: 44px !important;
    clip-path: polygon(5.5% 0,94.5% 0,100% 100%,0 100%) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cockpit-profile-hud .profile-ring-dash-a,
  .cockpit-profile-hud .profile-ring-dash-b,
  .cockpit-profile-hud .profile-avatar-orbit-a,
  .cockpit-profile-hud .profile-avatar-orbit-b {
    animation: none !important;
  }
}

/* Registration click reliability: the identity trigger is a real link so navigation works
   even if an unrelated scene script throws. Keep its existing HUD appearance unchanged. */
.profile-hud-trigger {
  text-decoration: none;
  pointer-events: auto !important;
  touch-action: manipulation;
}
.cockpit-profile-hud {
  pointer-events: auto;
}
.cockpit-profile-hud::before,
.cockpit-profile-hud::after,
.cockpit-profile-hud > :not(.profile-hud-trigger) {
  pointer-events: none;
}
.mission[data-experience="launch"] .profile-hud-trigger,
.mission[data-experience="planet"] .profile-hud-trigger {
  pointer-events: none !important;
}


/* ========================================================================
   ANTARA CENTRAL COCKPIT SEAT
   A single restrained, manufactured-looking seat integrated into the existing
   cockpit depth stack. No console/panel additions and no other home UI changes.
   ======================================================================== */
.antara-cockpit-seat {
  position: absolute;
  z-index: 7;
  left: 50%;
  bottom: 19.2%;
  width: clamp(320px, 27vw, 470px);
  height: clamp(142px, 16.8vw, 218px);
  transform: translateX(-50%);
  pointer-events: none;
  filter: drop-shadow(0 18px 22px rgba(0,0,0,.28));
}
.antara-cockpit-seat::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 12%; right: 12%; top: 6%; height: 7%;
  clip-path: polygon(3% 0,97% 0,100% 42%,96% 100%,4% 100%,0 42%);
  background: linear-gradient(180deg,#1a2d3d,#08121d);
  border-top: 1px solid rgba(222,184,110,.25);
  border-bottom: 1px solid rgba(105,165,194,.10);
  box-shadow: inset 0 1px rgba(255,255,255,.025);
}
.antara-cockpit-seat::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 31%; right: 31%; bottom: 0; height: 12%;
  background: linear-gradient(180deg,#0d1a26,#050b12);
  clip-path: polygon(8% 0,92% 0,100% 100%,0 100%);
  border-top: 1px solid rgba(132,165,184,.12);
}
.antara-seat-shadow {
  position: absolute;
  left: 13%; right: 13%; bottom: 1%; height: 15%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.48), rgba(0,0,0,.12) 55%, transparent 76%);
  filter: blur(5px);
  opacity: .72;
}
.antara-seat-frame {
  position: absolute;
  inset: 11% 3% 9%;
  clip-path: polygon(8% 0,92% 0,100% 15%,97% 88%,90% 100%,10% 100%,3% 88%,0 15%);
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(215,176,104,.30) 8% 8.45%, transparent 8.45% 91.55%, rgba(215,176,104,.30) 91.55% 92%, transparent 92%),
    linear-gradient(180deg, #182a3b 0%, #0b1623 48%, #060d16 100%);
  border: 1px solid rgba(170,192,205,.17);
  box-shadow: inset 0 1px rgba(255,255,255,.045), inset 0 -10px 20px rgba(0,0,0,.22);
}
.antara-seat-frame::before,
.antara-seat-frame::after {
  content: "";
  position: absolute;
  top: 10%; bottom: 15%; width: 7%;
  background: linear-gradient(180deg, #25394a, #0c1722 60%, #070e16);
  border: 1px solid rgba(221,184,111,.22);
  box-shadow: inset 0 0 0 1px rgba(87,145,174,.07);
}
.antara-seat-frame::before { left: 3.5%; clip-path: polygon(25% 0,100% 7%,78% 100%,0 88%); }
.antara-seat-frame::after { right: 3.5%; clip-path: polygon(0 7%,75% 0,100% 88%,22% 100%); }
.antara-seat-frame-rail {
  position: absolute;
  top: 14%; bottom: 20%; width: 2px;
  background: linear-gradient(180deg, rgba(231,192,116,.1), rgba(231,192,116,.58) 42%, rgba(105,171,202,.18) 68%, transparent);
  opacity: .8;
}
.seat-frame-rail-left { left: 12%; }
.seat-frame-rail-right { right: 12%; }
.antara-seat-mount {
  position: absolute;
  bottom: 3%; width: 11%; height: 10%;
  background: #080f18;
  border: 1px solid rgba(210,176,111,.18);
  clip-path: polygon(16% 0,84% 0,100% 100%,0 100%);
}
.seat-mount-left { left: 20%; }
.seat-mount-right { right: 20%; }
.antara-seat-back {
  position: absolute;
  left: 13%; right: 13%; top: 11%; height: 46%;
  display: grid;
  grid-template-columns: 1fr 1.22fr 1fr;
  gap: 1.15%;
  transform: perspective(620px) rotateX(-2deg);
  transform-origin: 50% 100%;
}
.antara-seat-back-panel {
  position: relative;
  min-width: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 18%),
    linear-gradient(150deg, #17283a 0%, #101d2b 54%, #0a131e 100%);
  border: 1px solid rgba(144,170,188,.15);
  box-shadow: inset 0 -12px 20px rgba(0,0,0,.15), inset 0 1px rgba(255,255,255,.035);
}
.seat-back-left { border-radius: 6px 3px 4px 5px; clip-path: polygon(7% 0,100% 0,100% 100%,0 94%,0 13%); }
.seat-back-center { border-radius: 3px; }
.seat-back-right { border-radius: 3px 6px 5px 4px; clip-path: polygon(0 0,93% 0,100% 13%,100% 94%,0 100%); }
.antara-seat-back-panel::after {
  content: "";
  position: absolute;
  left: 12%; right: 12%; bottom: 13%; height: 1px;
  background: rgba(207,174,109,.20);
}
.seat-back-center::before {
  content: "ANTARA";
  position: absolute;
  left: 50%; top: 25%;
  transform: translateX(-50%);
  color: rgba(224,190,120,.58);
  font-size: clamp(5px,.42vw,7px);
  font-weight: 700;
  letter-spacing: .27em;
}
.seat-back-center i {
  position: absolute;
  left: 50%; top: 45%;
  width: 18%; aspect-ratio: 1;
  transform: translate(-50%,-50%) rotate(45deg);
  border-top: 1px solid rgba(221,186,112,.44);
  border-left: 1px solid rgba(104,171,203,.20);
  opacity: .7;
}
.antara-seat-cushion {
  position: absolute;
  left: 10.5%; right: 10.5%; top: 53%; height: 21%;
  display: grid;
  grid-template-columns: 1fr 1.16fr 1fr;
  gap: 1.05%;
  transform: perspective(520px) rotateX(14deg);
  transform-origin: 50% 0;
}
.antara-seat-cushion-panel {
  background: linear-gradient(180deg, #172a3b 0%, #0d1a27 70%, #08111b 100%);
  border: 1px solid rgba(140,169,187,.14);
  border-top-color: rgba(229,195,128,.20);
  box-shadow: inset 0 1px rgba(255,255,255,.035), inset 0 -8px 14px rgba(0,0,0,.16);
}
.seat-cushion-left { border-radius: 3px 3px 6px 7px; }
.seat-cushion-center { border-radius: 3px 3px 6px 6px; }
.seat-cushion-right { border-radius: 3px 3px 7px 6px; }
.antara-seat-arm {
  position: absolute;
  top: 43%; width: 9.5%; height: 29%;
  background: linear-gradient(180deg,#1a2c3e,#0a1521 73%);
  border: 1px solid rgba(216,181,112,.18);
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 8px 12px rgba(0,0,0,.17);
}
.seat-arm-left { left: 4.2%; clip-path: polygon(28% 0,100% 12%,82% 100%,0 85%); }
.seat-arm-right { right: 4.2%; clip-path: polygon(0 12%,72% 0,100% 85%,18% 100%); }
.antara-seat-arm i {
  position: absolute;
  top: 20%; width: 38%; height: 2px;
  background: #d0a85f;
  box-shadow: 0 0 5px rgba(208,168,95,.15);
  opacity: .72;
}
.seat-arm-left i { left: 27%; }
.seat-arm-right i { right: 27%; }
.antara-seat-base {
  position: absolute;
  left: 20%; right: 20%; bottom: 4%; height: 17%;
  clip-path: polygon(5% 0,95% 0,100% 34%,92% 100%,8% 100%,0 34%);
  background: linear-gradient(180deg,#101f2d,#07111b 72%);
  border: 1px solid rgba(127,160,181,.15);
  box-shadow: inset 0 1px rgba(255,255,255,.03);
}
.antara-seat-base::before,
.antara-seat-base::after {
  content: "";
  position: absolute;
  bottom: -38%;
  width: 18%; height: 48%;
  background: linear-gradient(180deg,#0a151f,#04090f);
  border: 1px solid rgba(141,166,181,.10);
}
.antara-seat-base::before { left: 15%; clip-path: polygon(0 0,100% 0,78% 100%,20% 100%); }
.antara-seat-base::after { right: 15%; clip-path: polygon(0 0,100% 0,80% 100%,22% 100%); }
.seat-base-track {
  position: absolute;
  left: 18%; right: 18%; bottom: 22%; height: 2px;
  background: linear-gradient(90deg,transparent,rgba(112,178,208,.20),rgba(221,182,105,.48),rgba(112,178,208,.20),transparent);
}
.seat-base-lock {
  position: absolute;
  bottom: 16%; width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(221,184,110,.72);
  box-shadow: 0 0 5px rgba(221,184,110,.18);
}
.seat-base-lock-left { left: 13%; }
.seat-base-lock-right { right: 13%; }

/* The seat belongs to the cockpit, so it follows the existing handoff rather
   than introducing a separate transition or interaction. */
@media (max-width: 1100px) {
  .antara-cockpit-seat { width: clamp(285px,31vw,390px); bottom: 19.2%; }
}
@media (max-width: 900px) {
  .antara-cockpit-seat { width: clamp(255px,34vw,330px); height: clamp(126px,19vw,185px); bottom: 20%; }
}
@media (max-width: 700px) {
  .antara-cockpit-seat { width: clamp(220px,48vw,285px); height: clamp(112px,25vw,150px); bottom: 20.5%; opacity: .90; }
  .seat-back-center::before { display: none; }
}
@media (max-height: 700px) and (min-width: 701px) {
  .antara-cockpit-seat { width: clamp(270px,27vw,350px); height: clamp(120px,16.2vw,178px); bottom: 20%; }
}
@media (prefers-reduced-motion: reduce) {
  .antara-cockpit-seat { filter: drop-shadow(0 14px 18px rgba(0,0,0,.24)); }
}


/* ========================================================================
   HOME WINDOW LIFE REWORK
   Only the blue-sky exterior and city outside the cockpit are refreshed.
   No cockpit frame, characters, CTA, or other sections are redesigned.
   ======================================================================== */

/* Remove the temporary center bench from the cockpit. */
.antara-cockpit-seat { display:none !important; }

/* Make the daytime sky feel alive without turning it into noisy AI-style clutter. */
.launch-sky {
  background:
    radial-gradient(ellipse at 50% 96%, rgba(255,200,133,.34) 0%, rgba(228,164,109,.12) 20%, transparent 44%),
    radial-gradient(circle at 86% 22%, rgba(255,255,255,.10) 0%, transparent 9%),
    radial-gradient(circle at 12% 24%, rgba(255,255,255,.05) 0%, transparent 8%),
    linear-gradient(180deg, #0f3558 0%, #205377 34%, #4d80a2 61%, #94b0c0 84%, #d1dbe1 100%);
}
.exterior-cloud-haze {
  inset: 12% 1% 33%;
  opacity: calc(.58 - var(--space-mix) * .42);
}
.exterior-cloud-haze i {
  width: 27%;
  height: 17%;
  background: radial-gradient(ellipse at center, rgba(244,250,253,.24), rgba(214,234,245,.10) 54%, transparent 76%);
  filter: blur(5px);
}
.exterior-starfield {
  inset: 8% 7% 34%;
  opacity: calc(.18 + var(--star-opacity) * .46);
}
.exterior-starfield i {
  background: rgba(236,246,252,.88);
  box-shadow: 0 0 6px rgba(208,234,250,.40);
}

/* Small flying silhouettes and distant transit lines: subtle motion, not gimmicky. */
.sky-living-detail {
  position: absolute;
  z-index: 1;
  inset: 10% 7% 33%;
  pointer-events: none;
  overflow: hidden;
  opacity: calc(.96 - var(--space-mix) * .35);
}
.sky-bird-lane,
.sky-transit-lane {
  position: absolute;
  inset: 0;
}
.sky-bird-lane i,
.sky-transit-lane i {
  position: absolute;
}
.sky-bird-lane i {
  width: 20px;
  height: 9px;
  left: var(--bird-x, 0%);
  top: var(--bird-y, 0%);
  opacity: .62;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.08));
  animation: home-bird-pass var(--bird-duration, 20s) linear infinite;
  animation-delay: var(--bird-delay, 0s);
}
.sky-bird-lane i::before,
.sky-bird-lane i::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 9px;
  height: 2px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, rgba(25,48,67,.88), rgba(59,84,103,.60));
  transform-origin: 100% 50%;
  animation: home-bird-flap 1.5s ease-in-out infinite;
}
.sky-bird-lane i::before {
  left: 1px;
  transform: translateY(-50%) rotate(18deg);
}
.sky-bird-lane i::after {
  right: 1px;
  transform: translateY(-50%) scaleX(-1) rotate(18deg);
}
.bird-lane-left i:nth-child(1){--bird-x:12%;--bird-y:30%;--bird-duration:22s;--bird-delay:-3s;transform:scale(.86)}
.bird-lane-left i:nth-child(2){--bird-x:24%;--bird-y:23%;--bird-duration:26s;--bird-delay:-11s;transform:scale(.72)}
.bird-lane-left i:nth-child(3){--bird-x:35%;--bird-y:34%;--bird-duration:23s;--bird-delay:-17s;transform:scale(.92)}
.bird-lane-right i:nth-child(1){--bird-x:64%;--bird-y:18%;--bird-duration:28s;--bird-delay:-7s;transform:scale(.66)}
.bird-lane-right i:nth-child(2){--bird-x:76%;--bird-y:28%;--bird-duration:25s;--bird-delay:-14s;transform:scale(.78)}
.sky-transit-lane i {
  left: var(--tx, 0%);
  top: var(--ty, 0%);
  width: var(--tw, 38px);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,240,201,0), rgba(255,240,201,.70) 20%, rgba(150,210,237,.82) 54%, rgba(255,240,201,0));
  box-shadow: 0 0 8px rgba(143,196,222,.16);
  opacity: .45;
  transform: skewX(-26deg);
  animation: home-transit-pass var(--td, 31s) linear infinite;
  animation-delay: var(--t-delay, 0s);
}
.transit-lane-one i { --tx: -14%; --ty: 39%; --tw: 46px; --td: 29s; --t-delay: -6s; }
.transit-lane-two i { --tx: 105%; --ty: 52%; --tw: 34px; --td: 33s; --t-delay: -18s; animation-name: home-transit-pass-reverse; opacity: .30; }

/* Rebuild the ground city using clean vector-like geometry so it reads well on mobile too. */
.anime-city-backdrop {
  background-image: none !important;
  background:
    linear-gradient(180deg, rgba(197,224,239,.16) 0%, rgba(182,213,231,.08) 28%, transparent 40%),
    linear-gradient(180deg, rgba(255,218,170,.10), transparent 30%);
  left: -10%;
  right: -10%;
  top: -55%;
  bottom: -8%;
  filter: saturate(1.02) contrast(1.02) brightness(.98);
  animation: home-city-parallax 14s ease-in-out infinite alternate;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.10) 7%, rgba(0,0,0,.72) 18%, #000 33%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.10) 7%, rgba(0,0,0,.72) 18%, #000 33%, #000 100%);
}
.anime-city-backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(13,28,40,.74) 0 13%, transparent 13%) 0 100%/100% 100% no-repeat,
    linear-gradient(rgba(31,60,80,.62), rgba(31,60,80,.62)) 2% 66%/6% 10% no-repeat,
    linear-gradient(rgba(27,54,73,.64), rgba(27,54,73,.64)) 10% 59%/8% 17% no-repeat,
    linear-gradient(rgba(31,60,80,.66), rgba(31,60,80,.66)) 21% 63%/10% 13% no-repeat,
    linear-gradient(rgba(24,51,69,.64), rgba(24,51,69,.64)) 35% 56%/7% 20% no-repeat,
    linear-gradient(rgba(29,57,78,.72), rgba(29,57,78,.72)) 46% 48%/8% 28% no-repeat,
    linear-gradient(rgba(24,51,69,.64), rgba(24,51,69,.64)) 58% 60%/9% 16% no-repeat,
    linear-gradient(rgba(31,60,80,.62), rgba(31,60,80,.62)) 71% 55%/11% 21% no-repeat,
    linear-gradient(rgba(23,47,65,.64), rgba(23,47,65,.64)) 85% 61%/8% 15% no-repeat,
    linear-gradient(rgba(24,46,64,.62), rgba(24,46,64,.62)) 93% 67%/5% 9% no-repeat;
  opacity: .74;
}
.anime-city-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(20,37,52,.96), rgba(20,37,52,.96)) 0 79%/100% 4% no-repeat,
    linear-gradient(rgba(30,54,73,.86), rgba(30,54,73,.86)) 6% 73%/13% 8% no-repeat,
    linear-gradient(rgba(28,52,69,.88), rgba(28,52,69,.88)) 18% 69%/10% 12% no-repeat,
    linear-gradient(rgba(24,47,64,.96), rgba(24,47,64,.96)) 30% 64%/14% 17% no-repeat,
    linear-gradient(rgba(39,68,92,.97), rgba(39,68,92,.97)) 44% 59%/12% 22% no-repeat,
    linear-gradient(rgba(44,76,102,.98), rgba(44,76,102,.98)) 46.2% 50%/7.6% 31% no-repeat,
    linear-gradient(rgba(235,196,128,.88), rgba(235,196,128,.88)) 49.2% 48.5%/1.1% 7% no-repeat,
    linear-gradient(rgba(27,52,69,.97), rgba(27,52,69,.97)) 57% 67%/15% 14% no-repeat,
    linear-gradient(rgba(22,44,60,.94), rgba(22,44,60,.94)) 73% 70%/11% 11% no-repeat,
    linear-gradient(rgba(31,55,73,.90), rgba(31,55,73,.90)) 84% 66%/12% 15% no-repeat,
    linear-gradient(90deg, transparent 0 33%, rgba(243,204,129,.70) 33% 41%, transparent 41% 59%, rgba(138,201,232,.65) 59% 67%, transparent 67% 100%) 50% 82%/36% 2px no-repeat;
  opacity: .95;
  box-shadow: inset 0 -18px 24px rgba(3,10,16,.22);
}
.anime-city-lights {
  left: -6%;
  right: -6%;
  bottom: 12%;
  height: 30%;
  opacity: calc(.86 - var(--ground-progress) * .48);
  background:
    repeating-linear-gradient(90deg, transparent 0 2.8%, rgba(248,212,130,.65) 2.8% 3.2%, transparent 3.2% 7%) 12% 62%/19% 18% no-repeat,
    repeating-linear-gradient(90deg, transparent 0 3.4%, rgba(136,198,229,.48) 3.4% 3.9%, transparent 3.9% 8.5%) 30% 57%/14% 21% no-repeat,
    repeating-linear-gradient(90deg, transparent 0 3.1%, rgba(248,212,130,.72) 3.1% 3.6%, transparent 3.6% 7.8%) 44% 50%/12% 26% no-repeat,
    repeating-linear-gradient(90deg, transparent 0 3.2%, rgba(138,201,232,.50) 3.2% 3.6%, transparent 3.6% 8.6%) 59% 59%/15% 18% no-repeat,
    repeating-linear-gradient(90deg, transparent 0 3.1%, rgba(248,212,130,.66) 3.1% 3.6%, transparent 3.6% 7.8%) 78% 58%/16% 19% no-repeat,
    linear-gradient(90deg, transparent 0 6%, rgba(243,204,129,.78) 9% 10%, transparent 13% 21%, rgba(123,192,226,.72) 24% 25%, transparent 28% 39%, rgba(243,204,129,.68) 42% 43%, transparent 46% 54%, rgba(123,192,226,.72) 57% 58%, transparent 61% 73%, rgba(243,204,129,.68) 76% 77%, transparent 80% 100%) 50% 84%/52% 2px no-repeat;
  filter: drop-shadow(0 0 8px rgba(231,191,109,.25));
  animation: home-city-light-shimmer 6.2s ease-in-out infinite alternate;
}
.anime-city-lights::before,
.anime-city-lights::after {
  content: "";
  position: absolute;
  top: 73%;
  width: 18%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(137,201,230,.92) 40%, rgba(255,226,172,.15) 100%);
  opacity: .58;
  filter: blur(.1px);
}
.anime-city-lights::before {
  left: -16%;
  animation: home-hovercraft-pass 10.6s linear infinite;
}
.anime-city-lights::after {
  right: -18%;
  width: 14%;
  top: 69%;
  opacity: .46;
  animation: home-hovercraft-pass-reverse 12.2s linear infinite;
}
.anime-city-cloud-band {
  left: -10%;
  right: -10%;
  top: -12%;
  height: 44%;
  opacity: calc(.50 - var(--ground-progress) * .36);
  filter: blur(2.4px);
}
.anime-city-atmosphere {
  top: -36%;
  height: 96%;
  opacity: .78;
  background:
    radial-gradient(ellipse at 50% 70%, rgba(253,222,171,.24), transparent 42%),
    linear-gradient(180deg, rgba(229,242,249,.20), rgba(173,207,229,.10) 33%, rgba(122,163,188,.07) 64%, transparent 100%);
}
.spaceport-skyline {
  bottom: 31.8%;
  height: 17%;
  opacity: calc(var(--ground-opacity) * .92);
}
.spaceport-skyline::after {
  opacity: .18;
}
.spaceport-horizon-lights {
  bottom: 31.3%;
  opacity: calc(var(--ground-opacity) * .82);
}
.ground-beacon-field {
  bottom: 25.5%;
  opacity: calc(var(--ground-opacity) * .70);
}
.distant-structure-lights {
  opacity: calc(var(--ground-opacity) * .72);
}
.high-altitude-moon {
  top: 14.5%;
  right: 10.5%;
  width: clamp(34px, 4vw, 58px);
  opacity: calc(.35 + (1 - var(--space-mix)) * .22);
}
.orbital-glints {
  opacity: calc(.26 + (1 - var(--space-mix)) * .20);
}

@keyframes home-bird-pass {
  0% { transform: translate3d(-16px, 4px, 0) scale(var(--bird-scale,1)); opacity: 0; }
  8%, 82% { opacity: .62; }
  100% { transform: translate3d(110px, -10px, 0) scale(var(--bird-scale,1)); opacity: 0; }
}
@keyframes home-bird-flap {
  0%,100% { transform: translateY(-50%) rotate(18deg); }
  50% { transform: translateY(-50%) rotate(-6deg); }
}
@keyframes home-transit-pass {
  0% { transform: translate3d(0,0,0) skewX(-26deg); opacity: 0; }
  10%, 75% { opacity: .42; }
  100% { transform: translate3d(128vw, -12px, 0) skewX(-26deg); opacity: 0; }
}
@keyframes home-transit-pass-reverse {
  0% { transform: translate3d(0,0,0) skewX(-26deg); opacity: 0; }
  14%, 72% { opacity: .28; }
  100% { transform: translate3d(-118vw, 10px, 0) skewX(-26deg); opacity: 0; }
}
@keyframes home-city-parallax {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(0, 4px, 0); }
}
@keyframes home-city-light-shimmer {
  from { filter: brightness(.94) drop-shadow(0 0 7px rgba(231,191,109,.22)); }
  to { filter: brightness(1.12) drop-shadow(0 0 9px rgba(231,191,109,.28)); }
}
@keyframes home-hovercraft-pass {
  0% { transform: translateX(0); opacity: 0; }
  12%, 68% { opacity: .56; }
  100% { transform: translateX(620%); opacity: 0; }
}
@keyframes home-hovercraft-pass-reverse {
  0% { transform: translateX(0); opacity: 0; }
  14%, 70% { opacity: .40; }
  100% { transform: translateX(-620%); opacity: 0; }
}

@media (max-width: 900px) {
  .anime-city-backdrop { top: -51%; left:-12%; right:-12%; }
  .anime-city-lights { bottom: 13%; height: 28%; }
  .spaceport-skyline { left:5%; right:5%; bottom:31.9%; height:15%; }
  .ground-beacon-field { bottom:24.5%; }
}
@media (max-width: 700px) {
  .sky-living-detail { inset: 12% 5% 34%; }
  .bird-lane-right i:nth-child(2),
  .transit-lane-two { display:none; }
  .anime-city-backdrop {
    left: -16%;
    right: -16%;
    top: -38%;
    bottom: -3%;
  }
  .anime-city-backdrop::before {
    background:
      linear-gradient(to top, rgba(13,28,40,.76) 0 16%, transparent 16%) 0 100%/100% 100% no-repeat,
      linear-gradient(rgba(28,54,73,.66), rgba(28,54,73,.66)) 4% 63%/10% 14% no-repeat,
      linear-gradient(rgba(24,49,68,.66), rgba(24,49,68,.66)) 18% 58%/12% 19% no-repeat,
      linear-gradient(rgba(31,60,80,.74), rgba(31,60,80,.74)) 36% 61%/10% 16% no-repeat,
      linear-gradient(rgba(39,68,92,.88), rgba(39,68,92,.88)) 46% 53%/10% 24% no-repeat,
      linear-gradient(rgba(27,52,69,.70), rgba(27,52,69,.70)) 61% 60%/12% 17% no-repeat,
      linear-gradient(rgba(31,55,73,.78), rgba(31,55,73,.78)) 78% 57%/13% 20% no-repeat;
    opacity: .80;
  }
  .anime-city-backdrop::after {
    background:
      linear-gradient(rgba(20,37,52,.96), rgba(20,37,52,.96)) 0 80%/100% 4% no-repeat,
      linear-gradient(rgba(24,47,64,.96), rgba(24,47,64,.96)) 12% 70%/17% 12% no-repeat,
      linear-gradient(rgba(39,68,92,.98), rgba(39,68,92,.98)) 42% 64%/16% 18% no-repeat,
      linear-gradient(rgba(44,76,102,.99), rgba(44,76,102,.99)) 46.5% 54%/7% 28% no-repeat,
      linear-gradient(rgba(235,196,128,.88), rgba(235,196,128,.88)) 49.4% 52.5%/1.3% 6% no-repeat,
      linear-gradient(rgba(27,52,69,.97), rgba(27,52,69,.97)) 62% 69%/17% 13% no-repeat,
      linear-gradient(rgba(31,55,73,.90), rgba(31,55,73,.90)) 81% 67%/14% 15% no-repeat,
      linear-gradient(90deg, transparent 0 31%, rgba(243,204,129,.72) 31% 40%, transparent 40% 59%, rgba(138,201,232,.66) 59% 68%, transparent 68% 100%) 50% 82%/42% 2px no-repeat;
  }
  .anime-city-lights {
    left:-10%;
    right:-10%;
    bottom: 14%;
    height: 24%;
  }
  .anime-city-cloud-band { display:none; }
  .anime-city-atmosphere { top: -28%; height: 82%; opacity: .66; }
  .spaceport-skyline {
    left: 4%;
    right: 4%;
    bottom: 33.4%;
    height: 11.5%;
    opacity: calc(var(--ground-opacity) * .62);
  }
  .spaceport-cluster-center,
  .spaceport-antenna { display:none; }
  .spaceport-cluster { gap: 4px; }
  .spaceport-horizon-lights { left: 8%; right: 8%; bottom: 32.8%; }
  .ground-beacon-field { left: 3%; right: 3%; bottom: 26.4%; }
  .high-altitude-moon { right: 11%; top: 16%; width: 26px; }
}
@media (max-width: 520px) {
  .sky-bird-lane i { width: 15px; height: 7px; }
  .anime-city-backdrop { left:-20%; right:-20%; top:-35%; }
  .anime-city-lights { height: 21%; opacity: calc(.78 - var(--ground-progress) * .46); }
  .spaceport-skyline,
  .spaceport-horizon-lights,
  .ground-beacon-field,
  .distant-structure-lights { opacity: calc(var(--ground-opacity) * .48); }
}
@media (prefers-reduced-motion: reduce) {
  .sky-bird-lane i,
  .sky-transit-lane i,
  .anime-city-backdrop,
  .anime-city-lights,
  .anime-city-lights::before,
  .anime-city-lights::after,
  .exterior-starfield i,
  .spaceport-horizon-lights i,
  .ground-beacon-field i,
  .orbital-glints i { animation: none !important; }
}

/* ========================================================================
   2026-09-30 IDENTITY HEADER SPACING + LEADERBOARD EXTENSION
   Strict scope: preserve the existing avatar and login border design.
   Only spacing/alignment is refined and one matching leaderboard frame is added.
   ======================================================================== */

.cockpit-profile-hud {
  --identity-module-left: calc(3.9% + 8px);
  --identity-module-width: clamp(228px,22.4vw,286px);
  --avatar-login-gap: clamp(18px,1.45vw,24px);
  --leader-side-gap: clamp(7px,.58vw,10px);
  --leader-bridge-width: clamp(17px,1.45vw,24px);
  --leader-frame-width: clamp(94px,8.6vw,118px);
  --identity-frame-height: clamp(29px,3.45vh,34px);
}

/* 1) Keep the avatar and login border visually separate. */
.cockpit-profile-hud .profile-hud-trigger {
  left: var(--identity-module-left) !important;
  width: var(--identity-module-width) !important;
  max-width: none !important;
  grid-template-columns: auto var(--avatar-login-gap) minmax(0,1fr) !important;
}
.cockpit-profile-hud .profile-hud-connector {
  min-width: var(--avatar-login-gap) !important;
  width: var(--avatar-login-gap) !important;
}

/* 2) Do not redesign the existing login frame. Only center its content precisely. */
.cockpit-profile-hud .profile-login-frame {
  position: relative !important;
  height: var(--identity-frame-height) !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}
.cockpit-profile-hud .profile-hud-copy {
  position: absolute !important;
  inset: 0 22px !important;
  display: grid !important;
  align-content: center !important;
  justify-items: center !important;
  text-align: center !important;
  gap: 1px !important;
  min-width: 0 !important;
}
.cockpit-profile-hud .profile-hud-kicker {
  justify-content: center !important;
  width: 100% !important;
}
.cockpit-profile-hud .profile-hud-copy strong,
.cockpit-profile-hud .profile-hud-copy small {
  width: 100% !important;
  text-align: center !important;
}
.cockpit-profile-hud .profile-hud-action {
  position: absolute !important;
  right: 5px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  padding-left: 0 !important;
  border-left: 0 !important;
}

/* 3) Small technical line after the login frame, with breathing room on both ends. */
.profile-leaderboard-bridge {
  position: absolute;
  left: calc(var(--identity-module-left) + var(--identity-module-width) + var(--leader-side-gap));
  top: 50%;
  width: var(--leader-bridge-width);
  height: 14px;
  transform: translateY(-50%);
  display: grid;
  grid-template-columns: 3px 1fr 3px;
  align-items: center;
  gap: 3px;
  pointer-events: none;
}
.profile-leaderboard-bridge b {
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(218,176,103,.76), rgba(112,184,218,.62));
  box-shadow: 0 0 5px rgba(112,184,218,.08);
}
.profile-leaderboard-bridge i {
  display: block;
  width: 3px;
  height: 3px;
  transform: rotate(45deg);
  border: 1px solid rgba(219,178,105,.62);
}
.profile-leaderboard-bridge i:last-child {
  border-color: rgba(112,184,218,.58);
}

/* 4) Leaderboard uses the same line language as the login frame, but stays its own section. */
.leaderboard-hud-frame {
  position: absolute;
  left: calc(
    var(--identity-module-left) +
    var(--identity-module-width) +
    var(--leader-side-gap) +
    var(--leader-bridge-width) +
    var(--leader-side-gap)
  );
  top: 50%;
  width: var(--leader-frame-width);
  height: var(--identity-frame-height);
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 0 10px;
  overflow: visible;
  background: transparent;
  color: #f0eee8;
  pointer-events: auto;
  isolation: isolate;
}
.leaderboard-hud-frame::before,
.leaderboard-hud-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.leaderboard-hud-frame::before {
  clip-path: polygon(7px 0,72% 0,77% 2px,100% 2px,100% calc(100% - 6px),calc(100% - 6px) 100%,29% 100%,24% calc(100% - 2px),0 calc(100% - 2px),0 7px);
  background:
    linear-gradient(90deg, rgba(222,182,108,.82), rgba(222,182,108,.26) 48%, transparent 73%) top left / 74% 1px no-repeat,
    linear-gradient(90deg, transparent 0 25%, rgba(107,183,220,.46) 45%, rgba(107,183,220,.78)) bottom right / 78% 1px no-repeat,
    linear-gradient(180deg, rgba(222,182,108,.74), rgba(222,182,108,.16)) left top / 1px 65% no-repeat,
    linear-gradient(180deg, rgba(107,183,220,.18), rgba(107,183,220,.62)) right bottom / 1px 62% no-repeat;
  opacity: .94;
}
.leaderboard-hud-frame::after {
  left: 9px;
  right: 9px;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, rgba(112,184,218,.08) 30%, rgba(222,182,108,.07) 70%, transparent);
  opacity: .62;
}
.leaderboard-hud-frame strong {
  position: relative;
  z-index: 2;
  margin: 0;
  max-width: 100%;
  color: #f0eee8;
  font: 600 clamp(7px,.58vw,9px)/1 system-ui,sans-serif;
  letter-spacing: .15em;
  text-indent: .15em;
  text-align: center;
  white-space: nowrap;
}
.leaderboard-hud-bracket {
  position: absolute;
  z-index: 2;
  width: 22%;
  height: 1px;
  pointer-events: none;
}
.leaderboard-hud-bracket-top {
  left: 12px;
  top: -1px;
  background: linear-gradient(90deg, rgba(222,182,108,.90), transparent);
}
.leaderboard-hud-bracket-bottom {
  right: 12px;
  bottom: -1px;
  background: linear-gradient(270deg, rgba(112,184,218,.82), transparent);
}

@media (max-width: 1366px) {
  .cockpit-profile-hud {
    --identity-module-left: calc(3.9% + 7px);
    --identity-module-width: clamp(220px,23.2vw,270px);
    --avatar-login-gap: clamp(17px,1.35vw,22px);
    --leader-side-gap: 7px;
    --leader-bridge-width: clamp(15px,1.3vw,20px);
    --leader-frame-width: clamp(90px,8.4vw,108px);
  }
}

@media (max-width: 900px) {
  .cockpit-profile-hud {
    --identity-module-left: calc(3.9% + 6px);
    --identity-module-width: min(245px,42vw);
    --avatar-login-gap: 17px;
    --leader-side-gap: 6px;
    --leader-bridge-width: 15px;
    --leader-frame-width: 92px;
  }
}

@media (max-width: 700px) {
  .cockpit-profile-hud {
    --identity-module-left: calc(5.5% + 5px);
    --identity-module-width: 205px;
    --avatar-login-gap: 12px;
    --leader-side-gap: 5px;
    --leader-bridge-width: 11px;
    --leader-frame-width: 74px;
    --identity-frame-height: 28px;
  }
  .cockpit-profile-hud .profile-hud-trigger {
    grid-template-columns: 30px var(--avatar-login-gap) minmax(0,1fr) !important;
  }
  .cockpit-profile-hud .profile-hud-copy { inset: 0 17px !important; }
  .cockpit-profile-hud .profile-hud-action { right: 3px !important; }
  .leaderboard-hud-frame { padding: 0 5px; }
  .leaderboard-hud-frame strong {
    font-size: 6.4px;
    letter-spacing: .11em;
    text-indent: .11em;
  }
  .leaderboard-hud-bracket { width: 18%; }
}

@media (max-width: 430px) {
  .cockpit-profile-hud {
    --identity-module-width: 185px;
    --avatar-login-gap: 10px;
    --leader-side-gap: 4px;
    --leader-bridge-width: 9px;
    --leader-frame-width: 67px;
  }
  .cockpit-profile-hud .profile-hud-trigger {
    grid-template-columns: 28px var(--avatar-login-gap) minmax(0,1fr) !important;
  }
  .cockpit-profile-hud .profile-avatar-frame { width: 28px !important; }
  .cockpit-profile-hud .profile-hud-copy { inset: 0 15px !important; }
  .cockpit-profile-hud .profile-hud-copy strong { font-size: 7.1px !important; }
  .leaderboard-hud-frame strong { font-size: 5.8px; letter-spacing:.08em; text-indent:.08em; }
}


/* ========================================================================
   2026-09-30 MAIN IDENTITY CONTAINER SINGLE-LAYER FIX
   Remove the obsolete plain main bar instead of covering it. The remaining
   sci-fi pseudo-element is now the only main identity container and carries
   both the dark fill and its existing technical perimeter.
   ======================================================================== */
.cockpit-profile-hud::before {
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.cockpit-profile-hud::after {
  /* Same sci-fi perimeter, now combined with the main dark fill in ONE layer. */
  background:
    linear-gradient(90deg,
      transparent 0 5.2%,
      rgba(221,180,104,.72) 5.2% 15%,
      transparent 15% 18.2%,
      rgba(111,184,218,.55) 18.2% 24%,
      transparent 24% 73%,
      rgba(221,180,104,.42) 73% 82%,
      transparent 82% 90.5%,
      rgba(111,184,218,.46) 90.5% 95%,
      transparent 95% 100%) top / 100% 1px no-repeat,
    linear-gradient(90deg,
      transparent 0 8%,
      rgba(111,184,218,.36) 8% 14%,
      transparent 14% 29%,
      rgba(221,180,104,.62) 29% 48%,
      transparent 48% 78%,
      rgba(111,184,218,.42) 78% 87%,
      transparent 87% 100%) bottom / 100% 1px no-repeat,
    linear-gradient(58deg,
      transparent 0 42%,
      rgba(221,180,104,.62) 43% 47%,
      transparent 48% 100%) left / 5% 100% no-repeat,
    linear-gradient(-58deg,
      transparent 0 42%,
      rgba(111,184,218,.52) 43% 47%,
      transparent 48% 100%) right / 5% 100% no-repeat,
    linear-gradient(180deg,rgba(9,23,36,.98) 0%,rgba(3,11,19,.985) 100%) !important;
  border: 0 !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.018),
    inset 0 -8px 16px rgba(0,0,0,.17),
    0 8px 18px rgba(0,0,0,.18) !important;
  opacity: 1 !important;
}

/* ========================================================================
   2026-09-30 AVATAR / LOGIN TRUE SEPARATION + CLICKABLE LEADERBOARD
   Structural correction only. Existing sci-fi frame artwork is preserved.
   ======================================================================== */
.cockpit-profile-hud {
  --hud-content-left: calc(3.9% + 8px);
  --avatar-module-size: clamp(34px,3.15vw,40px);
  --avatar-login-gap: clamp(21px,1.65vw,28px);
  --login-frame-width: clamp(158px,15.2vw,198px);
  --identity-frame-height: clamp(29px,3.45vh,34px);
  --leader-side-gap: clamp(8px,.65vw,11px);
  --leader-bridge-width: clamp(17px,1.35vw,23px);
  --leader-frame-width: clamp(96px,8.6vw,118px);
}

/* Avatar is its own dashboard socket, no longer nested inside the login link. */
.profile-avatar-module {
  position: absolute;
  z-index: 4;
  left: var(--hud-content-left);
  top: 50%;
  width: var(--avatar-module-size);
  height: var(--avatar-module-size);
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  pointer-events: none;
}
.cockpit-profile-hud .profile-avatar-module .profile-avatar-frame {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}

/* Login is a separate independent frame with real negative space after avatar. */
.cockpit-profile-hud .profile-login-trigger {
  position: absolute !important;
  z-index: 4 !important;
  left: calc(var(--hud-content-left) + var(--avatar-module-size) + var(--avatar-login-gap)) !important;
  top: 50% !important;
  width: var(--login-frame-width) !important;
  height: var(--identity-frame-height) !important;
  transform: translateY(-50%) !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  text-decoration: none !important;
  pointer-events: auto !important;
}
.cockpit-profile-hud .profile-login-trigger .profile-login-frame {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
.cockpit-profile-hud .profile-login-trigger .profile-hud-copy {
  position: absolute !important;
  inset: 0 23px !important;
  display: grid !important;
  align-content: center !important;
  justify-items: center !important;
  text-align: center !important;
  gap: 1px !important;
}
.cockpit-profile-hud .profile-login-trigger .profile-hud-kicker {
  width: 100% !important;
  justify-content: center !important;
}
.cockpit-profile-hud .profile-login-trigger .profile-hud-copy strong,
.cockpit-profile-hud .profile-login-trigger .profile-hud-copy small {
  width: 100% !important;
  text-align: center !important;
}
.cockpit-profile-hud .profile-login-trigger .profile-hud-action {
  position: absolute !important;
  right: 5px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Existing connector to leaderboard now starts from the independent login frame. */
.profile-leaderboard-bridge {
  left: calc(
    var(--hud-content-left) +
    var(--avatar-module-size) +
    var(--avatar-login-gap) +
    var(--login-frame-width) +
    var(--leader-side-gap)
  ) !important;
}
.leaderboard-hud-frame {
  left: calc(
    var(--hud-content-left) +
    var(--avatar-module-size) +
    var(--avatar-login-gap) +
    var(--login-frame-width) +
    var(--leader-side-gap) +
    var(--leader-bridge-width) +
    var(--leader-side-gap)
  ) !important;
  text-decoration: none !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: filter .18s ease, transform .18s ease;
}
.leaderboard-hud-frame:hover,
.leaderboard-hud-frame:focus-visible {
  filter: brightness(1.17);
}
.leaderboard-hud-frame:hover::before,
.leaderboard-hud-frame:focus-visible::before {
  opacity: 1;
}
.leaderboard-hud-frame:focus-visible {
  outline: 1px solid rgba(235,198,129,.72);
  outline-offset: 4px;
}
.leaderboard-hud-frame:active {
  filter: brightness(1.28);
}

@media (max-width:1366px) {
  .cockpit-profile-hud {
    --hud-content-left: calc(3.9% + 7px);
    --avatar-module-size: clamp(33px,3vw,38px);
    --avatar-login-gap: clamp(19px,1.5vw,24px);
    --login-frame-width: clamp(150px,15.2vw,184px);
    --leader-side-gap: 7px;
    --leader-bridge-width: clamp(15px,1.25vw,20px);
    --leader-frame-width: clamp(90px,8.2vw,108px);
  }
}
@media (max-width:900px) {
  .cockpit-profile-hud {
    --hud-content-left: calc(4.4% + 6px);
    --avatar-module-size: 33px;
    --avatar-login-gap: 16px;
    --login-frame-width: 152px;
    --leader-side-gap: 6px;
    --leader-bridge-width: 14px;
    --leader-frame-width: 86px;
  }
}
@media (max-width:700px) {
  .cockpit-profile-hud {
    --hud-content-left: calc(5.2% + 3px);
    --avatar-module-size: 29px;
    --avatar-login-gap: 10px;
    --login-frame-width: 126px;
    --leader-side-gap: 4px;
    --leader-bridge-width: 8px;
    --leader-frame-width: 67px;
    --identity-frame-height: 27px;
  }
  .cockpit-profile-hud .profile-login-trigger .profile-hud-copy { inset:0 14px !important; }
  .cockpit-profile-hud .profile-login-trigger .profile-hud-action { right:2px !important; }
  .cockpit-profile-hud .profile-login-trigger .profile-hud-copy strong { font-size:7px !important; }
  .cockpit-profile-hud .profile-login-trigger .profile-hud-kicker { font-size:3.8px !important; }
  .cockpit-profile-hud .profile-login-trigger .profile-hud-copy small { display:none !important; }
  .leaderboard-hud-frame { padding:0 4px !important; }
  .leaderboard-hud-frame strong { font-size:5.6px !important; letter-spacing:.075em !important; text-indent:.075em !important; }
}
@media (max-width:430px) {
  .cockpit-profile-hud {
    --hud-content-left: calc(5% + 2px);
    --avatar-module-size: 27px;
    --avatar-login-gap: 8px;
    --login-frame-width: 118px;
    --leader-side-gap: 3px;
    --leader-bridge-width: 7px;
    --leader-frame-width: 61px;
    --identity-frame-height: 26px;
  }
  .cockpit-profile-hud .profile-login-trigger .profile-hud-copy { inset:0 12px !important; }
  .cockpit-profile-hud .profile-login-trigger .profile-hud-copy strong { font-size:6.5px !important; }
  .cockpit-profile-hud .profile-login-trigger .profile-hud-kicker { font-size:3.5px !important; letter-spacing:.12em !important; }
  .leaderboard-hud-frame strong { font-size:5.8px !important; letter-spacing:.045em !important; text-indent:.045em !important; }
}

/* ========================================================================
   2026-09-30 HOME HEADER FINAL CORRECTION
   Remove the obsolete top windshield strip that visually duplicates the
   identity bar on Home, and restore real pointer interaction to Leaderboard.
   No other cockpit/home component is changed.
   ======================================================================== */

/* The identity HUD is now the only long top bar on the HOME screen.
   This old windshield-depth strip was the plain second trapezoid visible
   immediately underneath it on narrow/mobile layouts. */
.mission[data-experience="home"] .window-depth-top {
  display: none !important;
}

/* An older reliability rule disables pointer events on every direct HUD child
   except the login trigger. Leaderboard is intentionally another interactive
   direct child, so opt it back in explicitly. */
.cockpit-profile-hud > .leaderboard-hud-frame {
  pointer-events: auto !important;
  z-index: 30 !important;
  cursor: pointer !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.cockpit-profile-hud > .leaderboard-hud-frame,
.cockpit-profile-hud > .leaderboard-hud-frame * {
  user-select: none;
}


/* ========================================================================
   2026-09-30 START + DUPLICATE TOP STRIP CORRECTION
   Scope: permanently remove the obsolete windshield top strip and restyle
   only the existing START control in ANTARA's cockpit language.
   ======================================================================== */

/* Structural removal fallback. The element is also removed from index.html,
   so it cannot reappear when HOME changes into LAUNCH state. */
.window-depth-top { display:none !important; }

/* Keep the CTA in the exact existing position. Only its visual skin changes. */
.launch-button {
  --launch-gold: #dfb76f;
  --launch-gold-soft: rgba(223,183,111,.56);
  --launch-cyan: #78bcd8;
  --launch-cyan-soft: rgba(120,188,216,.46);
  min-width: clamp(210px,18vw,286px) !important;
  min-height: 54px !important;
  padding: 0 17px 0 21px !important;
  gap: 18px !important;
  justify-content: space-between !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: polygon(10px 0,calc(100% - 16px) 0,100% 14px,100% calc(100% - 8px),calc(100% - 8px) 100%,14px 100%,0 calc(100% - 14px),0 9px);
  background:
    linear-gradient(90deg,var(--launch-gold-soft),transparent 27%) top left / 43% 1px no-repeat,
    linear-gradient(90deg,transparent 0 34%,var(--launch-cyan-soft) 56%,transparent 100%) top right / 49% 1px no-repeat,
    linear-gradient(90deg,var(--launch-cyan-soft),transparent 34%) bottom left / 39% 1px no-repeat,
    linear-gradient(90deg,transparent 0 28%,var(--launch-gold-soft) 60%,transparent 100%) bottom right / 52% 1px no-repeat,
    linear-gradient(180deg,rgba(12,27,41,.96),rgba(4,12,21,.98)) !important;
  color: #f5f2ea !important;
  box-shadow:
    inset 0 1px rgba(255,255,255,.025),
    inset 0 -8px 16px rgba(0,0,0,.16),
    0 12px 30px rgba(0,0,0,.20) !important;
  overflow: visible;
  isolation: isolate;
}
.launch-button::before,
.launch-button::after {
  content:"" !important;
  display:block !important;
  position:absolute !important;
  pointer-events:none;
  z-index:0;
  width:auto !important;
  height:auto !important;
  top:auto !important;
  right:auto !important;
  left:auto !important;
  transform:none !important;
}
.launch-button::before {
  inset: 5px 7px 5px 7px !important;
  clip-path: polygon(7px 0,64% 0,68% 2px,100% 2px,100% calc(100% - 7px),calc(100% - 7px) 100%,34% 100%,30% calc(100% - 2px),0 calc(100% - 2px),0 7px);
  background:
    linear-gradient(90deg,rgba(223,183,111,.88),rgba(223,183,111,.18) 48%,transparent 72%) top left / 72% 1px no-repeat,
    linear-gradient(90deg,transparent 0 22%,rgba(120,188,216,.38) 48%,rgba(120,188,216,.78)) bottom right / 78% 1px no-repeat,
    linear-gradient(180deg,rgba(223,183,111,.72),transparent 66%) left top / 1px 70% no-repeat,
    linear-gradient(180deg,transparent 0 32%,rgba(120,188,216,.68)) right bottom / 1px 68% no-repeat;
  opacity:.95;
}
.launch-button::after {
  width: 4px !important;
  height: 4px !important;
  left: 13px !important;
  top: 50% !important;
  transform: translateY(-50%) rotate(45deg) !important;
  border: 1px solid rgba(223,183,111,.78);
  background: transparent !important;
  box-shadow: 0 0 7px rgba(223,183,111,.15);
  opacity:.92;
}
.launch-button-copy {
  position:relative;
  z-index:2;
  display:grid;
  align-content:center;
  justify-items:start;
  text-align:left;
  gap:2px;
  padding-left:12px;
}
.launch-button-copy small {
  display:block;
  margin:0;
  color:rgba(120,188,216,.78);
  font:600 6px/1 system-ui,sans-serif;
  letter-spacing:.26em;
  text-indent:.26em;
}
.launch-button-copy strong {
  display:block;
  margin:0;
  color:#f4efe4;
  font:650 12px/1.05 system-ui,sans-serif;
  letter-spacing:.16em;
  text-indent:.16em;
  text-shadow:0 0 10px rgba(223,183,111,.08);
}
.launch-button-arrow {
  position:relative;
  z-index:2;
  display:grid;
  place-items:center;
  width:30px;
  height:28px;
  border-left:1px solid rgba(120,188,216,.22);
}
.launch-button-arrow::before {
  content:"";
  position:absolute;
  left:-1px;
  top:6px;
  width:1px;
  height:7px;
  background:rgba(223,183,111,.64);
}
.launch-button-arrow svg {
  width:17px !important;
  height:17px !important;
  stroke:var(--launch-gold) !important;
  stroke-width:1.45 !important;
  transition:transform .22s ease,stroke .22s ease !important;
}
.launch-button:hover,
.launch-button:focus-visible {
  background:
    linear-gradient(90deg,rgba(223,183,111,.70),transparent 29%) top left / 46% 1px no-repeat,
    linear-gradient(90deg,transparent 0 30%,rgba(120,188,216,.62) 58%,transparent 100%) top right / 53% 1px no-repeat,
    linear-gradient(90deg,rgba(120,188,216,.58),transparent 38%) bottom left / 43% 1px no-repeat,
    linear-gradient(90deg,transparent 0 23%,rgba(223,183,111,.68) 62%,transparent 100%) bottom right / 56% 1px no-repeat,
    linear-gradient(180deg,rgba(15,33,49,.985),rgba(5,14,24,.99)) !important;
  box-shadow:inset 0 1px rgba(255,255,255,.035),0 13px 31px rgba(0,0,0,.22) !important;
}
.launch-button:hover .launch-button-arrow svg,
.launch-button:focus-visible .launch-button-arrow svg {
  transform:translateX(3px) !important;
  stroke:#f1cb82 !important;
}
.launch-button:focus-visible {
  outline:1px solid rgba(223,183,111,.60);
  outline-offset:4px;
}
.launch-button:active {
  filter:brightness(1.08);
}
.is-preparing .launch-button {
  animation: launch-confirm .45s ease-out both !important;
}

@media (max-width:700px) {
  .launch-button {
    min-width: 186px !important;
    min-height: 49px !important;
    padding:0 13px 0 16px !important;
    gap:13px !important;
  }
  .launch-button-copy { padding-left:10px; gap:1px; }
  .launch-button-copy small { font-size:5.2px; letter-spacing:.21em; text-indent:.21em; }
  .launch-button-copy strong { font-size:10px; letter-spacing:.14em; text-indent:.14em; }
  .launch-button-arrow { width:26px; height:24px; }
  .launch-button-arrow svg { width:15px !important; height:15px !important; }
}

/* ========================================================================
   2026-10-01 FINAL ANTARA TOP NAV SUITE
   Scope: top identity/navigation HUD + existing launch CTA only.
   Order: profile photo -> login -> leaderboard -> progress -> achievement.
   ======================================================================== */

/* Keep the main container fully present and interactive during HOME and LAUNCH. */
.cockpit-profile-hud,
.mission[data-experience="home"] .cockpit-profile-hud,
.mission[data-experience="launch"] .cockpit-profile-hud {
  --nav-left-inset: 6.7%;
  --nav-avatar: clamp(36px,3.2vw,42px);
  --nav-avatar-login-gap: clamp(18px,1.45vw,24px);
  --nav-login-width: clamp(168px,14.8vw,198px);
  --nav-module-gap: clamp(7px,.62vw,10px);
  --nav-bridge-width: clamp(18px,1.45vw,24px);
  --nav-height: clamp(31px,3.55vh,36px);
  opacity: 1 !important;
  filter: none !important;
  pointer-events: auto !important;
}

/* The opaque sci-fi bar remains one physical container in every state. */
.cockpit-profile-hud::after {
  z-index: -2 !important;
  opacity: 1 !important;
  animation: antara-main-container-breathe 6.8s ease-in-out infinite !important;
}
/* Animated perimeter only. No second fill, no second box. */
.cockpit-profile-hud::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: -1 !important;
  left: 0 !important;
  right: 0 !important;
  top: 50% !important;
  height: clamp(44px,5.05vh,52px) !important;
  transform: translateY(-50%) !important;
  clip-path: polygon(0 34%,1.2% 0,98.8% 0,100% 34%,100% 66%,98.8% 100%,1.2% 100%,0 66%) !important;
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg,transparent 0%,rgba(236,196,118,0) 15%,rgba(236,196,118,.92) 24%,rgba(117,195,228,.78) 30%,rgba(236,196,118,0) 41%,transparent 100%) top / 220% 1px no-repeat,
    linear-gradient(270deg,transparent 0%,rgba(117,195,228,0) 15%,rgba(117,195,228,.82) 24%,rgba(236,196,118,.72) 30%,rgba(117,195,228,0) 41%,transparent 100%) bottom / 220% 1px no-repeat !important;
  animation: antara-main-border-run 8.4s linear infinite !important;
}

/* Clickable profile photo/socket. */
.cockpit-profile-hud .profile-avatar-module {
  left: var(--nav-left-inset) !important;
  top: 50% !important;
  width: var(--nav-avatar) !important;
  height: var(--nav-avatar) !important;
  transform: translateY(-50%) !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  text-decoration: none !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent;
}
.cockpit-profile-hud .profile-avatar-module:hover .profile-avatar-frame,
.cockpit-profile-hud .profile-avatar-module:focus-visible .profile-avatar-frame {
  filter: brightness(1.16) drop-shadow(0 0 8px rgba(115,190,222,.16));
}
.cockpit-profile-hud .profile-avatar-module:focus-visible {
  outline: 1px solid rgba(223,183,111,.72);
  outline-offset: 4px;
}

/* Login stays separate from the profile socket and preserves its existing art. */
.cockpit-profile-hud .profile-login-trigger {
  left: calc(var(--nav-left-inset) + var(--nav-avatar) + var(--nav-avatar-login-gap)) !important;
  width: var(--nav-login-width) !important;
  height: var(--nav-height) !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  filter: none !important;
}
.mission[data-experience="launch"] .profile-hud-trigger,
.mission[data-experience="launch"] .profile-avatar-module,
.mission[data-experience="launch"] .profile-nav-suite,
.mission[data-experience="launch"] .profile-more-trigger {
  pointer-events: auto !important;
}

/* Technical bridge between login and navigation modules. */
.profile-nav-bridge {
  position: absolute;
  z-index: 5;
  left: calc(var(--nav-left-inset) + var(--nav-avatar) + var(--nav-avatar-login-gap) + var(--nav-login-width) + var(--nav-module-gap));
  top: 50%;
  width: var(--nav-bridge-width);
  height: 14px;
  transform: translateY(-50%);
  display: grid;
  grid-template-columns: 3px 1fr 3px;
  align-items: center;
  gap: 3px;
  pointer-events: none !important;
}
.profile-nav-bridge b { height:1px; background:linear-gradient(90deg,rgba(227,185,108,.78),rgba(115,190,222,.68)); animation: antara-bridge-pulse 3.6s ease-in-out infinite; }
.profile-nav-bridge i { width:3px;height:3px;border:1px solid rgba(228,187,111,.65);transform:rotate(45deg); }
.profile-nav-bridge i:last-child { border-color:rgba(115,190,222,.62); }

/* Desktop navigation suite. */
.profile-nav-suite {
  position: absolute;
  z-index: 30;
  left: calc(var(--nav-left-inset) + var(--nav-avatar) + var(--nav-avatar-login-gap) + var(--nav-login-width) + var(--nav-module-gap) + var(--nav-bridge-width) + var(--nav-module-gap));
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: var(--nav-module-gap);
  pointer-events: auto !important;
}
.hud-nav-module {
  --module-gold: rgba(224,183,106,.84);
  --module-cyan: rgba(112,188,222,.76);
  position: relative;
  display: grid;
  grid-template-columns: 27px minmax(0,1fr);
  align-items: center;
  gap: 6px;
  height: var(--nav-height);
  width: clamp(116px,9.6vw,138px);
  padding: 0 9px 0 7px;
  color:#ecf2f5;
  text-decoration:none;
  background:transparent;
  isolation:isolate;
  cursor:pointer;
  pointer-events:auto !important;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  transition:transform .18s ease,filter .2s ease;
}
.hud-nav-module::before,
.hud-nav-module::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}
.hud-nav-module::before {
  opacity:.88;
  transition:opacity .2s ease,filter .2s ease;
}
.hud-nav-module::after {
  left:8px;
  right:8px;
  top:auto;
  bottom:3px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--module-cyan),transparent);
  transform:scaleX(.18);
  transform-origin:50% 50%;
  opacity:.42;
  animation: antara-module-line 4.4s ease-in-out infinite;
}
.hud-nav-module:hover,
.hud-nav-module:focus-visible { transform:translateY(-1px); filter:brightness(1.13); }
.hud-nav-module:hover::before,
.hud-nav-module:focus-visible::before { opacity:1; filter:brightness(1.16); }
.hud-nav-module:focus-visible { outline:1px solid rgba(223,183,111,.60); outline-offset:3px; }
.hud-nav-module:active { transform:translateY(0) scale(.985); }
.hud-nav-icon {
  position:relative;
  width:25px;height:24px;
  display:grid;place-items:center;
  color:#d9b46f;
}
.hud-nav-icon::before { content:"";position:absolute;inset:2px;border:1px solid rgba(217,180,111,.30);transform:rotate(45deg);animation:antara-nav-icon-idle 7s ease-in-out infinite alternate; }
.hud-nav-icon svg { position:relative;z-index:2;width:20px;height:20px;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round; }
.hud-nav-copy { min-width:0;display:grid;align-content:center;gap:1px;text-align:left; }
.hud-nav-copy small { color:#7798aa;font:500 4.8px/1 system-ui,sans-serif;letter-spacing:.19em; }
.hud-nav-copy strong { color:#edf1f3;font:650 clamp(6.8px,.54vw,8.5px)/1 system-ui,sans-serif;letter-spacing:.115em;white-space:nowrap; }
.hud-nav-pulse { position:absolute;right:6px;top:6px;width:3px;height:3px;border-radius:50%;background:var(--module-cyan);box-shadow:0 0 7px color-mix(in srgb,var(--module-cyan) 65%,transparent);animation:antara-module-node 3.3s ease-in-out infinite; }

/* Leaderboard: scoreboard plate + rank bars icon. */
.hud-nav-leaderboard { width:clamp(128px,10.4vw,148px); }
.hud-nav-leaderboard::before {
  clip-path:polygon(8px 0,74% 0,79% 3px,100% 3px,100% calc(100% - 7px),calc(100% - 7px) 100%,32% 100%,27% calc(100% - 2px),0 calc(100% - 2px),0 8px);
  background:
    linear-gradient(90deg,var(--module-gold),rgba(224,183,106,.24) 54%,transparent 76%) top left/78% 1px no-repeat,
    linear-gradient(90deg,transparent 8%,rgba(112,188,222,.34),var(--module-cyan)) bottom right/76% 1px no-repeat,
    linear-gradient(180deg,var(--module-gold),transparent 75%) left top/1px 66% no-repeat,
    linear-gradient(180deg,transparent,var(--module-cyan)) right bottom/1px 68% no-repeat;
}
.hud-nav-leaderboard .hud-nav-icon { color:#e3bb72; }
.hud-nav-leaderboard .hud-nav-icon::before { clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); }

/* Progress: cyan telemetry shape with a deliberately different border. */
.hud-nav-progress { --module-gold:rgba(208,178,119,.52);--module-cyan:rgba(102,197,231,.90); width:clamp(112px,9vw,128px); }
.hud-nav-progress::before {
  clip-path:polygon(0 4px,18% 4px,22% 0,100% 0,100% 68%,94% 68%,90% 100%,12% 100%,8% 96%,0 96%);
  background:
    linear-gradient(90deg,rgba(104,198,232,.25),var(--module-cyan),transparent 74%) top/82% 1px no-repeat,
    linear-gradient(90deg,var(--module-gold),rgba(104,198,232,.70),transparent) bottom left/68% 1px no-repeat,
    linear-gradient(180deg,var(--module-cyan),rgba(104,198,232,.06)) right top/1px 70% no-repeat,
    linear-gradient(180deg,rgba(223,184,111,.54),transparent) left bottom/1px 56% no-repeat;
}
.hud-nav-progress .hud-nav-icon { color:#79c5e5; }
.hud-nav-progress .hud-nav-pulse { animation-delay:-1.1s; }

/* Achievement: award notch + warm-gold emphasis without becoming another leaderboard. */
.hud-nav-achievement { --module-gold:rgba(235,190,105,.94);--module-cyan:rgba(111,182,214,.56); width:clamp(126px,10.2vw,148px); }
.hud-nav-achievement::before {
  clip-path:polygon(10px 0,43% 0,48% 4px,72% 4px,77% 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,58% 100%,54% calc(100% - 3px),0 calc(100% - 3px),0 10px);
  background:
    linear-gradient(90deg,var(--module-gold),rgba(235,190,105,.23),transparent 82%) top/88% 1px no-repeat,
    linear-gradient(90deg,rgba(111,182,214,.18),var(--module-cyan),transparent) bottom left/72% 1px no-repeat,
    linear-gradient(180deg,var(--module-gold),transparent 67%) left top/1px 62% no-repeat,
    linear-gradient(180deg,transparent 14%,rgba(235,190,105,.64)) right bottom/1px 72% no-repeat;
}
.hud-nav-achievement .hud-nav-icon { color:#e9bd6f; }
.hud-nav-achievement .hud-nav-pulse { background:#e6b967;animation-delay:-2s; }

/* Mobile MORE control is hidden on larger screens. */
.profile-more-trigger { display:none; }

/* CTA naming only. Existing ANTARA design is preserved. */
.launch-button-copy strong { white-space:nowrap; }

@keyframes antara-main-border-run {
  from { background-position:160% 0,-60% 100%; }
  to { background-position:-70% 0,170% 100%; }
}
@keyframes antara-main-container-breathe {
  0%,100% { filter:brightness(.98); }
  50% { filter:brightness(1.045); }
}
@keyframes antara-bridge-pulse { 0%,100%{opacity:.45}50%{opacity:1} }
@keyframes antara-module-line { 0%,100%{transform:scaleX(.18);opacity:.28}50%{transform:scaleX(.88);opacity:.74} }
@keyframes antara-module-node { 0%,72%,100%{opacity:.30;transform:scale(.75)}78%,88%{opacity:1;transform:scale(1)} }
@keyframes antara-nav-icon-idle { from{transform:rotate(43deg)}to{transform:rotate(47deg)} }

@media (max-width: 1366px) {
  .cockpit-profile-hud,
  .mission[data-experience="home"] .cockpit-profile-hud,
  .mission[data-experience="launch"] .cockpit-profile-hud {
    --nav-left-inset: 6.2%;
    --nav-avatar: 36px;
    --nav-avatar-login-gap: 18px;
    --nav-login-width: 170px;
    --nav-module-gap: 6px;
    --nav-bridge-width: 17px;
  }
  .hud-nav-module { width:108px;grid-template-columns:23px minmax(0,1fr);gap:4px;padding:0 6px; }
  .hud-nav-leaderboard { width:122px; }
  .hud-nav-progress { width:104px; }
  .hud-nav-achievement { width:121px; }
  .hud-nav-icon { width:22px;height:21px; }.hud-nav-icon svg{width:17px;height:17px}
  .hud-nav-copy strong { font-size:6.6px;letter-spacing:.085em; }
  .hud-nav-copy small { font-size:4.2px; }
}

@media (max-width: 900px) and (min-width: 701px) {
  .cockpit-profile-hud,
  .mission[data-experience="home"] .cockpit-profile-hud,
  .mission[data-experience="launch"] .cockpit-profile-hud {
    --nav-left-inset: 5.8%;
    --nav-avatar: 34px;
    --nav-avatar-login-gap: 15px;
    --nav-login-width: 154px;
    --nav-module-gap: 5px;
    --nav-bridge-width: 13px;
  }
  .hud-nav-module { grid-template-columns:18px minmax(0,1fr);height:29px;padding:0 5px;gap:3px; }
  .hud-nav-leaderboard{width:105px}.hud-nav-progress{width:91px}.hud-nav-achievement{width:106px}
  .hud-nav-icon{width:18px;height:18px}.hud-nav-icon svg{width:15px;height:15px}
  .hud-nav-copy small{display:none}.hud-nav-copy strong{font-size:5.9px;letter-spacing:.055em}
}

/* Mobile: preserve touch size. Avatar + login + MORE stay in the main bar;
   the three navigation modules live in an attached dropdown instead of shrinking. */
@media (max-width:700px) {
  .cockpit-profile-hud,
  .mission[data-experience="home"] .cockpit-profile-hud,
  .mission[data-experience="launch"] .cockpit-profile-hud {
    --nav-left-inset: 6%;
    --nav-avatar: 34px;
    --nav-avatar-login-gap: 14px;
    --nav-login-width: clamp(145px,42vw,176px);
    --nav-height: 31px;
    overflow: visible !important;
  }
  .profile-nav-bridge { display:none !important; }
  .profile-more-trigger {
    position:absolute;
    z-index:36;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:3px;
    left: calc(var(--nav-left-inset) + var(--nav-avatar) + var(--nav-avatar-login-gap) + var(--nav-login-width) + 10px);
    top:50%;
    transform:translateY(-50%);
    min-width:57px;
    height:31px;
    padding:0 8px;
    border:0;
    color:#edf2f4;
    background:transparent;
    font:650 6.8px/1 system-ui,sans-serif;
    letter-spacing:.12em;
    cursor:pointer;
    pointer-events:auto !important;
    touch-action:manipulation;
    clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
    box-shadow:inset 0 0 0 1px rgba(222,183,110,.34),inset -8px 0 12px rgba(112,188,222,.04);
  }
  .profile-more-trigger::before { content:"";position:absolute;left:7px;right:7px;top:0;height:1px;background:linear-gradient(90deg,#ddb570,transparent 76%); }
  .profile-more-trigger::after { content:"";position:absolute;left:9px;right:9px;bottom:0;height:1px;background:linear-gradient(270deg,#77bddb,transparent 76%); }
  .profile-more-trigger i { width:2px;height:2px;border-radius:50%;background:#dcb46f;box-shadow:0 0 4px rgba(220,180,111,.32); }
  .profile-more-trigger[aria-expanded="true"] { filter:brightness(1.18); }

  .profile-nav-suite {
    left:auto;
    right:4.5%;
    top:calc(50% + 28px);
    transform:none;
    width:min(186px,52vw);
    padding:7px;
    display:grid;
    gap:6px;
    background:linear-gradient(180deg,#081522 0%,#030b13 100%);
    border:1px solid rgba(116,186,218,.18);
    clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
    box-shadow:0 15px 32px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.025);
    opacity:0;
    visibility:hidden;
    pointer-events:none !important;
    transition:opacity .16s ease,transform .18s ease,visibility 0s linear .18s;
  }
  .profile-nav-suite::before { content:"MORE // NAV";position:absolute;right:9px;top:-5px;padding:0 4px;background:#07131e;color:#7797a9;font:500 4px/1 system-ui,sans-serif;letter-spacing:.16em; }
  .profile-nav-suite.is-open {
    opacity:1;
    visibility:visible;
    pointer-events:auto !important;
    transform:translateY(3px);
    transition:opacity .16s ease,transform .18s ease;
  }
  .profile-nav-suite .hud-nav-module {
    width:100% !important;
    height:36px !important;
    grid-template-columns:28px 1fr !important;
    padding:0 9px !important;
  }
  .profile-nav-suite .hud-nav-icon { width:24px;height:24px; }
  .profile-nav-suite .hud-nav-icon svg { width:19px;height:19px; }
  .profile-nav-suite .hud-nav-copy small { display:block !important;font-size:4.6px !important; }
  .profile-nav-suite .hud-nav-copy strong { font-size:8.2px !important;letter-spacing:.10em !important; }
}

@media (max-width:430px) {
  .cockpit-profile-hud,
  .mission[data-experience="home"] .cockpit-profile-hud,
  .mission[data-experience="launch"] .cockpit-profile-hud {
    --nav-left-inset: 5.5%;
    --nav-avatar: 32px;
    --nav-avatar-login-gap: 11px;
    --nav-login-width: 142px;
  }
  .profile-more-trigger {
    left: calc(var(--nav-left-inset) + var(--nav-avatar) + var(--nav-avatar-login-gap) + var(--nav-login-width) + 7px);
    min-width:52px;
    padding:0 6px;
    font-size:6.2px;
  }
}

@media (prefers-reduced-motion:reduce) {
  .cockpit-profile-hud::before,
  .cockpit-profile-hud::after,
  .profile-nav-bridge b,
  .hud-nav-module::after,
  .hud-nav-icon::before,
  .hud-nav-pulse { animation:none !important; }
}


/* ========================================================================
   2026-10-01 NAV BALANCE + MOBILE MORE / LOWER HUD REFINEMENT
   Scope is intentionally limited to the top ANTARA navigation, mobile hero
   spacing while MORE is open, and the mobile cockpit dashboard spacing.
   ======================================================================== */

/* Desktop/laptop: treat profile -> game as ONE centered instrument cluster. */
@media (min-width: 901px) {
  .cockpit-profile-hud,
  .mission[data-experience="home"] .cockpit-profile-hud,
  .mission[data-experience="launch"] .cockpit-profile-hud {
    --nav-avatar: clamp(40px,3.35vw,46px);
    --nav-avatar-login-gap: clamp(20px,1.35vw,26px);
    --nav-login-width: clamp(182px,14.2vw,212px);
    --nav-module-gap: clamp(9px,.72vw,13px);
    --nav-bridge-width: clamp(18px,1.35vw,24px);
    --nav-height: clamp(36px,4.1vh,42px);
  }

  /* Center the complete suite without changing the main header container. */
  .cockpit-profile-hud .profile-avatar-module {
    left: calc(50% - clamp(455px,35vw,560px)) !important;
  }
  .cockpit-profile-hud .profile-login-trigger {
    left: calc(50% - clamp(455px,35vw,560px) + var(--nav-avatar) + var(--nav-avatar-login-gap)) !important;
  }
  .profile-nav-bridge {
    left: calc(50% - clamp(455px,35vw,560px) + var(--nav-avatar) + var(--nav-avatar-login-gap) + var(--nav-login-width) + var(--nav-module-gap)) !important;
  }
  .profile-nav-suite {
    left: calc(50% - clamp(455px,35vw,560px) + var(--nav-avatar) + var(--nav-avatar-login-gap) + var(--nav-login-width) + var(--nav-module-gap) + var(--nav-bridge-width) + var(--nav-module-gap)) !important;
    gap: var(--nav-module-gap) !important;
  }

  /* Bigger navigation plates: enough visual weight to use the long container. */
  .hud-nav-module {
    height: var(--nav-height) !important;
    grid-template-columns: 31px minmax(0,1fr) !important;
    gap: 7px !important;
    padding: 0 11px 0 8px !important;
  }
  .hud-nav-leaderboard { width: clamp(154px,11.3vw,178px) !important; }
  .hud-nav-progress { width: clamp(136px,9.7vw,156px) !important; }
  .hud-nav-achievement { width: clamp(152px,11vw,176px) !important; }
  .hud-nav-game { width: clamp(142px,10.2vw,164px) !important; }
  .hud-nav-icon { width:29px !important;height:28px !important; }
  .hud-nav-icon svg { width:21px !important;height:21px !important; }
  .hud-nav-copy small { font-size:5px !important; }
  .hud-nav-copy strong { font-size:clamp(7.2px,.57vw,9px) !important; letter-spacing:.105em !important; }
}

/* Slightly tighter centered cluster on common 1366px laptops. */
@media (min-width:901px) and (max-width:1450px) {
  .cockpit-profile-hud .profile-avatar-module { left: calc(50% - 520px) !important; }
  .cockpit-profile-hud .profile-login-trigger { left: calc(50% - 520px + var(--nav-avatar) + var(--nav-avatar-login-gap)) !important; }
  .profile-nav-bridge { left: calc(50% - 520px + var(--nav-avatar) + var(--nav-avatar-login-gap) + var(--nav-login-width) + var(--nav-module-gap)) !important; }
  .profile-nav-suite { left: calc(50% - 520px + var(--nav-avatar) + var(--nav-avatar-login-gap) + var(--nav-login-width) + var(--nav-module-gap) + var(--nav-bridge-width) + var(--nav-module-gap)) !important; }
  .hud-nav-leaderboard { width:146px !important; }
  .hud-nav-progress { width:128px !important; }
  .hud-nav-achievement { width:144px !important; }
  .hud-nav-game { width:134px !important; }
}

/* Game: controller socket + split gold/cyan perimeter, distinct from the other three. */
.hud-nav-game {
  --module-gold: rgba(224,184,108,.78);
  --module-cyan: rgba(113,195,226,.86);
}
.hud-nav-game::before {
  clip-path: polygon(0 8px,8px 0,40% 0,44% 3px,70% 3px,74% 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,60% 100%,56% calc(100% - 3px),20% calc(100% - 3px),16% 100%,0 100%);
  background:
    linear-gradient(90deg,var(--module-cyan),rgba(113,195,226,.18),transparent 70%) top left/73% 1px no-repeat,
    linear-gradient(270deg,var(--module-gold),rgba(224,184,108,.18),transparent 72%) bottom right/76% 1px no-repeat,
    linear-gradient(180deg,var(--module-cyan),transparent 72%) left top/1px 62% no-repeat,
    linear-gradient(180deg,transparent 18%,var(--module-gold)) right bottom/1px 66% no-repeat;
}
.hud-nav-game .hud-nav-icon { color:#88c9e5; }
.hud-nav-game .hud-nav-icon::before {
  border-color:rgba(121,197,228,.34);
  border-radius:3px;
  transform:rotate(0deg);
  animation:antara-game-socket 4.8s ease-in-out infinite;
}
.hud-nav-game .hud-nav-pulse { animation-delay:-2.6s; }
@keyframes antara-game-socket { 0%,100%{transform:scale(.88);opacity:.45}50%{transform:scale(1);opacity:.82} }

/* Mobile/tablet: keep profile/login/MORE comfortable, and put a 2x2 drawer
   directly below the header. The hero is moved down ONLY while the drawer is open. */
@media (max-width:700px) {
  .intro h1 {
    top:16.7% !important;
    width:86vw !important;
    font-size:clamp(27px,8.2vw,35px) !important;
    line-height:1.06 !important;
  }
  .intro-kicker {
    top:27.8% !important;
    width:76vw !important;
    font-size:5px !important;
    letter-spacing:.29em !important;
  }

  .profile-nav-suite {
    left: 5% !important;
    right: 5% !important;
    top: calc(100% + 6px) !important;
    width: auto !important;
    padding: 8px !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 6px !important;
    transform: translateY(-5px) !important;
  }
  .profile-nav-suite.is-open {
    transform: translateY(0) !important;
  }
  .profile-nav-suite::before {
    content:"ANTARA // NAV" !important;
    right:10px !important;
    top:-5px !important;
    font-size:3.7px !important;
  }
  .profile-nav-suite .hud-nav-module {
    height:32px !important;
    grid-template-columns:22px 1fr !important;
    gap:5px !important;
    padding:0 7px !important;
  }
  .profile-nav-suite .hud-nav-icon { width:20px !important;height:20px !important; }
  .profile-nav-suite .hud-nav-icon svg { width:16px !important;height:16px !important; }
  .profile-nav-suite .hud-nav-copy { gap:0 !important; }
  .profile-nav-suite .hud-nav-copy small {
    display:block !important;
    font-size:3.5px !important;
    letter-spacing:.13em !important;
  }
  .profile-nav-suite .hud-nav-copy strong {
    font-size:6.6px !important;
    letter-spacing:.075em !important;
  }

  /* When MORE is open, the title is deliberately moved below the drawer. */
  .mission.profile-more-open .intro h1 { top:30.2% !important; }
  .mission.profile-more-open .intro-kicker { top:41.5% !important; }

  /* Bottom dashboard: equal panel rhythm + more air above it. */
  .cockpit-dashboard {
    height:24.5% !important;
    bottom:-2.5% !important;
  }
  .console-left,.console-center,.console-right {
    display:block !important;
    top:36% !important;
    width:29.5% !important;
    height:50% !important;
  }
  .console-left { left:2.25% !important; }
  .console-center { left:35.25% !important; }
  .console-right { right:2.25% !important; }
  .cockpit-brand { top:20% !important; left:50% !important; transform:translateX(-50%) !important; }
  .dashboard-lights { left:8% !important; top:22% !important; }
  .mission-footer { bottom:10px !important; right:4.5% !important; left:auto !important; }
  .audio-control { min-height:34px !important; padding:5px 0 5px 8px !important; font-size:5.2px !important; gap:5px !important; }
}

@media (max-width:430px) {
  .intro h1 { font-size:clamp(26px,8vw,32px) !important; width:88vw !important; }
  .intro-kicker { font-size:4.5px !important; width:82vw !important; }
  .profile-nav-suite { left:4% !important; right:4% !important; padding:7px !important; gap:5px !important; }
  .profile-nav-suite .hud-nav-module { height:30px !important; grid-template-columns:20px 1fr !important; padding:0 6px !important; }
  .profile-nav-suite .hud-nav-copy strong { font-size:5.5px !important; }
  .profile-nav-suite .hud-nav-copy small { font-size:3.2px !important; }
  .mission.profile-more-open .intro h1 { top:29.5% !important; }
  .mission.profile-more-open .intro-kicker { top:40.2% !important; }
  .cockpit-dashboard { height:23.5% !important; bottom:-2% !important; }
}

@media (prefers-reduced-motion:reduce) {
  .hud-nav-game .hud-nav-icon::before { animation:none !important; }
}


/* ========================================================================
   FINAL CENTERING PASS: the interactive header controls are centered as one
   physical cluster. This supersedes older absolute left-offset patches only.
   ======================================================================== */
.profile-primary-cluster {
  position:absolute;
  z-index:35;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  pointer-events:auto !important;
  white-space:nowrap;
}

@media (min-width:901px) {
  .profile-primary-cluster { gap:0; }
  .profile-primary-cluster .profile-avatar-module,
  .profile-primary-cluster .profile-login-trigger,
  .profile-primary-cluster .profile-nav-bridge,
  .profile-primary-cluster .profile-nav-suite {
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    transform:none !important;
  }
  .profile-primary-cluster .profile-avatar-module {
    flex:0 0 var(--nav-avatar) !important;
    width:var(--nav-avatar) !important;
    height:var(--nav-avatar) !important;
    margin-right:var(--nav-avatar-login-gap) !important;
  }
  .profile-primary-cluster .profile-login-trigger {
    flex:0 0 var(--nav-login-width) !important;
    width:var(--nav-login-width) !important;
    height:var(--nav-height) !important;
    margin-right:var(--nav-module-gap) !important;
  }
  .profile-primary-cluster .profile-nav-bridge {
    flex:0 0 var(--nav-bridge-width) !important;
    width:var(--nav-bridge-width) !important;
    margin-right:var(--nav-module-gap) !important;
  }
  .profile-primary-cluster .profile-nav-suite {
    display:flex !important;
    align-items:center !important;
    gap:var(--nav-module-gap) !important;
  }
}

@media (max-width:700px) {
  .profile-primary-cluster {
    width:auto;
    max-width:92%;
    gap:0;
  }
  .profile-primary-cluster .profile-avatar-module,
  .profile-primary-cluster .profile-login-trigger,
  .profile-primary-cluster .profile-more-trigger {
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    transform:none !important;
  }
  .profile-primary-cluster .profile-avatar-module {
    flex:0 0 var(--nav-avatar) !important;
    width:var(--nav-avatar) !important;
    height:var(--nav-avatar) !important;
    margin-right:var(--nav-avatar-login-gap) !important;
  }
  .profile-primary-cluster .profile-login-trigger {
    flex:0 0 var(--nav-login-width) !important;
    width:var(--nav-login-width) !important;
    height:var(--nav-height) !important;
    margin-right:7px !important;
  }
  .profile-primary-cluster .profile-more-trigger {
    flex:0 0 54px;
    min-width:54px !important;
    height:31px !important;
    margin:0 !important;
  }
  .profile-primary-cluster .profile-nav-suite {
    position:absolute !important;
    z-index:50 !important;
    left:50% !important;
    right:auto !important;
    top:calc(100% + 11px) !important;
    width:min(340px,90vw) !important;
    transform:translate(-50%,-5px) !important;
  }
  .profile-primary-cluster .profile-nav-suite.is-open {
    transform:translate(-50%,0) !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }
}

@media (max-width:430px) {
  .profile-primary-cluster .profile-login-trigger { margin-right:6px !important; }
  .profile-primary-cluster .profile-more-trigger { flex-basis:50px;min-width:50px !important; }
}

/* Large-monitor fill: retain centered breathing room without leaving the bar hollow. */
@media (min-width:1451px) {
  .hud-nav-leaderboard { width:clamp(178px,10.6vw,194px) !important; }
  .hud-nav-progress { width:clamp(154px,9vw,170px) !important; }
  .hud-nav-achievement { width:clamp(176px,10.4vw,192px) !important; }
  .hud-nav-game { width:clamp(164px,9.6vw,180px) !important; }
}

/* Transition widths: use MORE instead of squeezing the full suite into a narrow bar. */
@media (min-width:701px) and (max-width:1199px) {
  .profile-primary-cluster {
    width:auto;
    max-width:88%;
    gap:0;
  }
  .profile-primary-cluster .profile-avatar-module,
  .profile-primary-cluster .profile-login-trigger,
  .profile-primary-cluster .profile-more-trigger {
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    transform:none !important;
  }
  .profile-primary-cluster .profile-avatar-module {
    flex:0 0 36px !important;
    width:36px !important;
    height:36px !important;
    margin-right:16px !important;
  }
  .profile-primary-cluster .profile-login-trigger {
    flex:0 0 168px !important;
    width:168px !important;
    height:32px !important;
    margin-right:9px !important;
  }
  .profile-primary-cluster .profile-nav-bridge { display:none !important; }
  .profile-primary-cluster .profile-more-trigger {
    display:flex !important;
    position:relative !important;
    flex:0 0 60px;
    min-width:60px !important;
    height:32px !important;
    margin:0 !important;
  }
  .profile-primary-cluster .profile-nav-suite {
    position:absolute !important;
    z-index:50 !important;
    left:50% !important;
    right:auto !important;
    top:calc(100% + 10px) !important;
    width:min(420px,70vw) !important;
    padding:8px !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px !important;
    transform:translate(-50%,-5px) !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
  .profile-primary-cluster .profile-nav-suite.is-open {
    transform:translate(-50%,0) !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }
  .profile-primary-cluster .profile-nav-suite .hud-nav-module {
    width:100% !important;
    height:34px !important;
  }
  .mission.profile-more-open .intro h1 { top:28% !important; }
  .mission.profile-more-open .intro-kicker { top:39% !important; }
}

/* ========================================================================
   2026-10-01 MOBILE SPACING CLEANUP
   Scope: mobile top identity bar, hero title/subtitle, and the single stray
   decorative line in the lower cockpit HUD. Desktop/tablet geometry unchanged.
   ======================================================================== */
@media (max-width:700px) {
  /* Smaller, lower identity container so it no longer crowds the roof detail. */
  .cockpit-profile-hud,
  .mission[data-experience="home"] .cockpit-profile-hud,
  .mission[data-experience="launch"] .cockpit-profile-hud {
    left:9.5% !important;
    right:9.5% !important;
    top:7.45% !important;
    height:40px !important;
    --nav-avatar:28px !important;
    --nav-avatar-login-gap:10px !important;
    --nav-login-width:132px !important;
    --nav-height:28px !important;
  }
  .cockpit-profile-hud::before {
    height:36px !important;
  }
  .profile-primary-cluster {
    max-width:88% !important;
  }
  .profile-primary-cluster .profile-avatar-module {
    flex-basis:28px !important;
    width:28px !important;
    height:28px !important;
    margin-right:10px !important;
  }
  .cockpit-profile-hud .profile-avatar-module .profile-avatar-frame {
    width:28px !important;
  }
  .profile-primary-cluster .profile-login-trigger {
    flex-basis:132px !important;
    width:132px !important;
    height:28px !important;
    margin-right:6px !important;
  }
  .cockpit-profile-hud .profile-login-trigger .profile-login-frame {
    height:27px !important;
  }
  .profile-primary-cluster .profile-more-trigger {
    flex-basis:48px !important;
    min-width:48px !important;
    height:28px !important;
    padding:0 5px !important;
    font-size:5.8px !important;
  }

  /* Hero gets more breathing room and a less overpowering mobile scale. */
  .intro h1 {
    top:18.35% !important;
    width:84vw !important;
    font-size:clamp(23px,7.1vw,28px) !important;
    line-height:1.08 !important;
  }
  .intro-kicker {
    display:none !important;
  }
  .mission.profile-more-open .intro h1 {
    top:30.8% !important;
  }

  /* Remove only the unexplained decorative light stripe above the mobile HUD. */
  .cockpit-dashboard::after {
    content:none !important;
    display:none !important;
  }
}

@media (max-width:430px) {
  .cockpit-profile-hud,
  .mission[data-experience="home"] .cockpit-profile-hud,
  .mission[data-experience="launch"] .cockpit-profile-hud {
    left:10% !important;
    right:10% !important;
    top:7.55% !important;
    --nav-avatar:27px !important;
    --nav-avatar-login-gap:9px !important;
    --nav-login-width:128px !important;
  }
  .profile-primary-cluster .profile-avatar-module {
    flex-basis:27px !important;
    width:27px !important;
    height:27px !important;
    margin-right:9px !important;
  }
  .cockpit-profile-hud .profile-avatar-module .profile-avatar-frame { width:27px !important; }
  .profile-primary-cluster .profile-login-trigger {
    flex-basis:128px !important;
    width:128px !important;
    margin-right:5px !important;
  }
  .profile-primary-cluster .profile-more-trigger {
    flex-basis:46px !important;
    min-width:46px !important;
  }
  .intro h1 {
    top:18.6% !important;
    width:86vw !important;
    font-size:clamp(22px,7vw,27px) !important;
  }
}


/* ========================================================================
   2026-10-01 DESKTOP / LAPTOP LOWER-HUD ALIGNMENT
   Scope: only the lower cockpit dashboard on non-mobile layouts.
   The dashboard previously used a negative bottom offset, which made its
   lower edge fall outside the viewport. Keep the same visual language, but
   seat the complete HUD inside the screen with a cleaner vertical rhythm.
   ======================================================================== */
@media (min-width:701px) {
  .mission[data-experience="home"] .cockpit-dashboard,
  .mission[data-experience="launch"] .cockpit-dashboard {
    bottom: 0 !important;
    height: 21.5% !important;
  }

  .mission[data-experience="home"] .console-bank,
  .mission[data-experience="launch"] .console-bank {
    top: 31% !important;
    height: 58% !important;
  }

  .mission[data-experience="home"] .cockpit-brand,
  .mission[data-experience="launch"] .cockpit-brand {
    top: 18% !important;
  }

  .mission[data-experience="home"] .dashboard-lights,
  .mission[data-experience="launch"] .dashboard-lights {
    top: 19% !important;
  }

  .mission[data-experience="home"] .dashboard-screen,
  .mission[data-experience="launch"] .dashboard-screen {
    top: 17% !important;
  }

  .mission[data-experience="home"] .mission-footer,
  .mission[data-experience="launch"] .mission-footer {
    bottom: 18px !important;
  }
}

/* Common 1366/1536 laptop heights need a little extra lift without making
   the dashboard taller or allowing it to cover the crew. */
@media (min-width:701px) and (max-height:820px) {
  .mission[data-experience="home"] .cockpit-dashboard,
  .mission[data-experience="launch"] .cockpit-dashboard {
    bottom: .7% !important;
    height: 20.8% !important;
  }
  .mission[data-experience="home"] .console-bank,
  .mission[data-experience="launch"] .console-bank {
    top: 30% !important;
    height: 58% !important;
  }
  .mission[data-experience="home"] .mission-footer,
  .mission[data-experience="launch"] .mission-footer {
    bottom: 15px !important;
  }
}

/* ========================================================================
   2026-10-01 MOBILE LOWER HUD READABILITY FIX
   Scope: portrait mobile home / launch cockpit telemetry only.
   Goal: stop squeezing ALTITUDE, route progress, and FLIGHT STATUS into
   three tiny equal-width cards. Desktop and landscape geometry are untouched.
   ======================================================================== */
@media (max-width:700px) and (orientation:portrait) {
  .mission[data-experience="home"] .cockpit-dashboard,
  .mission[data-experience="launch"] .cockpit-dashboard {
    bottom:0 !important;
    height:25.5% !important;
  }

  /* Two readable telemetry cards on the main row. */
  .mission[data-experience="home"] .console-left,
  .mission[data-experience="launch"] .console-left,
  .mission[data-experience="home"] .console-right,
  .mission[data-experience="launch"] .console-right {
    display:block !important;
    top:31% !important;
    width:42% !important;
    height:42% !important;
  }
  .mission[data-experience="home"] .console-left,
  .mission[data-experience="launch"] .console-left {
    left:5.5% !important;
  }
  .mission[data-experience="home"] .console-right,
  .mission[data-experience="launch"] .console-right {
    right:5.5% !important;
  }

  /* Route progress becomes a full-width lower strip instead of a cramped tile. */
  .mission[data-experience="home"] .console-center,
  .mission[data-experience="launch"] .console-center {
    display:block !important;
    left:5.5% !important;
    right:auto !important;
    top:76% !important;
    width:89% !important;
    height:17% !important;
  }

  .mission[data-experience="home"] .panel-heading,
  .mission[data-experience="launch"] .panel-heading {
    left:7.5% !important;
    right:7.5% !important;
    top:8% !important;
    font-size:6.1px !important;
    letter-spacing:.11em !important;
  }
  .mission[data-experience="home"] .panel-heading b,
  .mission[data-experience="launch"] .panel-heading b {
    font-size:8.2px !important;
    letter-spacing:.04em !important;
  }

  .mission[data-experience="home"] .altitude-chart,
  .mission[data-experience="launch"] .altitude-chart {
    left:7.5% !important;
    right:7.5% !important;
    top:29% !important;
    width:85% !important;
    height:41% !important;
  }
  .mission[data-experience="home"] .climb-readout,
  .mission[data-experience="launch"] .climb-readout {
    left:7.5% !important;
    right:7.5% !important;
    bottom:7% !important;
  }
  .mission[data-experience="home"] .climb-readout small,
  .mission[data-experience="launch"] .climb-readout small {
    font-size:5.8px !important;
    letter-spacing:.12em !important;
  }
  .mission[data-experience="home"] .climb-readout strong,
  .mission[data-experience="launch"] .climb-readout strong {
    font-size:7.6px !important;
  }

  .mission[data-experience="home"] .flight-data-grid,
  .mission[data-experience="launch"] .flight-data-grid {
    left:7.5% !important;
    right:7.5% !important;
    top:31% !important;
    column-gap:8px !important;
    row-gap:6px !important;
  }
  .mission[data-experience="home"] .flight-data-grid span,
  .mission[data-experience="launch"] .flight-data-grid span {
    font-size:5.4px !important;
    letter-spacing:.105em !important;
  }
  .mission[data-experience="home"] .flight-data-grid strong,
  .mission[data-experience="launch"] .flight-data-grid strong {
    font-size:6.6px !important;
  }

  .mission[data-experience="home"] .mission-progress-panel .mission-track,
  .mission[data-experience="launch"] .mission-progress-panel .mission-track {
    left:4.5% !important;
    right:4.5% !important;
    top:50% !important;
    height:28px !important;
  }
  .mission[data-experience="home"] .mission-progress-panel .track-line,
  .mission[data-experience="launch"] .mission-progress-panel .track-line {
    left:3% !important;
    right:3% !important;
  }
  .mission[data-experience="home"] .mission-progress-panel .rocket-marker,
  .mission[data-experience="launch"] .mission-progress-panel .rocket-marker {
    width:38px !important;
  }

  /* Keep decorative labels out of the telemetry cards' breathing room. */
  .mission[data-experience="home"] .cockpit-brand,
  .mission[data-experience="launch"] .cockpit-brand {
    top:20% !important;
  }
  .mission[data-experience="home"] .dashboard-lights,
  .mission[data-experience="launch"] .dashboard-lights {
    top:21% !important;
  }
}

@media (max-width:380px) and (orientation:portrait) {
  .mission[data-experience="home"] .console-left,
  .mission[data-experience="launch"] .console-left,
  .mission[data-experience="home"] .console-right,
  .mission[data-experience="launch"] .console-right {
    width:42.5% !important;
  }
  .mission[data-experience="home"] .console-left,
  .mission[data-experience="launch"] .console-left { left:4.5% !important; }
  .mission[data-experience="home"] .console-right,
  .mission[data-experience="launch"] .console-right { right:4.5% !important; }
  .mission[data-experience="home"] .console-center,
  .mission[data-experience="launch"] .console-center {
    left:4.5% !important;
    width:91% !important;
  }
}

/* ==============================================================
   NARA 1:1 PONYTAIL SET — TARGETED FRAMING FIX (2026-10-02)
   The new supplied sprites are square instead of the previous portrait ratio.
   Only Nara is resized/repositioned. Her lower body is intentionally tucked
   behind the existing cockpit dashboard so the visible framing ends at the
   skirt rather than exposing the thigh area.
   ============================================================== */
.companion-a {
  width: clamp(400px, 39vw, 560px);
  bottom: 9%;
}

@media (max-width: 1100px) {
  .companion-a {
    width: clamp(340px, 39vw, 460px);
    bottom: 9%;
  }
}

@media (max-width: 900px) {
  .companion-a {
    width: clamp(260px, 44vw, 360px);
    bottom: 13%;
  }
}

@media (max-width: 700px) {
  .companion-a {
    width: clamp(215px, 58vw, 285px);
    bottom: 18%;
  }
}

@media (max-height: 700px) and (min-width: 701px) {
  .companion-a {
    width: clamp(330px, 40vw, 520px);
    bottom: 5.5%;
  }
}

/* ==============================================================
   SORA 1:1 SQUARE SEVEN-POSE SET — TARGETED FRAMING FIX (2026-10-02)
   The replacement Sora sprites are square, matching the new Nara asset shape.
   Sora therefore uses the same scale/bottom framing strategy as Nara so both
   characters stay balanced while the cockpit dashboard hides the thigh area
   and leaves the skirt visible.
   ============================================================== */
.companion-b {
  width: clamp(400px, 39vw, 560px);
  bottom: 9%;
}

@media (max-width: 1100px) {
  .companion-b {
    width: clamp(340px, 39vw, 460px);
    bottom: 9%;
  }
}

@media (max-width: 900px) {
  .companion-b {
    width: clamp(260px, 44vw, 360px);
    bottom: 13%;
  }
}

@media (max-width: 700px) {
  .companion-b {
    width: clamp(215px, 58vw, 285px);
    bottom: 18%;
  }
}

@media (max-height: 700px) and (min-width: 701px) {
  .companion-b {
    width: clamp(330px, 40vw, 520px);
    bottom: 5.5%;
  }
}
/* ========================================================================
   2026-10-02 MEDIUM-WIDTH TOP NAV PARITY FIX
   The 701-1199px layout intentionally collapses the desktop navigation into
   avatar + identity + MORE. Older rules exposed MORE in this range without
   carrying over its visual skin, so browsers rendered a native grey button.
   This patch gives the transition layout the same ANTARA sci-fi language as
   mobile/desktop while leaving the full desktop and mobile breakpoints intact.
   ======================================================================== */
@media (min-width:701px) and (max-width:1199px) {
  .profile-primary-cluster {
    max-width:92% !important;
  }

  .profile-primary-cluster .profile-avatar-module {
    flex-basis:clamp(34px,3.7vw,40px) !important;
    width:clamp(34px,3.7vw,40px) !important;
    height:clamp(34px,3.7vw,40px) !important;
    margin-right:clamp(14px,1.6vw,18px) !important;
  }

  .cockpit-profile-hud .profile-avatar-module .profile-avatar-frame {
    width:100% !important;
    height:100% !important;
  }

  .profile-primary-cluster .profile-login-trigger {
    flex-basis:clamp(158px,19vw,190px) !important;
    width:clamp(158px,19vw,190px) !important;
    height:32px !important;
    margin-right:9px !important;
  }

  .profile-primary-cluster .profile-more-trigger {
    -webkit-appearance:none !important;
    appearance:none !important;
    display:flex !important;
    position:relative !important;
    align-items:center !important;
    justify-content:center !important;
    gap:4px !important;
    flex:0 0 62px !important;
    min-width:62px !important;
    height:32px !important;
    margin:0 !important;
    padding:0 9px !important;
    border:0 !important;
    border-radius:0 !important;
    color:#edf2f4 !important;
    background:linear-gradient(180deg,rgba(11,28,42,.34),rgba(4,13,22,.18)) !important;
    font:650 6.8px/1 system-ui,sans-serif !important;
    letter-spacing:.12em !important;
    cursor:pointer !important;
    pointer-events:auto !important;
    touch-action:manipulation !important;
    -webkit-tap-highlight-color:transparent;
    clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px) !important;
    box-shadow:inset 0 0 0 1px rgba(222,183,110,.34),inset -8px 0 12px rgba(112,188,222,.05) !important;
    text-shadow:0 0 8px rgba(237,242,244,.08);
    transition:filter .18s ease,transform .18s ease,box-shadow .18s ease !important;
  }

  .profile-primary-cluster .profile-more-trigger::before {
    content:"" !important;
    position:absolute !important;
    left:7px !important;
    right:7px !important;
    top:0 !important;
    height:1px !important;
    background:linear-gradient(90deg,#ddb570,transparent 76%) !important;
    pointer-events:none !important;
  }

  .profile-primary-cluster .profile-more-trigger::after {
    content:"" !important;
    position:absolute !important;
    left:9px !important;
    right:9px !important;
    bottom:0 !important;
    height:1px !important;
    background:linear-gradient(270deg,#77bddb,transparent 76%) !important;
    pointer-events:none !important;
  }

  .profile-primary-cluster .profile-more-trigger i {
    width:2px !important;
    height:2px !important;
    flex:0 0 2px !important;
    border-radius:50% !important;
    background:#dcb46f !important;
    box-shadow:0 0 4px rgba(220,180,111,.34) !important;
  }

  .profile-primary-cluster .profile-more-trigger:hover,
  .profile-primary-cluster .profile-more-trigger:focus-visible,
  .profile-primary-cluster .profile-more-trigger[aria-expanded="true"] {
    filter:brightness(1.16) !important;
    box-shadow:inset 0 0 0 1px rgba(222,183,110,.54),inset -10px 0 15px rgba(112,188,222,.08),0 0 12px rgba(111,190,223,.06) !important;
  }

  .profile-primary-cluster .profile-more-trigger:focus-visible {
    outline:1px solid rgba(223,183,111,.58) !important;
    outline-offset:3px !important;
  }

  .profile-primary-cluster .profile-more-trigger:active {
    transform:scale(.985) !important;
  }

  .profile-primary-cluster .profile-nav-suite {
    width:min(430px,calc(100vw - 48px)) !important;
    padding:8px !important;
    background:linear-gradient(180deg,rgba(8,21,34,.985) 0%,rgba(3,11,19,.99) 100%) !important;
    border:1px solid rgba(116,186,218,.18) !important;
    clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px) !important;
    box-shadow:0 15px 32px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.025) !important;
    transition:opacity .16s ease,transform .18s ease,visibility 0s linear .18s !important;
  }

  .profile-primary-cluster .profile-nav-suite::before {
    content:"MORE // NAV" !important;
    position:absolute !important;
    right:10px !important;
    top:-5px !important;
    padding:0 4px !important;
    background:#07131e !important;
    color:#7797a9 !important;
    font:500 4px/1 system-ui,sans-serif !important;
    letter-spacing:.16em !important;
    pointer-events:none !important;
  }

  .profile-primary-cluster .profile-nav-suite.is-open {
    transition:opacity .16s ease,transform .18s ease !important;
  }

  .profile-primary-cluster .profile-nav-suite .hud-nav-module {
    min-width:0 !important;
    height:36px !important;
    grid-template-columns:25px minmax(0,1fr) !important;
    gap:6px !important;
    padding:0 8px !important;
  }

  .profile-primary-cluster .profile-nav-suite .hud-nav-icon {
    width:23px !important;
    height:23px !important;
  }

  .profile-primary-cluster .profile-nav-suite .hud-nav-icon svg {
    width:18px !important;
    height:18px !important;
  }

  .profile-primary-cluster .profile-nav-suite .hud-nav-copy small {
    display:block !important;
    font-size:4px !important;
  }

  .profile-primary-cluster .profile-nav-suite .hud-nav-copy strong {
    font-size:6.8px !important;
    letter-spacing:.085em !important;
  }
}



/* ANTARA OFFICIAL LOGO OVERRIDE 2026-10-03 */
.antara-logo-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.brand {
  width: clamp(58px, 5.2vw, 76px);
  min-width: 58px;
  line-height: 0;
}
.brand .antara-logo-header { width: 100%; }
.launch-brand-lockup {
  width: clamp(58px, 4.8vw, 76px) !important;
  gap: 0 !important;
}
.launch-brand-lockup .antara-logo-launch { width: 100%; }
.cockpit-brand {
  width: clamp(42px, 4vw, 62px);
  line-height: 0;
}
.cockpit-brand .antara-logo-cockpit { width: 100%; }
@media (max-width: 700px) {
  .brand { width: 54px; min-width: 54px; }
  .launch-brand-lockup { width: 54px !important; }
  .cockpit-brand { width: 44px; }
}



/* ========================================================================
   2026-10-03 DESKTOP HUD READABILITY POLISH
   Scope: PC / laptop home-launch cockpit lower telemetry only.
   Goal: make ALTITUDE / FLIGHT STATUS / route readouts comfortably readable
   without changing the overall cockpit composition or mobile layout.
   ======================================================================== */
@media (min-width: 1024px) {
  .mission[data-experience="home"] .panel-heading,
  .mission[data-experience="launch"] .panel-heading {
    left: 6.5% !important;
    right: 6.5% !important;
    top: 7% !important;
    font-size: 7.2px !important;
    letter-spacing: .13em !important;
    gap: 10px !important;
  }
  .mission[data-experience="home"] .panel-heading b,
  .mission[data-experience="launch"] .panel-heading b {
    font-size: 10px !important;
    letter-spacing: .06em !important;
  }

  .mission[data-experience="home"] .altitude-chart,
  .mission[data-experience="launch"] .altitude-chart {
    left: 6.5% !important;
    right: 6.5% !important;
    top: 26% !important;
    width: 87% !important;
    height: 46% !important;
  }

  .mission[data-experience="home"] .climb-readout,
  .mission[data-experience="launch"] .climb-readout {
    left: 6.5% !important;
    right: 6.5% !important;
    bottom: 8% !important;
  }
  .mission[data-experience="home"] .climb-readout small,
  .mission[data-experience="launch"] .climb-readout small {
    font-size: 6.3px !important;
    letter-spacing: .15em !important;
  }
  .mission[data-experience="home"] .climb-readout strong,
  .mission[data-experience="launch"] .climb-readout strong {
    font-size: 8.6px !important;
  }

  .mission[data-experience="home"] .flight-data-grid,
  .mission[data-experience="launch"] .flight-data-grid {
    left: 6.5% !important;
    right: 6.5% !important;
    top: 27% !important;
    column-gap: 12px !important;
    row-gap: 9px !important;
  }
  .mission[data-experience="home"] .flight-data-grid span,
  .mission[data-experience="launch"] .flight-data-grid span {
    font-size: 6.1px !important;
    letter-spacing: .12em !important;
  }
  .mission[data-experience="home"] .flight-data-grid strong,
  .mission[data-experience="launch"] .flight-data-grid strong {
    font-size: 8.1px !important;
  }

  .mission[data-experience="home"] .mission-progress-panel .mission-track,
  .mission[data-experience="launch"] .mission-progress-panel .mission-track {
    left: 6.5% !important;
    right: 6.5% !important;
    top: 51% !important;
    height: 40px !important;
  }
  .mission[data-experience="home"] .mission-progress-panel .rocket-marker,
  .mission[data-experience="launch"] .mission-progress-panel .rocket-marker {
    width: clamp(40px, 3.3vw, 56px) !important;
  }

  .mission[data-experience="home"] .dashboard-screen,
  .mission[data-experience="launch"] .dashboard-screen {
    min-width: 175px !important;
    padding: 10px 14px !important;
    font-size: 7.8px !important;
    letter-spacing: 1.1px !important;
  }

  .mission[data-experience="home"] .cockpit-brand,
  .mission[data-experience="launch"] .cockpit-brand {
    width: clamp(54px, 4.1vw, 72px) !important;
  }

  .mission[data-experience="home"] .audio-control,
  .mission[data-experience="launch"] .audio-control {
    min-height: 38px !important;
    padding: 6px 0 6px 10px !important;
    font-size: 7.2px !important;
    letter-spacing: 1.05px !important;
    gap: 7px !important;
  }
}

@media (min-width: 1440px) {
  .mission[data-experience="home"] .panel-heading,
  .mission[data-experience="launch"] .panel-heading {
    font-size: 7.8px !important;
  }
  .mission[data-experience="home"] .panel-heading b,
  .mission[data-experience="launch"] .panel-heading b {
    font-size: 10.8px !important;
  }
  .mission[data-experience="home"] .climb-readout small,
  .mission[data-experience="launch"] .climb-readout small,
  .mission[data-experience="home"] .flight-data-grid span,
  .mission[data-experience="launch"] .flight-data-grid span {
    font-size: 6.5px !important;
  }
  .mission[data-experience="home"] .climb-readout strong,
  .mission[data-experience="launch"] .climb-readout strong,
  .mission[data-experience="home"] .flight-data-grid strong,
  .mission[data-experience="launch"] .flight-data-grid strong {
    font-size: 8.8px !important;
  }
  .mission[data-experience="home"] .dashboard-screen,
  .mission[data-experience="launch"] .dashboard-screen {
    min-width: 188px !important;
    font-size: 8.4px !important;
  }
}



/* 2026-10-04 laptop opening balance fix
   On 16-inch-class laptop viewports the square Nara/Sora sprites were reaching
   the same 560px desktop cap despite having less vertical breathing room. Scale
   only this laptop band down by about 15% and keep the original baseline so the
   composition matches the roomier PC framing without affecting phone/tablet or
   large desktop layouts. */
@media (min-width: 1280px) and (max-width: 1700px) and (min-height: 760px) {
  .companion {
    width: clamp(400px, 31vw, 480px);
    bottom: 9%;
  }
  .companion-a { left: .5%; }
  .companion-b { right: .5%; }
}

/* 2026-10-04 FINAL LAPTOP CHARACTER SCALE LOCK
   The previous laptop patch was too subtle and could be visually overwhelmed by
   the later square-sprite framing rules. This final rule targets only the wide
   laptop band and locks Nara/Sora to a calmer PC-like scale. Large desktop and
   mobile/tablet layouts are intentionally left unchanged. */
@media (min-width: 1200px) and (max-width: 1799px) {
  .mission[data-experience="home"] .companion-a,
  .mission[data-experience="launch"] .companion-a,
  .mission[data-experience="home"] .companion-b,
  .mission[data-experience="launch"] .companion-b {
    width: clamp(350px, 26vw, 410px) !important;
    bottom: 9% !important;
  }

  .mission[data-experience="home"] .companion-a,
  .mission[data-experience="launch"] .companion-a {
    left: 2.2% !important;
  }

  .mission[data-experience="home"] .companion-b,
  .mission[data-experience="launch"] .companion-b {
    right: 2.2% !important;
  }
}

/* 2026-10-04 MOBILE COCKPIT LOGO VERTICAL POLISH
   Lift only the dashboard ANTARA mark on portrait phones. Desktop/laptop untouched. */
@media (max-width:700px) and (orientation:portrait) {
  .mission[data-experience="home"] .cockpit-brand,
  .mission[data-experience="launch"] .cockpit-brand {
    top:14.5% !important;
  }
}

/* ANTARA return-to-cockpit cinematic */
.return-cockpit-button {
  position: absolute;
  top: max(18px, env(safe-area-inset-top));
  right: clamp(18px, 2.2vw, 34px);
  z-index: 26;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 13px 8px 10px;
  border: 1px solid rgba(197, 172, 127, .28);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(16, 20, 26, .88), rgba(8, 11, 16, .92));
  box-shadow: 0 12px 34px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.025);
  color: #e7ddca;
  backdrop-filter: blur(9px);
  cursor: pointer;
  transition: transform .22s ease, border-color .22s ease, opacity .22s ease, background .22s ease;
}
.return-cockpit-button[hidden] { display:none !important; }
.return-cockpit-button:hover,
.return-cockpit-button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(222, 197, 153, .52);
  background: linear-gradient(180deg, rgba(28, 34, 42, .94), rgba(12, 16, 22, .96));
  outline: none;
}
.return-cockpit-button:disabled { opacity:.48; cursor:default; transform:none; }
.return-cockpit-icon {
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border:1px solid rgba(210,188,151,.22);
  border-radius:8px;
  color:#d8c29b;
  font-size:14px;
}
.return-cockpit-button span:last-child { display:grid; gap:2px; text-align:left; }
.return-cockpit-button small { color:#837b70; font:600 5.5px/1 system-ui,sans-serif; letter-spacing:1.5px; }
.return-cockpit-button strong { color:#e9e0d1; font:700 6.5px/1 system-ui,sans-serif; letter-spacing:1.05px; white-space:nowrap; }

.return-cockpit-transition {
  position:absolute;
  inset:0;
  z-index:25;
  overflow:hidden;
  pointer-events:none;
  background: radial-gradient(circle at 72% 46%, rgba(28,56,91,.14), transparent 28%), #02050a;
  opacity:0;
}
.return-cockpit-transition[hidden] { display:none; }
.return-cockpit-transition.is-visible { opacity:1; }
.return-cockpit-stars {
  position:absolute; inset:0;
  opacity:.75;
  background-image: radial-gradient(circle,rgba(218,232,249,.8) 0 1px,transparent 1.4px);
  background-size:91px 91px;
  background-position:18px 27px;
}
.return-cockpit-stars::after {
  content:""; position:absolute; inset:0;
  background-image: radial-gradient(circle,rgba(171,197,228,.58) 0 .8px,transparent 1.2px);
  background-size:137px 137px; background-position:62px 8px;
}
.return-cockpit-route { position:absolute; left:38%; right:24%; top:50%; height:1px; opacity:0; background:linear-gradient(90deg,transparent,rgba(194,213,235,.34),transparent); }
.return-cockpit-route i { position:absolute; top:-2px; width:5px; height:5px; border-radius:50%; background:#cdd9e6; box-shadow:0 0 9px rgba(205,217,230,.8); }
.return-cockpit-route i:nth-child(1){left:15%}.return-cockpit-route i:nth-child(2){left:50%}.return-cockpit-route i:nth-child(3){left:82%}
.return-cockpit-copy { position:absolute; left:50%; bottom:8%; transform:translateX(-50%); display:grid; gap:7px; text-align:center; opacity:0; }
.return-cockpit-copy small { color:#748499; font:650 6px/1 system-ui,sans-serif; letter-spacing:2.1px; }
.return-cockpit-copy strong { color:#d9e2ec; font:500 clamp(18px,2.1vw,28px)/1.1 Georgia,serif; letter-spacing:.2px; }
.return-cockpit-transition.is-routing .return-cockpit-route,
.return-cockpit-transition.is-routing .return-cockpit-copy { opacity:1; transition:opacity .5s ease; }

.mission.is-returning-cockpit .return-cockpit-button { opacity:0; pointer-events:none; }
.mission.is-returning-cockpit .masthead,
.mission.is-returning-cockpit .mission-footer { transition:opacity .42s ease; opacity:0; }

@media (max-width:700px) {
  .return-cockpit-button { top:max(10px,env(safe-area-inset-top)); right:10px; min-height:39px; padding:6px 9px; gap:7px; }
  .return-cockpit-icon { width:24px; height:24px; font-size:12px; }
  .return-cockpit-button small { display:none; }
  .return-cockpit-button strong { font-size:5.7px; }
  .return-cockpit-copy { bottom:12%; width:88%; }
}

/* 2026-10-04: global return button must never overlap Full Exploration surfaces. */
.mission:has(#earth-full-exploration:not([hidden])) .return-cockpit-button,
.mission:has(#venus-full-exploration:not([hidden])) .return-cockpit-button,
.mission:has(#mars-full-exploration:not([hidden])) .return-cockpit-button,
.mission:has(#mercury-full-exploration:not([hidden])) .return-cockpit-button,
.mission:has(.earth-full-exploration.is-active) .return-cockpit-button,
.mission:has(.venus-full-exploration.is-active) .return-cockpit-button,
.mission:has(.mars-full-exploration.is-active) .return-cockpit-button,
.mission:has(.mercury-full-exploration.is-active) .return-cockpit-button,
.mission:has(.is-full-exploring) .return-cockpit-button,
.mission:has(.is-full-diving) .return-cockpit-button {
  display: none !important;
  pointer-events: none !important;
}

/* 2026-10-04 Return to cockpit v2: reuse ANTARA's planet-to-planet motion language. */
.return-cockpit-transition {
  --return-bg-opacity: 0;
  --return-stars-opacity: 0;
  background: transparent !important;
}
.return-cockpit-transition::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:var(--return-bg-opacity);
  background:
    radial-gradient(circle at 70% 46%, rgba(28,56,91,.14), transparent 30%),
    radial-gradient(circle at 24% 54%, rgba(54,38,26,.08), transparent 32%),
    #02050a;
  will-change:opacity;
}
.return-cockpit-transition .return-cockpit-stars {
  z-index:1;
  opacity:var(--return-stars-opacity) !important;
  will-change:opacity,transform;
}
.return-cockpit-transition .return-cockpit-route,
.return-cockpit-transition .return-cockpit-copy {
  z-index:2;
}
.return-cockpit-transition.is-interplanetary .return-cockpit-stars {
  transform:scale(1.025);
}
.return-cockpit-source {
  z-index:24 !important;
  pointer-events:none !important;
}
.return-cockpit-source :is(
  .earth-information,
  .venus-caption,
  .mars-caption,
  .mercury-caption,
  .sun-caption,
  .asteroid-caption,
  .jupiter-caption,
  .saturn-caption,
  .uranus-caption,
  .neptune-caption,
  .earth-exploration,
  .venus-exploration,
  .mars-exploration,
  .mercury-exploration,
  .sun-exploration,
  .asteroid-exploration,
  .jupiter-exploration,
  .saturn-exploration,
  .uranus-exploration,
  .neptune-exploration,
  [class$="-credit"],
  [class*="focus-reticle"],
  [class*="context-media"]
) {
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transition:none !important;
}
.return-cockpit-transition.is-interplanetary .return-cockpit-route {
  opacity:.18;
}
.return-cockpit-transition.is-interplanetary .return-cockpit-copy {
  opacity:1;
}


/* 2026-10-04 Return destination: reuse ANTARA's real EarthScene renderer. */
.earth-scene.return-cockpit-destination {
  z-index:26 !important;
  background:transparent !important;
  pointer-events:none !important;
  overflow:visible;
}
.earth-scene.return-cockpit-destination .earth-space-haze,
.earth-scene.return-cockpit-destination .earth-edge-shade,
.earth-scene.return-cockpit-destination .earth-information,
.earth-scene.return-cockpit-destination .earth-exploration,
.earth-scene.return-cockpit-destination .earth-caption {
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
.earth-scene.return-cockpit-destination .earth-viewport {
  opacity:0;
  will-change:transform,opacity,filter;
}