/* ============================================================
   夜航书 · Sky — the night the book floats in
   ============================================================ */

.sky{
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 108%, var(--dusk) 0%, transparent 46%),
    radial-gradient(90% 70% at 78% 8%,  rgba(140,224,255,.12) 0%, transparent 55%),
    radial-gradient(80% 60% at 18% 22%, rgba(255,183,213,.10) 0%, transparent 55%),
    linear-gradient(178deg, var(--void) 0%, var(--nocturne) 38%, var(--indigo) 66%, var(--plum) 100%);
  transition: background 1.4s var(--ease-soft);
}

/* ── Stars ──────────────────────────────── */
.sky__stars{ position: absolute; inset: 0; }
.star{
  position: absolute;
  background: #fff;
  border-radius: 50%;
  animation: twinkle var(--dur, 4s) ease-in-out var(--delay, 0s) infinite;
}
@keyframes twinkle{
  0%, 100%{ opacity: var(--dim, .25); transform: scale(.8); }
  50%     { opacity: var(--lit, .95); transform: scale(1.25); }
}

/* Shooting star */
.shooting{
  position: absolute;
  width: 160px; height: 1.5px;
  background: linear-gradient(90deg, transparent, #fff, rgba(255,183,213,.6), transparent);
  filter: drop-shadow(0 0 6px rgba(255,255,255,.9));
  opacity: 0;
  animation: shoot 1.5s var(--ease-soft) forwards;
}
@keyframes shoot{
  0%  { opacity: 0; transform: translate(0,0) rotate(24deg) scaleX(.2); }
  12% { opacity: 1; }
  100%{ opacity: 0; transform: translate(60vw, 34vh) rotate(24deg) scaleX(1); }
}

/* ── Moon ───────────────────────────────── */
.moon{
  position: absolute;
  top: 7%; right: 11%;
  width: clamp(90px, 11vw, 170px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 32%, #fffdf6 0%, #ffeecd 42%, #f4d9a8 68%, #e3bf8c 100%);
  box-shadow:
    0 0 60px 18px rgba(255,231,190,.18),
    0 0 160px 60px rgba(255,214,175,.10),
    inset -10px -12px 30px rgba(140,100,70,.18);
  animation: moonDrift 26s ease-in-out infinite alternate;
}
.moon::before,
.moon::after{
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(180,140,105,.15);
}
.moon::before{ width: 22%; height: 22%; top: 28%; left: 24%; }
.moon::after { width: 15%; height: 15%; top: 56%; left: 55%; box-shadow: -18px -22px 0 rgba(180,140,105,.11); }
@keyframes moonDrift{ to{ transform: translate(-14px, 18px); } }

/* ── Cloud sea ──────────────────────────── */
.clouds{ position: absolute; inset: 0; }
.cloud{
  position: absolute;
  border-radius: 50%;
  filter: blur(34px);
  opacity: .5;
  animation: cloudDrift var(--dur, 60s) linear infinite;
}
@keyframes cloudDrift{
  from{ transform: translateX(-30vw); }
  to  { transform: translateX(130vw); }
}

/* Horizon fog under the book */
.sky__fog{
  position: absolute;
  left: -10%; right: -10%; bottom: -6%;
  height: 42%;
  background: radial-gradient(60% 100% at 50% 100%, rgba(255,183,213,.20), transparent 70%);
  filter: blur(20px);
}

/* ── Sakura petals ──────────────────────── */
.petals{ position: fixed; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.petal{
  position: absolute;
  top: -6vh;
  width: var(--w, 13px);
  height: calc(var(--w, 13px) * .82);
  background: linear-gradient(135deg, #ffd8e8 0%, #ffb2d2 55%, #ef8ab6 100%);
  border-radius: 74% 8% 74% 8%;
  opacity: 0;
  filter: drop-shadow(0 1px 2px rgba(120,40,80,.25));
  animation: petalFall var(--dur, 15s) linear var(--delay, 0s) infinite;
}
@keyframes petalFall{
  0%  { opacity: 0; transform: translate3d(0, 0, 0) rotate3d(1,1,.3, 0deg); }
  8%  { opacity: .85; }
  50% { transform: translate3d(var(--drift, 12vw), 52vh, 0) rotate3d(1,1,.3, 400deg); }
  92% { opacity: .5; }
  100%{ opacity: 0; transform: translate3d(calc(var(--drift, 12vw) * 1.7), 108vh, 0) rotate3d(1,1,.3, 900deg); }
}

/* ── Fireflies / spirit motes ───────────── */
.motes{ position: fixed; inset: 0; z-index: 2; pointer-events: none; }
.mote{
  position: absolute;
  width: var(--s, 4px); height: var(--s, 4px);
  border-radius: 50%;
  background: var(--c, #ffd9a0);
  box-shadow: 0 0 10px 2px var(--c, #ffd9a0);
  opacity: .0;
  animation: moteFloat var(--dur, 18s) ease-in-out var(--delay, 0s) infinite;
}
@keyframes moteFloat{
  0%  { opacity: 0;   transform: translate(0, 12vh) scale(.4); }
  20% { opacity: .75; }
  70% { opacity: .55; }
  100%{ opacity: 0;   transform: translate(var(--dx, 6vw), -22vh) scale(1.1); }
}

/* ── Distant torii silhouette ───────────── */
.horizon{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 30%;
  opacity: .5;
  pointer-events: none;
}
.horizon svg{ width: 100%; height: 100%; }

/* ── Ambient theme skins (per-visitor) ──── */
body[data-skin="mizu"]  .sky{ filter: hue-rotate(-16deg) saturate(1.05); }
body[data-skin="sakura"].sky,
body[data-skin="sakura"] .sky{ filter: hue-rotate(18deg) saturate(1.12); }
body[data-skin="lumen"] .sky{ filter: hue-rotate(-34deg) saturate(.94) brightness(1.06); }
body[data-skin="jade"]  .sky{ filter: hue-rotate(96deg) saturate(.9); }

@media (max-width: 780px){
  .moon{ top: 4%; right: 8%; }
}