/* Goose Orbital — hero docking scene
   Default (no JS / reduced motion) = the final docked frame with the headline visible.
   JS rewinds to the opening frame and scrubs forward on scroll. */

/* The stage starts under the sticky header (69px), so the whole frame is on screen from the first pixel. */
.scene { position: relative; border-bottom: 1px solid var(--rule); padding: 0; margin-top: -69px; }
.stage {
  position: relative; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden;
  background: var(--ink);
}

.stars {
  position: absolute; inset: -4%; background: url("assets/stars.svg") center / cover no-repeat;
  opacity: 0.9; will-change: transform;
}

/* Earth limb: sits under everything, rises with the scroll */
.earth { position: absolute; left: -18vw; bottom: -4vh; width: 132vw; height: auto; max-width: none; will-change: transform; }

/* Investors: sunrise behind the hero, dark side under the headline */
.page-hero--sunrise { position: relative; overflow: hidden; min-height: 78vh; display: flex; align-items: center; }
.page-hero--sunrise .wrap { position: relative; z-index: 1; width: 100%; }
.page-hero--sunrise .sunrise { position: absolute; right: -6vw; bottom: -12vh; width: 112vw; max-width: none; height: auto; will-change: transform; }
.page-hero--sunrise .lede { max-width: 28em; }

.corridor { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.corridor-path { fill: none; stroke: var(--tan-deep); stroke-width: 1; stroke-dasharray: 3 9; }

/* Hero hardware.
   --host-w is the host's drawn width; --cap is its scale at capture and on station.
   The free module is sized to match the docked module exactly at that scale. */
.stage { --host-w: min(42vw, 600px); --cap: 0.88; --slot-x: 64%; --slot-y: 44%; --station-x: 72%; --station-y: 40%; }

/* Stacking: the waiting module sits above the host, exactly as the docked module does, so the host
   visibly slides in behind it and the hand-off at capture changes nothing on screen. */
.module-slot {
  position: absolute; left: var(--slot-x); top: var(--slot-y); z-index: 2;
  width: calc(var(--host-w) * 0.27 * var(--cap));
  transform: translate(-50%, -50%);
}
.stage .craft { z-index: 1; }
.stage .tele, .stage .copy, .stage .scroll-hint { z-index: 3; }
.module-bob { will-change: transform; }
.module-free { display: block; width: 100%; height: auto; will-change: transform; }

.craft {
  position: absolute; left: 0; top: 0;
  width: var(--host-w); aspect-ratio: 1529 / 437;
  will-change: transform;
}
.craft-body { position: absolute; inset: 0; transform-origin: 50.5% 54.2%; will-change: transform; }
.host { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.module-docked { position: absolute; width: 27%; height: auto; left: 37%; top: 22%; }
.dock-ring { position: absolute; width: 30%; left: 35.5%; top: 2%; aspect-ratio: 1; }
.dock-ring circle { fill: none; stroke: var(--tan); stroke-width: 1; vector-effect: non-scaling-stroke; }
.corridor-node { fill: var(--tan); }

/* Until the scene script has set the opening frame, keep the moving parts out of sight. */
html.scene-pending .stage .craft, html.scene-pending .stage .module-slot,
html.scene-pending .stage .copy, html.scene-pending .stage .tele { visibility: hidden; }

/* Finished frame when the scene is not running (no JS, reduced motion): host on station, module docked. */
html:not(.scene-live) .module-slot { display: none; }
html:not(.scene-live) .craft { left: var(--station-x); top: var(--station-y); transform: translate(-50.5%, -54.2%) scale(var(--cap)); }
html:not(.scene-live) .dock-ring { opacity: 0.5; }

/* Telemetry */
.tele {
  position: absolute; margin: 0; padding: 0; list-style: none;
  font: 400 12px/1.6 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  display: grid; gap: 2px;
}
.tele-k { color: var(--tan); }
.tele-v b { font-weight: 400; color: var(--paper); font-variant-numeric: tabular-nums; }
.tele-host { left: var(--gutter); top: 110px; }
.tele-module { right: var(--gutter); top: 110px; text-align: right; }
.tele-phase { left: var(--gutter); bottom: 44px; }
.tele-status { right: var(--gutter); bottom: 44px; text-align: right; gap: 4px; }
.tele-status li { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.dot { width: 6px; height: 6px; border: 1px solid var(--muted); display: inline-block; transition: background 0.4s var(--ease), border-color 0.4s var(--ease); }
.dot.on { background: var(--tan); border-color: var(--tan); }

/* Copy */
.copy { position: absolute; left: var(--gutter); top: 50%; transform: translateY(-50%); max-width: min(40vw, 640px); }
.copy h1 { font-size: clamp(38px, 5.6vw, 84px); margin: 0 0 28px; }
.copy .lede { margin-bottom: 36px; max-width: 26em; }

/* Word masks for the headline reveal */
.w-mask { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.w { display: inline-block; will-change: transform; }

.scroll-hint {
  position: absolute; left: 50%; bottom: 36px; transform: translateX(-50%);
  display: grid; justify-items: center; gap: 10px;
  font: 400 11px var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted);
  opacity: 0;
}
.scroll-hint i { width: 1px; height: 36px; background: var(--muted); display: block; transform-origin: top; animation: hint 1.8s var(--ease) infinite; }
@keyframes hint { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* Cosmos: one fixed canvas behind every page, drawn by main.js. Stars on three depth planes, a few planets,
   and slow satellite passes. Scenes that used to carry their own star layer let it show through instead. */
.cosmos { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
html.cosmos-on .stage, html.cosmos-on .ring-stage { background: transparent; }
html.cosmos-on .stars, html.cosmos-on .ring-stars { display: none; }

/* Docking interface sequence.
   Default (phones, no JS, reduced motion): the port, then the four steps as a plain list.
   html.mate-live (desktop with motion): one pinned screen; callouts and steps play on the scroll. */
.mate { padding: var(--section) 0; }
.mate-stage { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.mate-head h2 { margin-top: 18px; max-width: 16em; }
.mate-fig { position: relative; margin: 40px auto; width: min(100%, 520px); }
.mate-port { display: block; width: 100%; height: auto; }
.mate-lines, .mate-call { display: none; }
.mate-steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.mate-steps li { padding: 22px 0; border-bottom: 1px solid var(--rule); }
.mate-steps h3 { font: 400 12px/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--tan); margin-bottom: 8px; }
.mate-steps p { color: var(--muted); max-width: 34em; }
.mate-note { margin-top: 20px; font: 400 13px/1.4 var(--mono); color: var(--muted); }

html.mate-live .mate { padding: 0; }
html.mate-live .mate-stage { position: relative; max-width: none; height: 100vh; height: 100svh; min-height: 620px; padding: 0; overflow: hidden; }
html.mate-live .mate-head { position: absolute; left: var(--gutter); top: 104px; z-index: 2; }
html.mate-live .mate-head h2 { font-size: clamp(28px, 3.2vw, 46px); }
/* The figure is a 16:10 drawing board; the port and every callout are placed in its units. */
html.mate-live .mate-fig { position: absolute; left: 50%; top: 54%; margin: 0; width: min(92vw, 118vh); aspect-ratio: 16 / 10; transform: translate(-50%, -50%); }
html.mate-live .mate-port { position: absolute; left: 30.625%; top: 19%; width: 38.75%; will-change: transform, opacity; }
html.mate-live .mate-lines { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mate-ring, .mate-roller, .mate-line { fill: none; stroke: var(--tan); stroke-width: 1.5; }
.mate-ring, .mate-line { stroke-dasharray: 1; stroke-dashoffset: 0; }
.mate-roller { transform-box: fill-box; transform-origin: center; }
html.mate-live .mate-call { display: block; position: absolute; margin: 0; transform: translateY(-50%); white-space: nowrap; font: 400 12px/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper); }
html.mate-live .mate-call:nth-of-type(1) { right: 75%; top: 64%; }
html.mate-live .mate-call:nth-of-type(2) { right: 75%; top: 15%; }
html.mate-live .mate-call:nth-of-type(3) { left: 75%; top: 23%; }
html.mate-live .mate-call:nth-of-type(4) { left: 75%; top: 48%; }
html.mate-live .mate-steps { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 40px; z-index: 2; border: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
html.mate-live .mate-steps li { position: relative; padding: 16px 0 0; border: 0; border-top: 1px solid var(--rule); transition: border-color 0.5s var(--ease); }
html.mate-live .mate-steps h3 { color: var(--muted); transition: color 0.5s var(--ease); }
html.mate-live .mate-steps p { font-size: 15px; line-height: 1.45; max-width: 24em; opacity: 0.35; transition: opacity 0.5s var(--ease); }
html.mate-live .mate-steps li.on { border-color: var(--tan); }
html.mate-live .mate-steps li.on h3 { color: var(--tan); }
html.mate-live .mate-steps li.on p { opacity: 1; }
html.mate-live .mate-note { position: absolute; right: var(--gutter); top: 110px; margin: 0; z-index: 2; }

/* Mission module ring (customers contact section).
   The stage sits behind the section's content. Desktop: it covers the whole section, which pins while the
   scene plays. Phones: it is a figure between the heading and the form. The poster shows until the scene is live. */
.ring-scene { position: relative; z-index: 0; overflow: hidden; }
.ring-stage { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--ink); }
.ring-stars { position: absolute; inset: -4%; background: url("assets/stars.svg") center / cover no-repeat; opacity: 0.75; }
.ring-earth { position: absolute; left: -22vw; bottom: -46%; width: 140vw; max-width: none; height: auto; opacity: 0.9; }
.ring-canvas, .ring-poster { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ring-poster { object-fit: cover; object-position: left bottom; }
.ring-stage.is-live .ring-poster { visibility: hidden; }
.ring-tags { position: absolute; inset: 0; pointer-events: none; }
.ring-tag {
  position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 10px; padding: 5px 9px 5px 8px;
  font: 400 11px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper);
  background: rgba(6, 11, 22, 0.84); /* keeps the label legible when it crosses the bright hardware */
  white-space: nowrap; opacity: 0; will-change: transform; transition: opacity 0.3s var(--ease);
}
.ring-tag::before { content: ""; width: 6px; height: 6px; background: var(--tan); flex: none; }
.ring-tele {
  position: absolute; left: var(--gutter); bottom: 36px; margin: 0; display: grid; gap: 2px;
  font: 400 12px/1.6 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.ring-tele .tele-k { color: var(--tan); }
.ring-tele .tele-v b { font-weight: 400; color: var(--paper); font-variant-numeric: tabular-nums; }
.ring-stage:not(.is-live) .ring-tags, .ring-stage:not(.is-live) .ring-tele { display: none; }
@media (min-width: 961px) {
  /* Pinned under the 69px header; the heading sits high so the ring has the lower half of the column. */
  .ring-scene { min-height: calc(100svh - 69px); padding-top: clamp(56px, 6vw, 88px); padding-bottom: 48px; } /* keeps the whole form on screen from 800px of height up */
}
@media (max-width: 960px) {
  .ring-stage { position: relative; inset: auto; z-index: auto; height: 84vw; margin: 36px 0 12px; }
  .ring-earth { left: -40vw; width: 190vw; bottom: -34%; }
  .ring-tele { top: 12px; bottom: auto; left: 12px; } /* the ring's top-left corner is the empty one on phones */
}

/* Home "vision" scene: the same ring, full screen, with several hosts. The whole section is the stage. */
.fleet { height: 100vh; height: 100svh; min-height: 620px; padding: 0; }
.fleet .ring-stage { position: absolute; inset: 0; z-index: -1; height: auto; margin: 0; }
/* The night side of the Earth fills the stage; a soft shade keeps the copy and the telemetry readable over the city lights. */
.fleet .ring-earth { inset: 0; left: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; object-position: left center; opacity: 0.94; }
.fleet .ring-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(6, 11, 22, 0.62), rgba(6, 11, 22, 0.12) 46%, rgba(6, 11, 22, 0.4)), linear-gradient(180deg, rgba(6, 11, 22, 0.55), rgba(6, 11, 22, 0) 30%, rgba(6, 11, 22, 0) 78%, rgba(6, 11, 22, 0.6)); }
.fleet .ring-poster, .fleet .ring-canvas { z-index: 1; }
.fleet .ring-tags, .fleet .ring-tele { z-index: 2; }
.fleet .ring-poster { object-position: center; }
.fleet-copy { position: absolute; left: var(--gutter); top: 104px; max-width: min(40vw, 520px); }
.fleet-copy h2 { margin: 18px 0 20px; font-size: clamp(30px, 3.8vw, 58px); }
.fleet-copy .body { color: var(--paper); max-width: 26em; }
@media (max-width: 960px) {
  .fleet-copy { right: var(--gutter); top: 92px; max-width: none; }
  .fleet .ring-earth { object-position: 30% center; }
  .fleet .ring-tele { top: auto; bottom: 20px; left: var(--gutter); }
}

/* Lenis */
html.lenis, html.lenis body { height: auto; }
/* Native smooth scrolling must be off whenever Lenis runs: ScrollTrigger jumps to the top to measure,
   and a smoothed jump makes every position wrong by the current scroll offset. */
html.lenis, .lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

@media (max-width: 960px) {
  .stage { min-height: 100svh; }
  .stage { --host-w: 92vw; --slot-x: 50%; --slot-y: 36%; --station-x: 50%; --station-y: 34%; }
  .copy { top: auto; bottom: 96px; transform: none; max-width: none; right: var(--gutter); }
  .copy h1 { font-size: clamp(34px, 9vw, 56px); margin-bottom: 18px; }
  .copy .lede { font-size: 16px; margin-bottom: 24px; }
  .tele-module, .tele-host { top: 88px; }
  .tele-module { display: none; }
  .tele-phase, .tele-status { display: none; }
  .corridor { display: none; }
  .earth { width: 220vw; left: -70vw; bottom: 0; }
  .page-hero--sunrise { min-height: 0; }
  .page-hero--sunrise .sunrise { width: 200vw; right: -60vw; bottom: -10vh; opacity: 0.85; }
  .page-hero--sunrise .wrap { padding-bottom: 26vh; }
  .scroll-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-hint, .corridor { display: none; }
}

/* Brand v2: scene headings at the display face's sizes */
.copy h1 { font-size: clamp(30px, 4.3vw, 66px); }
html.mate-live .mate-head h2 { font-size: clamp(22px, 2.5vw, 36px); }
.fleet-copy h2 { font-size: clamp(24px, 2.9vw, 44px); }
.tele-k, .ring-tele .tele-k, .mate-steps h3 { color: var(--blue); }
html.mate-live .mate-steps li.on h3 { color: var(--tan); }
@media (max-width: 960px) { .copy h1 { font-size: clamp(26px, 7.4vw, 44px); } }

@media (max-width: 960px) {
  /* phones: the copy runs down over the bright limb, so the top shade reaches further */
  .fleet .ring-stage::after { background: linear-gradient(180deg, rgba(6, 11, 22, 0.82), rgba(6, 11, 22, 0.7) 34%, rgba(6, 11, 22, 0) 52%, rgba(6, 11, 22, 0) 80%, rgba(6, 11, 22, 0.6)); }
}

/* ---------- Home hero: the ring scene opens the page ---------- */
#top.fleet { margin-top: -69px; } /* the stage runs under the sticky header */
#top .fleet-copy { top: 50%; transform: translateY(-46%); max-width: min(38vw, 560px); }
#top .fleet-copy h1 { font-size: clamp(30px, 4.3vw, 66px); margin: 16px 0 24px; }
#top .fleet-copy .lede { margin-bottom: 32px; max-width: 27em; }
#top .scroll-hint { opacity: 1; z-index: 2; }
@media (max-width: 960px) {
  #top .fleet-copy { top: 92px; transform: none; max-width: none; }
  #top .fleet-copy h1 { font-size: clamp(26px, 7.4vw, 44px); margin: 12px 0 14px; }
  #top .fleet-copy .lede { font-size: 15px; line-height: 1.45; margin-bottom: 18px; }
  #top .ring-tele { display: none; }
}

/* ---------- Courier: a host carries a module down the page and sets it down (desktop, placed by main.js) ---------- */
#main { position: relative; }
.courier { display: none; position: absolute; right: 18px; top: 0; z-index: 3; width: clamp(170px, 15vw, 230px); aspect-ratio: 1529 / 437; pointer-events: none; }
.courier-host { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.courier-mod { position: absolute; width: 27%; height: auto; left: 37%; top: 22%; }
html.courier-live .courier { display: block; }

/* ---------- Interface: four steps, side by side ----------
   Default (phones, no JS, reduced motion): a row you swipe. Desktop with motion: the section pins and the row
   slides sideways as you scroll down. */
.iface { padding: var(--section) 0; }
.iface-head { padding: 0 var(--gutter); max-width: var(--max); margin: 0 auto 40px; display: grid; grid-template-columns: 1fr auto; column-gap: 24px; align-items: end; }
.iface-head .label { grid-column: 1 / -1; margin-bottom: 16px; }
.iface-note { font: 400 12px/1.4 var(--mono); color: var(--muted); margin: 0; }
.iface-track { list-style: none; margin: 0; padding: 0 var(--gutter) 12px; display: flex; gap: clamp(16px, 2vw, 32px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.iface-track::-webkit-scrollbar { display: none; }
.iface-panel { flex: 0 0 min(82vw, 560px); scroll-snap-align: center; border: 1px solid var(--rule); display: grid; grid-template-rows: auto 1fr; background: var(--ink); }
.iface-panel figure { margin: 0; aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid var(--rule); }
.iface-panel figure img { width: 62%; height: auto; }
.iface-panel figure.is-photo img { width: 100%; height: 100%; object-fit: cover; }
.iface-text { padding: clamp(20px, 2.2vw, 32px); }
.iface-n { font: 400 12px/1 var(--mono); letter-spacing: 0.16em; color: var(--blue); margin-bottom: 14px; }
.iface-text h3 { font-size: clamp(22px, 2.2vw, 34px); font-weight: 300; margin-bottom: 12px; }
.iface-text p:last-child { color: var(--muted); max-width: 26em; }
.iface-bar { display: none; }
html.iface-live .iface { padding: 0; }
html.iface-live .iface-pin { height: 100vh; height: 100svh; min-height: 620px; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; padding: 104px 0 36px; overflow: hidden; }
html.iface-live .iface-head { width: 100%; margin-bottom: 28px; }
html.iface-live .iface-track { overflow: visible; scroll-snap-type: none; align-items: stretch; min-height: 0; will-change: transform; }
html.iface-live .iface-panel { flex-basis: min(44vw, 640px); grid-template-rows: minmax(0, 1fr) auto; }
html.iface-live .iface-panel figure { aspect-ratio: auto; min-height: 0; }
html.iface-live .iface-bar { display: block; margin: 24px var(--gutter) 0; height: 1px; background: var(--rule); }
html.iface-live .iface-bar i { display: block; height: 100%; background: var(--tan); transform: scaleX(0); transform-origin: left; }
@media (max-width: 960px) {
  .iface-head { display: block; }
  .iface-note { margin-top: 12px; }
}

/* Centred layout: pinned copy lines up with the page column on wide windows */
#top .fleet-copy { left: var(--edge); }
.fleet .ring-tele { left: var(--edge); }
.courier { right: max(18px, calc((100vw - var(--max)) / 2 - 150px)); }
@media (max-width: 960px) {
  #top .fleet-copy { text-align: center; left: var(--gutter); }
  #top .fleet-copy .lede { margin-left: auto; margin-right: auto; }
  #top .fleet-copy .actions { justify-content: center; }
}