/* 使用原生 8919 像素哈勃影像，按屏幕选择清晰度与下载体积合适的版本。 */
:root { --bg: #07101d; }
body { isolation: isolate; }
body::before {
  inset: -3%;
  z-index: -3;
  background-image: url('./assets/nebula-hubble-8k.webp');
  background-image: image-set(
    url('./assets/nebula-hubble-4800.webp') 1x,
    url('./assets/nebula-hubble-6400.webp') 2x
  );
  background-size: cover;
  background-position: 50% 43%;
  background-repeat: no-repeat;
  opacity: 1;
  filter: none;
  transform-origin: 50% 45%;
  animation: starfield-drift 70s ease-in-out infinite alternate;
  will-change: transform;
}
.ambient {
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(3, 10, 23, .48), rgba(3, 10, 23, .6) 28%, rgba(3, 10, 23, .12) 52%, rgba(3, 10, 23, .28)),
    linear-gradient(90deg, rgba(3, 10, 23, .14), transparent 40%, rgba(3, 10, 23, .08));
  animation: none;
  will-change: auto;
}
.sky-canvas {
  display: block;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}
.destination::before {
  background: linear-gradient(90deg, rgba(6, 16, 31, .72), rgba(8, 20, 35, .48));
  opacity: 1;
  filter: none;
}
/* 在文字和操作面板后局部加深，保留周围星云的亮度与原图细节。 */
.header { background: rgba(5, 13, 26, .7); }
.focus-panel { background: linear-gradient(140deg, rgba(15, 30, 46, .94), rgba(6, 17, 29, .94)); }
.chart-panel, .collection-panel, .records-panel, .atlas-card { background: rgba(6, 17, 30, .9); }
.destination { background: rgba(4, 12, 25, .68); }
.intro h1, .stat strong { text-shadow: 0 2px 12px rgba(0, 0, 0, .45); }
.stat > span, .intro p, #today-label {
  color: #d2dce9;
  text-shadow: 0 1px 5px rgba(0, 0, 0, .85);
}
/* 每张高清图只放两颗行星，增加单颗行星的实际像素，采用无损编码。 */
.planet-sprite {
  --sprite-x: 0%;
  background-image: url('./assets/planets-mercury-venus.webp');
  background-size: 200% 100%;
  background-position: var(--sprite-x) 50%;
}
.planet-sprite[data-planet-index="2"],
.planet-sprite[data-planet-index="3"] { background-image: url('./assets/planets-earth-mars.webp'); }
.planet-sprite[data-planet-index="4"],
.planet-sprite[data-planet-index="5"] { background-image: url('./assets/planets-jupiter-saturn.webp'); }
.planet-sprite[data-planet-index="6"],
.planet-sprite[data-planet-index="7"] { background-image: url('./assets/planets-uranus-neptune.webp'); }
.planet-sprite[data-planet-index="1"],
.planet-sprite[data-planet-index="3"],
.planet-sprite[data-planet-index="5"],
.planet-sprite[data-planet-index="7"] { --sprite-x: 100%; }
#sky-toggle {
  color: #c0e4e2;
  cursor: pointer;
}
#sky-toggle:disabled { cursor: default; }
.sky-credit {
  margin: -6px auto 20px;
  padding: 4px 16px;
  max-width: 1000px;
  color: #b5c2d1;
  text-align: center;
  font-size: 10px;
  line-height: 1.8;
  text-wrap: pretty;
  background: rgba(4, 12, 24, .66);
  border-radius: 8px;
}
.sky-credit a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.sky-credit a:hover { color: var(--mint); }
html[data-sky-motion="paused"] body::before,
html[data-sky-motion="paused"] .ambient {
  animation-play-state: paused;
}
@keyframes starfield-drift {
  from { transform: translate3d(-.6%, -.4%, 0) scale(1.025); }
  to { transform: translate3d(.9%, .6%, 0) scale(1.065); }
}
@keyframes nebula-drift {
  from { transform: translate3d(-1.5%, 0, 0) scale(1); }
  to { transform: translate3d(1.5%, 2%, 0) scale(1.06); }
}
@media (min-width: 2800px) and (min-resolution: 1.5dppx) {
  body::before { background-image: url('./assets/nebula-hubble-8k.webp'); }
}
/* 手机选择独立高分辨率版本与构图，避免加载完整八千像素照片。 */
@media (max-width: 760px) {
  body::before {
    background-image: url('./assets/nebula-hubble-mobile.webp');
    background-position: 40% 46%;
    animation-name: starfield-mobile-drift;
  }
  .ambient { background: linear-gradient(180deg, rgba(3, 10, 23, .56), rgba(3, 10, 23, .6) 35%, rgba(3, 10, 23, .12) 60%, rgba(3, 10, 23, .3)); }
  .sky-credit { margin-top: -8px; font-size: 9px; }
}
@keyframes starfield-mobile-drift {
  from { transform: translate3d(-.6%, -.4%, 0); }
  to { transform: translate3d(.9%, .6%, 0); }
}
/* 系统要求减少动态时保留明亮的静态星空。 */
@media (prefers-reduced-motion: reduce) {
  body::before, .ambient { animation: none; will-change: auto; }
}