/* Mars Trading — cinematic story section */
.ms-story {
  --ms-ink: #f6efe6;
  --ms-ink-soft: rgba(246, 239, 230, 0.72);
  --ms-glass: rgba(14, 12, 11, 0.62);
  --ms-line: rgba(255, 255, 255, 0.14);
  --ms-gold: #f0c068;
  --ms-red: #c4543f;
  position: relative;
  display: block;
  background: #0e0c0b;
  color: var(--ms-ink);
  font-family: "Montserrat", "Inter", system-ui, sans-serif;
}

.ms-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 100svh;
  min-height: 420px;
  overflow: hidden;
  background: radial-gradient(80% 80% at 50% 60%, #3a1a12, #0e0c0b);
  isolation: isolate;
}
@media (max-aspect-ratio: 4 / 5), (max-width: 640px) {
  .ms-stage { aspect-ratio: auto; height: 82svh; min-height: 520px; }
}

.ms-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.ms-fade { position: absolute; inset: 0; opacity: 0; pointer-events: none; z-index: 3; }

/* View through the spacecraft window (occupants never shown) */
.ms-window {
  position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none;
  background: radial-gradient(ellipse 72% 64% at 50% 47%, transparent 0 60%, rgba(10, 11, 14, 0.9) 64%, #08090b 100%);
}
.ms-window-rim {
  position: absolute; left: 6.8%; right: 6.8%; top: 9%; bottom: 15%;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(255, 236, 210, 0.16), inset 0 0 60px rgba(0, 0, 0, 0.55), 0 0 0 2px rgba(60, 62, 68, 0.6);
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.07) 38%, transparent 46%);
}
.ms-window-console { position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); display: flex; gap: 14px; }
.ms-window-console i { width: 26px; height: 3px; border-radius: 2px; background: rgba(255, 196, 120, 0.55); box-shadow: 0 0 8px rgba(255, 180, 100, 0.5); }
.ms-window-console i:nth-child(2) { background: rgba(160, 220, 255, 0.4); box-shadow: none; }

/* Final branded composition: the supplied logo, unaltered, on a calm lit ground */
.ms-final {
  position: absolute; inset: 0; z-index: 4; opacity: 0;
  display: grid; place-items: center;
  background: radial-gradient(90% 85% at 50% 46%, #ffffff 0%, #ffffff 42%, #f7f1e8 72%, #ecdfcc 100%);
  pointer-events: none;
}
.ms-final::before {
  content: ""; position: absolute; inset: -20% -40%;
  background: linear-gradient(100deg, transparent 42%, rgba(240, 192, 104, 0.10) 50%, transparent 58%);
  transform: translateX(calc(-40% + var(--sweep, 0) * 80%));
}
.ms-final { container-type: size; --logo-w: 40cqw; }
.ms-final-logo {
  position: relative;
  width: var(--logo-w); /* matches the plaque framing of the last 3D shot for a clean match dissolve */
  height: auto;
  max-height: 62%;
  object-fit: contain;
  /* when the slogan arrives the logo lifts (moves, never scales) so the pair sits centred */
  transform: translateY(calc(var(--lift, 0) * -7cqh));
}
/* Slogan under the logo */
.ms-slogan {
  position: absolute; left: 0; right: 0; margin: 0;
  top: calc(50cqh + var(--logo-w) * 0.3947 + 2.5cqh - var(--lift, 0) * 7cqh);
  text-align: center;
  font-family: "Montserrat", system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(16px, 2.6cqw, 40px);
  letter-spacing: 0.08em;
  color: #231a16;
  opacity: var(--lift, 0);
  transform: translateY(calc((1 - var(--lift, 0)) * 1.2cqh));
}
.ms-slogan span { color: #a84130; }
@media (max-aspect-ratio: 4 / 5), (max-width: 640px) {
  .ms-final { --logo-w: 72cqw; }
  .ms-slogan { font-size: clamp(16px, 5.2cqw, 26px); }
}

/* Captions: silent observations, typed on screen */
.ms-caption {
  position: absolute; z-index: 5; margin: 0; opacity: 0; pointer-events: none;
  max-width: min(82%, 30ch);
  font-weight: 500;
  font-size: clamp(16px, 2.1vw, 28px);
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: var(--ms-ink);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 18px rgba(0, 0, 0, 0.45);
}
.ms-caption.pos-bl { left: 6%; bottom: 18%; }
.ms-caption.pos-tl { left: 6%; top: 11%; }
.ms-caption.pos-bc { left: 50%; bottom: 20%; transform: translateX(-50%); text-align: center; }
.ms-caret {
  display: inline-block; width: 2px; height: 1em; margin-left: 3px;
  vertical-align: -0.12em; background: var(--ms-gold); opacity: 0;
}
.ms-caption.caret-on .ms-caret { opacity: 1; }

/* Video export: no controls, no loading overlay */
.ms-capture .ms-controls, .ms-capture .ms-sound, .ms-capture .ms-loading { display: none !important; }
@media (max-width: 640px) {
  .ms-caption.pos-bl { bottom: 20%; }
  .ms-caption.pos-tl { top: 9%; }
}

.ms-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Controls */
.ms-sound {
  position: absolute; top: 18px; right: 18px; z-index: 6;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 18px 0 14px;
  border: 1px solid var(--ms-line); border-radius: 999px;
  background: var(--ms-glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--ms-ink); font: 600 0.9rem/1 "Montserrat", system-ui, sans-serif; letter-spacing: 0.01em;
  cursor: pointer; transition: background-color 0.2s, border-color 0.2s;
}
.ms-sound:hover { border-color: var(--ms-gold); }
.ms-sound[hidden] { display: none; }

.ms-controls {
  position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 6;
  display: flex; align-items: center; gap: 6px;
}
.ms-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 44px; height: 44px; padding: 0 12px;
  border: 1px solid var(--ms-line); border-radius: 999px;
  background: var(--ms-glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--ms-ink); font: 600 0.82rem/1 "Montserrat", system-ui, sans-serif;
  cursor: pointer; transition: border-color 0.2s, background-color 0.2s;
}
.ms-btn:hover { border-color: var(--ms-gold); }
.ms-btn:disabled { opacity: 0.4; cursor: default; }
.ms-sound svg, .ms-btn svg { width: 20px; height: 20px; fill: currentColor; }
.ms-sound svg .stroke, .ms-btn svg .stroke { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.ms-sound:focus-visible, .ms-btn:focus-visible { outline: 3px solid var(--ms-gold); outline-offset: 3px; }
.ms-progress { flex: 1; height: 2px; margin-left: 8px; background: rgba(255, 255, 255, 0.16); border-radius: 2px; overflow: hidden; }
.ms-progress span { display: block; height: 100%; background: var(--ms-gold); transform-origin: left; transform: scaleX(0); }

/* Controls sit on the light final frame too */
.ms-at-final .ms-btn, .ms-at-final .ms-sound { background: rgba(20, 16, 14, 0.78); }
.ms-at-final .ms-progress { background: rgba(20, 16, 14, 0.12); }

@media (max-width: 480px) {
  .ms-skip span { display: none; }
  .ms-controls { left: 12px; right: 12px; bottom: 12px; }
  .ms-sound { top: 12px; right: 12px; }
}

.ms-loading {
  position: absolute; inset: 0; z-index: 7; display: grid; place-items: center;
  background: radial-gradient(80% 80% at 50% 60%, #3a1a12, #0e0c0b);
}
.ms-loading[hidden] { display: none; }
.ms-loading span { width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(240, 192, 104, 0.25); border-top-color: var(--ms-gold); animation: ms-spin 0.9s linear infinite; }
@keyframes ms-spin { to { transform: rotate(360deg); } }

.ms-no-webgl .ms-final { opacity: 1; }
.ms-no-webgl .ms-canvas, .ms-no-webgl .ms-caption { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ms-loading span { animation: none; }
}