/* 远近两层慢慢跟随鼠标；文字和图像本身始终稳定。 */
body{--sky-parallax-scale:1}
body::before{
  z-index:-2;
  inset:-8px;
  opacity:.95;
  transform:translate3d(calc(var(--sky-far-x,0px) * var(--sky-parallax-scale)),calc(var(--sky-far-y,0px) * var(--sky-parallax-scale)),0);
  transition:transform 800ms cubic-bezier(.2,.65,.3,1);
}
body::after{z-index:-3}
.ambient-sky{
  position:fixed;
  inset:0;
  z-index:-1;
  overflow:hidden;
  pointer-events:none;
  opacity:.9;
  --drift-scale:1;
  -webkit-mask-image:linear-gradient(90deg,#000,rgba(0,0,0,.8) 18%,rgba(0,0,0,.35) 40%,rgba(0,0,0,.35) 64%,rgba(0,0,0,.8) 84%,#000);
  mask-image:linear-gradient(90deg,#000,rgba(0,0,0,.8) 18%,rgba(0,0,0,.35) 40%,rgba(0,0,0,.35) 64%,rgba(0,0,0,.8) 84%,#000);
}
.ambient-parallax{
  position:absolute;
  inset:-20px;
  pointer-events:none;
  transform:translate3d(calc(var(--sky-near-x,0px) * var(--sky-parallax-scale)),calc(var(--sky-near-y,0px) * var(--sky-parallax-scale)),0);
  transition:transform 700ms cubic-bezier(.2,.65,.3,1);
}
.ambient-star{
  position:absolute;
  left:var(--star-x);
  top:var(--star-y);
  width:var(--star-size);
  height:var(--star-size);
  border-radius:50%;
  background:#dbe8fa;
  box-shadow:0 0 6px #c1d6f35c;
  opacity:.2;
  pointer-events:none;
  animation:sky-twinkle var(--twinkle) ease-in-out var(--phase) infinite,
    sky-drift var(--drift) ease-in-out var(--travel-phase) infinite alternate;
}
.ambient-star:nth-child(4n){background:#e2c99a;box-shadow:0 0 6px #d0b78055}
@keyframes sky-twinkle{
  0%,100%{opacity:.18}
  45%{opacity:.72}
  70%{opacity:.34}
}
@keyframes sky-drift{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(calc(var(--drift-x) * var(--drift-scale)),calc(var(--drift-y) * var(--drift-scale)),0)}
}
/* 长文页固定远层，并把近层的移动幅度减半，中央阅读带不出现动态星点。 */
body[data-page="read"]{--sky-parallax-scale:.5}
body[data-page="read"]::before{transform:none}
body[data-page="read"] .ambient-sky{
  opacity:.68;
  -webkit-mask-image:linear-gradient(90deg,#000,transparent 16%,transparent 88%,#000);
  mask-image:linear-gradient(90deg,#000,transparent 16%,transparent 88%,#000);
}
body[data-sky-paused] .ambient-star{animation-play-state:paused}
@media(max-width:600px){
  body{--sky-parallax-scale:.6}
  .ambient-sky{--drift-scale:.65;opacity:.78}
  .ambient-star:nth-child(2n){display:none}
}
@media(hover:none),(pointer:coarse){
  body::before,.ambient-parallax{transform:none;transition:none}
}
@media(prefers-reduced-motion:reduce){
  body::before{transform:none;transition:none}
  .ambient-sky{display:none}
}
@media print{.ambient-sky{display:none}}