/* Scene two is independent: none of these rules change the opening composition. */
.mars-scene { position: absolute; inset: 0; overflow: hidden; z-index: 4; background: #030812; opacity: 0; }
.mars-scene[hidden] { display: none; }
.mars-space-haze { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 65% 40%, #15213255, transparent 58%), radial-gradient(ellipse at 55% 55%, #50271812, transparent 45%); }
.mars-viewport { position: absolute; inset: 0; z-index: 0; }
/* The orbit canvas is visual-only. Mars pointer/parallax input is bound to the scene
   container, while full exploration uses its own dedicated viewport. Keeping this
   canvas out of hit-testing prevents it from ever stealing hero navigation clicks. */
.mars-viewport canvas { display: block; width: 100%; height: 100%; pointer-events: none; }
.mars-edge-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, #03081299, transparent 20%, transparent 82%, #03081233); }
.mars-caption { position: absolute; left: 10%; bottom: 17%; z-index: 7; opacity: 0; transform: translateY(12px); pointer-events: none; }
.mars-caption.is-visible { pointer-events: auto; }
.mars-caption .eyebrow { justify-content: flex-start; font-size: 8px; letter-spacing: 3.5px; gap: 12px; }
.mars-caption .eyebrow span { width: 30px; height: 1px; background: #edc57e88; }
.mars-caption h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: clamp(68px, 8vw, 120px); line-height: 1; letter-spacing: -3px; margin: 19px 0 15px; outline: none; color: #f9f4e8; }
.mars-caption h2 span { color: #edc57e; }
.mars-whisper { color: #a1acba; font-size: 12px; letter-spacing: .6px; }
.mars-caption .replay-button { margin-top: 20px; padding-left: 0; border: 0; color: #b7bfcc; font-size: 10px; letter-spacing: .4px; }
.mars-caption .replay-button:hover { color: #edc57e; }
.mars-credit { position: absolute; right: 3.5%; bottom: 83px; font-size: 7px; letter-spacing: .5px; color: #78828e; text-decoration: none; opacity: 0; }
.mars-credit:hover { color: #d6c3a5; }
.is-mars .masthead { opacity: 1; transition: opacity 2s; }
.is-mars .preparation { opacity: 0; }
.mars-emergency-sphere { position: absolute; width: 200px; height: 200px; transform: translate(-50%, -50%); border-radius: 50%; background: #a25d3b url("assets/textures/mars-surface-2k.jpg") center / auto 100%; box-shadow: inset -45px -15px 65px #000e, inset 8px 4px 12px #efb18244; }
@media (max-width: 700px) {
  .mars-caption { left: 8%; right: 8%; bottom: 17%; text-align: center; }
  .mars-caption .eyebrow { justify-content: center; font-size: 7px; letter-spacing: 3px; }
  .mars-caption .eyebrow span { display: none; }
  .mars-caption h2 { font-size: 66px; margin: 14px 0 10px; }
  .mars-whisper { font-size: 10px; }
  .mars-caption .replay-button { margin-top: 9px; }
  .mars-credit { right: 0; left: 0; bottom: 76px; text-align: center; font-size: 6px; }
}
@media (max-height: 700px) and (min-width: 701px) { .mars-caption { bottom: 18%; } .mars-caption h2 { font-size: 76px; } }

/* Mars exploration extends the arrival scene without changing the launch or landing composition. */
.mars-arrival-actions {
  display: grid; grid-template-columns: minmax(130px, 1fr) auto minmax(130px, 1fr); align-items: center; gap: 14px;
  width: min(680px, 73vw); margin-top: 22px;
}
.mars-caption .mars-explore-button {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 28px;
  min-height: 48px; padding: 0 18px 0 21px; border-radius: 2px; border: 1px solid #f0cf92;
  background: linear-gradient(120deg, #ecc987, #dcae61); color: #171b24; font-size: 10px;
  font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 7px 28px #b9792e1f, inset 0 1px #fff4cf;
  transition: transform .28s ease, background .28s ease, box-shadow .28s ease;
}
.mars-caption .mars-explore-button svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.5; transition: transform .3s ease; }
.mars-caption .mars-explore-button:hover { transform: translateY(-2px); background: #f2d49a; box-shadow: 0 9px 34px #b9792e33, inset 0 1px #fff4cf; }
.mars-caption .mars-explore-button:hover svg { transform: translateX(3px); }
.mars-caption .mars-explore-button:active { transform: translateY(0) scale(.985); }
.mars-planet-nav {
  min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 4px; border: 0; border-top: 1px solid #d5dce821; border-bottom: 1px solid #d5dce821;
  background: transparent; color: #929daa; text-align: left; transition: color .25s ease, border-color .25s ease, opacity .25s ease;
}
.mars-planet-nav svg { flex: 0 0 auto; width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.25; }
.mars-planet-nav span { display: grid; gap: 3px; min-width: 0; }
.mars-planet-nav small, .mars-planet-nav strong { display: block; font-weight: 500; text-transform: uppercase; white-space: nowrap; }
.mars-planet-nav small { color: #6f7c8b; font-size: 6px; letter-spacing: 1.45px; }
.mars-planet-nav strong { color: inherit; font-size: 8px; letter-spacing: 1.15px; }
.mars-planet-prev { justify-content: flex-start; }
.mars-planet-next { justify-content: flex-end; text-align: right; }
.mars-planet-nav:hover:not(:disabled) { color: #dfc38f; border-color: #edc57e62; }
.mars-planet-nav:disabled { opacity: .38; cursor: default; }

.mars-exploration {
  position: absolute; z-index: 6; top: 20%; left: 6.5%; width: min(390px, 34vw); height: clamp(430px, 58vh, 560px); max-height: calc(100vh - 180px); max-height: calc(100dvh - 180px); padding: 24px 25px 22px;
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid #d8c29625; border-left-color: #edc57e77; border-radius: 2px;
  background: linear-gradient(145deg, #07101ad9, #050b14b8); box-shadow: 0 25px 90px #00000038;
  backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
  opacity: 0; transform: translate3d(-14px, 8px, 0); pointer-events: none; visibility: hidden;
  transition: opacity .65s ease, transform .8s cubic-bezier(.2,.75,.2,1), visibility 0s linear .8s;
}
.mars-scene.is-exploring .mars-exploration { opacity: 1; transform: translate3d(0,0,0); pointer-events: auto; visibility: visible; transition-delay: .18s, .18s, 0s; }
.mars-scene.is-exploring .mars-caption { opacity: 0 !important; transform: translateY(14px) !important; pointer-events: none; transition: opacity .42s ease, transform .55s ease; }
.mars-scene.is-exploring .mars-credit { opacity: 0 !important; pointer-events: none; }
.mars-exploration-topline { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-bottom: 15px; border-bottom: 1px solid #d8e0ea14; }
.mars-topic-kicker, .mars-topic-count { font-size: 7px; letter-spacing: 2.4px; color: #d5be91; }
.mars-topic-count { color: #8f9aaa; letter-spacing: 1.7px; font-variant-numeric: tabular-nums; }
.mars-topic-count #mars-topic-current { color: #edc57e; }
.mars-exploration h3 { margin: 20px 0 5px; color: #f9f4e8; font-family: Georgia, "Times New Roman", serif; font-size: clamp(31px, 3vw, 43px); line-height: 1.03; font-weight: 400; letter-spacing: -1px; outline: none; }
.mars-topic-subtitle { margin: 0 0 17px; color: #d8bf91; font-size: 8px; line-height: 1.5; letter-spacing: 2.1px; text-transform: uppercase; }
.mars-exploration-topline, .mars-exploration h3, .mars-topic-subtitle, .mars-topic-source, .mars-exploration-controls, .mars-exploration-close { flex: 0 0 auto; }
.mars-topic-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-gutter: stable; padding-right: 14px; scrollbar-width: thin; scrollbar-color: #aa90696e transparent; }
.mars-topic-scroll::-webkit-scrollbar { width: 5px; }
.mars-topic-scroll::-webkit-scrollbar-track { background: transparent; }
.mars-topic-scroll::-webkit-scrollbar-thumb { background: #aa90696e; border-radius: 999px; }
.mars-topic-scroll::-webkit-scrollbar-thumb:hover { background: #c7aa768f; }
.mars-topic-summary { margin: 0; color: #c0c9d4; font-size: 12px; line-height: 1.65; letter-spacing: .12px; }
.mars-topic-facts { display: grid; gap: 9px; margin: 18px 0 17px; padding: 0; list-style: none; }
.mars-topic-facts li { position: relative; padding-left: 15px; color: #9eabb9; font-size: 10px; line-height: 1.55; }
.mars-topic-facts li::before { content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 1px; background: #edc57eaa; }
.mars-topic-source { display: inline-flex; align-self: flex-start; align-items: center; gap: 7px; margin-top: 12px; color: #768595; font-size: 7px; letter-spacing: 1.25px; text-decoration: none; text-transform: uppercase; transition: color .22s ease; }
.mars-topic-source:hover { color: #d8c293; }
.mars-exploration-controls { display: grid; grid-template-columns: 38px 1fr 38px; align-items: center; gap: 13px; margin-top: 22px; }
.mars-topic-nav { width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 1px solid #d5dce82a; border-radius: 50%; background: #07101a99; color: #d6dde7; transition: border-color .25s ease, color .25s ease, transform .25s ease, opacity .25s ease; }
.mars-topic-nav svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.35; }
.mars-topic-nav:hover:not(:disabled) { border-color: #edc57e88; color: #edc57e; transform: scale(1.055); }
.mars-topic-nav:disabled { opacity: .24; cursor: default; }
.mars-topic-progress { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 5px; }
.mars-topic-progress span { height: 1px; background: #8793a129; transition: background .35s ease, transform .35s ease; transform-origin: left; }
.mars-topic-progress span.is-active { background: #edc57e; transform: scaleY(2); }
.mars-exploration-close { display: block; margin: 17px auto 0; padding: 7px 0 0; border: 0; background: transparent; color: #758291; font-size: 7px; letter-spacing: 1.2px; text-transform: uppercase; transition: color .2s ease; }
.mars-exploration-close:hover { color: #c9d0d8; }
.mars-exploration.is-switching h3, .mars-exploration.is-switching .mars-topic-subtitle, .mars-exploration.is-switching .mars-topic-summary, .mars-exploration.is-switching .mars-topic-facts, .mars-exploration.is-switching .mars-topic-source { animation: mars-topic-in .48s ease both; }

.mars-focus-reticle {
  position: absolute; z-index: 5; left: 0; top: 0;
  width: 24px; height: 24px; transform: translate(-50%, -50%) scale(.72); opacity: 0; pointer-events: none;
  transition: opacity .45s ease, transform .6s ease;
}
.mars-scene.is-exploring .mars-focus-reticle { opacity: var(--marker-opacity, .92); transform: translate(-50%, -50%) scale(1); transition-delay: .45s, .45s; }
.mars-focus-ring { position: absolute; inset: 0; border: 1px solid #f1cf8cb8; border-radius: 50%; box-shadow: 0 0 16px #e6aa5252, inset 0 0 10px #e6aa5224; animation: mars-focus-pulse 2.8s ease-in-out infinite; }
.mars-focus-dot { position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; border-radius: 50%; background: #f4d494; transform: translate(-50%, -50%); box-shadow: 0 0 8px #f3c56f; }
.mars-focus-line { position: absolute; left: 26px; top: 12px; width: 42px; height: 1px; background: linear-gradient(90deg, #edc57e8f, #edc57e12); }
.mars-focus-label { position: absolute; left: 73px; top: 8px; width: 130px; color: #d4c09a; font-size: 6px; line-height: 1.3; letter-spacing: 1.7px; text-transform: uppercase; white-space: nowrap; }

@keyframes mars-focus-pulse { 0%,100% { transform: scale(.9); opacity: .55; } 50% { transform: scale(1.18); opacity: 1; } }
@keyframes mars-topic-in { from { opacity: .25; transform: translateY(5px); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) and (min-width: 701px) {
  .mars-exploration { left: 4.5%; width: min(350px, 43vw); padding: 20px; }
  .mars-exploration h3 { font-size: 34px; }
  .mars-topic-summary { font-size: 11px; }
}

@media (max-width: 700px) {
  .mars-arrival-actions { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; width: 100%; margin-top: 17px; }
  .mars-caption .mars-explore-button { min-height: 45px; padding: 0 13px 0 15px; gap: 13px; font-size: 8px; }
  .mars-caption .mars-explore-button svg { width: 15px; height: 15px; }
  .mars-planet-nav { min-height: 45px; gap: 5px; padding: 0 2px; }
  .mars-planet-nav svg { width: 14px; height: 14px; }
  .mars-planet-nav small { font-size: 5px; letter-spacing: .9px; }
  .mars-planet-nav strong { font-size: 6.5px; letter-spacing: .75px; }
  .mars-exploration { top: auto; left: 5%; right: 5%; bottom: 5.5%; width: auto; height: min(46vh, 330px); height: min(46dvh, 330px); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow: hidden; padding: 16px 17px 14px; background: linear-gradient(145deg, #06101bed, #040b14dc); }
  .mars-exploration h3 { margin-top: 15px; font-size: 29px; }
  .mars-topic-subtitle { margin-bottom: 10px; font-size: 7px; }
  .mars-topic-summary { font-size: 10px; line-height: 1.55; }
  .mars-topic-facts { gap: 6px; margin: 12px 0 11px; }
  .mars-topic-facts li { font-size: 8.5px; line-height: 1.45; }
  .mars-topic-source { margin-top: 8px; }
  .mars-exploration-controls { margin-top: 14px; }
  .mars-exploration-close { margin-top: 10px; }
  .mars-topic-scroll { padding-right: 12px; }
  .mars-focus-line { width: 26px; }
  .mars-focus-label { left: 57px; width: 100px; font-size: 5.5px; }
}

@media (max-height: 650px) and (max-width: 700px) {
  .mars-exploration { height: min(48vh, 300px); height: min(48dvh, 300px); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); bottom: 4%; }
}

@media (prefers-reduced-motion: reduce) {
  .mars-exploration, .mars-focus-reticle, .mars-topic-progress span, .mars-caption .mars-explore-button, .mars-topic-nav { transition-duration: .01ms !important; }
  .mars-focus-ring { animation: none; }
  .mars-exploration.is-switching h3, .mars-exploration.is-switching .mars-topic-subtitle, .mars-exploration.is-switching .mars-topic-summary, .mars-exploration.is-switching .mars-topic-facts, .mars-exploration.is-switching .mars-topic-source { animation: none; }
}

/* Mars marker now mirrors the Earth annotation system: label + contextual visual preview. */
.mars-focus-label {
  display: grid;
  gap: 4px;
  width: 190px;
  white-space: normal;
}
.mars-focus-title { color: #dcc79f; font-size: 7px; letter-spacing: 1.4px; }
.mars-focus-context { color: #8995a4; font-size: 5.5px; letter-spacing: 1.25px; }
.mars-focus-reticle .exploration-marker-media {
  left: 73px;
  bottom: 30px;
}
.mars-focus-reticle.is-left .mars-focus-line { left: auto; right: 26px; background: linear-gradient(270deg, #edc57e8f, #edc57e12); }
.mars-focus-reticle.is-left .mars-focus-label { left: auto; right: 73px; text-align: right; }
.mars-focus-reticle.is-left .exploration-marker-media { left: auto; right: 73px; }
.mars-focus-reticle.is-below .exploration-marker-media { top: 48px; bottom: auto; }
.mars-focus-reticle.is-relocating .exploration-marker-media { opacity: 0; transition-delay: 0s; }
@media (max-width: 700px) {
  .mars-focus-line { left: 12px; top: auto; bottom: 29px; width: 1px; height: 24px; background: linear-gradient(0deg, #edc57e8f, #edc57e12); }
  .mars-focus-label,
  .mars-focus-reticle.is-left .mars-focus-label {
    left: calc(12px + var(--marker-shift, 0px));
    right: auto;
    top: auto;
    bottom: 60px;
    width: min(200px, calc(100vw - 32px));
    transform: translateX(-50%);
    text-align: center;
  }
  .mars-focus-reticle .exploration-marker-media,
  .mars-focus-reticle.is-left .exploration-marker-media {
    left: calc(12px + var(--marker-shift, 0px));
    right: auto;
    bottom: 96px;
    transform: translateX(-50%) translateY(7px) scale(.985);
  }
  .mars-focus-reticle.is-marker-visible .exploration-marker-media { transform: translateX(-50%); }
  .mars-focus-reticle.is-below .exploration-marker-media { top: 42px; bottom: auto; }
  .mars-focus-reticle.is-below .mars-focus-label { top: 74px; bottom: auto; }
  .mars-focus-title { font-size: 6.5px; }
  .mars-focus-context { font-size: 5px; }
}


/* Shared secondary action for returning from Earth/Mars exploration. */
.mars-exploration-close.return-panorama-button {
  width: fit-content;
  min-width: 188px;
  padding: 8px 14px;
  border: 1px solid #b9a57a4a;
  border-radius: 2px;
  background: #07101a66;
  color: #7f8b98;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease, transform .16s ease;
}
.mars-exploration-close.return-panorama-button:hover {
  border-color: #ccb8897a;
  background: #0a142080;
  color: #cbd2d9;
}
.mars-exploration-close.return-panorama-button:active {
  transform: translateY(1px);
}
.mars-exploration-close.return-panorama-button:focus-visible {
  outline: 1px solid #d5c292;
  outline-offset: 3px;
}