/* A spatial atlas: four destinations, one continuous field of depth. */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
.cosmos {
  position:relative; isolation:isolate; width:100vw;
  margin-left:calc((100% - 100vw)/2); height:calc(100svh - var(--topbar-h));
  min-height:680px; overflow:clip; overflow-anchor:none; contain:layout paint; text-align:left;
  background:#040b14; scroll-margin-top:var(--topbar-h); outline:none;
  --nebula-rgb:155,180,213;
}
.cosmos-depth {
  position:absolute; inset:-15%; pointer-events:none; opacity:.2;
  background:url('../assets/art/starfield-watercolor.jpg') center/cover;
  mask-image:radial-gradient(ellipse at center,#000,transparent 74%);
  transform:translate3d(var(--space-x,0px),var(--space-y,0px),0) scale(var(--space-scale,1));
  will-change:transform;
}
.cosmos::after {
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 40%,rgba(1,6,13,.6));
  box-shadow:inset 0 50px 80px -50px #07121e;
}
#voyageStars,.nebulae { position:absolute; inset:0; width:100%; height:100%; }
#voyageStars { pointer-events:none; z-index:0; }
.nebulae { z-index:2; pointer-events:none; }
.cosmos-hud,.cosmos-footer {
  position:absolute; left:clamp(24px,5vw,80px); right:clamp(24px,5vw,80px);
  z-index:5; display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.cosmos-hud { top:28px; min-height:36px; }
.cosmos-mark { color:#a7b7c9; font-size:9px; letter-spacing:.3em; white-space:nowrap; }
.cosmos-mark>span { padding:0 16px; color:#526477; }
.voyage-back {
  display:flex; align-items:center; gap:12px; color:#c4cdd7; cursor:pointer;
  border:0; background:none; padding:10px 0; font:300 10px var(--sans); letter-spacing:.08em;
}
.voyage-back>span:first-child { font-size:20px; transition:transform .3s; }
.voyage-back:hover>span:first-child { transform:translateX(-4px); }
.cosmos-instruction {
  position:absolute; top:38px; left:50%; transform:translateX(-50%);
  z-index:4; margin:0; color:#a8b9cc; font-size:11px; letter-spacing:.08em;
  transition:opacity .4s; text-align:center; pointer-events:none; width:max-content; max-width:50%;
}
.cosmos:not([data-phase="overview"]) .cosmos-instruction { opacity:0; }
.cosmos-footer { bottom:25px; color:#7f93a9; font-size:9px; letter-spacing:.13em; pointer-events:none; }
.cosmos-position { font-variant-numeric:tabular-nums; color:#c6d3e0; letter-spacing:.3em; }
.nebula {
  position:absolute; left:0; top:0; width:260px; height:260px;
  margin:-130px 0 0 -130px; padding:0; border:0; background:transparent;
  color:#e3e8e8; cursor:pointer; pointer-events:auto; text-align:center;
  will-change:transform,opacity; -webkit-tap-highlight-color:transparent;
  --cloud-angle:-20deg; --cloud-position:0% 0%;
}
.nebula[data-nebula="moira"] { --nebula-rgb:179,163,200; --cloud-angle:26deg; --cloud-position:100% 100%; }
.nebula[data-nebula="jyotira"] { --nebula-rgb:197,180,144; --cloud-angle:-44deg; --cloud-position:100% 0%; }
.nebula[data-nebula="taiwei"] { --nebula-rgb:144,183,185; --cloud-angle:62deg; --cloud-position:0% 100%; }
.nebula-art { position:absolute; inset:-12%; display:block; pointer-events:none; }
.nebula-cloud {
  position:absolute; inset:-2%; display:block; border-radius:43% 57% 62% 38%/59% 38% 62% 41%;
  background:url('../assets/art/starfield-watercolor.jpg') var(--cloud-position)/300% 240%;
  transform:rotate(var(--cloud-angle)); opacity:.75;
  mask-image:radial-gradient(ellipse 48% 36% at 50% 50%,#000 5%,rgba(0,0,0,.65) 35%,transparent 76%);
  transition:opacity .8s;
}
.nebula-cloud::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 27% 12% at 48% 51%,rgba(var(--nebula-rgb),.75),transparent 95%),
    radial-gradient(ellipse 38% 24% at 58% 48%,rgba(var(--nebula-rgb),.42),transparent 95%);
  mix-blend-mode:screen;
}
.nebula-art::before,.nebula-art::after {
  content:''; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(ellipse 28% 16% at 45% 46%,rgba(var(--nebula-rgb),.22),transparent 95%),
    radial-gradient(ellipse 36% 22% at 58% 58%,rgba(var(--nebula-rgb),.13),transparent 95%);
  transform:rotate(var(--cloud-angle)); animation:nebulaBreathe 13s ease-in-out infinite alternate;
}
.nebula-art::after { inset:10%; opacity:.4; filter:blur(7px); animation-delay:-7s; }
.nebula-stars { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.nebula-stars .cluster-thread { fill:none; stroke:rgba(var(--nebula-rgb),.5); stroke-width:.5; stroke-dasharray:360; stroke-dashoffset:220; transition:stroke-dashoffset 1.5s ease,opacity .8s; opacity:.4; }
.nebula:hover .cluster-thread,.nebula:focus-visible .cluster-thread,.nebula[data-state="selected"] .cluster-thread { stroke-dashoffset:0; opacity:.9; }
.nebula:hover .nebula-cloud,.nebula:focus-visible .nebula-cloud { opacity:1; }
.nebula-caption {
  position:absolute; top:94%; left:50%; transform:translateX(-50%); display:flex;
  align-items:center; justify-content:center; gap:12px; white-space:nowrap;
  transition:opacity .45s; text-shadow:0 2px 10px #020912;
}
.nebula-number { color:#8fabc0; font:300 9px var(--sans); letter-spacing:.1em; }
.nebula-name { font:300 23px var(--serif); letter-spacing:.08em; }
.nebula-cross { color:#9bafc1; font:200 15px var(--sans); margin-left:4px; }
.nebula[data-state="selected"] .nebula-caption { opacity:0; }
.nebula[data-state="distant"] .nebula-cross { opacity:0; }
.nebula[data-state="selected"] { pointer-events:none; }
.view-home .nebula:focus-visible { outline:0; }
.nebula:focus-visible .nebula-caption { outline:1px solid #d6dce2; outline-offset:10px; }
.nebula:focus-visible .nebula-art { filter:brightness(1.4); }
.voyage-details { position:absolute; inset:0; z-index:4; pointer-events:none; }
.voyage-detail {
  position:absolute; left:64%; top:50%; transform:translateY(-50%); width:min(30%,360px);
  color:#c6d1dc; pointer-events:auto; outline:none; padding:20px 0;
  animation:destinationReveal .75s var(--ease-out) both;
}
.voyage-detail::before { content:''; position:absolute; left:-22px; top:22px; bottom:22px; width:1px; background:linear-gradient(transparent,rgba(174,199,219,.3),transparent); }
.voyage-index { display:block; color:#8ea5b9; font:300 9px var(--sans); letter-spacing:.28em; margin-bottom:30px; }
.voyage-detail .eyebrow { font-size:9px; line-height:1.8; letter-spacing:.16em; margin:0 0 12px; color:#b5c7d7; }
.voyage-detail h2 { margin:0 0 24px; color:#ecece4; font:300 clamp(44px,5vw,72px)/1.05 var(--serif); letter-spacing:.02em; }
.voyage-description { margin:0 0 20px; font-size:13px; line-height:2; color:#c7d1db; text-wrap:pretty; }
.voyage-spec { font-size:10px; line-height:1.9; color:#98acbe; margin:0 0 32px; }
.voyage-enter { color:#e8e6da; display:flex; width:max-content; max-width:100%; align-items:center; gap:46px; padding:12px 0; border-bottom:1px solid #7890a5; text-decoration:none; font-size:10px; letter-spacing:.12em; }
.voyage-enter>span:last-child { font-size:20px; transition:transform .3s; }
.voyage-enter:hover>span:last-child { transform:translate(3px,-3px); }
.voyage-detail:focus-visible { outline:1px solid rgba(211,225,236,.4); outline-offset:14px; }
.cosmos[data-running="false"] .nebula-art::before,.cosmos[data-running="false"] .nebula-art::after { animation-play-state:paused; }
@keyframes nebulaBreathe { from{opacity:.55;transform:rotate(var(--cloud-angle)) scale(.96)} to{opacity:1;transform:rotate(calc(var(--cloud-angle) + 5deg)) scale(1.05)} }
@keyframes destinationReveal { from{opacity:0;filter:blur(3px)} to{opacity:1;filter:blur(0)} }
body[data-motion="calm"] .nebula-art::before,body[data-motion="calm"] .nebula-art::after { animation:none; }
body[data-motion="calm"] .voyage-detail { animation:fadeOnly .2s ease both; }
@media(max-width:760px) {
  .cosmos { min-height:700px; }
  .cosmos-instruction { top:89px; max-width:85%; font-size:10px; }
  .cosmos-hud { top:18px; }
  .cosmos-mark { font-size:8px; letter-spacing:.17em; }
  .cosmos-mark>span { padding:0 8px; }
  .voyage-back { font-size:9px; gap:7px; }
  .cosmos-footer { bottom:22px; font-size:8px; letter-spacing:.06em; }
  .nebula-name { font-size:36px; }
  .nebula-number { font-size:16px; }
  .voyage-detail { left:9%; top:52%; transform:none; width:82%; max-width:440px; padding:0; }
  .voyage-detail::before { display:none; }
  .voyage-detail h2 { font-size:42px; margin-bottom:16px; }
  .voyage-index { margin-bottom:16px; }
  .voyage-description { font-size:12px; margin-bottom:12px; line-height:1.9; }
  .voyage-spec { font-size:10px; margin-bottom:16px; }
  .voyage-detail .eyebrow { font-size:8px; margin-bottom:8px; }
  .voyage-enter { font-size:10px; padding:10px 0; }
}
@media(prefers-reduced-motion:reduce) {
  .nebula-art::before,.nebula-art::after { animation:none; }
  .voyage-detail { animation:none; }
  .nebula-stars .cluster-thread { transition:none; }
}