/* Big Bang startup and selected-world launch cover. */
#intro {
  position: fixed;
  inset: 0;
  z-index: 400;
  overflow: hidden;
  color: #edf6ff;
  background: #010207;
  font-family: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
}

/* --- cosmic origin ------------------------------------------------------ */
.cosmic-intro { transition: opacity .55s ease, transform .62s cubic-bezier(.2,.8,.2,1); }
.cosmic-intro.arrived { opacity: 0; transform: scale(1.08); pointer-events: none; }
.cosmic-canvas { position: absolute; inset: 0; display: block; }
.cosmic-grid {
  position: absolute;
  inset: 0;
  opacity: .14;
  background-image:
    linear-gradient(rgba(95, 152, 211, .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(95, 152, 211, .12) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at center, transparent 0, #000 82%);
  pointer-events: none;
}
.cosmic-brand {
  position: absolute;
  top: 34px;
  left: 38px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.cosmic-brand-mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(91, 187, 250, .65);
  border-radius: 50%;
  color: #6dc6ff;
  box-shadow: 0 0 22px rgba(54, 162, 233, .24), inset 0 0 12px rgba(54, 162, 233, .14);
  font: 600 14px Consolas, monospace;
}
.cosmic-brand b { display: block; font: 600 11px/1.2 "Segoe UI", sans-serif; letter-spacing: 1.2px; }
.cosmic-brand small { display: block; margin-top: 3px; color: #51769c; font: 7.5px/1 Consolas, monospace; letter-spacing: 1.25px; }
.cosmic-readout { position: absolute; color: #4f7397; font: 8px/1.4 Consolas, monospace; letter-spacing: 1.1px; }
.cosmic-readout.top-right { top: 36px; right: 40px; display: grid; grid-template-columns: auto auto; gap: 4px 18px; }
.cosmic-readout b { color: #82afd4; font-weight: 500; text-align: right; }

.cosmic-title {
  position: absolute;
  left: 50%;
  top: 67%;
  width: min(720px, calc(100vw - 60px));
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}
.cosmic-overline { margin-bottom: 10px; color: #6bbcf1; font: 600 8px/1 Consolas, monospace; letter-spacing: 3px; }
.cosmic-title strong { display: block; min-height: 54px; font: 520 clamp(23px, 3vw, 38px)/1.22 "Segoe UI Variable Display", "Segoe UI", sans-serif; letter-spacing: -.3px; text-shadow: 0 3px 28px rgba(0,0,0,.75); }
.cosmic-title strong.pulse-copy { animation: cosmic-copy .55s ease both; }
@keyframes cosmic-copy { from { opacity: 0; transform: translateY(7px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.cosmic-title p { margin: 9px 0 0; color: #6684a5; font-size: 10.5px; letter-spacing: .45px; }

.cosmic-progress {
  position: absolute;
  left: 38px;
  right: 38px;
  bottom: 35px;
}
.cosmic-progress > div { display: flex; justify-content: space-between; margin-bottom: 8px; color: #6da8d3; font: 600 8px/1 Consolas, monospace; letter-spacing: 1.15px; }
.cosmic-progress em { color: #3f5c7b; font-style: normal; font-weight: 400; }
.cosmic-progress > span { display: block; height: 2px; overflow: hidden; background: rgba(92, 145, 198, .18); }
.cosmic-progress i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #7144ff, #38a8f4 55%, #ffe2a5); box-shadow: 0 0 12px #4caef4; transition: width .12s linear; }
.cosmic-skip {
  position: absolute;
  right: 38px;
  bottom: 55px;
  border: 0;
  color: #466885;
  background: transparent;
  font: 600 8px Consolas, monospace;
  letter-spacing: 1px;
  cursor: pointer;
}
.cosmic-skip:hover, .cosmic-skip:focus-visible { color: #a7d9f8; outline: none; }

/* --- body launch -------------------------------------------------------- */
.body-launch {
  display: grid;
  place-items: center;
  isolation: isolate;
  opacity: 1;
  transform: scale(1);
  transition: opacity .5s ease, transform .7s cubic-bezier(.2,.8,.2,1);
}
.body-launch.entering { opacity: 0; transform: scale(.985); }
.body-launch::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 43%, rgba(28, 68, 112, .18), transparent 35%),
    radial-gradient(ellipse 100% 70% at 50% 110%, #102540, transparent 62%),
    #02050c;
  transition: opacity 1.4s ease;
}
.body-launch.reveal::before { opacity: 0; }
.launch-stars {
  position: absolute;
  inset: -30%;
  opacity: .72;
  background-image:
    radial-gradient(1.3px 1.3px at 18% 24%, #fff, transparent),
    radial-gradient(1px 1px at 72% 66%, #bfd7ff, transparent),
    radial-gradient(1.7px 1.7px at 41% 81%, #fff, transparent),
    radial-gradient(1px 1px at 86% 17%, #9fbae2, transparent);
  background-size: 260px 260px;
  animation: launch-drift 90s linear infinite;
  transition: opacity 1.1s ease;
}
@keyframes launch-drift { to { transform: translate3d(-260px, -130px, 0); } }
.body-launch.reveal .launch-stars { opacity: 0; }
.launch-world {
  position: relative;
  z-index: 1;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, color-mix(in srgb, var(--launch-base) 45%, white), var(--launch-base) 38%, var(--launch-accent) 72%, #030509 100%);
  box-shadow: inset -28px -8px 40px rgba(0,0,0,.68), 0 0 30px color-mix(in srgb, var(--launch-glow) 32%, transparent), 0 0 90px rgba(58, 143, 213, .12);
  animation: launch-world-pulse 2.3s ease-in-out infinite;
  transition: opacity .7s, transform 1.35s cubic-bezier(.2,.8,.2,1);
}
@keyframes launch-world-pulse { 50% { box-shadow: inset -28px -8px 40px rgba(0,0,0,.68), 0 0 42px color-mix(in srgb, var(--launch-glow) 46%, transparent), 0 0 110px rgba(58,143,213,.16); } }
.body-launch.reveal .launch-world { opacity: 0; transform: scale(2.6); }
.launch-orbit { position: absolute; z-index: 1; width: 250px; height: 250px; border: 1px solid rgba(83, 164, 222, .19); border-radius: 50%; animation: launch-spin 18s linear infinite; transition: opacity .65s; }
.launch-orbit i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #73c6fb; box-shadow: 0 0 10px #50b5f5; }
.launch-orbit i:nth-child(1) { top: 18px; left: 55px; }
.launch-orbit i:nth-child(2) { right: 7px; top: 111px; width: 3px; height: 3px; }
.launch-orbit i:nth-child(3) { bottom: 23px; left: 42px; width: 2px; height: 2px; }
@keyframes launch-spin { to { transform: rotate(360deg); } }
.body-launch.reveal .launch-orbit { opacity: 0; }
.launch-copy { position: absolute; z-index: 2; top: calc(50% + 112px); text-align: center; transition: opacity .6s, transform .8s; }
.launch-copy span { color: #5fb8ef; font: 600 8px Consolas, monospace; letter-spacing: 2.1px; }
.launch-copy h1 { margin: 6px 0 0; font: 560 31px/1.15 "Segoe UI Variable Display", "Segoe UI", sans-serif; }
.launch-copy p { margin: 5px 0 0; color: #7296ba; font-size: 11px; letter-spacing: .6px; }
.body-launch.reveal .launch-copy { opacity: 0; transform: translateY(8px); }
.launch-progress { position: absolute; z-index: 2; left: 50%; bottom: 61px; width: 310px; transform: translateX(-50%); transition: opacity .5s; }
.launch-progress > span { display: block; height: 2px; overflow: hidden; background: rgba(97, 151, 204, .2); }
.launch-progress i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #277ed0, #6cc8ff); transition: width .4s ease; }
.launch-progress em { display: block; margin-top: 9px; color: #557b9e; text-align: center; font: 9px Consolas, monospace; font-style: normal; }
.body-launch.reveal .launch-progress, .body-launch.reveal .launch-skip { opacity: 0; }
.launch-skip { bottom: 23px; }
.body-launch.done { opacity: 0; transform: scale(1.018); pointer-events: none; }

/* Keep the GIS chrome collapsed while either cinematic cover is active. */
#app { transition: grid-template-rows .7s ease; }
#ribbon-shell, #status-bar, #left-panel, #right-panel { transition: opacity .6s ease; }
body.intro-boot #app { grid-template-rows: 0 1fr 0; }
body.intro-boot #workspace { grid-template-columns: 0 1fr 0; }
body.intro-boot #ribbon-shell,
body.intro-boot #status-bar,
body.intro-boot #left-panel,
body.intro-boot #right-panel { opacity: 0; overflow: hidden; }

/* Keep an unfinished Cesium frame out of every cinematic handoff. The canvas
   continues rendering and loading underneath, then cross-fades in only when
   runApproach declares the destination ready. */
#cesiumContainer { transition: opacity .45s ease; }
body.intro-boot #cesiumContainer { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .launch-stars, .launch-orbit, .launch-world { animation: none; }
  .cosmic-intro, .body-launch, .launch-world, .launch-copy { transition-duration: .15s; }
}