:root {
  --ink: #f4f8ff;
  --muted: #91a0b8;
  --cyan: #79f4ff;
  --blue: #6b8cff;
  --violet: #d263ff;
  --gold: #ffd37d;
  --panel: rgba(5, 10, 22, .72);
  --line: rgba(145, 217, 255, .22);
  --ship-x: 0px;
  --ship-y: 28vh;
  --ship-scale: .67;
  --ship-roll: 0deg;
  --ship-tilt-x: 0deg;
  --ship-tilt-y: 0deg;
  --transition-rgb: 100, 245, 255;
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  min-height: 100%;
  background: #010208;
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  min-height: 100dvh;
  margin: 0;
  overflow-x: hidden;
  background: #010208;
  color: var(--ink);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.is-locked {
  height: 100dvh;
  overflow: hidden;
}

button,
a {
  font: inherit;
}

button {
  color: inherit;
}

button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 11px 16px;
  border: 1px solid var(--cyan);
  border-radius: 999px;
  background: #020712;
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-decoration: none;
  transform: translateY(-180%);
  transition: transform .2s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

#space-canvas,
.webgl-fallback,
.ambient-layer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}

#space-canvas {
  z-index: 0;
  display: block;
  background: #010208;
}

.webgl-fallback {
  z-index: 0;
  display: none;
  overflow: hidden;
  background:
    radial-gradient(circle at 46% 62%, rgba(32, 104, 174, .22), transparent 28%),
    radial-gradient(circle at 75% 18%, rgba(80, 48, 142, .16), transparent 24%),
    #010208;
}

.no-webgl #space-canvas {
  display: none;
}

.no-webgl .webgl-fallback {
  display: block;
}

.fallback-star {
  position: absolute;
  inset: -20%;
  opacity: .72;
  background-image:
    radial-gradient(circle, #fff 0 1px, transparent 1.2px),
    radial-gradient(circle, rgba(124, 225, 255, .9) 0 1px, transparent 1.4px);
  background-position: 0 0, 31px 47px;
  background-size: 83px 83px, 117px 117px;
  animation: fallback-drift 24s linear infinite;
}

.fallback-star--2 {
  opacity: .34;
  background-size: 163px 163px, 211px 211px;
  transform: rotate(17deg) scale(1.1);
  animation-duration: 38s;
}

.fallback-star--3 {
  opacity: .24;
  transform: rotate(-11deg) scale(1.2);
  animation-duration: 52s;
}

.fallback-nebula {
  position: absolute;
  width: 90vmax;
  height: 54vmax;
  left: 50%;
  top: 48%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(72, 109, 220, .3), rgba(113, 43, 153, .12) 38%, transparent 72%);
  filter: blur(40px);
  transform: translate(-50%, -50%) rotate(-12deg);
  animation: nebula-breathe 12s ease-in-out infinite alternate;
}

.ambient-layer {
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.aurora {
  position: absolute;
  width: 58vmax;
  height: 28vmax;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .11;
  mix-blend-mode: screen;
}

.aurora--a {
  left: -18vmax;
  top: 16%;
  background: radial-gradient(ellipse, rgba(53, 135, 255, .66), transparent 68%);
  animation: aurora-a 14s ease-in-out infinite alternate;
}

.aurora--b {
  right: -20vmax;
  bottom: 4%;
  background: radial-gradient(ellipse, rgba(189, 61, 255, .5), transparent 68%);
  animation: aurora-b 18s ease-in-out infinite alternate;
}

.cosmic-dust {
  position: absolute;
  inset: -50%;
  opacity: .08;
  background-image: radial-gradient(circle, rgba(255,255,255,.9) 0 .5px, transparent .8px);
  background-size: 9px 9px;
  transform: rotate(8deg);
  animation: dust-drift 40s linear infinite;
}

.vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 38%, rgba(0,0,0,.24) 72%, rgba(0,0,0,.72) 116%);
}

.film-grain {
  position: absolute;
  inset: -60%;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  animation: grain .24s steps(2) infinite;
}

.topbar {
  position: fixed;
  z-index: 70;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  padding: max(14px, env(safe-area-inset-top)) clamp(16px, 2.4vw, 38px) 12px;
  border-bottom: 1px solid rgba(130, 197, 255, .12);
  background: linear-gradient(180deg, rgba(1, 3, 10, .84), rgba(1, 3, 10, .24));
  backdrop-filter: blur(12px);
  transition: opacity .55s ease, transform .55s ease;
}

body[data-phase="bigbang"] .topbar {
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
}

.mission-mark {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: #fff;
  text-decoration: none;
}

.mission-mark svg {
  width: 42px;
  height: 42px;
  filter: drop-shadow(0 0 14px rgba(115, 225, 255, .26));
}

.mission-mark span {
  display: grid;
  gap: 2px;
}

.mission-mark strong {
  font-size: .76rem;
  letter-spacing: .22em;
}

.mission-mark small {
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .52rem;
  letter-spacing: .21em;
}

.topbar__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.icon-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid rgba(129, 198, 255, .2);
  border-radius: 999px;
  background: rgba(4, 9, 20, .58);
  color: #9da9ba;
  cursor: pointer;
  transition: border-color .25s ease, color .25s ease, background .25s ease, transform .25s ease;
}

.icon-control:hover {
  color: #fff;
  border-color: rgba(121, 244, 255, .55);
  transform: translateY(-1px);
}

.icon-control[aria-pressed="true"] {
  color: var(--cyan);
  border-color: rgba(121, 244, 255, .55);
  background: rgba(35, 137, 168, .13);
}

.icon {
  width: 15px;
  height: 15px;
}

.icon-control[aria-pressed="false"] .sound-wave {
  opacity: .15;
}

.control-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .54rem;
  font-weight: 700;
  letter-spacing: .14em;
}

#mission {
  position: relative;
  z-index: 2;
  min-height: 100dvh;
}

.bigbang-intro,
.entry-gate,
.countdown-stage,
.flight-sequence,
.destination-stage,
.portal-transition {
  position: fixed;
  inset: 0;
  transition: opacity .65s ease, visibility .65s ease, transform .75s cubic-bezier(.2,.75,.1,1);
}

.bigbang-intro {
  z-index: 44;
  display: grid;
  place-items: center;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body[data-phase="bigbang"] .bigbang-intro {
  opacity: 1;
  visibility: visible;
}

.bigbang-intro::before,
.bigbang-intro::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(.02);
}

.bigbang-intro::before {
  width: 34vmin;
  aspect-ratio: 1;
  border: 2px solid rgba(199, 246, 255, .9);
  box-shadow: 0 0 60px rgba(118, 225, 255, .8), inset 0 0 50px rgba(255,255,255,.55);
  animation: bigbang-ring 2.05s cubic-bezier(.08,.82,.17,1) both;
}

.bigbang-intro::after {
  width: 9vmin;
  aspect-ratio: 1;
  background: #fff;
  box-shadow: 0 0 35px #fff, 0 0 110px #79ddff, 0 0 220px #996cff;
  animation: bigbang-core 2.05s ease-out both;
}

.bigbang-title {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 4px;
  text-align: center;
  text-shadow: 0 0 30px rgba(140, 217, 255, .36);
  animation: bigbang-copy 2.05s ease both;
}

.bigbang-title span {
  color: rgba(222, 236, 255, .68);
  font-size: clamp(.65rem, 1.1vw, .82rem);
  font-weight: 800;
  letter-spacing: .46em;
  text-indent: .46em;
}

.bigbang-title strong {
  font-size: clamp(2rem, 7vw, 6.4rem);
  line-height: .92;
  letter-spacing: -.05em;
}

.cockpit-frame {
  position: fixed;
  z-index: 8;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .7s ease, transform .8s ease;
}

body[data-phase="gate"] .cockpit-frame,
body[data-phase="countdown"] .cockpit-frame {
  opacity: 1;
  visibility: visible;
}

body[data-phase="flight"] .cockpit-frame {
  opacity: 0;
  visibility: visible;
  transform: scale(1.22);
}

.cockpit-frame__window {
  position: absolute;
  left: 50%;
  top: 53%;
  width: min(82vw, 1280px);
  height: min(78vh, 720px);
  border-radius: 50% 50% 46% 46% / 54% 54% 44% 44%;
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 0 150vmax rgba(0, 1, 5, .73),
    0 0 70px rgba(68, 169, 255, .12),
    inset 0 0 80px rgba(0, 10, 26, .54);
}

.cockpit-frame__glass {
  position: absolute;
  inset: 1.4%;
  border-radius: inherit;
  background:
    linear-gradient(116deg, rgba(255,255,255,.08), transparent 22%, transparent 76%, rgba(127, 210, 255, .035)),
    radial-gradient(ellipse at 50% 0%, rgba(118, 216, 255, .06), transparent 54%);
  box-shadow: inset 0 0 0 1px rgba(181, 229, 255, .08);
}

.cockpit-frame__rim {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: clamp(8px, 1.15vw, 18px) solid rgba(21, 31, 52, .92);
  box-shadow:
    0 0 0 2px rgba(118, 195, 255, .24),
    inset 0 0 0 2px rgba(255,255,255,.08),
    inset 0 0 35px #000,
    0 18px 40px rgba(0,0,0,.72);
}

.cockpit-frame__rim--inner {
  inset: 2.2%;
  border-width: 2px;
  border-color: rgba(111, 199, 255, .25);
  box-shadow: 0 0 18px rgba(79, 195, 255, .14), inset 0 0 22px rgba(0,0,0,.8);
}

.cockpit-frame__reflection {
  position: absolute;
  left: 13%;
  right: 13%;
  top: 5%;
  height: 18%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(190, 232, 255, .11), transparent);
  filter: blur(8px);
  transform: rotate(-2deg);
}

.cockpit-frame__beam {
  position: absolute;
  top: -8vh;
  width: clamp(56px, 7vw, 120px);
  height: 124vh;
  border: 1px solid rgba(113, 189, 245, .14);
  background: linear-gradient(90deg, #02050c, #172238 45%, #040710 88%);
  box-shadow: 0 0 32px rgba(0,0,0,.72), inset 0 0 18px rgba(139, 215, 255, .08);
}

.cockpit-frame__beam--left {
  left: 5vw;
  transform: rotate(-14deg);
}

.cockpit-frame__beam--right {
  right: 5vw;
  transform: rotate(14deg);
}

.cockpit-frame__panel {
  position: absolute;
  bottom: -10vh;
  width: 42vw;
  height: 25vh;
  background: linear-gradient(180deg, #172238, #02040a 60%);
  border-top: 1px solid rgba(115, 201, 255, .22);
  box-shadow: 0 -18px 42px rgba(0,0,0,.68), inset 0 14px 35px rgba(83, 171, 255, .05);
}

.cockpit-frame__panel--left {
  left: -6vw;
  transform: skewX(12deg);
}

.cockpit-frame__panel--right {
  right: -6vw;
  transform: skewX(-12deg);
}

.entry-gate {
  z-index: 14;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body[data-phase="gate"] .entry-gate {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body[data-phase="countdown"] .entry-gate {
  opacity: .13;
  visibility: visible;
  transform: scale(1.03);
}

.entry-gate__content {
  width: min(94vw, 1480px);
  height: 100dvh;
  display: grid;
  grid-template-rows: minmax(155px, 34vh) 1fr minmax(158px, 28vh);
  justify-items: center;
  text-align: center;
  padding: 88px clamp(20px, 4vw, 68px) max(32px, env(safe-area-inset-bottom));
}

.entry-gate__heading {
  align-self: end;
  display: grid;
  justify-items: center;
  gap: 8px;
  max-width: 920px;
}

.entry-kicker,
.destination-kicker {
  margin: 0;
  color: var(--cyan);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(.54rem, .7vw, .68rem);
  font-weight: 800;
  letter-spacing: .36em;
  text-indent: .36em;
}

.entry-gate h1 {
  margin: 0;
  display: grid;
  gap: 0;
  font-size: clamp(2.5rem, 7vw, 7rem);
  line-height: .82;
  letter-spacing: -.07em;
  text-transform: uppercase;
  text-shadow: 0 14px 60px rgba(0,0,0,.72);
}

.entry-gate h1 span {
  color: transparent;
  -webkit-text-stroke: 1px rgba(210, 238, 255, .7);
  font-size: .55em;
  letter-spacing: .13em;
  text-indent: .13em;
}

.entry-gate h1 strong {
  background: linear-gradient(92deg, #f7fbff 4%, #bff7ff 38%, #9bb3ff 70%, #e8bbff 98%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.entry-gate__promise {
  max-width: 600px;
  margin: 8px 0 0;
  color: rgba(221, 232, 247, .82);
  font-size: clamp(.9rem, 1.25vw, 1.12rem);
  line-height: 1.55;
  text-wrap: balance;
}

.entry-gate__actions {
  position: relative;
  align-self: end;
  display: grid;
  justify-items: center;
  gap: 11px;
}

.primary-button {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 28px;
  min-width: min(92vw, 400px);
  min-height: 68px;
  padding: 11px 18px 11px 24px;
  overflow: hidden;
  border: 1px solid rgba(113, 239, 255, .72);
  border-radius: 999px;
  background: linear-gradient(100deg, rgba(15, 102, 137, .46), rgba(32, 48, 91, .65));
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 16px 55px rgba(0, 82, 149, .32), 0 0 28px rgba(94, 237, 255, .12);
  color: #fff;
  cursor: pointer;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.primary-button::before {
  content: "";
  position: absolute;
  inset: -80% -22%;
  background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%);
  transform: translateX(-70%) rotate(8deg);
  transition: transform .6s ease;
}

.primary-button:hover {
  transform: translateY(-3px) scale(1.015);
  border-color: #c9fbff;
  box-shadow: 0 20px 70px rgba(0, 108, 185, .42), 0 0 34px rgba(94, 237, 255, .22);
}

.primary-button:hover::before {
  transform: translateX(70%) rotate(8deg);
}

.primary-button svg {
  width: 23px;
  height: 23px;
}

.button-copy {
  display: grid;
  justify-items: start;
  gap: 2px;
  font-size: .85rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-align: left;
}

.button-copy small {
  color: var(--cyan);
  font-size: .5rem;
  letter-spacing: .24em;
}

.button-spark {
  position: absolute;
  left: 16px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #dffeff;
  box-shadow: 0 0 18px #79f4ff;
  transform: translateX(-2px);
}

.button-spark::after {
  content: "";
  position: absolute;
  inset: -6px;
  border: 1px solid rgba(121,244,255,.8);
  border-radius: 50%;
  animation: spark-pulse 1.5s ease-out infinite;
}

.silent-link {
  border: 0;
  background: transparent;
  color: rgba(184, 198, 220, .67);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .18em;
  cursor: pointer;
  transition: color .2s ease;
}

.silent-link:hover {
  color: #fff;
}

.launch-hand {
  position: absolute;
  left: calc(50% + min(43vw, 208px));
  top: -8px;
  width: 42px;
  color: #fff;
  filter: drop-shadow(0 0 10px rgba(121, 244, 255, .7));
  transform: rotate(-25deg);
  animation: hand-guide 1.3s ease-in-out infinite;
}

.launch-hand svg {
  display: block;
  width: 100%;
}

body[data-phase="countdown"] .launch-hand {
  animation: hand-press .45s ease both;
}

.countdown-stage {
  z-index: 32;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: radial-gradient(circle, rgba(28, 116, 161, .13), transparent 38%);
}

body[data-phase="countdown"] .countdown-stage {
  opacity: 1;
  visibility: visible;
}

.countdown-stage__copy {
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
  text-shadow: 0 0 35px rgba(121,244,255,.7), 0 20px 80px #000;
}

#countdown-number {
  font-size: clamp(8rem, 25vw, 20rem);
  font-weight: 900;
  line-height: .72;
  letter-spacing: -.1em;
  background: linear-gradient(180deg, #fff, #abedff 52%, #798bff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: countdown-pop .68s cubic-bezier(.17,.67,.3,1.25) both;
}

#countdown-number.is-launch {
  font-size: clamp(3.2rem, 11vw, 8.5rem);
  letter-spacing: -.055em;
}

#countdown-label {
  color: #dffbff;
  font-size: clamp(.85rem, 2vw, 1.5rem);
  letter-spacing: .4em;
  text-indent: .4em;
}

.flight-sequence {
  z-index: 28;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 16vh 24px 7vh;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body[data-phase="flight"] .flight-sequence {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.flight-copy__label {
  margin: 0;
  color: #fff;
  font-size: clamp(1rem, 2.8vw, 2rem);
  font-weight: 900;
  letter-spacing: .28em;
  text-indent: .28em;
  text-align: center;
  text-shadow: 0 0 24px rgba(91, 215, 255, .46);
}

.flight-progress {
  position: absolute;
  left: 50%;
  bottom: 9vh;
  width: min(56vw, 620px);
  height: 2px;
  overflow: hidden;
  background: rgba(154, 205, 255, .16);
  transform: translateX(-50%);
}

.flight-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #58f7ff, #8b8bff, #d05cff);
  box-shadow: 0 0 14px #79f4ff;
}

.skip-intro {
  position: absolute;
  right: clamp(18px, 3vw, 48px);
  bottom: clamp(22px, 4vh, 44px);
  padding: 9px 12px;
  border: 1px solid rgba(137, 194, 232, .22);
  border-radius: 999px;
  background: rgba(3, 8, 18, .54);
  color: rgba(213, 226, 242, .72);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .55rem;
  letter-spacing: .15em;
  cursor: pointer;
}

.skip-intro:hover {
  color: #fff;
  border-color: rgba(121,244,255,.5);
}

.skip-intro kbd {
  margin-left: 8px;
  color: var(--cyan);
  font: inherit;
}

.ship-layer {
  position: fixed;
  z-index: 24;
  left: 50%;
  top: 50%;
  width: min(360px, 46vw);
  aspect-ratio: 360 / 420;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform:
    translate(-50%, -50%)
    translateX(var(--ship-x))
    translateY(var(--ship-y))
    scale(var(--ship-scale))
    rotateZ(var(--ship-roll))
    rotateX(var(--ship-tilt-x))
    rotateY(var(--ship-tilt-y));
  transform-style: preserve-3d;
  transition: opacity .65s ease, visibility .65s ease;
  filter: drop-shadow(0 24px 32px rgba(0,0,0,.62));
}

body[data-phase="flight"] .ship-layer,
body[data-phase="destinations"] .ship-layer,
body[data-phase="transition"] .ship-layer {
  opacity: 1;
  visibility: visible;
}

.ship {
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: ship-hover 2.8s ease-in-out infinite alternate;
}

.ship__flames {
  transform-origin: 50% 78%;
  animation: engine-flame .11s ease-in-out infinite alternate;
}

.ship__body {
  transform-origin: center;
}

.ship-shadow {
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: 60%;
  height: 12%;
  border-radius: 50%;
  background: rgba(70, 158, 255, .28);
  filter: blur(18px);
  transform: translateX(-50%);
}

.ship-reticle {
  position: absolute;
  left: 50%;
  top: 45%;
  width: 150px;
  height: 150px;
  border: 1px solid rgba(121,244,255,.18);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: reticle-spin 12s linear infinite;
}

.ship-reticle::before,
.ship-reticle::after {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px dashed rgba(143,155,255,.15);
  border-radius: 50%;
}

.ship-reticle::after {
  inset: 49px;
  border-style: solid;
}

.ship-reticle span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
}

.ship-reticle span:nth-child(1) { transform: translate(-50%, -50%) translateY(-74px); }
.ship-reticle span:nth-child(2) { transform: translate(-50%, -50%) translateX(74px); }
.ship-reticle span:nth-child(3) { transform: translate(-50%, -50%) translateY(74px); }
.ship-reticle span:nth-child(4) { transform: translate(-50%, -50%) translateX(-74px); }

.destination-stage {
  z-index: 18;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(10px, 2vh, 26px);
  min-height: 100dvh;
  padding: clamp(88px, 11vh, 118px) clamp(18px, 3vw, 54px) max(20px, env(safe-area-inset-bottom));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
}

body[data-phase="destinations"] .destination-stage {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.destination-heading {
  position: relative;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 5px;
  text-align: center;
}

.destination-heading h2 {
  margin: 0;
  max-width: 1040px;
  font-size: clamp(2rem, 5.8vw, 5.7rem);
  line-height: .9;
  letter-spacing: -.06em;
  text-transform: uppercase;
  background: linear-gradient(100deg, #fff 12%, #a9edff 45%, #bdacff 72%, #ffd4aa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-wrap: balance;
}

.destination-instruction {
  margin: 6px 0 0;
  color: rgba(199, 211, 230, .68);
  font-size: clamp(.78rem, 1vw, .95rem);
  letter-spacing: .08em;
}

.galaxy-field {
  position: relative;
  z-index: 2;
  width: min(100%, 1540px);
  min-height: 0;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: clamp(12px, 2.8vw, 48px);
}

.portal {
  --portal-color: 119, 224, 255;
  position: relative;
  min-width: 0;
  opacity: .58;
  transform: scale(.91) translateY(12px);
  transition: opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1), filter .35s ease;
}

.portal--creative {
  --portal-color: 208, 125, 255;
}

.portal--agency {
  --portal-color: 255, 202, 112;
}

.portal.is-selected,
.portal:hover,
.portal:focus-within {
  opacity: 1;
  transform: scale(1) translateY(0);
  filter: drop-shadow(0 22px 48px rgba(var(--portal-color), .14));
}

.portal__hit {
  width: 100%;
  min-height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  display: grid;
  grid-template-rows: auto auto minmax(190px, 1fr) auto auto;
  justify-items: center;
  align-items: center;
  gap: clamp(5px, 1vh, 11px);
  color: #fff;
  text-align: center;
  cursor: pointer;
}

.portal__number {
  color: rgba(var(--portal-color), .86);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .5rem;
  font-weight: 800;
  letter-spacing: .24em;
  text-indent: .24em;
}

.portal__title {
  max-width: 330px;
  min-height: 2.15em;
  display: grid;
  place-items: center;
  font-size: clamp(.9rem, 1.3vw, 1.25rem);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: .015em;
  text-wrap: balance;
}

.portal__visual {
  position: relative;
  width: min(26vw, 340px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  isolation: isolate;
  transform: translateZ(0);
}

.portal__galaxy-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  filter: saturate(.9) contrast(1.12) brightness(.84);
  opacity: .92;
  transform: rotate(-7deg) scale(.97);
  transition: filter .45s ease, transform .7s cubic-bezier(.2,.8,.2,1), opacity .45s ease;
  animation: natural-galaxy-spin 46s linear infinite;
}

.portal--creative .portal__galaxy-canvas {
  animation-duration: 38s;
  animation-direction: reverse;
}

.portal--agency .portal__galaxy-canvas {
  animation-duration: 54s;
}

.portal.is-selected .portal__galaxy-canvas,
.portal:hover .portal__galaxy-canvas,
.portal:focus-within .portal__galaxy-canvas {
  filter: saturate(1.08) contrast(1.16) brightness(1.08);
  opacity: 1;
  transform: rotate(0) scale(1.04);
}

.portal__halo {
  position: absolute;
  inset: 12%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--portal-color), .2), transparent 68%);
  filter: blur(24px);
  animation: halo-breathe 3.8s ease-in-out infinite alternate;
}

.portal__core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff6dd;
  box-shadow: 0 0 18px #fff, 0 0 44px rgba(var(--portal-color), .85), 0 0 86px rgba(var(--portal-color), .3);
  transform: translate(-50%, -50%);
  animation: core-pulse 2.1s ease-in-out infinite alternate;
}

.portal__description {
  max-width: 330px;
  min-height: 3em;
  color: rgba(203, 215, 233, .72);
  font-size: clamp(.72rem, .9vw, .86rem);
  line-height: 1.42;
  text-wrap: balance;
}

.portal__action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgb(var(--portal-color));
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .54rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-indent: .14em;
  border-bottom: 1px solid rgba(var(--portal-color), .28);
  padding-bottom: 4px;
}

.portal__action i {
  font-style: normal;
  transition: transform .25s ease;
}

.portal:hover .portal__action i,
.portal:focus-within .portal__action i {
  transform: translateX(4px);
}

.mission-nav {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: center;
}

.mission-nav__dots {
  display: flex;
  gap: 8px;
  padding: 5px;
  border: 1px solid rgba(131, 196, 244, .15);
  border-radius: 999px;
  background: rgba(2, 6, 14, .55);
  backdrop-filter: blur(10px);
}

.mission-nav__dots button {
  width: 42px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(190, 204, 224, .52);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .58rem;
  font-weight: 800;
  cursor: pointer;
  transition: color .2s ease, background .2s ease;
}

.mission-nav__dots button.is-active,
.mission-nav__dots button:hover {
  color: #fff;
  background: rgba(87, 184, 230, .17);
}

.portal-transition {
  z-index: 90;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  background: rgba(0, 1, 6, .2);
}

body[data-phase="transition"] .portal-transition {
  opacity: 1;
  visibility: visible;
}

.portal-transition::before {
  content: "";
  position: absolute;
  width: 8vmin;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgb(var(--transition-rgb));
  box-shadow: 0 0 100px rgba(var(--transition-rgb), .9), 0 0 260px rgba(var(--transition-rgb), .5);
  transform: scale(.05);
}

body[data-phase="transition"] .portal-transition::before {
  animation: portal-flash 1.35s cubic-bezier(.13,.73,.16,1) both;
}

.portal-transition__rings {
  position: absolute;
  width: 54vmin;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.portal-transition__rings span {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(var(--transition-rgb), .55);
  border-radius: 50%;
  opacity: 0;
}

body[data-phase="transition"] .portal-transition__rings span {
  animation: portal-ring 1.2s ease-out both;
}

body[data-phase="transition"] .portal-transition__rings span:nth-child(2) { animation-delay: .08s; }
body[data-phase="transition"] .portal-transition__rings span:nth-child(3) { animation-delay: .16s; }
body[data-phase="transition"] .portal-transition__rings span:nth-child(4) { animation-delay: .24s; }

.portal-transition__copy {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
  text-shadow: 0 12px 44px #000;
}

.portal-transition__copy p {
  margin: 0;
  color: rgba(var(--transition-rgb), .92);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .3em;
  text-indent: .3em;
}

.portal-transition__copy h2 {
  max-width: 900px;
  margin: 0;
  padding: 0 20px;
  font-size: clamp(2rem, 7vw, 6rem);
  line-height: .9;
  letter-spacing: -.06em;
  text-wrap: balance;
}

.transition-loader {
  width: min(240px, 58vw);
  height: 2px;
  overflow: hidden;
  background: rgba(255,255,255,.12);
}

.transition-loader i {
  display: block;
  width: 100%;
  height: 100%;
  background: rgb(var(--transition-rgb));
  transform-origin: left;
  transform: scaleX(0);
}

body[data-phase="transition"] .transition-loader i {
  animation: transition-load 1.15s ease both;
}

.noscript-panel {
  position: fixed;
  z-index: 999;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 14px;
  padding: 30px;
  background: #02050d;
  color: #fff;
  text-align: center;
}

.noscript-panel h1,
.noscript-panel p {
  margin: 0;
}

.noscript-panel a {
  color: var(--cyan);
}

@keyframes fallback-drift {
  to { transform: translate3d(7%, 5%, 0) rotate(2deg); }
}

@keyframes nebula-breathe {
  to { opacity: .65; transform: translate(-48%, -52%) rotate(-4deg) scale(1.08); }
}

@keyframes aurora-a {
  to { transform: translate3d(16vw, 9vh, 0) scale(1.12); opacity: .17; }
}

@keyframes aurora-b {
  to { transform: translate3d(-12vw, -8vh, 0) scale(1.08); opacity: .16; }
}

@keyframes dust-drift {
  to { transform: rotate(11deg) translate3d(3%, 2%, 0); }
}

@keyframes grain {
  0% { transform: translate(0,0); }
  25% { transform: translate(2%,-1%); }
  50% { transform: translate(-1%,2%); }
  75% { transform: translate(1%,1%); }
  100% { transform: translate(-2%,-1%); }
}

@keyframes bigbang-ring {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.01); }
  12% { opacity: 1; }
  75% { opacity: .78; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(12); }
}

@keyframes bigbang-core {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.1); }
  10% { opacity: 1; }
  28% { transform: translate(-50%, -50%) scale(1.45); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(5); }
}

@keyframes bigbang-copy {
  0%, 22% { opacity: 0; transform: scale(.88); filter: blur(10px); }
  46%, 78% { opacity: 1; transform: scale(1); filter: blur(0); }
  100% { opacity: 0; transform: scale(1.08); filter: blur(8px); }
}

@keyframes spark-pulse {
  to { opacity: 0; transform: scale(1.8); }
}

@keyframes hand-guide {
  0%, 100% { transform: translate(0,0) rotate(-25deg); }
  48% { transform: translate(-8px, 9px) rotate(-25deg); }
}

@keyframes hand-press {
  0% { opacity: 1; transform: translate(0,0) rotate(-25deg); }
  45% { opacity: 1; transform: translate(-12px, 13px) rotate(-25deg) scale(.92); }
  100% { opacity: 0; transform: translate(-12px, 13px) rotate(-25deg) scale(.7); }
}

@keyframes countdown-pop {
  0% { opacity: 0; transform: scale(.36); filter: blur(15px); }
  28% { opacity: 1; transform: scale(1.1); filter: blur(0); }
  72% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.45); filter: blur(4px); }
}

@keyframes ship-hover {
  to { transform: translateY(-6px) rotateZ(.45deg); }
}

@keyframes engine-flame {
  to { transform: scaleY(1.13) scaleX(.91); opacity: .72; }
}

@keyframes reticle-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes natural-galaxy-spin {
  to { rotate: 360deg; }
}

@keyframes halo-breathe {
  to { transform: scale(1.18); opacity: .72; }
}

@keyframes core-pulse {
  to { transform: translate(-50%, -50%) scale(1.22); opacity: .8; }
}

@keyframes portal-flash {
  0% { opacity: 0; transform: scale(.05); }
  28% { opacity: 1; }
  100% { opacity: 1; transform: scale(35); }
}

@keyframes portal-ring {
  0% { opacity: .7; transform: scale(.12) rotate(0); }
  100% { opacity: 0; transform: scale(2.5) rotate(120deg); }
}

@keyframes transition-load {
  to { transform: scaleX(1); }
}

@media (max-width: 980px) {
  .cockpit-frame__window {
    width: 92vw;
    height: 72vh;
  }

  .cockpit-frame__beam {
    width: 70px;
  }

  .galaxy-field {
    gap: 10px;
  }

  .portal__visual {
    width: min(29vw, 270px);
  }

  .portal__description {
    max-width: 250px;
  }
}

@media (max-width: 760px) {
  .topbar {
    min-height: 64px;
    padding: max(9px, env(safe-area-inset-top)) 12px 8px;
  }

  .mission-mark svg {
    width: 35px;
    height: 35px;
  }

  .mission-mark strong {
    font-size: .62rem;
  }

  .mission-mark small,
  .control-label {
    display: none;
  }

  .topbar__actions {
    gap: 6px;
  }

  .icon-control {
    width: 36px;
    min-height: 36px;
    padding: 0;
  }

  .cockpit-frame__window {
    top: 52%;
    width: 96vw;
    height: 73vh;
    border-radius: 48% 48% 42% 42% / 54% 54% 42% 42%;
  }

  .cockpit-frame__beam {
    width: 44px;
  }

  .cockpit-frame__beam--left {
    left: -2vw;
    transform: rotate(-9deg);
  }

  .cockpit-frame__beam--right {
    right: -2vw;
    transform: rotate(9deg);
  }

  .cockpit-frame__panel {
    height: 19vh;
  }

  .entry-gate__content {
    width: 100%;
    grid-template-rows: minmax(150px, 33vh) 1fr minmax(150px, 27vh);
    padding: 72px 18px max(22px, env(safe-area-inset-bottom));
  }

  .entry-gate h1 {
    font-size: clamp(2.35rem, 15vw, 4.7rem);
    line-height: .88;
  }

  .entry-gate__promise {
    max-width: 88vw;
    font-size: .82rem;
  }

  .primary-button {
    min-width: min(88vw, 365px);
    min-height: 62px;
    padding-left: 22px;
  }

  .button-copy {
    font-size: .74rem;
  }

  .launch-hand {
    left: auto;
    right: -15px;
    width: 36px;
  }

  .flight-sequence {
    padding-top: 12vh;
  }

  .flight-progress {
    width: 68vw;
    bottom: 8vh;
  }

  .skip-intro {
    right: 12px;
    bottom: 18px;
  }

  .ship-layer {
    width: min(330px, 72vw);
  }

  .destination-stage {
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 4px;
    padding: 74px 0 max(12px, env(safe-area-inset-bottom));
  }

  .destination-heading {
    padding: 0 18px;
  }

  .destination-heading h2 {
    font-size: clamp(2rem, 12.6vw, 4rem);
    line-height: .88;
  }

  .destination-instruction {
    font-size: .7rem;
  }

  .galaxy-field {
    width: 100%;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 82vw;
    align-items: stretch;
    gap: 4vw;
    padding: 0 9vw 4px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .galaxy-field::-webkit-scrollbar {
    display: none;
  }

  .portal {
    scroll-snap-align: center;
    scroll-snap-stop: always;
    display: grid;
    align-items: center;
    opacity: .46;
    transform: scale(.9);
  }

  .portal.is-selected {
    transform: scale(1);
  }

  .portal__hit {
    grid-template-rows: auto auto minmax(210px, 1fr) auto auto;
    gap: 4px;
    align-content: center;
    padding: 0 6px;
  }

  .portal__title {
    min-height: auto;
    max-width: 78vw;
    font-size: clamp(1rem, 4.6vw, 1.26rem);
  }

  .portal__visual {
    width: min(70vw, 330px);
    max-height: 39vh;
  }

  .portal__description {
    min-height: 2.8em;
    max-width: 74vw;
    font-size: .72rem;
  }

  .portal__action {
    font-size: .5rem;
  }

  .mission-nav {
    position: sticky;
    bottom: max(8px, env(safe-area-inset-bottom));
  }
}

@media (max-height: 660px) and (min-width: 761px) {
  .destination-stage {
    padding-top: 84px;
    gap: 4px;
  }

  .destination-heading h2 {
    font-size: clamp(2rem, 5vw, 4.2rem);
  }

  .portal__hit {
    grid-template-rows: auto auto minmax(170px, 1fr) auto auto;
  }

  .portal__visual {
    width: min(22vw, 250px);
  }

  .portal__description {
    font-size: .72rem;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .topbar {
    min-height: 56px;
  }

  .entry-gate__content {
    grid-template-rows: 26vh 1fr 31vh;
    padding-top: 58px;
  }

  .entry-gate h1 {
    font-size: clamp(2rem, 8vw, 3.8rem);
  }

  .entry-gate__promise {
    display: none;
  }

  .destination-stage {
    padding-top: 62px;
  }

  .destination-heading h2 {
    font-size: 2.35rem;
  }

  .destination-instruction {
    display: none;
  }

  .galaxy-field {
    grid-auto-columns: 60vw;
    padding-inline: 20vw;
  }

  .portal__hit {
    grid-template-rows: auto auto minmax(150px, 1fr) auto;
  }

  .portal__visual {
    width: min(38vh, 230px);
  }

  .portal__description {
    display: none;
  }
}

html[data-motion="reduced"] *,
html[data-motion="reduced"] *::before,
html[data-motion="reduced"] *::after {
  scroll-behavior: auto !important;
}

html[data-motion="reduced"] .aurora,
html[data-motion="reduced"] .cosmic-dust,
html[data-motion="reduced"] .ship,
html[data-motion="reduced"] .ship__flames,
html[data-motion="reduced"] .ship-reticle,
html[data-motion="reduced"] .portal__galaxy-canvas,
html[data-motion="reduced"] .portal__halo,
html[data-motion="reduced"] .portal__core,
html[data-motion="reduced"] .launch-hand,
html[data-motion="reduced"] .film-grain {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* V3 — Base terrestre, despegue desde plataforma y galaxias ampliadas */
:root {
  --launch-progress: 0;
  --smoke-opacity: .16;
  --flame-scale: .04;
  --gear-opacity: 1;
  --tower-arm: 0;
  --ship-y: 10vh;
  --ship-scale: .76;
}

.cockpit-frame {
  display: none !important;
}

.entry-gate {
  z-index: 30;
}

.countdown-stage {
  z-index: 42;
}

.launch-site,
.launch-vapor-layer {
  position: fixed;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.launch-site {
  z-index: 5;
  overflow: hidden;
  transform-origin: 50% 78%;
  transition: opacity .35s linear, visibility .35s linear;
}

body[data-phase="gate"] .launch-site,
body[data-phase="countdown"] .launch-site,
body[data-phase="flight"] .launch-site {
  opacity: calc(1 - var(--launch-progress));
  visibility: visible;
}

.launch-site::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 55%, rgba(81, 207, 255, .08), transparent 27%),
    linear-gradient(180deg, transparent 0 47%, rgba(1, 8, 12, .16) 58%, rgba(0, 2, 4, .72) 100%);
}

.launch-site__skyline {
  position: absolute;
  left: -4%;
  right: -4%;
  bottom: 35%;
  height: 25%;
  filter: drop-shadow(0 -8px 25px rgba(23, 91, 111, .16));
}

.launch-mountain {
  position: absolute;
  bottom: 0;
  display: block;
  background: linear-gradient(180deg, rgba(30, 69, 77, .86), rgba(4, 17, 22, .98));
  clip-path: polygon(0 100%, 7% 68%, 16% 78%, 27% 32%, 38% 66%, 49% 18%, 58% 55%, 70% 24%, 82% 67%, 92% 44%, 100% 100%);
  opacity: .88;
}

.launch-mountain--left {
  left: 0;
  width: 43%;
  height: 79%;
}

.launch-mountain--center {
  left: 29%;
  width: 45%;
  height: 58%;
  opacity: .68;
  transform: scaleX(1.2);
}

.launch-mountain--right {
  right: 0;
  width: 41%;
  height: 72%;
  transform: scaleX(-1);
}

.launch-city {
  position: absolute;
  bottom: 0;
  width: 18%;
  height: 26%;
  opacity: .52;
  background:
    repeating-linear-gradient(90deg, transparent 0 8%, rgba(3, 13, 18, .96) 8% 12%),
    linear-gradient(180deg, transparent 0 48%, rgba(3, 13, 18, .98) 48% 100%);
  filter: drop-shadow(0 0 7px rgba(103, 217, 255, .1));
}

.launch-city::after {
  content: "";
  position: absolute;
  inset: 50% 3% 5%;
  background-image: radial-gradient(circle, rgba(255, 198, 103, .78) 0 1px, transparent 1.5px);
  background-size: 17px 11px;
  opacity: .45;
}

.launch-city--left { left: 7%; }
.launch-city--right { right: 6%; }

.launch-site__ground {
  position: absolute;
  left: -18%;
  right: -18%;
  bottom: -10%;
  height: 58%;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(7, 28, 31, .88), rgba(1, 5, 7, .99) 62%),
    repeating-linear-gradient(90deg, rgba(101, 210, 220, .04) 0 1px, transparent 1px 8vw);
  clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%);
  box-shadow: inset 0 1px rgba(120, 221, 232, .18), 0 -30px 65px rgba(0, 8, 14, .52);
}

.launch-site__ground::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: min(94vw, 1450px);
  height: 100%;
  transform: translateX(-50%);
  background:
    repeating-linear-gradient(90deg, transparent 0 8.7%, rgba(84, 178, 194, .09) 8.7% 8.9%, transparent 8.9% 17.4%),
    repeating-linear-gradient(0deg, transparent 0 17%, rgba(91, 181, 194, .07) 17% 17.5%, transparent 17.5% 34%);
  clip-path: polygon(42% 0, 58% 0, 98% 100%, 2% 100%);
  opacity: .65;
}

.launch-runway {
  position: absolute;
  left: 50%;
  top: 1%;
  width: min(66vw, 980px);
  height: 105%;
  transform: translateX(-50%);
  clip-path: polygon(47.4% 0, 52.6% 0, 100% 100%, 0 100%);
  background:
    linear-gradient(90deg, rgba(52, 166, 186, .12), transparent 9% 91%, rgba(52, 166, 186, .12)),
    repeating-linear-gradient(0deg, rgba(173, 236, 246, .22) 0 2px, transparent 2px 56px),
    linear-gradient(180deg, rgba(20, 48, 54, .38), rgba(1, 6, 8, .96));
  box-shadow: 0 0 40px rgba(70, 203, 232, .08);
}

.launch-runway__line {
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
  transform-origin: top;
  background: linear-gradient(180deg, rgba(112, 236, 255, .3), rgba(112, 236, 255, .02));
  box-shadow: 0 0 7px rgba(112, 236, 255, .23);
}

.launch-runway__line--left {
  left: 44%;
  transform: rotate(11deg);
}

.launch-runway__line--right {
  right: 44%;
  transform: rotate(-11deg);
}

.launch-pad {
  position: absolute;
  left: 50%;
  top: 2%;
  width: min(49vw, 650px);
  height: clamp(78px, 15vh, 136px);
  transform: translateX(-50%) perspective(580px) rotateX(63deg);
  transform-origin: 50% 100%;
  border: 1px solid rgba(121, 230, 243, .18);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center, rgba(61, 130, 143, .16), transparent 32%),
    repeating-radial-gradient(ellipse at center, rgba(109, 221, 235, .11) 0 2px, transparent 2px 19px),
    linear-gradient(180deg, rgba(17, 42, 48, .96), rgba(2, 10, 13, .99));
  box-shadow: 0 10px 32px rgba(0, 0, 0, .8), inset 0 0 35px rgba(75, 203, 232, .08), 0 0 45px rgba(72, 203, 230, .08);
}

.launch-pad::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34%;
  height: 46%;
  border-radius: 48%;
  background: radial-gradient(ellipse, rgba(120, 235, 255, .20), rgba(2, 8, 12, .98) 55%);
  box-shadow: inset 0 0 18px #000, 0 0 24px rgba(91, 222, 255, .16);
  transform: translate(-50%, -50%);
}

.launch-pad::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22%;
  height: 26%;
  border-radius: 50%;
  background: rgba(137, 236, 255, .12);
  box-shadow: 0 0 38px rgba(96, 225, 255, .72), 0 0 86px rgba(122, 89, 255, .34);
  opacity: var(--smoke-opacity);
  transform: translate(-50%, -50%);
  animation: pad-energy 1.4s ease-in-out infinite alternate;
}

.launch-pad__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  border: 1px dashed rgba(120, 225, 240, .22);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.launch-pad__ring--outer { width: 84%; height: 74%; }
.launch-pad__ring--inner { width: 55%; height: 48%; }

.launch-pad__flame-trench {
  position: absolute;
  left: 50%;
  top: 43%;
  width: 9%;
  height: 70%;
  border-radius: 999px;
  background: linear-gradient(180deg, #02070a, rgba(62, 133, 151, .19), #010204);
  box-shadow: inset 0 0 14px #000;
  transform: translate(-50%, -50%);
}

.launch-tower {
  position: absolute;
  bottom: 28%;
  filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .72));
}

.launch-tower--service {
  left: calc(50% + min(22vw, 330px));
  width: clamp(66px, 7vw, 108px);
  height: clamp(300px, 49vh, 505px);
}

.launch-tower--lightning {
  right: calc(50% + min(31vw, 470px));
  width: clamp(26px, 3vw, 44px);
  height: clamp(275px, 43vh, 455px);
  opacity: .82;
}

.launch-tower__mast {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100%;
  height: 100%;
  transform: translateX(-50%);
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
  background:
    repeating-linear-gradient(55deg, transparent 0 13px, rgba(134, 188, 207, .42) 13px 15px, transparent 15px 28px),
    repeating-linear-gradient(-55deg, transparent 0 13px, rgba(134, 188, 207, .35) 13px 15px, transparent 15px 28px),
    linear-gradient(90deg, rgba(12, 27, 35, .98), rgba(75, 102, 116, .78) 48%, rgba(7, 18, 25, .98));
  border: 1px solid rgba(129, 191, 214, .24);
}

.launch-tower--lightning .launch-tower__mast {
  clip-path: polygon(44% 0, 56% 0, 82% 100%, 18% 100%);
}

.launch-tower__deck {
  position: absolute;
  left: 1%;
  width: 112%;
  height: 5%;
  border: 1px solid rgba(124, 190, 213, .27);
  background: linear-gradient(180deg, rgba(62, 83, 95, .95), rgba(8, 20, 27, .98));
  box-shadow: 0 3px 8px rgba(0,0,0,.64);
}

.launch-tower__deck--1 { bottom: 22%; }
.launch-tower__deck--2 { bottom: 49%; }
.launch-tower__deck--3 { bottom: 72%; }

.launch-tower__arm {
  position: absolute;
  right: 70%;
  width: clamp(86px, 10vw, 150px);
  height: 13px;
  border: 1px solid rgba(139, 206, 226, .3);
  background:
    repeating-linear-gradient(135deg, transparent 0 9px, rgba(126, 193, 214, .36) 9px 11px, transparent 11px 18px),
    linear-gradient(180deg, rgba(39, 60, 70, .98), rgba(5, 16, 22, .98));
  box-shadow: 0 5px 11px rgba(0,0,0,.65);
  opacity: calc(1 - var(--tower-arm));
  transform-origin: 100% 50%;
  transition: opacity .28s linear;
}

.launch-tower__arm::after {
  content: "";
  position: absolute;
  left: -12px;
  top: -6px;
  width: 22px;
  height: 25px;
  border: 1px solid rgba(124, 225, 240, .32);
  border-radius: 4px;
  background: rgba(7, 19, 26, .95);
  box-shadow: 0 0 14px rgba(83, 218, 246, .1);
}

.launch-tower__arm--upper {
  bottom: 64%;
  transform: rotate(-3deg);
}

.launch-tower__arm--lower {
  bottom: 40%;
  transform: rotate(4deg);
}

.launch-tower__beacon {
  position: absolute;
  left: 50%;
  top: -5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff8e72;
  box-shadow: 0 0 12px #ff6656, 0 0 26px rgba(255, 76, 56, .6);
  transform: translateX(-50%);
  animation: tower-beacon 1.5s steps(1) infinite;
}

.launch-tower__cable {
  position: absolute;
  top: 0;
  width: 1px;
  height: 103%;
  background: linear-gradient(180deg, rgba(159, 205, 221, .4), transparent);
  transform-origin: top;
}

.launch-tower__cable--a { left: 50%; transform: rotate(16deg); }
.launch-tower__cable--b { left: 50%; transform: rotate(-16deg); }

.launch-floodlights {
  position: absolute;
  bottom: 31%;
  display: flex;
  gap: 10px;
}

.launch-floodlights--left { left: 16%; }
.launch-floodlights--right { right: 16%; }

.launch-floodlights span {
  position: relative;
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #d9fbff;
  box-shadow: 0 0 12px #a5efff, 0 0 34px rgba(121, 226, 255, .35);
}

.launch-floodlights span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18vw;
  height: 13vh;
  background: conic-gradient(from 250deg at 0 50%, rgba(159, 232, 255, .12), transparent 18deg);
  filter: blur(7px);
  transform: translateY(-50%);
  transform-origin: 0 50%;
}

.launch-floodlights--right span::after {
  left: auto;
  right: 50%;
  transform: translateY(-50%) scaleX(-1);
}

.launch-site__foreground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 19%;
  background:
    linear-gradient(180deg, transparent, rgba(0, 3, 5, .78)),
    repeating-linear-gradient(90deg, transparent 0 58px, rgba(57, 106, 118, .16) 58px 60px);
  border-top: 1px solid rgba(101, 198, 216, .09);
}

.launch-vapor-layer {
  z-index: 25;
  overflow: hidden;
  opacity: var(--smoke-opacity);
  transition: opacity .18s linear, visibility .25s ease;
}

body[data-phase="gate"] .launch-vapor-layer,
body[data-phase="countdown"] .launch-vapor-layer,
body[data-phase="flight"] .launch-vapor-layer {
  visibility: visible;
}

.launch-vapor {
  position: absolute;
  bottom: 8%;
  width: clamp(190px, 25vw, 390px);
  aspect-ratio: 2 / 1;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center, rgba(219, 242, 247, .62), rgba(111, 169, 184, .23) 38%, transparent 72%);
  filter: blur(18px);
  mix-blend-mode: screen;
  animation: launch-vapor 2.1s ease-in-out infinite alternate;
}

.launch-vapor--1 { left: 27%; animation-delay: -.2s; }
.launch-vapor--2 { left: 39%; bottom: 5%; animation-delay: -.8s; transform: scale(1.2); }
.launch-vapor--3 { right: 31%; bottom: 9%; animation-delay: -1.3s; }
.launch-vapor--4 { left: 17%; bottom: 2%; opacity: .72; animation-delay: -.45s; }
.launch-vapor--5 { right: 16%; bottom: 3%; opacity: .66; animation-delay: -1.1s; }

body[data-phase="gate"] .ship-layer,
body[data-phase="countdown"] .ship-layer,
body[data-phase="flight"] .ship-layer,
body[data-phase="destinations"] .ship-layer,
body[data-phase="transition"] .ship-layer {
  opacity: 1;
  visibility: visible;
}

body[data-phase="gate"] .ship-layer,
body[data-phase="countdown"] .ship-layer {
  filter: drop-shadow(0 26px 28px rgba(0,0,0,.68)) drop-shadow(0 0 26px rgba(89, 211, 255, .09));
}

body[data-phase="gate"] .ship,
body[data-phase="countdown"] .ship {
  animation: ship-on-pad 2.4s ease-in-out infinite alternate;
}

.ship__flames {
  scale: 1 var(--flame-scale);
  opacity: .96;
  transform-box: fill-box;
  transform-origin: 50% 0;
  transition: opacity .2s ease;
}

body[data-phase="gate"] .ship__flames { opacity: .16; }
body[data-phase="countdown"] .ship__flames { opacity: .78; }
body[data-phase="flight"] .ship__flames { opacity: 1; }
body[data-phase="destinations"] .ship__flames,
body[data-phase="transition"] .ship__flames { opacity: .66; }

.ship__landing-gear {
  opacity: var(--gear-opacity);
  transform-box: fill-box;
  transform-origin: 50% 0;
  scale: 1 var(--gear-opacity);
}

.ship-shadow {
  opacity: var(--gear-opacity);
  transition: opacity .16s linear;
}

body[data-phase="gate"] .ship-reticle,
body[data-phase="countdown"] .ship-reticle {
  opacity: 0;
}

.entry-gate__content {
  width: min(96vw, 1540px);
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 98px clamp(20px, 4vw, 68px) max(24px, env(safe-area-inset-bottom));
}

.entry-gate__heading {
  align-self: start;
  gap: 5px;
  max-width: 980px;
}

.entry-gate h1 {
  font-size: clamp(2.6rem, 6.15vw, 6rem);
  line-height: .84;
}

.entry-gate__promise {
  max-width: 690px;
  margin-top: 5px;
  font-size: clamp(.86rem, 1.08vw, 1.02rem);
}

.entry-gate__actions {
  align-self: end;
  margin-bottom: clamp(4px, 1.2vh, 14px);
}

body[data-phase="countdown"] .entry-gate {
  opacity: .04;
}

.no-webgl[data-phase="gate"] .webgl-fallback,
.no-webgl[data-phase="countdown"] .webgl-fallback,
.no-webgl[data-phase="flight"] .webgl-fallback {
  background:
    radial-gradient(circle at 65% 32%, rgba(255, 188, 95, .2), transparent 20%),
    linear-gradient(180deg, #06162d 0, #194f73 48%, #607c86 72%, #061014 73%);
}

.destination-stage {
  gap: clamp(2px, .7vh, 10px);
  padding: clamp(82px, 10vh, 102px) clamp(8px, 1.1vw, 18px) max(12px, env(safe-area-inset-bottom));
}

.destination-heading {
  gap: 2px;
}

.destination-heading h2 {
  max-width: 1000px;
  font-size: clamp(2rem, 4.75vw, 4.85rem);
  line-height: .88;
}

.destination-instruction {
  margin-top: 3px;
  font-size: clamp(.72rem, .82vw, .88rem);
}

.galaxy-field {
  width: min(100%, 1680px);
  gap: clamp(0px, .55vw, 10px);
  align-items: center;
  overflow: visible;
}

.portal {
  opacity: .72;
  transform: scale(.955) translateY(4px);
}

.portal.is-selected,
.portal:hover,
.portal:focus-within {
  transform: scale(1.035) translateY(0);
}

.portal__hit {
  grid-template-rows: auto auto minmax(300px, 1fr) auto auto;
  gap: clamp(2px, .42vh, 6px);
  overflow: visible;
}

.portal__number {
  font-size: .53rem;
}

.portal__title {
  max-width: 390px;
  min-height: 1.15em;
  font-size: clamp(.92rem, 1.22vw, 1.28rem);
}

.portal__visual {
  width: clamp(300px, 31vw, 520px);
  max-width: 100%;
  max-height: 54vh;
}

.portal__galaxy-canvas {
  filter: saturate(.96) contrast(1.16) brightness(.94);
  transform: rotate(-7deg) scale(1.02);
}

.portal.is-selected .portal__galaxy-canvas,
.portal:hover .portal__galaxy-canvas,
.portal:focus-within .portal__galaxy-canvas {
  transform: rotate(0) scale(1.085);
}

.portal__halo {
  inset: 6%;
  filter: blur(34px);
}

.portal__core {
  width: 7.5%;
}

.portal__description {
  max-width: 360px;
  min-height: 2.8em;
  font-size: clamp(.7rem, .76vw, .82rem);
}

.portal__action {
  margin-top: 1px;
}

@keyframes tower-beacon {
  0%, 48% { opacity: 1; }
  49%, 100% { opacity: .16; }
}

@keyframes pad-energy {
  to { transform: translate(-50%, -50%) scale(1.35); opacity: .15; }
}

@keyframes launch-vapor {
  from { translate: -8px 8px; scale: .86; opacity: .48; }
  to { translate: 10px -10px; scale: 1.18; opacity: .92; }
}

@keyframes ship-on-pad {
  from { transform: translateY(0) rotateZ(-.16deg); }
  to { transform: translateY(-2px) rotateZ(.16deg); }
}

@media (max-width: 980px) {
  .launch-tower--service {
    left: calc(50% + 25vw);
    height: 44vh;
  }

  .launch-tower--lightning {
    right: calc(50% + 34vw);
    height: 39vh;
  }

  .portal__visual {
    width: clamp(280px, 34vw, 420px);
  }

  .portal__hit {
    grid-template-rows: auto auto minmax(270px, 1fr) auto auto;
  }
}

@media (max-width: 760px) {
  :root {
    --ship-y: 12vh;
    --ship-scale: .60;
  }

  .launch-site__skyline {
    bottom: 33%;
    height: 21%;
  }

  .launch-site__ground {
    left: -52%;
    right: -52%;
    height: 54%;
  }

  .launch-pad {
    top: 5%;
    width: 78vw;
    height: 92px;
  }

  .launch-tower--service {
    left: auto;
    right: 2vw;
    bottom: 29%;
    width: 54px;
    height: 37vh;
  }

  .launch-tower--lightning {
    right: auto;
    left: 3vw;
    bottom: 29%;
    width: 24px;
    height: 34vh;
  }

  .launch-tower__arm {
    width: 80px;
    height: 9px;
  }

  .launch-floodlights {
    display: none;
  }

  .launch-vapor {
    bottom: 10%;
    width: 58vw;
  }

  .launch-vapor--1 { left: -2%; }
  .launch-vapor--2 { left: 23%; }
  .launch-vapor--3 { right: -4%; }
  .launch-vapor--4,
  .launch-vapor--5 { display: none; }

  .entry-gate__content {
    grid-template-rows: auto minmax(0, 1fr) auto;
    padding: 78px 14px max(18px, env(safe-area-inset-bottom));
  }

  .entry-gate h1 {
    font-size: clamp(2.2rem, 13vw, 4.4rem);
  }

  .entry-gate__promise {
    max-width: 91vw;
    font-size: .76rem;
    line-height: 1.38;
  }

  .entry-gate__actions {
    margin-bottom: 1vh;
  }

  .ship-layer {
    width: min(330px, 75vw);
  }

  .destination-stage {
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 70px 0 max(8px, env(safe-area-inset-bottom));
  }

  .destination-heading {
    width: 100%;
    min-width: 0;
    max-width: 100vw;
    overflow: hidden;
    padding-inline: 14px;
  }

  .destination-heading h2 {
    width: min(100%, 14ch);
    max-width: 100%;
    font-size: clamp(1.9rem, 10.8vw, 3.7rem);
  }

  .destination-instruction {
    font-size: .66rem;
    line-height: 1.35;
  }

  .galaxy-field {
    width: 100%;
    min-width: 0;
    max-width: 100vw;
    grid-auto-columns: 92vw;
    gap: 2vw;
    padding: 0 4vw 2px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .galaxy-field::-webkit-scrollbar {
    display: none;
  }

  .portal__hit {
    grid-template-rows: auto auto minmax(330px, 1fr) auto auto;
    gap: 2px;
    padding-inline: 2px;
  }

  .portal__title {
    max-width: 88vw;
    font-size: clamp(1rem, 4.7vw, 1.34rem);
  }

  .portal__visual {
    width: min(88vw, 500px);
    max-height: 47vh;
  }

  .portal__description {
    max-width: 84vw;
    min-height: 2.6em;
    font-size: .7rem;
  }

  .mission-nav {
    min-width: 0;
    max-width: 100vw;
    bottom: max(5px, env(safe-area-inset-bottom));
  }
}

@media (max-height: 660px) and (min-width: 761px) {
  .entry-gate__content {
    padding-top: 82px;
  }

  .entry-gate h1 {
    font-size: clamp(2.2rem, 5.2vw, 4.4rem);
  }

  .destination-stage {
    padding-top: 78px;
  }

  .destination-heading h2 {
    font-size: clamp(1.8rem, 4.25vw, 3.8rem);
  }

  .portal__hit {
    grid-template-rows: auto auto minmax(235px, 1fr) auto auto;
  }

  .portal__visual {
    width: min(29vw, 350px);
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .entry-gate__promise {
    display: none;
  }

  .launch-tower--service {
    height: 47vh;
  }

  .destination-heading h2 {
    font-size: 2.2rem;
  }

  .galaxy-field {
    grid-auto-columns: 66vw;
    padding-inline: 17vw;
  }

  .portal__hit {
    grid-template-rows: auto auto minmax(185px, 1fr) auto;
  }

  .portal__visual {
    width: min(52vh, 300px);
  }

  .portal__description {
    display: none;
  }
}

html[data-motion="reduced"] .launch-vapor,
html[data-motion="reduced"] .launch-tower__beacon,
html[data-motion="reduced"] .launch-pad::after,
html[data-motion="reduced"] body[data-phase="gate"] .ship,
html[data-motion="reduced"] body[data-phase="countdown"] .ship {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .launch-vapor,
  .launch-tower__beacon,
  .launch-pad::after,
  body[data-phase="gate"] .ship,
  body[data-phase="countdown"] .ship {
    animation: none !important;
  }
}

/* ==============================================================
   UNIVERSO SEBAS GRANDA V4 — CIELO VIVO DE MEDELLÍN
   ============================================================= */

:root {
  --accent: 121, 244, 255;
  --accent-2: 210, 99, 255;
  --accent-3: 107, 140, 255;
  --weather-cloud-cover: .28;
  --weather-rain: 0;
  --weather-wetness: 0;
  --weather-wind-speed: 12;
  --weather-wind-direction: 180deg;
  --sun-x: 72%;
  --sun-y: 20%;
  --sun-opacity: .82;
  --moon-x: 24%;
  --moon-y: 22%;
  --moon-opacity: 0;
  --moon-phase: 50%;
  --constellation-opacity: 0;
  --launch-hover: 0;
  --screen-shake: 0px;
}

html[data-theme="sg-original"] {
  --cyan: #79f4ff;
  --blue: #6b8cff;
  --violet: #d263ff;
  --gold: #ffd37d;
  --accent: 121, 244, 255;
  --accent-2: 210, 99, 255;
  --accent-3: 107, 140, 255;
}

html[data-theme="nebula"] {
  --cyan: #ff8ae8;
  --blue: #a87bff;
  --violet: #ff4bb6;
  --gold: #ffd0ef;
  --accent: 255, 100, 211;
  --accent-2: 166, 107, 255;
  --accent-3: 255, 75, 182;
}

html[data-theme="deep-space"] {
  --cyan: #66d8ff;
  --blue: #2876ff;
  --violet: #6474ff;
  --gold: #b7d7ff;
  --accent: 71, 184, 255;
  --accent-2: 55, 102, 255;
  --accent-3: 104, 114, 255;
}

html[data-theme="solar"] {
  --cyan: #ffca72;
  --blue: #ff833d;
  --violet: #ffb34d;
  --gold: #fff0b5;
  --accent: 255, 191, 91;
  --accent-2: 255, 104, 47;
  --accent-3: 255, 223, 124;
}

html[data-theme="emerald-orbit"] {
  --cyan: #70ffd7;
  --blue: #24d5b2;
  --violet: #73e8a7;
  --gold: #d1ff9a;
  --accent: 83, 245, 201;
  --accent-2: 35, 198, 158;
  --accent-3: 129, 237, 174;
}

#space-canvas {
  filter: none !important;
  transition: opacity .4s ease;
  contain: strict;
}

body[data-daylight="night"] #space-canvas,
body[data-daylight="twilight"] #space-canvas,
body[data-weather="rain"] #space-canvas,
body[data-weather="storm"] #space-canvas,
body[data-weather="fog"] #space-canvas {
  filter: none !important;
}

/* Live Medellín sky layers */
.medellin-sky {
  position: fixed;
  z-index: 3;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .8s ease, visibility .8s ease;
}

body[data-phase="gate"] .medellin-sky,
body[data-phase="countdown"] .medellin-sky,
body[data-phase="flight"] .medellin-sky {
  opacity: calc(1 - var(--launch-progress));
  visibility: visible;
}

#constellation-canvas {
  position: absolute;
  inset: 0 0 35% 0;
  width: 100%;
  height: 65%;
  opacity: var(--constellation-opacity);
  filter: drop-shadow(0 0 5px rgba(var(--accent), .34));
  transition: opacity 1.3s ease;
}

.celestial-object {
  position: absolute;
  left: var(--sun-x);
  top: var(--sun-y);
  width: clamp(34px, 4vw, 70px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  transition: left 1.8s ease, top 1.8s ease, opacity 1.2s ease;
}

.celestial-object--sun {
  opacity: var(--sun-opacity);
  background: radial-gradient(circle at 42% 38%, #fff 0 12%, #fff5bd 22%, #ffc260 48%, rgba(255, 132, 44, .2) 70%, transparent 75%);
  box-shadow: 0 0 24px rgba(255, 226, 142, .72), 0 0 80px rgba(255, 139, 58, .35), 0 0 170px rgba(255, 169, 74, .2);
  mix-blend-mode: screen;
}

.celestial-object--sun::after {
  content: "";
  position: absolute;
  inset: -230%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 190, 103, .2), transparent 64%);
  animation: solar-breathe 5.2s ease-in-out infinite alternate;
}

.celestial-object--moon {
  left: var(--moon-x);
  top: var(--moon-y);
  opacity: var(--moon-opacity);
  width: clamp(26px, 3.2vw, 55px);
  background: radial-gradient(circle at 38% 33%, #f4f1e9, #aaaeb8 66%, #575d69 100%);
  box-shadow: 0 0 14px rgba(212, 229, 255, .42), 0 0 55px rgba(128, 178, 255, .2);
  overflow: hidden;
}

.moon-disc {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 32% 35%, rgba(75, 78, 87, .26) 0 7%, transparent 8%),
    radial-gradient(circle at 62% 55%, rgba(68, 72, 80, .22) 0 10%, transparent 11%),
    radial-gradient(circle at 43% 72%, rgba(72, 76, 84, .18) 0 6%, transparent 7%);
}

.moon-disc::after {
  content: "";
  position: absolute;
  inset: -3%;
  border-radius: 50%;
  background: #02050b;
  opacity: .92;
  transform: translateX(var(--moon-phase));
  box-shadow: -10px 0 18px rgba(0, 0, 0, .55);
  transition: transform 1.6s ease;
}

.weather-clouds {
  position: absolute;
  inset: 8% -35% 35%;
  opacity: calc(var(--weather-cloud-cover) * .52);
  transform: rotate(calc((var(--weather-wind-direction) - 180deg) * .02));
  transition: opacity 1.4s ease;
}

.weather-clouds i {
  position: absolute;
  width: clamp(360px, 42vw, 720px);
  height: clamp(90px, 13vw, 190px);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(213, 228, 238, .42), rgba(126, 151, 168, .16) 50%, transparent 72%);
  filter: blur(20px);
  animation: weather-cloud-drift var(--weather-cloud-duration, 46s) linear infinite;
}

.weather-clouds i:nth-child(1) { left: 2%; top: 5%; animation-delay: -18s; }
.weather-clouds i:nth-child(2) { left: 38%; top: 25%; scale: 1.25 .72; animation-delay: -35s; }
.weather-clouds i:nth-child(3) { left: 72%; top: 7%; scale: .86 .7; animation-delay: -8s; }

.weather-clouds--far {
  opacity: calc(var(--weather-cloud-cover) * .34);
  scale: .82;
  filter: blur(7px);
}

.weather-clouds--near {
  top: 17%;
  mix-blend-mode: screen;
}

body[data-daylight="night"] .weather-clouds i {
  background: radial-gradient(ellipse, rgba(102, 126, 149, .28), rgba(32, 49, 70, .22) 50%, transparent 72%);
}

body[data-weather="storm"] .weather-clouds,
body[data-weather="rain"] .weather-clouds {
  opacity: calc(.34 + var(--weather-cloud-cover) * .6);
  filter: contrast(1.18) brightness(.65);
}

.rain-layer {
  position: absolute;
  inset: 0;
  opacity: clamp(0, var(--weather-rain), .88);
  overflow: hidden;
  transition: opacity 1s ease;
}

.rain-drop {
  position: absolute;
  top: -15vh;
  width: 1px;
  height: var(--drop-length, 42px);
  background: linear-gradient(180deg, transparent, rgba(190, 224, 255, .7));
  transform: rotate(11deg);
  animation: rain-fall var(--drop-speed, .82s) linear infinite;
  animation-delay: var(--drop-delay, 0s);
  opacity: var(--drop-opacity, .55);
}

.lightning-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 62% 8%, rgba(230, 244, 255, .72), rgba(134, 178, 255, .2) 32%, transparent 70%);
  opacity: 0;
  mix-blend-mode: screen;
}

body[data-weather="storm"] .lightning-flash {
  animation: weather-lightning 10.5s steps(1) infinite;
}

.wet-lens {
  position: absolute;
  inset: 0;
  opacity: calc(var(--weather-wetness) * .45);
  transition: opacity 1s ease;
}

.wet-lens i {
  position: absolute;
  width: 7px;
  height: 15px;
  border-radius: 50% 50% 54% 46%;
  background: radial-gradient(circle at 35% 24%, rgba(255,255,255,.5), rgba(174, 218, 248, .08) 54%, rgba(0,0,0,.12) 72%, transparent 75%);
  box-shadow: inset 0 0 2px rgba(255,255,255,.36), 0 1px 8px rgba(123, 201, 255, .18);
  filter: blur(.2px);
  animation: lens-drop 8s ease-in infinite;
}

.wet-lens i:nth-child(1) { left: 17%; top: 11%; animation-delay: -3s; scale: .8; }
.wet-lens i:nth-child(2) { left: 78%; top: 23%; animation-delay: -6.5s; scale: 1.4; }
.wet-lens i:nth-child(3) { left: 34%; top: 47%; animation-delay: -1s; scale: .65; }
.wet-lens i:nth-child(4) { left: 64%; top: 61%; animation-delay: -4.4s; scale: 1.1; }

/* Global skip intro */
.global-skip-wrap {
  position: fixed;
  z-index: 69;
  right: clamp(14px, 2.2vw, 34px);
  bottom: max(16px, env(safe-area-inset-bottom));
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
}

body[data-phase="bigbang"] .global-skip-wrap,
body[data-phase="gate"] .global-skip-wrap,
body[data-phase="countdown"] .global-skip-wrap,
body[data-phase="flight"] .global-skip-wrap {
  opacity: 1;
  visibility: visible;
}

.global-skip {
  border: 1px solid rgba(var(--accent), .32);
  border-radius: 999px;
  padding: 10px 14px;
  background: rgba(2, 7, 15, .66);
  color: rgba(232, 244, 255, .78);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .16em;
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}

.global-skip:hover {
  color: #fff;
  border-color: rgba(var(--accent), .75);
  background: rgba(var(--accent), .1);
  transform: translateY(-2px);
}

.global-skip kbd {
  margin-left: 8px;
  color: var(--cyan);
  font: inherit;
}

/* Settings control */
.icon-control--settings .icon--gear {
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}

.icon-control--settings[aria-expanded="true"] .icon--gear {
  transform: rotate(95deg);
}

.settings-panel {
  position: fixed;
  z-index: 112;
  top: 76px;
  right: clamp(12px, 2vw, 28px);
  width: min(390px, calc(100vw - 24px));
  max-height: calc(100dvh - 94px);
  overflow: auto;
  padding: 18px;
  border: 1px solid rgba(var(--accent), .24);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(var(--accent), .065), transparent 42%),
    rgba(3, 8, 18, .94);
  box-shadow: 0 26px 90px rgba(0,0,0,.58), inset 0 1px rgba(255,255,255,.06);
  backdrop-filter: blur(24px) saturate(1.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px) scale(.96);
  transform-origin: top right;
  transition: opacity .25s ease, visibility .25s ease, transform .3s cubic-bezier(.2,.8,.2,1);
}

.settings-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.settings-backdrop {
  position: fixed;
  z-index: 111;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgba(0,0,0,.28);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  cursor: default;
  transition: opacity .25s ease, visibility .25s ease;
}

.settings-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.settings-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(var(--accent), .13);
}

.settings-panel__head div {
  display: grid;
  gap: 3px;
}

.settings-panel__head small,
.settings-group h2 {
  margin: 0;
  color: var(--cyan);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .52rem;
  font-weight: 800;
  letter-spacing: .2em;
}

.settings-panel__head strong {
  font-size: .95rem;
  letter-spacing: .08em;
}

.settings-close {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(var(--accent), .18);
  border-radius: 50%;
  background: rgba(var(--accent), .04);
  color: rgba(255,255,255,.76);
  font-size: 1.4rem;
  cursor: pointer;
}

.settings-group {
  display: grid;
  gap: 10px;
  padding-top: 16px;
}

.segmented-control {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  padding: 4px;
  border: 1px solid rgba(var(--accent), .14);
  border-radius: 13px;
  background: rgba(255,255,255,.025);
}

.segmented-control button {
  border: 0;
  border-radius: 9px;
  padding: 10px;
  background: transparent;
  color: rgba(220,232,250,.58);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .09em;
  cursor: pointer;
}

.segmented-control button.is-active {
  background: rgba(var(--accent), .13);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(var(--accent), .3), 0 0 20px rgba(var(--accent), .08);
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.theme-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 9px 10px;
  background: rgba(255,255,255,.025);
  color: rgba(220,232,250,.62);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-align: left;
  cursor: pointer;
}

.theme-chip i {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  box-shadow: 0 0 14px currentColor;
}

.theme-chip--sg i { background: linear-gradient(135deg, #79f4ff, #d263ff); }
.theme-chip--nebula i { background: linear-gradient(135deg, #ff8ae8, #a87bff); }
.theme-chip--deep i { background: linear-gradient(135deg, #66d8ff, #2876ff); }
.theme-chip--solar i { background: linear-gradient(135deg, #ffca72, #ff833d); }
.theme-chip--emerald i { background: linear-gradient(135deg, #70ffd7, #24d5b2); }

.theme-chip.is-active {
  color: #fff;
  border-color: rgba(var(--accent), .42);
  background: rgba(var(--accent), .08);
}

.settings-panel__note {
  margin: 16px 0 0;
  color: rgba(194, 209, 230, .5);
  font-size: .65rem;
  line-height: 1.5;
}

/* Live weather HUD */
.live-sky-card {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr 1fr;
  width: min(690px, 88vw);
  margin-top: 9px;
  border: 1px solid rgba(var(--accent), .14);
  border-radius: 14px;
  background: rgba(2, 8, 17, .36);
  box-shadow: inset 0 1px rgba(255,255,255,.03), 0 12px 40px rgba(0,0,0,.16);
  backdrop-filter: blur(12px);
  overflow: hidden;
  text-align: left;
}

.live-sky-card > div {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
}

.live-sky-card > div + div {
  border-left: 1px solid rgba(var(--accent), .09);
}

.live-sky-card span:not(.moon-mini) {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.live-sky-card strong,
.live-sky-card b {
  color: rgba(241, 248, 255, .88);
  font-size: .58rem;
  line-height: 1.2;
  letter-spacing: .08em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.live-sky-card__weather > strong {
  color: var(--cyan);
  font-size: 1rem;
  letter-spacing: -.02em;
}

.live-sky-card small {
  color: rgba(174, 194, 221, .55);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .48rem;
  letter-spacing: .08em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.live-sky-card__location > i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
  animation: live-dot 1.8s ease-in-out infinite;
}

.moon-mini {
  position: relative;
  flex: 0 0 auto;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 35% 30%, #f4f1e7, #929aa8 70%, #4d5360);
  box-shadow: 0 0 14px rgba(184, 218, 255, .25);
}

.moon-mini i {
  position: absolute;
  inset: -3%;
  border-radius: 50%;
  background: #050913;
  transform: translateX(var(--moon-phase));
}

/* Launch atmosphere and integration */
.floating-particles {
  position: absolute;
  z-index: 8;
  inset: 0;
  overflow: hidden;
}

.float-particle {
  position: absolute;
  left: var(--particle-x);
  top: var(--particle-y);
  width: var(--particle-size);
  height: var(--particle-size);
  border-radius: 50%;
  background: rgba(var(--accent), var(--particle-alpha));
  box-shadow: 0 0 7px rgba(var(--accent), .35);
  animation: floating-mote var(--particle-duration) ease-in-out infinite;
  animation-delay: var(--particle-delay);
}

.grid-energy {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 1%;
  width: min(74vw, 1060px);
  height: 104%;
  translate: -50% 0;
  clip-path: polygon(47% 0, 53% 0, 100% 100%, 0 100%);
  opacity: 0;
  background: linear-gradient(0deg, transparent 0 42%, rgba(var(--accent), .52) 48%, transparent 54% 100%);
  mix-blend-mode: screen;
  animation: grid-pulse 3.5s cubic-bezier(.25,.8,.25,1) infinite;
}

.grid-energy--left { translate: -57% 0; animation-delay: -1.1s; opacity: .34; }
.grid-energy--right { translate: -43% 0; animation-delay: -2.2s; opacity: .28; }
.grid-energy--center { opacity: .5; }

.launch-tower__warning {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  translate: -50% -50%;
  background: #ffb753;
  box-shadow: 0 0 7px #ff9f32, 0 0 18px rgba(255, 151, 53, .55);
  animation: amber-beacon 2.2s steps(1) infinite;
}

.launch-umbilicals {
  position: absolute;
  z-index: 10;
  left: 50%;
  top: 56%;
  width: 290px;
  height: 110px;
  translate: -50% -50%;
  pointer-events: none;
}

.umbilical {
  position: absolute;
  right: -8px;
  width: 150px;
  height: 15px;
  border-radius: 999px 2px 2px 999px;
  transform-origin: right center;
  transform: translateX(calc(var(--tower-arm) * 155px)) rotate(calc(var(--tower-arm) * -18deg));
  transition: transform .52s cubic-bezier(.2,.8,.25,1), opacity .4s ease;
  background:
    repeating-linear-gradient(90deg, rgba(141, 200, 214, .16) 0 8px, transparent 8px 14px),
    linear-gradient(180deg, #162c35, #03090d);
  border: 1px solid rgba(119, 216, 232, .18);
  box-shadow: 0 5px 12px rgba(0,0,0,.55), inset 0 1px rgba(255,255,255,.07);
}

.umbilical--data { top: 15px; }
.umbilical--fuel { top: 72px; width: 174px; }

.umbilical i {
  position: absolute;
  left: -13px;
  top: 50%;
  width: 20px;
  height: 24px;
  border-radius: 4px;
  translate: 0 -50%;
  background: linear-gradient(180deg, #223e48, #061014);
  box-shadow: 0 0 12px rgba(var(--accent), .12);
}

.mission-holograms {
  position: absolute;
  z-index: 13;
  inset: 0;
  pointer-events: none;
}

.hologram-panel {
  position: absolute;
  width: clamp(170px, 17vw, 260px);
  min-height: 72px;
  display: grid;
  gap: 4px;
  padding: 11px 13px;
  border: 1px solid rgba(var(--accent), .19);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(var(--accent), .07), rgba(1, 8, 15, .14)),
    repeating-linear-gradient(0deg, transparent 0 5px, rgba(var(--accent), .025) 5px 6px);
  box-shadow: inset 0 0 24px rgba(var(--accent), .045), 0 0 30px rgba(var(--accent), .04);
  backdrop-filter: blur(4px);
  transform: perspective(700px) rotateY(var(--panel-rotate));
  opacity: .48;
  overflow: hidden;
  animation: hologram-float 4.4s ease-in-out infinite alternate;
}

.hologram-panel--personal {
  --panel-rotate: 10deg;
  left: clamp(22px, 5vw, 92px);
  bottom: 19%;
}

.hologram-panel--agency {
  --panel-rotate: -10deg;
  right: clamp(22px, 5vw, 92px);
  bottom: 19%;
  animation-delay: -2.2s;
}

.hologram-panel small,
.hologram-panel strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .12em;
}

.hologram-panel small {
  color: var(--cyan);
  font-size: .46rem;
}

.hologram-panel strong {
  color: rgba(232, 247, 255, .68);
  font-size: .5rem;
  line-height: 1.45;
}

.hologram-panel > i {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-top: 3px;
}

.hologram-panel > i b {
  height: 2px;
  background: rgba(var(--accent), .13);
  overflow: hidden;
}

.hologram-panel > i b::after {
  content: "";
  display: block;
  width: 60%;
  height: 100%;
  background: var(--cyan);
  box-shadow: 0 0 5px var(--cyan);
  animation: holo-meter 2.8s ease-in-out infinite alternate;
}

.hologram-panel > i b:nth-child(2)::after { width: 82%; animation-delay: -.5s; }
.hologram-panel > i b:nth-child(3)::after { width: 44%; animation-delay: -1.2s; }
.hologram-panel > i b:nth-child(4)::after { width: 68%; animation-delay: -1.8s; }

.hologram-panel__scan {
  position: absolute;
  inset: -30% 0 auto;
  height: 30%;
  background: linear-gradient(180deg, transparent, rgba(var(--accent), .16), transparent);
  animation: holo-scan 3.6s linear infinite;
}

.cryo-stream {
  position: absolute;
  bottom: 21%;
  width: clamp(90px, 11vw, 170px);
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(215, 248, 255, .68), transparent);
  filter: blur(7px);
  opacity: calc(.42 + var(--smoke-opacity) * .38);
  mix-blend-mode: screen;
  animation: cryo-leak 1.45s ease-in-out infinite alternate;
}

.cryo-stream--left { left: calc(50% - min(19vw, 250px)); transform: rotate(-8deg); }
.cryo-stream--right { right: calc(50% - min(19vw, 250px)); transform: rotate(8deg); animation-delay: -.72s; }

.ground-fog {
  position: absolute;
  bottom: -4%;
  width: 65vw;
  height: 30%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(192, 225, 236, .2), transparent 70%);
  filter: blur(28px);
  opacity: calc(.34 + var(--smoke-opacity) * .32);
  animation: ground-fog-drift 8s ease-in-out infinite alternate;
}

.ground-fog--a { left: -8%; }
.ground-fog--b { right: -8%; animation-delay: -4s; }

.heat-haze {
  position: fixed;
  z-index: 23;
  left: 50%;
  top: 50%;
  width: min(150px, 20vw);
  height: min(180px, 24vw);
  pointer-events: none;
  opacity: calc(.18 + var(--launch-hover) * .46 + var(--flame-scale) * .22);
  transform:
    translate(-50%, -8%)
    translateX(var(--ship-x))
    translateY(var(--ship-y))
    scale(var(--ship-scale));
  filter: blur(1.5px);
  transition: opacity .22s ease;
}

.heat-haze span {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 54%;
  height: 88%;
  border-radius: 48%;
  translate: -50% 0;
  background: radial-gradient(ellipse, rgba(var(--accent), .08), transparent 64%);
  backdrop-filter: blur(2px) saturate(1.45);
  animation: heat-haze 1.1s ease-in-out infinite alternate;
}

.heat-haze span:nth-child(2) { width: 72%; height: 63%; animation-delay: -.36s; }
.heat-haze span:nth-child(3) { width: 44%; height: 112%; animation-delay: -.73s; }

/* Hover and click feedback */
body.is-launch-hovering {
  --launch-hover: 1;
}

body.is-launch-hovering .ship__flames {
  opacity: 1 !important;
  filter: brightness(1.45) saturate(1.35);
}

body.is-launch-hovering .ship__body {
  animation: ship-preheat .12s linear infinite alternate;
}

body.is-launch-hovering .launch-pad {
  box-shadow: 0 10px 32px rgba(0,0,0,.8), inset 0 0 44px rgba(var(--accent), .14), 0 0 56px rgba(var(--accent), .18);
}

body.is-launch-impact #mission,
body.is-launch-impact .medellin-sky,
body.is-launch-impact .launch-site {
  animation: launch-screen-shake .48s cubic-bezier(.36,.07,.19,.97) both;
}

body.is-launch-impact::after {
  content: "";
  position: fixed;
  z-index: 120;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 64%, rgba(var(--accent), .26), transparent 54%);
  animation: launch-flash .52s ease-out both;
}

/* Weather-linked ground */
body[data-weather="rain"] .launch-site__ground,
body[data-weather="storm"] .launch-site__ground {
  box-shadow: inset 0 1px rgba(174, 232, 255, .25), 0 -30px 65px rgba(0, 8, 14, .6), inset 0 -80px 120px rgba(44, 116, 151, .08);
}

body[data-weather="rain"] .launch-site__ground::after,
body[data-weather="storm"] .launch-site__ground::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(102deg, transparent 24%, rgba(151, 219, 255, .09) 42%, transparent 61%),
    radial-gradient(ellipse at 50% 45%, rgba(var(--accent), .09), transparent 47%);
  filter: blur(2px);
  opacity: calc(.35 + var(--weather-wetness) * .5);
  animation: wet-runway-shimmer 4.5s ease-in-out infinite alternate;
}

body[data-daylight="night"] .launch-city::after {
  opacity: .9;
  box-shadow: 0 0 8px rgba(255, 181, 91, .2);
}

body[data-daylight="night"] .launch-floodlights span {
  filter: brightness(1.55);
}

body[data-weather="fog"] .launch-site__skyline,
body[data-weather="rain"] .launch-site__skyline,
body[data-weather="storm"] .launch-site__skyline {
  filter: blur(var(--weather-runway-blur, 0px)) drop-shadow(0 -8px 25px rgba(23, 91, 111, .12));
  opacity: calc(1 - var(--weather-wetness) * .26);
}

/* Portal subtitle and wormhole */
.portal__subtitle {
  display: block;
  min-height: 1em;
  color: rgba(var(--accent), .62);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .48rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-align: center;
}

.portal--creative .portal__hit {
  grid-template-rows: auto auto auto minmax(300px, 1fr) auto auto;
}

.wormhole-tunnel {
  position: absolute;
  inset: 0;
  overflow: hidden;
  perspective: 900px;
}

.wormhole-tunnel__streaks,
.wormhole-tunnel__vortex,
.wormhole-tunnel__core {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  translate: -50% -50%;
}

.wormhole-tunnel__streaks {
  width: 170vmax;
  height: 170vmax;
  opacity: 0;
  background:
    repeating-conic-gradient(from 0deg, rgba(var(--transition-rgb), 0) 0 3deg, rgba(var(--transition-rgb), .55) 3.4deg 3.7deg, rgba(var(--transition-rgb), 0) 4.1deg 8deg);
  mask: radial-gradient(circle, transparent 0 7%, #000 28% 100%);
  filter: blur(1px);
}

.wormhole-tunnel__vortex {
  width: 82vmax;
  height: 82vmax;
  opacity: 0;
  border: 1px solid rgba(var(--transition-rgb), .32);
  background:
    repeating-radial-gradient(circle, transparent 0 7%, rgba(var(--transition-rgb), .1) 7.2% 7.7%, transparent 8% 13%),
    conic-gradient(from 0deg, transparent, rgba(var(--transition-rgb), .14), transparent 22%, rgba(var(--transition-rgb), .08), transparent 52%, rgba(var(--transition-rgb), .14), transparent 82%);
  filter: blur(.5px);
}

.wormhole-tunnel__core {
  width: 12vmin;
  height: 12vmin;
  opacity: 0;
  background: #fff;
  box-shadow: 0 0 32px #fff, 0 0 90px rgba(var(--transition-rgb), .8), 0 0 220px rgba(var(--transition-rgb), .5);
}

body[data-phase="transition"] .wormhole-tunnel__streaks {
  animation: wormhole-streaks 1.58s cubic-bezier(.18,.65,.15,1) both;
}

body[data-phase="transition"] .wormhole-tunnel__vortex {
  animation: wormhole-vortex 1.58s cubic-bezier(.18,.65,.15,1) both;
}

body[data-phase="transition"] .wormhole-tunnel__core {
  animation: wormhole-core 1.58s ease-in both;
}

body[data-phase="transition"] .portal-transition__copy {
  animation: transition-copy-v4 1.58s ease both;
}

/* Keyframes */
@keyframes solar-breathe {
  from { scale: .92; opacity: .52; }
  to { scale: 1.08; opacity: .82; }
}

@keyframes weather-cloud-drift {
  from { translate: -20vw 0; }
  to { translate: 120vw 3vh; }
}

@keyframes rain-fall {
  from { translate: 0 -12vh; }
  to { translate: -12vw 125vh; }
}

@keyframes weather-lightning {
  0%, 72%, 74%, 76%, 100% { opacity: 0; }
  72.5% { opacity: .75; }
  73.1% { opacity: .13; }
  74.4% { opacity: .48; }
  75% { opacity: 0; }
}

@keyframes lens-drop {
  0% { translate: 0 -10vh; opacity: 0; }
  12% { opacity: .65; }
  70% { opacity: .42; }
  100% { translate: 4px 102vh; opacity: 0; }
}

@keyframes live-dot {
  0%, 100% { opacity: .45; scale: .8; }
  50% { opacity: 1; scale: 1.15; }
}

@keyframes floating-mote {
  0%, 100% { translate: 0 8px; opacity: .18; }
  50% { translate: var(--particle-drift) -24px; opacity: .9; }
}

@keyframes grid-pulse {
  0% { background-position: 0 120%; opacity: 0; }
  22% { opacity: .5; }
  72% { opacity: .18; }
  100% { background-position: 0 -120%; opacity: 0; }
}

@keyframes amber-beacon {
  0%, 62%, 100% { opacity: .18; }
  63%, 72% { opacity: 1; }
}

@keyframes hologram-float {
  from { translate: 0 5px; opacity: .38; }
  to { translate: 0 -5px; opacity: .62; }
}

@keyframes holo-scan {
  from { translate: 0 -120%; }
  to { translate: 0 540%; }
}

@keyframes holo-meter {
  from { scale: .55 1; transform-origin: left; }
  to { scale: 1 1; transform-origin: left; }
}

@keyframes cryo-leak {
  from { translate: -8px 3px; scale: .78 .7; opacity: .35; }
  to { translate: 12px -4px; scale: 1.2 1; opacity: .85; }
}

@keyframes ground-fog-drift {
  from { translate: -7% 8px; scale: .9; }
  to { translate: 10% -10px; scale: 1.12; }
}

@keyframes heat-haze {
  from { transform: skewX(-2deg) scale(.92, .98); filter: blur(1px); }
  to { transform: skewX(2deg) scale(1.08, 1.02); filter: blur(2.5px); }
}

@keyframes ship-preheat {
  from { transform: translate(-.7px, .2px) rotate(-.08deg); }
  to { transform: translate(.7px, -.2px) rotate(.08deg); }
}

@keyframes launch-screen-shake {
  0%, 100% { transform: translate(0,0) rotate(0); }
  12% { transform: translate(-4px, 2px) rotate(-.08deg); }
  24% { transform: translate(4px, -3px) rotate(.1deg); }
  38% { transform: translate(-3px, -1px) rotate(-.06deg); }
  52% { transform: translate(3px, 3px) rotate(.06deg); }
  68% { transform: translate(-2px, 1px); }
  84% { transform: translate(1px, -1px); }
}

@keyframes launch-flash {
  from { opacity: .7; }
  to { opacity: 0; }
}

@keyframes wet-runway-shimmer {
  from { translate: -2% 0; opacity: .28; }
  to { translate: 3% 0; opacity: .72; }
}

@keyframes wormhole-streaks {
  0% { opacity: 0; scale: .12; rotate: 0deg; }
  18% { opacity: .58; }
  72% { opacity: 1; }
  100% { opacity: 0; scale: 2.8; rotate: 170deg; }
}

@keyframes wormhole-vortex {
  0% { opacity: 0; scale: .18; rotate: 0deg; }
  24% { opacity: .72; }
  100% { opacity: 0; scale: 3.1; rotate: -210deg; }
}

@keyframes wormhole-core {
  0%, 38% { opacity: 0; scale: .08; }
  68% { opacity: 1; scale: 1; }
  100% { opacity: 1; scale: 18; }
}

@keyframes transition-copy-v4 {
  0% { opacity: 0; transform: translateY(18px) scale(.96); }
  18%, 58% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-15px) scale(1.06); }
}

/* Responsive V4 */
@media (max-width: 1080px) {
  .hologram-panel {
    width: 190px;
    opacity: .38;
  }

  .hologram-panel--personal { left: 22px; }
  .hologram-panel--agency { right: 22px; }
}

@media (max-width: 760px) {
  .topbar__actions {
    gap: 5px;
  }

  .icon-control--settings .control-label {
    display: none;
  }

  .global-skip-wrap {
    right: 9px;
    bottom: max(10px, env(safe-area-inset-bottom));
  }

  .global-skip {
    padding: 8px 10px;
    font-size: .48rem;
  }

  .settings-panel {
    top: 68px;
    right: 8px;
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 80px);
    border-radius: 18px;
  }

  .live-sky-card {
    grid-template-columns: 1fr 1fr;
    width: min(92vw, 520px);
    margin-top: 5px;
  }

  .live-sky-card__moon {
    display: none !important;
  }

  .live-sky-card > div:nth-child(2) {
    border-left: 1px solid rgba(var(--accent), .09);
  }

  .live-sky-card > div {
    padding: 6px 8px;
  }

  .live-sky-card strong,
  .live-sky-card b { font-size: .48rem; }
  .live-sky-card__weather > strong { font-size: .85rem; }
  .live-sky-card small { font-size: .42rem; }

  .entry-gate__heading {
    gap: 3px;
  }

  .entry-gate__promise {
    margin-top: 2px;
  }

  .mission-holograms {
    display: none;
  }

  .launch-umbilicals {
    top: 57%;
    width: 210px;
    scale: .72;
  }

  .grid-energy {
    width: 128vw;
  }

  #constellation-canvas {
    inset-bottom: 42%;
    height: 58%;
  }

  .weather-clouds {
    inset-inline: -75%;
  }

  .cryo-stream {
    width: 30vw;
  }

  .cryo-stream--left { left: 20%; }
  .cryo-stream--right { right: 20%; }

  .heat-haze {
    width: 100px;
    height: 135px;
  }

  .portal--creative .portal__hit {
    grid-template-rows: auto auto auto minmax(310px, 1fr) auto auto;
  }

  .portal__subtitle {
    font-size: .42rem;
  }
}

@media (max-height: 700px) and (min-width: 761px) {
  .live-sky-card {
    display: none;
  }

  .hologram-panel {
    display: none;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .live-sky-card,
  .global-skip kbd,
  .settings-panel__note {
    display: none;
  }

  .settings-panel {
    top: 58px;
    max-height: calc(100dvh - 66px);
  }

  .portal--creative .portal__hit {
    grid-template-rows: auto auto auto minmax(180px, 1fr) auto;
  }
}

html[data-motion="reduced"] .weather-clouds i,
html[data-motion="reduced"] .rain-drop,
html[data-motion="reduced"] .lightning-flash,
html[data-motion="reduced"] .wet-lens i,
html[data-motion="reduced"] .float-particle,
html[data-motion="reduced"] .grid-energy,
html[data-motion="reduced"] .hologram-panel,
html[data-motion="reduced"] .hologram-panel__scan,
html[data-motion="reduced"] .cryo-stream,
html[data-motion="reduced"] .ground-fog,
html[data-motion="reduced"] .heat-haze span,
html[data-motion="reduced"] .wormhole-tunnel__streaks,
html[data-motion="reduced"] .wormhole-tunnel__vortex {
  animation: none !important;
}

html[data-motion="reduced"] .heat-haze,
html[data-motion="reduced"] .floating-particles {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .weather-clouds i,
  .rain-drop,
  .lightning-flash,
  .wet-lens i,
  .float-particle,
  .grid-energy,
  .hologram-panel,
  .hologram-panel__scan,
  .cryo-stream,
  .ground-fog,
  .heat-haze span,
  .wormhole-tunnel__streaks,
  .wormhole-tunnel__vortex {
    animation: none !important;
  }
}

body.is-umbilical-retract .umbilical {
  transform: translateX(155px) rotate(-18deg) !important;
  opacity: .34;
}

body.is-umbilical-retract .launch-tower__arm {
  transform: translateX(calc(88% + var(--tower-arm) * 120%)) rotate(-8deg) !important;
}

/* V4 polish: keep live weather values readable without compressing the temperature. */
@media (min-width: 761px) {
  .live-sky-card {
    grid-template-columns: 1.12fr 1.48fr 1fr;
    width: min(720px, 90vw);
  }

  .live-sky-card__weather > strong {
    flex: 0 0 auto;
    min-width: 36px;
    overflow: visible;
    text-overflow: clip;
  }
}

/* V4 portal polish: keep the wormhole readable before the final destination flash. */
.portal-transition::before {
  z-index: 3;
  pointer-events: none;
}

.wormhole-tunnel {
  z-index: 1;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.16) 0 1.5%, rgba(var(--transition-rgb), .22) 3%, transparent 17%),
    radial-gradient(circle at center, #02030a 0 9%, rgba(var(--transition-rgb), .09) 29%, rgba(0,1,7,.88) 72%);
}

.portal-transition__rings { z-index: 2; }
.portal-transition__copy { z-index: 4; }

.wormhole-tunnel__streaks {
  -webkit-mask: radial-gradient(circle, transparent 0 7%, #000 28% 100%);
  mask: radial-gradient(circle, transparent 0 7%, #000 28% 100%);
}

body[data-phase="transition"] .portal-transition::before {
  animation: portal-flash-v4 1.58s cubic-bezier(.13,.73,.16,1) both;
}

@keyframes portal-flash-v4 {
  0%, 66% { opacity: 0; transform: scale(.05); }
  80% { opacity: .52; transform: scale(.8); }
  100% { opacity: 1; transform: scale(35); }
}

.weather-credit {
  justify-self: center;
  margin-top: 2px;
  color: rgba(178, 198, 224, .38);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .42rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-decoration: none;
  transition: color .2s ease;
}

.weather-credit:hover,
.weather-credit:focus-visible {
  color: rgba(var(--accent), .82);
}

@media (max-width: 760px) {
  .weather-credit { font-size: .36rem; }
}

@media (max-height: 700px) and (min-width: 761px), (orientation: landscape) and (max-height: 520px) {
  .weather-credit { display: none; }
}

/* V4.1 — Ignición completa: horizonte solar, mapa holográfico, balizas secuenciales y atmósfera reforzada */
:root {
  --sun-scale: .64;
  --sun-horizon-glow: .24;
  --vapor-drift-x: 18px;
  --atmosphere-density: .68;
  --holo-sun-x: 72%;
  --holo-sun-y: 38%;
  --holo-moon-x: 26%;
  --holo-moon-y: 34%;
  --hover-countdown-progress: 0%;
}

/* The Sun belongs to the distant skyline, never to the runway. */
.medellin-sky {
  isolation: isolate;
}

.celestial-object--sun {
  z-index: 0;
  width: clamp(18px, 2.3vw, 38px);
  mix-blend-mode: normal;
  transform: scale(var(--sun-scale));
  background: radial-gradient(circle at 42% 38%, #fff 0 10%, #fff7ca 20%, #ffc66e 47%, #d97b31 72%, #5c2d18 100%);
  box-shadow:
    0 0 15px rgba(255, 231, 166, .58),
    0 0 48px rgba(255, 148, 66, .25),
    0 0 120px rgba(255, 173, 93, .12);
  filter: saturate(.9) brightness(.98);
}

.celestial-object--sun::after {
  inset: -170%;
  background: radial-gradient(circle, rgba(255, 196, 115, .18), transparent 66%);
}

.sun-horizon-glow {
  position: absolute;
  z-index: 0;
  left: var(--sun-x);
  top: calc(var(--sun-y) + 1.6%);
  width: clamp(130px, 19vw, 330px);
  height: clamp(50px, 8vw, 120px);
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 180, 91, .26), rgba(255, 134, 59, .08) 42%, transparent 72%);
  filter: blur(16px);
  opacity: var(--sun-horizon-glow);
  transition: left 1.8s ease, top 1.8s ease, opacity 1.2s ease;
}

body[data-sun-horizon="below"] .celestial-object--sun {
  opacity: 0 !important;
}

body[data-sun-horizon="horizon"] .celestial-object--sun {
  filter: saturate(.78) brightness(.92) blur(.15px);
}

body[data-sun-horizon="sky"] .sun-horizon-glow {
  filter: blur(24px);
}

/* A dedicated distant-horizon mask guarantees that the solar disc can never sit on the runway. */
.launch-site::after {
  content: "";
  position: absolute;
  z-index: 6;
  left: -2%;
  right: -2%;
  bottom: 0;
  height: 48%;
  pointer-events: none;
  clip-path: polygon(0 29%, 7% 25%, 14% 31%, 22% 17%, 31% 28%, 39% 20%, 48% 31%, 58% 19%, 67% 27%, 76% 15%, 84% 29%, 92% 22%, 100% 30%, 100% 100%, 0 100%);
  background:
    linear-gradient(180deg, rgba(4, 16, 21, .82), rgba(2, 10, 14, .96) 30%, rgba(0, 3, 5, .995));
  filter: saturate(.82);
}

.launch-site__skyline {
  z-index: 5;
}

.launch-site__skyline::after {
  content: "";
  position: absolute;
  z-index: 4;
  left: -5%;
  right: -5%;
  bottom: -2px;
  height: 30%;
  background: linear-gradient(180deg, transparent, rgba(4, 15, 20, .46) 50%, rgba(2, 8, 12, .92));
  filter: blur(1px);
  pointer-events: none;
}

.launch-site__ground {
  z-index: 7;
}

.launch-tower,
.launch-umbilicals,
.mission-holograms,
.launch-floodlights {
  z-index: 12;
}

/* Location bar becomes a compact interactive observatory. */
.entry-gate__heading {
  position: relative;
  overflow: visible;
}

.live-sky-card {
  overflow: visible;
}

.live-sky-card__location {
  position: relative;
  cursor: pointer;
  border-radius: 13px 0 0 13px;
  outline: none;
  transition: background .24s ease, box-shadow .24s ease, color .24s ease;
}

.live-sky-card__location:hover,
.live-sky-card__location:focus-visible,
.live-sky-card__location[aria-expanded="true"] {
  background: rgba(var(--accent), .075);
  box-shadow: inset 0 0 0 1px rgba(var(--accent), .22), 0 0 26px rgba(var(--accent), .07);
}

.live-sky-card__location em {
  margin-left: auto;
  color: rgba(var(--accent), .5);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .4rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .13em;
  opacity: 0;
  translate: -5px 0;
  transition: opacity .2s ease, translate .2s ease;
}

.live-sky-card__location:hover em,
.live-sky-card__location:focus-visible em,
.live-sky-card__location[aria-expanded="true"] em {
  opacity: .9;
  translate: 0 0;
}

.location-hologram {
  position: absolute;
  z-index: 92;
  left: 50%;
  top: calc(100% - 2px);
  width: min(480px, 90vw);
  padding: 14px;
  border: 1px solid rgba(var(--accent), .26);
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(var(--accent), .095), transparent 38%),
    repeating-linear-gradient(0deg, transparent 0 5px, rgba(var(--accent), .018) 5px 6px),
    rgba(2, 9, 18, .9);
  box-shadow: 0 24px 70px rgba(0,0,0,.55), inset 0 0 34px rgba(var(--accent), .05), 0 0 40px rgba(var(--accent), .06);
  backdrop-filter: blur(18px) saturate(1.18);
  color: var(--cyan);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 12px) scale(.96) perspective(900px) rotateX(-4deg);
  transform-origin: top center;
  transition: opacity .24s ease, visibility .24s ease, transform .32s cubic-bezier(.2,.8,.2,1);
  overflow: hidden;
}

.location-hologram.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 3px) scale(1) perspective(900px) rotateX(0);
}

.location-hologram::before,
.location-hologram::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.location-hologram::before {
  inset: 0;
  background: linear-gradient(90deg, rgba(var(--accent), .1), transparent 18% 82%, rgba(var(--accent), .08));
  opacity: .48;
}

.location-hologram::after {
  inset: 7px;
  border: 1px solid rgba(var(--accent), .07);
  border-radius: 11px;
}

.location-hologram__scan {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: -28%;
  height: 24%;
  background: linear-gradient(180deg, transparent, rgba(var(--accent), .16), transparent);
  animation: location-holo-scan 3.2s linear infinite;
}

.location-hologram__head,
.location-hologram__body,
.location-hologram > p {
  position: relative;
  z-index: 2;
}

.location-hologram__head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(var(--accent), .12);
}

.location-hologram__head span {
  display: grid;
  gap: 2px;
}

.location-hologram__head small,
.location-hologram__head strong,
.location-hologram__head b,
.location-hologram > p,
.location-map small,
.location-sky strong,
.location-sky small {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .1em;
}

.location-hologram__head small {
  color: var(--cyan);
  font-size: .46rem;
  font-weight: 900;
}

.location-hologram__head strong {
  color: rgba(235, 247, 255, .8);
  font-size: .63rem;
}

.location-hologram__head b {
  color: rgba(var(--accent), .86);
  font-size: .58rem;
}

.location-hologram__body {
  display: grid;
  grid-template-columns: 1.35fr .8fr;
  gap: 10px;
  padding-top: 10px;
}

.location-map,
.location-sky {
  position: relative;
  min-height: 145px;
  border: 1px solid rgba(var(--accent), .12);
  border-radius: 10px;
  background: rgba(var(--accent), .025);
  overflow: hidden;
}

.location-map svg {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--cyan);
  filter: drop-shadow(0 0 5px rgba(var(--accent), .2));
}

.location-map__valley {
  stroke: rgba(var(--accent), .52);
  stroke-width: 1;
}

.location-map__river,
.location-map__route {
  fill: none;
  stroke-linecap: round;
}

.location-map__river {
  stroke: rgba(98, 205, 255, .68);
  stroke-width: 2;
  filter: drop-shadow(0 0 3px rgba(98,205,255,.7));
}

.location-map__route {
  stroke: rgba(var(--accent), .28);
  stroke-width: 1;
  stroke-dasharray: 5 5;
}

.location-map__grid {
  fill: none;
  stroke: rgba(var(--accent), .07);
  stroke-width: .6;
}

.location-map__city-dot {
  fill: #fff;
  stroke: var(--cyan);
  stroke-width: 2;
  filter: drop-shadow(0 0 5px var(--cyan));
}

.location-map__pulse {
  position: absolute;
  left: 50.7%;
  top: 52.8%;
  width: 14px;
  height: 14px;
  translate: -50% -50%;
  border: 1px solid rgba(var(--accent), .75);
  border-radius: 50%;
  animation: map-pulse 2.2s ease-out infinite;
}

.location-map small {
  position: absolute;
  left: 9px;
  bottom: 7px;
  color: rgba(194, 221, 239, .48);
  font-size: .4rem;
}

.location-sky {
  background:
    radial-gradient(circle at 50% 105%, rgba(var(--accent), .11), transparent 48%),
    linear-gradient(180deg, rgba(3, 15, 31, .8), rgba(1, 6, 14, .96));
}

.location-sky::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.72) 0 1px, transparent 1.35px);
  background-size: 23px 21px;
  opacity: calc(var(--constellation-opacity) * .5 + .08);
}

.location-sky__arc {
  position: absolute;
  left: 50%;
  bottom: 20px;
  width: 150%;
  aspect-ratio: 2 / 1;
  translate: -50% 50%;
  border: 1px dashed rgba(var(--accent), .22);
  border-radius: 50%;
}

.location-sky__horizon {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent), .48), transparent);
  box-shadow: 0 0 8px rgba(var(--accent), .2);
}

.location-sky__sun,
.location-sky__moon {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  translate: -50% -50%;
  transition: left 1.5s ease, top 1.5s ease, opacity 1s ease;
}

.location-sky__sun {
  left: var(--holo-sun-x);
  top: var(--holo-sun-y);
  background: #ffd48a;
  box-shadow: 0 0 8px #ffc067, 0 0 20px rgba(255,163,73,.42);
  opacity: var(--sun-opacity);
}

.location-sky__moon {
  left: var(--holo-moon-x);
  top: var(--holo-moon-y);
  width: 10px;
  height: 10px;
  background: #dfe8f4;
  box-shadow: 0 0 8px rgba(181,214,255,.56);
  opacity: var(--moon-opacity);
}

.location-sky strong {
  position: absolute;
  left: 10px;
  top: 9px;
  color: rgba(224, 242, 255, .7);
  font-size: .45rem;
}

.location-sky small {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 7px;
  color: rgba(var(--accent), .56);
  font-size: .38rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.location-hologram > p {
  margin: 9px 0 0;
  color: rgba(185, 208, 229, .48);
  font-size: .43rem;
  line-height: 1.5;
}

/* Sequential technical lighting — offset, smooth, and never synchronized. */
.launch-tower__beacon {
  animation: beacon-sequence 4.8s ease-in-out infinite;
}

.launch-tower__beacon--service-top {
  top: -5px;
  left: 50%;
  animation-delay: 0s;
}

.launch-tower__beacon--service-mid {
  top: 31%;
  left: 17%;
  width: 5px;
  height: 5px;
  animation-delay: -3.6s;
}

.launch-tower__beacon--service-low {
  top: 66%;
  left: 82%;
  width: 5px;
  height: 5px;
  animation-delay: -2.4s;
}

.launch-tower__beacon--lightning-top {
  top: -5px;
  left: 50%;
  animation-delay: -1.2s;
}

.launch-tower__beacon--lightning-mid {
  top: 49%;
  left: 50%;
  width: 5px;
  height: 5px;
  animation-delay: -4.2s;
}

.launch-tower__warning--amber {
  animation: beacon-sequence-amber 4.8s ease-in-out infinite;
  animation-delay: -3s;
}

/* Denser cold atmosphere around the pad, while keeping the ship readable. */
.launch-vapor-layer {
  opacity: clamp(.38, var(--atmosphere-density), .94);
}

.pad-condensation,
.cryo-plume,
.fog-ribbon {
  position: absolute;
  pointer-events: none;
  mix-blend-mode: screen;
}

.pad-condensation {
  left: 50%;
  bottom: 14.5%;
  width: clamp(240px, 36vw, 560px);
  height: clamp(65px, 11vh, 120px);
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(224, 248, 255, .44), rgba(104, 174, 193, .15) 40%, transparent 72%);
  filter: blur(16px);
  opacity: clamp(.52, var(--atmosphere-density), .84);
  animation: pad-condensation-breathe 2.8s ease-in-out infinite alternate;
}

.pad-condensation--left {
  left: 42%;
  bottom: 12%;
  width: clamp(160px, 22vw, 330px);
  opacity: .48;
  animation-delay: -.8s;
}

.pad-condensation--right {
  left: 58%;
  bottom: 12.5%;
  width: clamp(170px, 23vw, 350px);
  opacity: .5;
  animation-delay: -1.6s;
}

.cryo-plume {
  bottom: 24%;
  width: clamp(120px, 16vw, 235px);
  height: clamp(24px, 4vw, 48px);
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(229, 250, 255, .78) 38%, rgba(137, 210, 231, .28) 68%, transparent);
  filter: blur(8px);
  opacity: .58;
  animation: cryo-plume-flow 1.65s ease-in-out infinite alternate;
}

.cryo-plume--left {
  right: 50%;
  margin-right: 34px;
  transform: rotate(-8deg) translateX(-5px);
  transform-origin: right center;
}

.cryo-plume--right {
  left: 50%;
  margin-left: 34px;
  transform: rotate(8deg) translateX(5px);
  transform-origin: left center;
  animation-delay: -.82s;
}

.fog-ribbon {
  left: -10%;
  bottom: 0;
  width: 120%;
  height: 22%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 22% 70%, rgba(194, 227, 238, .18), transparent 35%),
    radial-gradient(ellipse at 70% 68%, rgba(181, 218, 232, .15), transparent 42%),
    linear-gradient(180deg, transparent, rgba(161, 207, 222, .1));
  filter: blur(24px);
  opacity: .54;
  animation: fog-ribbon-drift 10s ease-in-out infinite alternate;
}

.fog-ribbon--far {
  bottom: 10%;
  height: 16%;
  opacity: .3;
  filter: blur(32px);
  animation-delay: -5s;
}

.fog-ribbon--near {
  opacity: clamp(.38, var(--atmosphere-density), .68);
}

body[data-weather="fog"] .fog-ribbon,
body[data-weather="drizzle"] .fog-ribbon,
body[data-weather="rain"] .fog-ribbon {
  filter: blur(28px) brightness(1.08);
}

body.is-launch-hovering .pad-condensation,
body[data-phase="countdown"] .pad-condensation {
  opacity: .9;
  filter: blur(13px) brightness(1.18);
}

body.is-launch-hovering .cryo-plume,
body[data-phase="countdown"] .cryo-plume {
  opacity: .88;
  filter: blur(7px) brightness(1.2);
}

body[data-phase="gate"] .ship-shadow,
body[data-phase="countdown"] .ship-shadow {
  width: 74%;
  height: 15%;
  bottom: 2%;
  background: radial-gradient(ellipse, rgba(21, 31, 40, .78), rgba(85, 191, 255, .2) 38%, transparent 72%);
  filter: blur(16px);
}

/* A non-committal three-second pre-ignition loop appears only while hovering/focusing. */
.hover-countdown {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  min-width: 164px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 2px 12px;
  padding: 7px 11px 8px;
  border: 1px solid rgba(var(--accent), .18);
  border-radius: 10px;
  background: rgba(2, 9, 18, .72);
  box-shadow: 0 12px 34px rgba(0,0,0,.28), inset 0 0 18px rgba(var(--accent), .035);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 8px) scale(.96);
  transition: opacity .2s ease, visibility .2s ease, transform .24s ease;
}

body.is-launch-hovering .hover-countdown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
}

.hover-countdown > span,
.hover-countdown > strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 900;
  letter-spacing: .14em;
}

.hover-countdown > span {
  color: rgba(190, 214, 235, .5);
  font-size: .39rem;
}

.hover-countdown > strong {
  color: var(--cyan);
  font-size: .66rem;
  text-shadow: 0 0 10px rgba(var(--accent), .42);
}

.hover-countdown > i {
  grid-column: 1 / -1;
  height: 2px;
  overflow: hidden;
  background: rgba(var(--accent), .08);
}

.hover-countdown > i b {
  display: block;
  width: var(--hover-countdown-progress);
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--violet));
  box-shadow: 0 0 7px rgba(var(--accent), .6);
  transition: width .05s linear;
}

@keyframes location-holo-scan {
  from { translate: 0 -120%; }
  to { translate: 0 620%; }
}

@keyframes map-pulse {
  0% { opacity: .85; scale: .35; }
  80%, 100% { opacity: 0; scale: 3.8; }
}

@keyframes beacon-sequence {
  0%, 8%, 100% { opacity: .16; scale: .78; filter: brightness(.65); }
  13% { opacity: 1; scale: 1.18; filter: brightness(1.35); }
  23% { opacity: .52; scale: 1; filter: brightness(1); }
  34% { opacity: .12; scale: .82; filter: brightness(.7); }
}

@keyframes beacon-sequence-amber {
  0%, 48%, 100% { opacity: .12; scale: .8; }
  56% { opacity: 1; scale: 1.16; }
  68% { opacity: .48; scale: 1; }
  80% { opacity: .12; scale: .82; }
}

@keyframes pad-condensation-breathe {
  from { translate: -50% 7px; scale: .86 .72; opacity: .44; }
  to { translate: calc(-50% + var(--vapor-drift-x)) -4px; scale: 1.12 1; opacity: .76; }
}

@keyframes cryo-plume-flow {
  from { opacity: .35; scale: .72 .66; }
  to { opacity: .82; scale: 1.18 1; }
}

@keyframes fog-ribbon-drift {
  from { translate: -10px 8px; scale: .96 1; }
  to { translate: var(--vapor-drift-x) -6px; scale: 1.05 1.08; }
}

@media (max-width: 760px) {
  .celestial-object--sun {
    width: clamp(16px, 5vw, 28px);
  }

  .live-sky-card__location {
    border-radius: 13px 0 0 13px;
  }

  .live-sky-card__location em {
    display: none;
  }

  .location-hologram {
    top: calc(100% + 4px);
    width: min(94vw, 430px);
    padding: 11px;
  }

  .location-hologram__body {
    grid-template-columns: 1fr .72fr;
    gap: 7px;
  }

  .location-map,
  .location-sky {
    min-height: 116px;
  }

  .location-hologram > p {
    display: none;
  }

  .launch-tower__beacon--service-mid,
  .launch-tower__beacon--service-low,
  .launch-tower__beacon--lightning-mid {
    display: none;
  }

  .pad-condensation {
    width: 78vw;
    bottom: 14%;
  }

  .pad-condensation--left,
  .pad-condensation--right {
    width: 48vw;
  }

  .cryo-plume {
    width: 32vw;
    bottom: 23%;
  }
}

@media (hover: none) {
  .hover-countdown {
    display: none;
  }
}

html[data-motion="reduced"] .location-hologram__scan,
html[data-motion="reduced"] .location-map__pulse,
html[data-motion="reduced"] .launch-tower__beacon,
html[data-motion="reduced"] .launch-tower__warning,
html[data-motion="reduced"] .pad-condensation,
html[data-motion="reduced"] .cryo-plume,
html[data-motion="reduced"] .fog-ribbon {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .location-hologram__scan,
  .location-map__pulse,
  .launch-tower__beacon,
  .launch-tower__warning,
  .pad-condensation,
  .cryo-plume,
  .fog-ribbon {
    animation: none !important;
  }
}

/* ================================================================
   V4.2 — IGNITION COMPLETE / LAUNCH CONTROL
   Weather-driven physical atmosphere, functional tower, T−10 launch,
   narrative telemetry, shockwave, volumetric searchlights and parallax.
   ================================================================ */
:root {
  --launch-sequence-progress: 0;
  --core-charge: .08;
  --safety-light-intensity: .35;
  --pad-spin-duration: 18s;
  --telemetry-progress: 0;
  --camera-zoom: 1;
  --camera-pan-x: 0px;
  --camera-pan-y: 0px;
  --camera-roll: 0deg;
  --cinematic-ship-x: 0px;
  --cinematic-ship-roll: 0deg;
  --weather-humidity: .72;
  --weather-star-visibility: .72;
  --weather-day-contrast: 1;
  --particle-wind-x: 0px;
  --particle-wind-y: 0px;
  --parallax-stars-x: 0px;
  --parallax-stars-y: 0px;
  --parallax-mountains-x: 0px;
  --parallax-mountains-y: 0px;
  --parallax-towers-x: 0px;
  --parallax-towers-y: 0px;
  --parallax-ship-x: 0px;
  --parallax-ship-y: 0px;
  --parallax-hud-x: 0px;
  --parallax-hud-y: 0px;
}

/* Physical weather: data no longer behaves like a detached widget. */
.medellin-sky {
  translate: var(--parallax-stars-x) var(--parallax-stars-y);
  transition: translate .18s ease-out, filter .8s ease, opacity .8s ease;
}

#constellation-canvas {
  opacity: calc(var(--constellation-opacity, .5) * var(--weather-star-visibility));
}

.launch-site__skyline {
  translate: var(--parallax-mountains-x) var(--parallax-mountains-y);
  transition: translate .18s ease-out, filter .7s ease, opacity .7s ease;
}

.launch-tower,
.launch-umbilicals,
.launch-ops-panel,
.mission-holograms,
.launch-floodlights {
  translate: var(--parallax-towers-x) var(--parallax-towers-y);
  transition: translate .17s ease-out, opacity .45s ease, filter .45s ease;
}

.entry-gate__content {
  translate: var(--parallax-hud-x) var(--parallax-hud-y);
  transition: translate .16s ease-out, opacity .55s ease, transform .65s cubic-bezier(.2,.72,.2,1);
}

.floating-particles,
.launch-vapor-layer {
  translate: var(--particle-wind-x) var(--particle-wind-y);
  transition: translate 1.2s ease-out, opacity .45s ease;
}

.launch-vapor-layer {
  opacity: clamp(.42, calc(var(--atmosphere-density) + var(--weather-humidity) * .16), 1);
}

.launch-site__ground::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 4%, rgba(211, 242, 250, calc(var(--weather-humidity) * .10)), transparent 42%),
    linear-gradient(180deg, transparent 0 42%, rgba(146, 199, 214, calc(var(--weather-humidity) * .08)) 100%);
  opacity: calc(.25 + var(--weather-humidity) * .6);
  filter: blur(calc(3px + var(--weather-humidity) * 5px));
  mix-blend-mode: screen;
}

body[data-daylight="day"] .launch-tower,
body[data-daylight="day"] .launch-pad,
body[data-daylight="day"] .mission-holograms {
  filter: saturate(.82) brightness(.88) drop-shadow(0 12px 14px rgba(0,0,0,.58));
}

body[data-daylight="day"] .launch-site__ground {
  box-shadow: inset 0 1px rgba(183, 231, 239, .2), 0 -30px 65px rgba(0, 8, 14, .34);
}

body[data-daylight="night"] .launch-pad,
body[data-daylight="night"] .ship-layer {
  filter: brightness(1.08) drop-shadow(0 24px 42px rgba(0,0,0,.72)) drop-shadow(0 0 16px rgba(var(--accent), .18));
}

body[data-weather="rain"] .wet-lens,
body[data-weather="storm"] .wet-lens,
body[data-weather="drizzle"] .wet-lens {
  opacity: clamp(.12, calc(var(--weather-rain) * .9), .76);
}

body[data-weather="rain"] .launch-runway,
body[data-weather="storm"] .launch-runway,
body[data-weather="drizzle"] .launch-runway {
  filter: saturate(1.08) contrast(1.12);
  box-shadow: 0 0 54px rgba(70, 203, 232, .12), inset 0 -60px 70px rgba(120, 223, 255, calc(var(--weather-wetness) * .12));
}

/* Explicit cryogenic vent points: four independent puffs plus larger cycles. */
.cryo-vent {
  position: absolute;
  z-index: 2;
  bottom: 25.5%;
  width: clamp(74px, 9vw, 145px);
  height: clamp(20px, 2.8vw, 42px);
  border-radius: 50%;
  pointer-events: none;
  opacity: .48;
  mix-blend-mode: screen;
  filter: blur(7px);
  background: linear-gradient(90deg, transparent, rgba(231, 250, 255, .78) 42%, rgba(111, 199, 224, .25) 72%, transparent);
  transform-origin: center;
  animation: cryo-vent-puff 3.7s ease-in-out infinite;
}

.cryo-vent--1 { right: calc(50% + 26px); rotate: -11deg; animation-delay: -.4s; }
.cryo-vent--2 { left: calc(50% + 24px); rotate: 9deg; animation-delay: -1.7s; }
.cryo-vent--3 { right: calc(50% + 72px); bottom: 28%; scale: .72; rotate: -5deg; animation-delay: -2.8s; }
.cryo-vent--4 { left: calc(50% + 70px); bottom: 27%; scale: .76; rotate: 6deg; animation-delay: -3.35s; }

body.is-cryo-burst .cryo-vent {
  animation-duration: .72s;
  opacity: .92;
  filter: blur(8px) brightness(1.28);
}

body.is-cryo-burst .pad-condensation,
body.is-cryo-burst .cryo-plume {
  opacity: 1;
  filter: blur(12px) brightness(1.2);
  scale: 1.18 1.08;
}

/* Tower is now a functional launch system rather than scenery. */
.launch-ops-panel {
  position: absolute;
  z-index: 12;
  right: calc(50% - min(38vw, 560px));
  bottom: 33%;
  width: clamp(188px, 15vw, 246px);
  padding: 9px 10px 10px;
  border: 1px solid rgba(var(--accent), .17);
  border-radius: 10px;
  background: linear-gradient(150deg, rgba(3, 14, 22, .86), rgba(5, 13, 23, .48));
  box-shadow: 0 16px 45px rgba(0,0,0,.34), inset 0 0 22px rgba(var(--accent), .035);
  backdrop-filter: blur(9px);
  color: rgba(209, 236, 248, .7);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  opacity: .78;
}

.launch-ops-panel__head,
.launch-ops-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.launch-ops-panel__head {
  padding-bottom: 6px;
  margin-bottom: 5px;
  border-bottom: 1px solid rgba(var(--accent), .1);
  color: rgba(222, 244, 255, .74);
  font-size: .42rem;
  font-weight: 900;
  letter-spacing: .12em;
}

.launch-ops-panel__head b {
  color: var(--cyan);
  text-shadow: 0 0 9px rgba(var(--accent), .45);
}

.launch-ops-row {
  min-height: 18px;
  color: rgba(177, 203, 220, .5);
  font-size: .38rem;
  letter-spacing: .09em;
  transition: color .25s ease, transform .25s ease, background .25s ease;
}

.launch-ops-row b {
  color: rgba(155, 243, 255, .7);
  font-size: .36rem;
  letter-spacing: .08em;
}

.launch-ops-row.is-released {
  color: rgba(205, 222, 232, .4);
  transform: translateX(3px);
}

.launch-ops-row.is-released b {
  color: #ffba72;
}

body[data-launch-stage="umbilicals"] .launch-ops-panel,
body[data-launch-stage="vapor"] .launch-ops-panel,
body[data-launch-stage="core"] .launch-ops-panel {
  opacity: 1;
  border-color: rgba(var(--accent), .38);
}

/* Minimal idle GO status: one panel, four rotating checks. */
.launch-status-card {
  width: min(660px, 88vw);
  margin: 7px auto 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid rgba(var(--accent), .13);
  border-radius: 12px;
  background: rgba(2, 10, 18, .38);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 0 20px rgba(var(--accent), .025);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  transition: opacity .35s ease, transform .45s ease, filter .35s ease;
}

.launch-status-card__primary {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.launch-status-card__primary > i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 13px rgba(var(--accent), .84);
  animation: go-status-pulse 1.9s ease-in-out infinite;
}

.launch-status-card__primary span {
  display: grid;
  gap: 1px;
}

.launch-status-card__primary small,
.launch-status-card__primary strong {
  font-weight: 900;
  letter-spacing: .13em;
}

.launch-status-card__primary small { color: rgba(184, 205, 219, .42); font-size: .36rem; }
.launch-status-card__primary strong { color: var(--cyan); font-size: .52rem; text-shadow: 0 0 9px rgba(var(--accent), .28); }

.launch-status-card__systems {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.launch-status-card__systems span {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 4px 5px;
  border: 1px solid rgba(var(--accent), .06);
  border-radius: 6px;
  color: rgba(188, 210, 224, .32);
  font-size: .33rem;
  font-weight: 800;
  letter-spacing: .08em;
  transition: color .25s ease, border-color .25s ease, background .25s ease, transform .25s ease;
}

.launch-status-card__systems span em { color: rgba(190, 211, 225, .22); font-style: normal; }
.launch-status-card__systems span.is-go { color: rgba(214, 237, 246, .62); }
.launch-status-card__systems span.is-go em { color: var(--cyan); }
.launch-status-card__systems span.is-active {
  border-color: rgba(var(--accent), .28);
  background: rgba(var(--accent), .045);
  transform: translateY(-1px);
}

/* T−10 control sequence: subtle until the final three seconds. */
.launch-sequence-panel {
  position: fixed;
  z-index: 44;
  left: 50%;
  top: 46%;
  width: min(340px, 84vw);
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 13px 16px 14px;
  border: 1px solid rgba(var(--accent), .22);
  border-radius: 14px;
  background: linear-gradient(155deg, rgba(2, 11, 20, .86), rgba(7, 14, 29, .58));
  box-shadow: 0 22px 70px rgba(0,0,0,.45), inset 0 0 28px rgba(var(--accent), .045);
  backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 20px) scale(.96);
  transition: opacity .35s ease, visibility .35s ease, transform .55s cubic-bezier(.2,.72,.2,1);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-align: center;
}

body[data-phase="countdown"] .launch-sequence-panel {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0) scale(1);
}

.launch-sequence-panel__eyebrow {
  color: rgba(190, 217, 232, .46);
  font-size: .43rem;
  font-weight: 900;
  letter-spacing: .24em;
  text-indent: .24em;
}

#launch-sequence-timer {
  color: #eefcff;
  font-size: clamp(1.45rem, 3vw, 2.25rem);
  line-height: 1;
  letter-spacing: .13em;
  text-indent: .13em;
  text-shadow: 0 0 22px rgba(var(--accent), .42);
}

#launch-sequence-status {
  min-height: 1.2em;
  color: var(--cyan);
  font-size: .48rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-indent: .14em;
}

.launch-sequence-panel > i {
  width: 100%;
  height: 2px;
  overflow: hidden;
  background: rgba(var(--accent), .08);
}

.launch-sequence-panel > i b {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--cyan), var(--violet), #fff);
  box-shadow: 0 0 12px rgba(var(--accent), .72);
}

body[data-phase="countdown"] .countdown-stage {
  opacity: 0;
  visibility: hidden;
  background: radial-gradient(circle, rgba(var(--accent), .09), transparent 30%);
  transition: opacity .25s ease, visibility .25s ease;
}

body[data-phase="countdown"][data-countdown-visible="true"] .countdown-stage {
  opacity: 1;
  visibility: visible;
}

body[data-phase="countdown"] #countdown-number {
  font-size: clamp(4rem, 10vw, 7rem);
  letter-spacing: -.05em;
}

body[data-phase="countdown"] #countdown-number.is-launch {
  font-size: clamp(2rem, 6vw, 4.4rem);
  letter-spacing: .02em;
}

body[data-phase="countdown"] #countdown-label {
  font-size: clamp(.55rem, 1.2vw, .8rem);
  letter-spacing: .25em;
}

body[data-launch-second="1"] .launch-sequence-panel {
  opacity: .55;
  filter: saturate(.65);
}

/* Brand yields the focal point to the vehicle once the sequence starts. */
body[data-phase="countdown"].is-launch-sequence-active .entry-gate {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: none;
}

body.is-launch-sequence-active .entry-gate__heading {
  opacity: .24;
  transform: translateY(-16px) scale(.985);
  filter: saturate(.72);
  transition: opacity .7s ease, transform .85s cubic-bezier(.2,.7,.2,1), filter .7s ease;
}

body.is-launch-sequence-active .entry-gate__actions {
  opacity: .18;
  transform: translateY(8px) scale(.98);
  pointer-events: none;
  transition: opacity .35s ease, transform .55s ease;
}

body.is-interfaces-muted .entry-gate__heading,
body.is-interfaces-muted .entry-gate__actions,
body.is-interfaces-muted .launch-ops-panel,
body.is-interfaces-muted .mission-holograms,
body.is-interfaces-muted .launch-status-card,
body.is-interfaces-muted .weather-credit {
  opacity: 0 !important;
  visibility: hidden;
}

.primary-button:disabled,
.silent-link:disabled {
  cursor: default;
}

.primary-button:disabled {
  border-color: rgba(var(--accent), .34);
  background: rgba(var(--accent), .08);
  box-shadow: 0 0 32px rgba(var(--accent), .09), inset 0 0 24px rgba(var(--accent), .045);
}

/* Guidance lights converge visually on the launch pad from T−5. */
.runway-guidance-lights {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: 8.5%;
  width: min(66vw, 970px);
  height: 32%;
  transform: translateX(-50%) perspective(500px) rotateX(58deg);
  transform-origin: center bottom;
  pointer-events: none;
  opacity: .35;
}

.runway-guidance-lights > span {
  position: absolute;
  bottom: 0;
  width: 46%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.runway-guidance-lights__left { left: 0; transform: skewX(12deg); }
.runway-guidance-lights__right { right: 0; transform: skewX(-12deg); }

.runway-guidance-lights i {
  width: clamp(3px, .42vw, 6px);
  height: clamp(3px, .42vw, 6px);
  border-radius: 50%;
  background: rgba(184, 247, 255, .48);
  box-shadow: 0 0 7px rgba(var(--accent), .34);
  opacity: .25;
}

body.is-runway-guidance .runway-guidance-lights,
body[data-launch-stage="core"] .runway-guidance-lights,
body[data-launch-stage="rumble"] .runway-guidance-lights,
body[data-launch-stage="commit"] .runway-guidance-lights {
  opacity: 1;
}

body.is-runway-guidance .runway-guidance-lights i,
body[data-launch-stage="core"] .runway-guidance-lights i,
body[data-launch-stage="rumble"] .runway-guidance-lights i,
body[data-launch-stage="commit"] .runway-guidance-lights i {
  animation: runway-light-chase 1.35s ease-in-out infinite;
}

.runway-guidance-lights i:nth-child(2) { animation-delay: .08s !important; }
.runway-guidance-lights i:nth-child(3) { animation-delay: .16s !important; }
.runway-guidance-lights i:nth-child(4) { animation-delay: .24s !important; }
.runway-guidance-lights i:nth-child(5) { animation-delay: .32s !important; }
.runway-guidance-lights i:nth-child(6) { animation-delay: .40s !important; }
.runway-guidance-lights i:nth-child(7) { animation-delay: .48s !important; }
.runway-guidance-lights i:nth-child(8) { animation-delay: .56s !important; }

/* Functional circular platform: speed follows the countdown. */
.launch-pad__ring--outer {
  animation: launch-pad-orbit var(--pad-spin-duration) linear infinite;
}

.launch-pad__ring--inner {
  animation: launch-pad-orbit-reverse calc(var(--pad-spin-duration) * .72) linear infinite;
}

.launch-pad::after {
  opacity: calc(.14 + var(--core-charge) * .86);
  scale: calc(.82 + var(--core-charge) * .28);
  filter: brightness(calc(.75 + var(--core-charge) * .75));
}

body[data-launch-stage="ignition"] .launch-pad__ring {
  opacity: 0;
  scale: 1.25;
  transition: opacity .25s ease, scale .35s ease;
}

body[data-launch-stage="ignition"] .launch-pad {
  box-shadow: 0 10px 32px rgba(0,0,0,.82), inset 0 0 42px rgba(255,255,255,.19), 0 0 90px rgba(var(--accent), .46);
}

/* Sequential ignition: light → flame → deluge → pressure wave → particles. */
.ignition-underlight {
  position: absolute;
  z-index: 10;
  left: 50%;
  bottom: 25%;
  width: clamp(90px, 14vw, 210px);
  height: clamp(45px, 7vw, 110px);
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,255,255,.98), rgba(99,234,255,.72) 24%, rgba(92,80,255,.22) 55%, transparent 75%);
  filter: blur(10px);
  opacity: 0;
  scale: .25;
  pointer-events: none;
  mix-blend-mode: screen;
}

body.is-ignition-underlight .ignition-underlight {
  opacity: 1;
  scale: 1;
  transition: opacity .16s ease, scale .3s cubic-bezier(.18,.7,.2,1.2);
}

body.is-ignition-flame .ship__flames {
  filter: brightness(1.6) saturate(1.32) drop-shadow(0 0 15px rgba(128,244,255,.82));
}

body.is-deluge-burst .launch-vapor-layer {
  opacity: 1;
  filter: brightness(1.12);
}

body.is-deluge-burst .pad-condensation {
  scale: 1.5 1.28;
  filter: blur(18px) brightness(1.25);
}

.ground-shockwave {
  position: absolute;
  z-index: 11;
  left: 50%;
  bottom: 29%;
  width: 90px;
  aspect-ratio: 1;
  translate: -50% 50%;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
}

.ground-shockwave i {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(var(--accent), .9);
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(var(--accent), .45), inset 0 0 12px rgba(var(--accent), .2);
}

.ground-shockwave i:nth-child(2) { border-color: rgba(255,255,255,.55); }

body.is-shockwave-active .ground-shockwave {
  opacity: 1;
}

body.is-shockwave-active .ground-shockwave i:first-child {
  animation: ground-shockwave 1.25s cubic-bezier(.12,.65,.18,1) both;
}

body.is-shockwave-active .ground-shockwave i:nth-child(2) {
  animation: ground-shockwave 1.05s .16s cubic-bezier(.12,.65,.18,1) both;
}

body.is-shockwave-active .launch-tower,
body.is-shockwave-active .launch-floodlights {
  animation: tower-pressure-hit .42s ease-out both;
}

.ignition-particles {
  position: absolute;
  z-index: 13;
  left: 50%;
  bottom: 27%;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.ignition-particles i {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--spark-size);
  height: var(--spark-size);
  border-radius: 50%;
  background: #e9feff;
  box-shadow: 0 0 8px rgba(var(--accent), .82);
  opacity: 0;
}

body.is-ignition-particles .ignition-particles i {
  animation: ignition-spark var(--spark-duration) var(--spark-delay) cubic-bezier(.18,.62,.2,1) both;
}

body.is-preignition-rumble #mission {
  animation: preignition-rumble .12s linear infinite;
}

body.is-ignition-impact #mission {
  animation: ignition-camera-shake .65s cubic-bezier(.1,.7,.2,1) both;
}

/* Safety beacons intensify and remain sequential, never simultaneous. */
body[data-launch-stage="safety"] .launch-tower__beacon,
body[data-launch-stage="umbilicals"] .launch-tower__beacon,
body[data-launch-stage="vapor"] .launch-tower__beacon,
body[data-launch-stage="core"] .launch-tower__beacon,
body[data-launch-stage="rumble"] .launch-tower__beacon,
body[data-launch-stage="commit"] .launch-tower__beacon {
  filter: brightness(calc(.8 + var(--safety-light-intensity) * .8));
  box-shadow: 0 0 calc(6px + var(--safety-light-intensity) * 10px) currentColor;
  animation-duration: 2.8s;
}

/* Volumetric platform searchlights: idle scan, then converge on the ship. */
.launch-floodlights span::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 1px;
  width: clamp(70px, 9vw, 140px);
  height: clamp(180px, 32vh, 360px);
  transform-origin: 50% 100%;
  translate: -50% 0;
  clip-path: polygon(46% 100%, 54% 100%, 100% 0, 0 0);
  background: linear-gradient(180deg, rgba(209,249,255,0), rgba(168,234,255,.04) 30%, rgba(172,239,255,.13));
  filter: blur(6px);
  opacity: .26;
  mix-blend-mode: screen;
  animation: floodlight-search 7.5s ease-in-out infinite alternate;
}

.launch-floodlights span:nth-child(2)::before { animation-delay: -3.7s; }
.launch-floodlights--right span::before { animation-direction: alternate-reverse; }

body[data-phase="countdown"] .launch-floodlights span::before,
body.is-runway-guidance .launch-floodlights span::before {
  animation: floodlight-lock 1.1s ease-out both;
  opacity: .58;
  filter: blur(5px) brightness(1.25);
}

body[data-daylight="day"] .launch-floodlights span::before { opacity: .11; }
body[data-daylight="night"] .launch-floodlights span::before { opacity: .43; }

/* Weather HUD becomes narrative flight telemetry after liftoff. */
.flight-telemetry-card {
  position: fixed;
  z-index: 38;
  left: clamp(18px, 4vw, 68px);
  top: clamp(92px, 16vh, 155px);
  width: min(310px, 38vw);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 12px;
  padding: 12px 13px;
  border: 1px solid rgba(var(--accent), .2);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(3,13,23,.82), rgba(5,13,27,.48));
  box-shadow: 0 18px 58px rgba(0,0,0,.35), inset 0 0 24px rgba(var(--accent), .035);
  backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(.97);
  transition: opacity .45s ease, visibility .45s ease, transform .65s cubic-bezier(.2,.72,.2,1);
  pointer-events: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

body[data-phase="flight"] .flight-telemetry-card {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.flight-telemetry-card > div {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 5px 6px;
  border-left: 1px solid rgba(var(--accent), .12);
}

.flight-telemetry-card span {
  color: rgba(177, 204, 220, .42);
  font-size: .38rem;
  font-weight: 900;
  letter-spacing: .13em;
}

.flight-telemetry-card strong {
  overflow: hidden;
  color: #e7fbff;
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .07em;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 0 8px rgba(var(--accent), .24);
}

.flight-telemetry-card > div:nth-last-child(-n + 2) strong { color: var(--cyan); }

body[data-phase="flight"] .live-sky-card,
body[data-phase="flight"] .launch-status-card,
body[data-phase="flight"] .weather-credit {
  opacity: 0 !important;
  visibility: hidden;
  transform: translateY(-10px) scale(.97);
}

/* Smooth camera choreography: CSS variables are updated per flight frame. */
.launch-site {
  transform:
    translate3d(var(--camera-pan-x), var(--camera-pan-y), 0)
    scale(var(--camera-zoom))
    rotate(var(--camera-roll));
  transition: opacity .35s linear, visibility .35s linear, filter .2s ease;
}

.ship-layer {
  transform:
    translate(-50%, -50%)
    translateX(var(--ship-x))
    translateY(var(--ship-y))
    translateX(var(--parallax-ship-x))
    translateY(var(--parallax-ship-y))
    translateX(var(--cinematic-ship-x))
    scale(var(--ship-scale))
    rotateZ(calc(var(--ship-roll) + var(--cinematic-ship-roll)))
    rotateX(var(--ship-tilt-x))
    rotateY(var(--ship-tilt-y));
}

.heat-haze {
  transform:
    translate(-50%, -8%)
    translateX(var(--ship-x))
    translateY(var(--ship-y))
    translateX(var(--parallax-ship-x))
    translateY(var(--parallax-ship-y))
    translateX(var(--cinematic-ship-x))
    scale(var(--ship-scale));
}

/* Keyframes */
@keyframes cryo-vent-puff {
  0%, 12% { opacity: .12; scale: .46 .4; translate: 0 5px; }
  26% { opacity: .78; scale: 1 .78; }
  58% { opacity: .42; scale: 1.22 1; translate: var(--vapor-drift-x) -4px; }
  100% { opacity: 0; scale: 1.55 1.2; translate: calc(var(--vapor-drift-x) * 1.4) -8px; }
}

@keyframes go-status-pulse {
  0%, 100% { opacity: .58; scale: .82; }
  45% { opacity: 1; scale: 1.12; }
}

@keyframes runway-light-chase {
  0%, 34%, 100% { opacity: .14; filter: brightness(.7); scale: .78; }
  48% { opacity: 1; filter: brightness(1.65); scale: 1.28; box-shadow: 0 0 14px rgba(var(--accent), .86); }
  68% { opacity: .42; scale: 1; }
}

@keyframes launch-pad-orbit {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes launch-pad-orbit-reverse {
  to { transform: translate(-50%, -50%) rotate(-360deg); }
}

@keyframes ground-shockwave {
  0% { opacity: .9; transform: scale(.45); filter: blur(0); }
  65% { opacity: .38; }
  100% { opacity: 0; transform: scale(15); filter: blur(1.6px); }
}

@keyframes tower-pressure-hit {
  0% { translate: var(--parallax-towers-x) var(--parallax-towers-y); }
  24% { translate: calc(var(--parallax-towers-x) - 2px) calc(var(--parallax-towers-y) + 1px); }
  48% { translate: calc(var(--parallax-towers-x) + 2px) calc(var(--parallax-towers-y) - 1px); }
  100% { translate: var(--parallax-towers-x) var(--parallax-towers-y); }
}

@keyframes ignition-spark {
  0% { opacity: 0; transform: translate(0, 0) scale(.25); }
  14% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--spark-x), var(--spark-y)) scale(1); }
}

@keyframes preignition-rumble {
  0%, 100% { translate: 0 0; }
  25% { translate: .6px -.45px; }
  50% { translate: -.55px .4px; }
  75% { translate: .35px .55px; }
}

@keyframes ignition-camera-shake {
  0% { transform: translate3d(0,0,0) rotate(0); }
  12% { transform: translate3d(-3px,2px,0) rotate(-.08deg); }
  24% { transform: translate3d(3px,-2px,0) rotate(.08deg); }
  38% { transform: translate3d(-2px,-1px,0) rotate(-.05deg); }
  52% { transform: translate3d(2px,1px,0) rotate(.04deg); }
  70% { transform: translate3d(-1px,1px,0); }
  100% { transform: translate3d(0,0,0); }
}

@keyframes floodlight-search {
  0% { rotate: -8deg; opacity: .18; }
  50% { rotate: 5deg; opacity: .34; }
  100% { rotate: 11deg; opacity: .22; }
}

@keyframes floodlight-lock {
  from { rotate: 9deg; opacity: .24; }
  to { rotate: 0deg; opacity: .62; }
}

/* Responsive adaptation: retain the launch story without clutter. */
@media (max-width: 980px) {
  .launch-ops-panel { right: 2.2vw; width: 184px; }
  .flight-telemetry-card { width: min(280px, 42vw); }
}

@media (max-width: 760px) {
  .launch-ops-panel { display: none; }
  .launch-status-card {
    width: min(94vw, 440px);
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 7px 9px;
  }
  .launch-status-card__primary { justify-content: center; }
  .launch-status-card__systems span { font-size: .29rem; padding: 3px; }
  .launch-sequence-panel { top: 45%; width: min(84vw, 310px); }
  .runway-guidance-lights { width: 88vw; bottom: 8%; }
  .flight-telemetry-card {
    left: 10px;
    top: 84px;
    width: min(292px, calc(100vw - 20px));
    gap: 3px 7px;
    padding: 9px;
  }
  .flight-telemetry-card span { font-size: .32rem; }
  .flight-telemetry-card strong { font-size: .47rem; }
  .cryo-vent { bottom: 24%; width: 25vw; }
  body[data-phase="countdown"] #countdown-number { font-size: clamp(3.2rem, 18vw, 5.2rem); }
}

@media (hover: none) {
  .launch-status-card__systems span.is-active { transform: none; }
}

html[data-motion="reduced"] .cryo-vent,
html[data-motion="reduced"] .launch-pad__ring,
html[data-motion="reduced"] .launch-status-card__primary > i,
html[data-motion="reduced"] .launch-floodlights span::before,
html[data-motion="reduced"] .runway-guidance-lights i,
html[data-motion="reduced"] .ground-shockwave i,
html[data-motion="reduced"] .ignition-particles i,
html[data-motion="reduced"] body.is-preignition-rumble #mission,
html[data-motion="reduced"] body.is-ignition-impact #mission {
  animation: none !important;
}

html[data-motion="reduced"] .launch-site,
html[data-motion="reduced"] .ship-layer,
html[data-motion="reduced"] .entry-gate__content,
html[data-motion="reduced"] .medellin-sky,
html[data-motion="reduced"] .launch-site__skyline,
html[data-motion="reduced"] .launch-tower {
  translate: 0 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .cryo-vent,
  .launch-pad__ring,
  .launch-status-card__primary > i,
  .launch-floodlights span::before,
  .runway-guidance-lights i,
  .ground-shockwave i,
  .ignition-particles i {
    animation: none !important;
  }
}

/* V4.2.1 — estabilidad visual, jerarquía cinematográfica y adaptación por altura. */
body[data-phase="destinations"] .entry-gate,
body[data-phase="transition"] .entry-gate,
body[data-phase="destinations"] .countdown-stage,
body[data-phase="transition"] .countdown-stage,
body[data-phase="destinations"] .launch-sequence-panel,
body[data-phase="transition"] .launch-sequence-panel,
body[data-phase="destinations"] .flight-telemetry-card,
body[data-phase="transition"] .flight-telemetry-card {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: none !important;
}

body[data-phase="destinations"] .launch-site,
body[data-phase="transition"] .launch-site,
body[data-phase="destinations"] .launch-vapor-layer,
body[data-phase="transition"] .launch-vapor-layer,
body[data-phase="destinations"] .heat-haze,
body[data-phase="transition"] .heat-haze {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* During flight there is already a contextual “Saltar viaje” control. */
body[data-phase="flight"] .global-skip-wrap {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* The technical panel carries the copy; the final numeral becomes an atmospheric beat. */
body[data-phase="countdown"][data-countdown-visible="true"].is-launch-sequence-active .countdown-stage__copy {
  transform: translateY(clamp(128px, 22vh, 205px));
}

body[data-phase="countdown"][data-countdown-visible="true"].is-launch-sequence-active #countdown-number {
  opacity: .56;
  text-shadow: 0 0 34px rgba(121,244,255,.52), 0 20px 70px rgba(0,0,0,.92);
}

body[data-phase="countdown"][data-countdown-visible="true"].is-launch-sequence-active #countdown-label {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
}

body[data-launch-stage="ignition"] #countdown-number.is-launch {
  opacity: .82;
  font-size: clamp(2rem, 5.2vw, 4rem);
  letter-spacing: .08em;
  text-indent: .08em;
}

@media (min-width: 761px) and (max-height: 950px) {
  .destination-stage {
    gap: 2px;
    padding-top: clamp(72px, 8.5vh, 86px);
  }

  .destination-heading h2 {
    font-size: clamp(1.9rem, 4.1vw, 3.85rem);
  }

  .portal__hit {
    grid-template-rows: auto auto minmax(230px, 40vh) auto auto;
  }

  .portal__visual {
    width: clamp(250px, min(28vw, 40vh), 420px);
    max-height: 40vh;
  }

  .portal__description {
    min-height: 2.4em;
  }
}

@media (max-width: 760px) {
  body[data-phase="gate"] .entry-gate__actions {
    margin-bottom: max(50px, calc(42px + env(safe-area-inset-bottom)));
  }

  body[data-phase="countdown"][data-countdown-visible="true"].is-launch-sequence-active .countdown-stage__copy {
    transform: translateY(clamp(112px, 19vh, 165px));
  }
}

@media (max-width: 760px) and (max-height: 760px) {
  .destination-stage {
    padding-top: 60px;
  }

  .destination-heading h2 {
    font-size: clamp(1.65rem, 9.5vw, 2.7rem);
  }

  .destination-instruction {
    font-size: .6rem;
  }

  .portal__hit {
    grid-template-rows: auto auto minmax(220px, 36vh) auto auto;
  }

  .portal__visual {
    width: min(76vw, 330px);
    max-height: 36vh;
  }

  .portal__description {
    min-height: 2.2em;
    font-size: .64rem;
  }
}

html[data-motion="reduced"] body[data-phase="countdown"][data-countdown-visible="true"].is-launch-sequence-active #countdown-number {
  animation: none !important;
  opacity: .56;
  transform: none;
  filter: none;
}

/* El control interno de movimiento reducido también elimina transiciones prolongadas. */
html[data-motion="reduced"] *,
html[data-motion="reduced"] *::before,
html[data-motion="reduced"] *::after {
  transition-duration: .001ms !important;
  transition-delay: 0s !important;
}


/* V4.3 — viaje cinematográfico continuo, ubicación opcional y estabilidad de compositor. */
:root {
  --surface-drop: 0vh;
  --surface-scale: 1;
  --cloud-pass-opacity: 0;
  --atmosphere-progress: 0;
  --arrival-progress: 0;
  --portal-travel-progress: 0;
  --destination-ship-x: 0px;
  --destination-ship-roll: 0deg;
}

/* El canvas conserva su tratamiento cromático dentro del shader, no mediante filtros CSS de pantalla completa. */
#space-canvas {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Los paneles dejan de recalcular desenfoque del fondo en el momento más exigente. */
body[data-phase="countdown"] .launch-sequence-panel,
body[data-phase="countdown"] .launch-status-card,
body[data-phase="countdown"] .launch-ops-panel,
body[data-phase="countdown"] .live-sky-card,
body[data-phase="countdown"] .flight-telemetry-card,
body[data-phase="flight"] .flight-telemetry-card,
body[data-phase="arrival"] .flight-telemetry-card {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background-color: rgba(3, 9, 19, .88);
}

.settings-panel,
.live-sky-card,
.launch-sequence-panel,
.launch-status-card,
.launch-ops-panel,
.flight-telemetry-card {
  contain: layout paint style;
}

body[data-phase="countdown"] .ship-layer,
body[data-phase="countdown"] .launch-site,
body[data-phase="flight"] .ship-layer,
body[data-phase="flight"] .launch-site,
body[data-phase="arrival"] .ship-layer,
body[data-phase="transition"] .portal-transition {
  will-change: transform, opacity;
}

/* Ubicación real, siempre opcional y solicitada únicamente desde el panel de control. */
.settings-group--location {
  display: grid;
  gap: 9px;
}

.location-setting__status,
.location-setting__privacy {
  margin: 0;
  color: rgba(201, 218, 237, .65);
  font-size: .68rem;
  line-height: 1.45;
}

.location-setting__status[data-state="locationDenied"],
.location-setting__status[data-state="locationUnavailable"],
.location-setting__status[data-state="locationInsecure"] {
  color: #ffd49a;
}

.location-setting__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.location-choice {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(var(--accent), .16);
  border-radius: 12px;
  background: rgba(3, 10, 21, .62);
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  text-align: left;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
}

.location-choice:hover,
.location-choice:focus-visible,
.location-choice.is-active {
  border-color: rgba(var(--accent), .54);
  background: rgba(var(--accent), .09);
  transform: translateY(-1px);
}

.location-choice:disabled {
  cursor: wait;
  opacity: .62;
}

.location-choice > i {
  width: 7px;
  height: 7px;
  margin-top: 4px;
  border: 1px solid rgba(var(--accent), .72);
  border-radius: 50%;
  box-shadow: 0 0 9px rgba(var(--accent), .24);
}

.location-choice.is-active > i {
  background: var(--cyan);
  box-shadow: 0 0 12px rgba(var(--accent), .75);
}

.location-choice span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.location-choice strong {
  color: #eafcff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .58rem;
  letter-spacing: .08em;
}

.location-choice small {
  color: rgba(181, 201, 223, .48);
  font-size: .55rem;
  line-height: 1.3;
}

.weather-credit.is-fallback {
  pointer-events: none;
  text-decoration: none;
}

/* La plataforma se aleja de forma continua durante el ascenso, sin cortes entre pantallas. */
.launch-site {
  transform:
    translate3d(var(--camera-pan-x), calc(var(--camera-pan-y) + var(--surface-drop)), 0)
    scale(var(--camera-zoom))
    scale(var(--surface-scale))
    rotate(var(--camera-roll));
  transform-origin: 50% 66%;
  transition: opacity .35s linear, visibility .35s linear;
}

body[data-phase="arrival"] .launch-site,
body[data-phase="arrival"] .launch-vapor-layer,
body[data-phase="arrival"] .heat-haze,
body[data-flight-stage="upper-atmosphere"] .launch-vapor-layer,
body[data-flight-stage="orbit"] .launch-vapor-layer,
body[data-flight-stage="warp-build"] .launch-vapor-layer,
body[data-flight-stage="warp"] .launch-vapor-layer {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body[data-phase="arrival"] .entry-gate,
body[data-phase="arrival"] .countdown-stage,
body[data-phase="arrival"] .launch-sequence-panel,
body[data-phase="arrival"] .launch-status-card,
body[data-phase="arrival"] .launch-ops-panel,
body[data-phase="arrival"] .live-sky-card,
body[data-phase="arrival"] .weather-credit {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* T−00: el reactor pasa a cyan casi blanco y la nave permanece por encima del vapor. */
body.is-ignition-underlight .ship-layer,
body.is-ignition-core-white .ship-layer,
body.is-ignition-flame .ship-layer,
body.is-deluge-burst .ship-layer,
body.is-launch-weight .ship-layer,
body.is-liftoff-release .ship-layer {
  z-index: 27;
}

body.is-ignition-core-white .ship__body {
  filter: brightness(1.25) saturate(1.08) drop-shadow(0 0 11px rgba(201, 253, 255, .62));
}

body.is-ignition-core-white .ship__flames {
  opacity: 1 !important;
  filter: brightness(1.92) saturate(1.22) drop-shadow(0 0 18px rgba(197, 253, 255, .96));
}

body.is-ignition-core-white .ship-layer::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 57%;
  width: 52%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.31), rgba(94,238,255,.13) 35%, transparent 71%);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

body.is-launch-weight .ship {
  animation: launch-weight-strain .16s ease-in-out infinite alternate;
}

body.is-liftoff-release .ship {
  animation: liftoff-release .72s cubic-bezier(.16,.78,.18,1) both;
}

@keyframes launch-weight-strain {
  from { transform: translateY(2px) scaleY(.997); }
  to { transform: translateY(-1px) scaleY(1.003); }
}

@keyframes liftoff-release {
  0% { transform: translateY(2px) scale(.998); }
  42% { transform: translateY(-4px) scale(1.003); }
  100% { transform: translateY(-10px) scale(1); }
}

/* Capas de vuelo: nubes, escala orbital y salida breve del salto. */
.cinematic-flight-fx {
  position: fixed;
  z-index: 25;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  contain: strict;
}

body[data-phase="flight"] .cinematic-flight-fx,
body[data-phase="arrival"] .cinematic-flight-fx,
body[data-phase="transition"] .cinematic-flight-fx {
  opacity: 1;
  visibility: visible;
}

.flight-cloud-pass {
  position: absolute;
  left: -18vw;
  top: 8%;
  width: 136vw;
  height: 78%;
  opacity: calc(var(--cloud-pass-opacity) * .72);
  background:
    radial-gradient(ellipse at 19% 61%, rgba(221, 240, 246, .34), transparent 23%),
    radial-gradient(ellipse at 46% 43%, rgba(191, 223, 236, .28), transparent 27%),
    radial-gradient(ellipse at 77% 67%, rgba(228, 242, 247, .31), transparent 22%);
  transform: translate3d(-4vw, 0, 0) scale(1.08);
  mix-blend-mode: screen;
}

.flight-cloud-pass--front {
  filter: blur(22px);
  animation: cinematic-cloud-pass 4.8s linear infinite;
}

.flight-cloud-pass--mid {
  top: 18%;
  opacity: calc(var(--cloud-pass-opacity) * .42);
  filter: blur(34px);
  animation: cinematic-cloud-pass 7.2s -2.6s linear infinite reverse;
}

.distant-satellite {
  position: absolute;
  left: -9vw;
  top: 26%;
  width: 44px;
  height: 12px;
  opacity: 0;
  transform: scale(.35) rotate(-12deg);
}

.distant-satellite::before,
.distant-satellite::after {
  content: "";
  position: absolute;
  top: 4px;
  width: 18px;
  height: 5px;
  border: 1px solid rgba(169, 219, 247, .34);
  background: rgba(65, 114, 149, .18);
}

.distant-satellite::before { left: 0; }
.distant-satellite::after { right: 0; }
.distant-satellite i {
  position: absolute;
  left: 50%;
  top: 0;
  width: 8px;
  height: 12px;
  border-radius: 50%;
  background: rgba(215, 240, 255, .68);
  transform: translateX(-50%);
}

body[data-flight-stage="orbit"] .distant-satellite {
  opacity: .42;
  animation: satellite-scale-pass 1.8s linear both;
}

.arrival-cyan-flash,
.arrival-spatial-wave {
  position: absolute;
  left: 50%;
  top: 50%;
  opacity: 0;
  pointer-events: none;
}

.arrival-cyan-flash {
  width: 12vmin;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #efffff;
  box-shadow: 0 0 44px #fff, 0 0 130px rgba(97, 238, 255, .72);
  transform: translate(-50%, -50%) scale(.04);
}

.arrival-spatial-wave {
  width: 12vmin;
  aspect-ratio: 1;
  border: 1px solid rgba(169, 249, 255, .74);
  border-radius: 50%;
  box-shadow: 0 0 30px rgba(90, 226, 255, .38), inset 0 0 24px rgba(120, 238, 255, .18);
  transform: translate(-50%, -50%) scale(.12);
}

body.is-arrival-flash .arrival-cyan-flash {
  animation: arrival-flash-v43 .42s ease-out both;
}

body.is-arrival-flash .arrival-spatial-wave {
  animation: arrival-wave-v43 1.25s .08s cubic-bezier(.12,.69,.16,1) both;
}

.arrival-particle-field {
  position: absolute;
  inset: 0;
  opacity: calc(var(--arrival-progress) * .72);
}

.arrival-particle-field i {
  position: absolute;
  left: var(--arrival-particle-x);
  top: var(--arrival-particle-y);
  width: var(--arrival-particle-size);
  height: var(--arrival-particle-size);
  border-radius: 50%;
  background: rgba(226, 251, 255, .88);
  box-shadow: 0 0 8px rgba(var(--accent), .56);
  animation: arrival-particle-float var(--arrival-particle-duration) var(--arrival-particle-delay) ease-in-out infinite alternate;
}

@keyframes cinematic-cloud-pass {
  from { transform: translate3d(-9vw, 2vh, 0) scale(1.08); }
  to { transform: translate3d(9vw, -2vh, 0) scale(1.13); }
}

@keyframes satellite-scale-pass {
  from { left: -9vw; top: 31%; opacity: 0; }
  18%, 78% { opacity: .42; }
  to { left: 109vw; top: 22%; opacity: 0; }
}

@keyframes arrival-flash-v43 {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.04); }
  32% { opacity: .74; transform: translate(-50%, -50%) scale(.82); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(3.2); }
}

@keyframes arrival-wave-v43 {
  0% { opacity: .72; transform: translate(-50%, -50%) scale(.12); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(10); }
}

@keyframes arrival-particle-float {
  from { translate: -4px 7px; opacity: .22; }
  to { translate: 6px -10px; opacity: .82; }
}

/* Durante la desaceleración, la nave y la interfaz de vuelo siguen formando parte del mismo plano. */
body[data-phase="arrival"] .ship-layer,
body[data-phase="arrival"] .flight-sequence,
body[data-phase="arrival"] .flight-telemetry-card {
  opacity: 1;
  visibility: visible;
}

body[data-phase="arrival"] .ship-layer {
  z-index: 27;
}

body[data-phase="arrival"] .flight-sequence {
  pointer-events: none;
}

.ship-layer {
  transform:
    translate(-50%, -50%)
    translateX(var(--ship-x))
    translateY(var(--ship-y))
    translateX(var(--parallax-ship-x))
    translateY(var(--parallax-ship-y))
    translateX(var(--cinematic-ship-x))
    translateX(var(--destination-ship-x))
    scale(var(--ship-scale))
    rotateZ(calc(var(--ship-roll) + var(--cinematic-ship-roll) + var(--destination-ship-roll)))
    rotateX(var(--ship-tilt-x))
    rotateY(var(--ship-tilt-y));
}

/* La pantalla final conserva su diseño; solo cambia el orden de materialización. */
body[data-phase="arrival"] .destination-stage,
body.is-arrival-sequence .destination-stage {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
}

body.is-arrival-sequence .destination-heading > *,
body.is-arrival-sequence .portal,
body.is-arrival-sequence .portal__number,
body.is-arrival-sequence .portal__title,
body.is-arrival-sequence .portal__subtitle,
body.is-arrival-sequence .portal__description,
body.is-arrival-sequence .portal__action {
  opacity: 0;
}

body.is-arrival-sequence .portal {
  transform: scale(.78) translateY(22px);
  filter: none;
  pointer-events: none;
}

body[data-arrival-step="2"] .portal[data-portal="1"],
body[data-arrival-step="3"] .portal[data-portal="1"],
body[data-arrival-step="4"] .portal[data-portal="1"],
body[data-arrival-step="5"] .portal[data-portal="1"],
body[data-arrival-step="6"] .portal[data-portal="1"],
body[data-arrival-step="7"] .portal[data-portal="1"],
body[data-arrival-step="8"] .portal[data-portal="1"],
body[data-arrival-step="9"] .portal[data-portal="1"] {
  opacity: .9;
  transform: scale(.94) translateY(0);
}

body[data-arrival-step="3"] .portal[data-portal="0"],
body[data-arrival-step="4"] .portal[data-portal="0"],
body[data-arrival-step="5"] .portal[data-portal="0"],
body[data-arrival-step="6"] .portal[data-portal="0"],
body[data-arrival-step="7"] .portal[data-portal="0"],
body[data-arrival-step="8"] .portal[data-portal="0"],
body[data-arrival-step="9"] .portal[data-portal="0"] {
  opacity: .72;
  transform: scale(.90) translateY(0);
}

body[data-arrival-step="4"] .portal[data-portal="2"],
body[data-arrival-step="5"] .portal[data-portal="2"],
body[data-arrival-step="6"] .portal[data-portal="2"],
body[data-arrival-step="7"] .portal[data-portal="2"],
body[data-arrival-step="8"] .portal[data-portal="2"],
body[data-arrival-step="9"] .portal[data-portal="2"] {
  opacity: .72;
  transform: scale(.90) translateY(0);
}

body[data-arrival-step="6"] .destination-kicker,
body[data-arrival-step="7"] .destination-kicker,
body[data-arrival-step="8"] .destination-kicker,
body[data-arrival-step="9"] .destination-kicker {
  opacity: 1;
  transform: translateY(0);
}

body[data-arrival-step="7"] .destination-heading h2,
body[data-arrival-step="8"] .destination-heading h2,
body[data-arrival-step="9"] .destination-heading h2 {
  opacity: 1;
  transform: translateY(0);
}

body[data-arrival-step="8"] .destination-instruction,
body[data-arrival-step="9"] .destination-instruction,
body[data-arrival-step="8"] .portal__number,
body[data-arrival-step="8"] .portal__title,
body[data-arrival-step="8"] .portal__subtitle,
body[data-arrival-step="8"] .portal__description,
body[data-arrival-step="8"] .portal__action,
body[data-arrival-step="9"] .portal__number,
body[data-arrival-step="9"] .portal__title,
body[data-arrival-step="9"] .portal__subtitle,
body[data-arrival-step="9"] .portal__description,
body[data-arrival-step="9"] .portal__action {
  opacity: 1;
  transform: translateY(0);
}

body.is-arrival-sequence .destination-heading > *,
body.is-arrival-sequence .portal,
body.is-arrival-sequence .portal__number,
body.is-arrival-sequence .portal__title,
body.is-arrival-sequence .portal__subtitle,
body.is-arrival-sequence .portal__description,
body.is-arrival-sequence .portal__action {
  transition: opacity .5s ease, transform .72s cubic-bezier(.18,.72,.18,1), filter .45s ease;
}

body.is-arrival-complete .portal__visual {
  animation: galaxy-idle-v43 18s ease-in-out infinite alternate;
}

body.is-arrival-complete .portal:nth-child(2) .portal__visual { animation-delay: -6s; }
body.is-arrival-complete .portal:nth-child(3) .portal__visual { animation-delay: -11s; }
body.is-arrival-complete .ship {
  animation: arrival-ship-float 4.6s ease-in-out infinite alternate;
}

@keyframes galaxy-idle-v43 {
  from { transform: rotate(-.35deg) scale(.997); }
  to { transform: rotate(.45deg) scale(1.006); }
}

@keyframes arrival-ship-float {
  from { transform: translateY(-2px) rotate(-.35deg); }
  to { transform: translateY(4px) rotate(.45deg); }
}

/* Hover/focus: 4–6 % de ampliación, más luz y atenuación elegante de los otros destinos. */
body[data-phase="destinations"] .portal {
  opacity: .68;
  transform: scale(.96) translateY(4px);
}

body[data-phase="destinations"] .portal.is-selected,
body[data-phase="destinations"] .portal:hover,
body[data-phase="destinations"] .portal:focus-within {
  opacity: 1;
  transform: scale(1.05) translateY(0);
  filter: drop-shadow(0 24px 58px rgba(var(--portal-color), .22));
}

body[data-phase="destinations"][data-selected-galaxy="0"] .portal:not([data-portal="0"]),
body[data-phase="destinations"][data-selected-galaxy="1"] .portal:not([data-portal="1"]),
body[data-phase="destinations"][data-selected-galaxy="2"] .portal:not([data-portal="2"]) {
  opacity: .48;
  transform: scale(.93) translateY(6px);
  filter: saturate(.78) brightness(.78);
}

body[data-phase="destinations"][data-selected-galaxy="0"] { --destination-ship-x: -12px; --destination-ship-roll: -2.2deg; }
body[data-phase="destinations"][data-selected-galaxy="1"] { --destination-ship-x: 0px; --destination-ship-roll: 0deg; }
body[data-phase="destinations"][data-selected-galaxy="2"] { --destination-ship-x: 12px; --destination-ship-roll: 2.2deg; }

/* Selección: confirmación, aceleración y entrada al núcleo antes de navegar. */
body[data-phase="transition"] .destination-stage {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  transition: opacity .38s ease, transform .9s cubic-bezier(.18,.72,.18,1);
}

body[data-phase="transition"][data-portal-stage="accelerating"] .destination-stage {
  opacity: .42;
  transform: scale(1.035);
}

body[data-phase="transition"][data-portal-stage="core"] .destination-stage {
  opacity: 0;
  transform: scale(1.09);
}

body[data-phase="transition"] .portal:not(.is-selected) {
  opacity: .12 !important;
  filter: brightness(.55) saturate(.6) !important;
}

body[data-phase="transition"] .portal.is-selected {
  opacity: 1 !important;
  transform: scale(1.08) !important;
  filter: brightness(1.18) drop-shadow(0 0 54px rgba(var(--portal-color), .46)) !important;
}

body[data-portal-stage="confirmed"] .portal-transition__copy {
  opacity: 1;
  transform: translate(-50%, -50%) scale(.96);
}

body[data-portal-stage="accelerating"] .portal-transition__copy {
  opacity: .72;
  transform: translate(-50%, -50%) scale(1);
}

body[data-portal-stage="core"] .portal-transition__copy {
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.08);
}

body[data-portal-stage="confirmed"] .wormhole-tunnel {
  opacity: .18;
}

body[data-portal-stage="accelerating"] .wormhole-tunnel,
body[data-portal-stage="core"] .wormhole-tunnel {
  opacity: 1;
}

/* Móvil: controles de ubicación y llegada conservan jerarquía sin desbordar. */
@media (max-width: 760px) {
  .location-setting__actions { grid-template-columns: 1fr; }
  .location-choice { padding: 9px; }
  .cinematic-flight-fx { z-index: 23; }
  .flight-cloud-pass { width: 160vw; left: -30vw; }
  .distant-satellite { transform: scale(.24) rotate(-12deg); }
  body[data-phase="destinations"] .portal.is-selected,
  body[data-phase="destinations"] .portal:hover,
  body[data-phase="destinations"] .portal:focus-within { transform: scale(1.035); }
}

/* Movimiento reducido conserva el viaje y los destinos, sustituyendo intensidad por fades cortos. */
html[data-motion="reduced"] .flight-cloud-pass,
html[data-motion="reduced"] .distant-satellite,
html[data-motion="reduced"] .arrival-cyan-flash,
html[data-motion="reduced"] .arrival-spatial-wave,
html[data-motion="reduced"] .arrival-particle-field i,
html[data-motion="reduced"] body.is-launch-weight .ship,
html[data-motion="reduced"] body.is-liftoff-release .ship,
html[data-motion="reduced"] body.is-arrival-complete .portal__visual,
html[data-motion="reduced"] body.is-arrival-complete .ship {
  animation: none !important;
}

html[data-motion="reduced"] .flight-cloud-pass,
html[data-motion="reduced"] .distant-satellite,
html[data-motion="reduced"] .arrival-spatial-wave {
  display: none !important;
}

html[data-motion="reduced"] body[data-phase="destinations"] .portal,
html[data-motion="reduced"] body[data-phase="destinations"] .portal.is-selected,
html[data-motion="reduced"] body[data-phase="destinations"] .portal:hover,
html[data-motion="reduced"] body[data-phase="destinations"] .portal:focus-within {
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .flight-cloud-pass,
  .distant-satellite,
  .arrival-cyan-flash,
  .arrival-spatial-wave,
  .arrival-particle-field i {
    animation: none !important;
  }
}