/* 中秋夜色主题：气氛全部由 CSS 与内联 SVG 绘制，不引用任何外部资源 */

body {
  background:
    radial-gradient(circle at 78% 8%, rgba(255, 214, 140, 0.18), transparent 42%),
    radial-gradient(circle at 12% 82%, rgba(127, 209, 185, 0.12), transparent 46%),
    linear-gradient(180deg, var(--night-1) 0%, var(--night-2) 46%, #0a1024 100%);
  background-attachment: fixed;
}

.sky {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.sky__stars {
  position: absolute;
  inset: -10% 0 0;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, rgba(255, 255, 255, 0.9), transparent 60%),
    radial-gradient(1.4px 1.4px at 28% 42%, rgba(255, 236, 194, 0.8), transparent 60%),
    radial-gradient(1.2px 1.2px at 46% 12%, rgba(255, 255, 255, 0.75), transparent 60%),
    radial-gradient(1.8px 1.8px at 62% 30%, rgba(255, 255, 255, 0.85), transparent 60%),
    radial-gradient(1.2px 1.2px at 74% 62%, rgba(255, 236, 194, 0.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 24%, rgba(255, 255, 255, 0.8), transparent 60%),
    radial-gradient(1.1px 1.1px at 20% 68%, rgba(255, 255, 255, 0.6), transparent 60%),
    radial-gradient(1.3px 1.3px at 36% 86%, rgba(255, 236, 194, 0.65), transparent 60%),
    radial-gradient(1.1px 1.1px at 58% 76%, rgba(255, 255, 255, 0.55), transparent 60%),
    radial-gradient(1.6px 1.6px at 92% 82%, rgba(255, 255, 255, 0.7), transparent 60%),
    radial-gradient(1.2px 1.2px at 8% 50%, rgba(255, 255, 255, 0.6), transparent 60%),
    radial-gradient(1.4px 1.4px at 68% 8%, rgba(255, 236, 194, 0.7), transparent 60%);
  opacity: 0.85;
  animation: twinkle 6s ease-in-out infinite alternate;
}

.sky__moon {
  position: absolute;
  top: clamp(6px, 2.5vh, 40px);
  right: clamp(10px, 3.5vw, 56px);
  width: clamp(84px, 20vw, 170px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 32%, rgba(255, 247, 222, 0.95) 0 18%, transparent 42%),
    radial-gradient(circle at 62% 64%, rgba(246, 219, 168, 0.55) 0 12%, transparent 40%),
    radial-gradient(circle at 44% 74%, rgba(246, 219, 168, 0.4) 0 9%, transparent 36%),
    radial-gradient(circle at 30% 30%, #fff8e2 0%, #ffe9b0 48%, #f3cf87 100%);
  box-shadow:
    0 0 60px rgba(255, 224, 158, 0.5),
    0 0 140px rgba(255, 200, 120, 0.28),
    inset -12px -14px 30px rgba(203, 160, 92, 0.35);
  opacity: 0.86;
  animation: moonFloat 14s ease-in-out infinite alternate;
}

.lantern {
  position: absolute;
  width: clamp(58px, 13vw, 96px);
  height: auto;
  opacity: 0.9;
  filter: drop-shadow(0 0 18px rgba(255, 158, 66, 0.45));
  transform-origin: 50% 0;
  animation: sway 6.5s ease-in-out infinite alternate;
}

.lantern--left {
  top: -6px;
  left: clamp(-8px, 1vw, 26px);
}

.lantern--right {
  top: 84px;
  right: clamp(-10px, 2vw, 30px);
  width: clamp(48px, 11vw, 82px);
  animation-duration: 8s;
  animation-delay: -2.5s;
}

.lantern__line,
.lantern__tassel,
.lantern__rib {
  fill: none;
  stroke: rgba(255, 217, 138, 0.75);
  stroke-width: 3;
  stroke-linecap: round;
}

.lantern__cap {
  fill: var(--gold);
  opacity: 0.9;
}

.lantern__body {
  fill: rgba(255, 138, 61, 0.9);
  stroke: rgba(255, 217, 138, 0.85);
  stroke-width: 2.5;
}

.sky__petals {
  position: absolute;
  inset: 0;
}

.petal {
  position: absolute;
  top: -6vh;
  width: 8px;
  height: 8px;
  border-radius: 50% 0 50% 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 231, 168, 0.95), rgba(255, 179, 71, 0.55));
  opacity: 0;
  animation: fall linear infinite;
}

@keyframes twinkle {
  from {
    opacity: 0.6;
  }
  to {
    opacity: 0.95;
  }
}

@keyframes moonFloat {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-6px, 10px, 0);
  }
}

@keyframes sway {
  from {
    transform: rotate(-3.4deg);
  }
  to {
    transform: rotate(3.4deg);
  }
}

@keyframes fall {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  12% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
    transform: translate3d(-40px, 108vh, 0) rotate(220deg);
  }
}

@media (max-width: 480px) {
  .lantern--right {
    top: 120px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sky__stars,
  .sky__moon,
  .lantern,
  .petal {
    animation: none;
  }

  .petal {
    opacity: 0.35;
  }
}