:root {
  --bg: #f7f8fa;
  --accent: #2f6fed;
  --globe-line: rgba(47, 111, 237, .16);
  --globe-rim: rgba(47, 111, 237, .22);
  --globe-glow: rgba(47, 111, 237, .07);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c0e12;
    --accent: #609aff;
    --globe-line: rgba(150, 182, 255, .13);
    --globe-rim: rgba(150, 182, 255, .19);
    --globe-glow: rgba(96, 154, 255, .09);
  }
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
}

.page-bg {
  position: fixed; inset: 0; overflow: hidden;
  display: grid; place-items: center;
  pointer-events: none;
}

.globe-tilt {
  transform: rotateX(-17deg) rotateZ(-7deg);
  transform-style: preserve-3d;
  perspective: 1100px;
}

.globe {
  --r: min(62vmin, 440px);
  position: relative;
  width: calc(var(--r) * 2);
  height: calc(var(--r) * 2);
  transform-style: preserve-3d;
  animation: globe-spin 18s linear infinite;
}

.globe::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--globe-rim);
}

.globe span, .globe i {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--globe-line);
}

.globe span { inset: 0; }
/* 等距经线转 22.5° 就完全重合，看不出在转；逐条压低透明度打破这个对称 */
.m0 { transform: rotateY(0deg); opacity: 1; }
.m1 { transform: rotateY(22.5deg); opacity: .88; }
.m2 { transform: rotateY(45deg); opacity: .74; }
.m3 { transform: rotateY(67.5deg); opacity: .58; }
.m4 { transform: rotateY(90deg); opacity: .44; }
.m5 { transform: rotateY(112.5deg); opacity: .32; }
.m6 { transform: rotateY(135deg); opacity: .22; }
.m7 { transform: rotateY(157.5deg); opacity: .14; }

.globe i {
  left: 50%; top: 50%;
  width: calc(var(--r) * 2 * var(--w));
  height: calc(var(--r) * 2 * var(--w));
  margin-left: calc(var(--r) * var(--w) * -1);
  margin-top: calc(var(--r) * var(--w) * -1);
}
.l0 { --w: .6; }
.l1 { --w: .917; }
.l2 { --w: 1; }
.l3 { --w: .917; }
.l4 { --w: .6; }
.l0 { transform: rotateX(90deg) translateZ(calc(var(--r) * -.8)); }
.l1 { transform: rotateX(90deg) translateZ(calc(var(--r) * -.4)); }
.l2 { transform: rotateX(90deg) translateZ(0); }
.l3 { transform: rotateX(90deg) translateZ(calc(var(--r) * .4)); }
.l4 { transform: rotateX(90deg) translateZ(calc(var(--r) * .8)); }

/* 面标点：经度取非整倍数，旋转时才有明确的移动参照 */
.globe b {
  position: absolute; left: 50%; top: 50%;
  width: 7px; height: 7px; margin: -3.5px;
  border-radius: 50%;
  background: var(--accent);
}
.p1 { transform: rotateY(0deg) rotateX(24deg) translateZ(var(--r)); opacity: .62; }
.p2 { transform: rotateY(52deg) rotateX(-12deg) translateZ(var(--r)); opacity: .5; }
.p3 { transform: rotateY(104deg) rotateX(38deg) translateZ(var(--r)); opacity: .42; }
.p4 { transform: rotateY(150deg) rotateX(-28deg) translateZ(var(--r)); opacity: .55; }
.p5 { transform: rotateY(206deg) rotateX(6deg) translateZ(var(--r)); opacity: .38; }
.p6 { transform: rotateY(268deg) rotateX(-40deg) translateZ(var(--r)); opacity: .48; }

.globe-glow {
  position: absolute; inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--globe-glow), transparent 68%);
  filter: blur(6px);
}

.sat-ring {
  position: absolute; inset: 0;
  transform: rotateX(66deg) rotateZ(14deg);
  transform-style: preserve-3d;
}

.sat {
  position: absolute; left: 50%; top: 50%;
  width: 7px; height: 7px; margin: -3.5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .5;
}
.s1 { animation: sat-a 9s linear infinite; }
.s2 { animation: sat-b 13s linear infinite reverse; width: 5px; height: 5px; margin: -2.5px; opacity: .34; }
.s3 { animation: sat-c 17s linear infinite; width: 5px; height: 5px; margin: -2.5px; opacity: .26; }

@keyframes globe-spin { to { transform: rotateY(1turn); } }
@keyframes sat-a {
  from { transform: rotate(0) translateX(var(--r)); }
  to { transform: rotate(1turn) translateX(var(--r)); }
}
@keyframes sat-b {
  from { transform: rotate(0) translateX(calc(var(--r) * .72)); }
  to { transform: rotate(1turn) translateX(calc(var(--r) * .72)); }
}
@keyframes sat-c {
  from { transform: rotate(0) translateX(calc(var(--r) * 1.12)); }
  to { transform: rotate(1turn) translateX(calc(var(--r) * 1.12)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}