.slideshow {
  height: 400px;
  object-fit: cover;
}

/* 星空层 */
.stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 6px #ffffff, 0 0 12px #ffffff, 0 0 18px #ffffff;
  animation: twinkle 2s infinite;
}

/* 星星闪烁动画 */
@keyframes twinkle {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

/* 星星位置和动画延迟 */
.star-1 {
  top: 15%;
  left: 20%;
  animation-delay: 0s;
  animation-duration: 2.5s;
}
.star-2 {
  top: 25%;
  left: 80%;
  animation-delay: 0.3s;
  animation-duration: 3s;
}
.star-3 {
  top: 10%;
  left: 60%;
  animation-delay: 0.8s;
  animation-duration: 2s;
}
.star-4 {
  top: 35%;
  left: 15%;
  animation-delay: 1.2s;
  animation-duration: 2.8s;
}
.star-5 {
  top: 20%;
  left: 45%;
  animation-delay: 0.5s;
  animation-duration: 3.2s;
}
.star-6 {
  top: 8%;
  left: 85%;
  animation-delay: 1.5s;
  animation-duration: 2.3s;
}
.star-7 {
  top: 30%;
  left: 70%;
  animation-delay: 0.2s;
  animation-duration: 2.7s;
}
.star-8 {
  top: 12%;
  left: 35%;
  animation-delay: 1.8s;
  animation-duration: 3.5s;
}
.star-9 {
  top: 40%;
  left: 25%;
  animation-delay: 0.7s;
  animation-duration: 2.1s;
}
.star-10 {
  top: 18%;
  left: 90%;
  animation-delay: 1.1s;
  animation-duration: 2.9s;
}
.star-11 {
  top: 28%;
  left: 55%;
  animation-delay: 0.4s;
  animation-duration: 3.1s;
}
.star-12 {
  top: 5%;
  left: 75%;
  animation-delay: 1.6s;
  animation-duration: 2.4s;
}
.star-13 {
  top: 22%;
  left: 10%;
  animation-delay: 0.9s;
  animation-duration: 2.6s;
}
.star-14 {
  top: 38%;
  left: 65%;
  animation-delay: 1.3s;
  animation-duration: 3.3s;
}
.star-15 {
  top: 14%;
  left: 50%;
  animation-delay: 0.1s;
  animation-duration: 2.2s;
}
.star-16 {
  top: 32%;
  left: 85%;
  animation-delay: 1.7s;
  animation-duration: 3.4s;
}
.star-17 {
  top: 6%;
  left: 30%;
  animation-delay: 0.6s;
  animation-duration: 2.8s;
}
.star-18 {
  top: 26%;
  left: 95%;
  animation-delay: 1.4s;
  animation-duration: 2.5s;
}
.star-19 {
  top: 16%;
  left: 40%;
  animation-delay: 1.9s;
  animation-duration: 3.6s;
}
.star-20 {
  top: 36%;
  left: 5%;
  animation-delay: 0.3s;
  animation-duration: 2.7s;
}

/* 流星层 */
.meteors {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
}

.meteor {
  position: absolute;
  width: 3px;
  height: 3px;
  background: radial-gradient(
    circle,
    #ffffff 0%,
    #87ceeb 50%,
    transparent 100%
  );
  border-radius: 50%;
  box-shadow: 0 0 8px #ffffff, 0 0 16px #ffffff, 0 0 24px #87ceeb,
    0 0 32px #87ceeb;
}

.meteor::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(135, 206, 235, 0.6) 30%,
    transparent 100%
  );
  transform-origin: 0 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  opacity: 0.9;
  border-radius: 1px;
}

.meteor::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(135, 206, 235, 0.3) 20%,
    transparent 100%
  );
  transform-origin: 0 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  opacity: 0.6;
}
.slide-txt {
  /*animation: glow 3s ease-in-out infinite alternate;*/
}

/* 文字发光效果 */
@keyframes glow {
  from {
    text-shadow: 0 0 1px #ffffff, 0 0 2px #ffffff, 0 0 5px #87ceeb,
      0 0 10px #87ceeb;
  }
  to {
    text-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #87ceeb,
      0 0 40px #87ceeb;
  }
}
/* 流星划过动画 */
@keyframes meteor-fall {
  0% {
    opacity: 0;
    transform: translateX(-100px) translateY(-100px);
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(100vw) translateY(100vh);
  }
}

/* 流星轨迹和时间 */
.meteor-1 {
  top: 5%;
  left: -50px;
  animation: meteor-fall 10s infinite;
  animation-delay: 2s;
}

.meteor-2 {
  top: 15%;
  left: -50px;
  animation: meteor-fall 8s infinite;
  animation-delay: 5s;
}

.meteor-3 {
  top: 25%;
  left: -50px;
  animation: meteor-fall 6s infinite;
  animation-delay: 8s;
}

.meteor-4 {
  top: 10%;
  left: -50px;
  animation: meteor-fall 4s infinite;
  animation-delay: 12s;
}
/* 云朵层 */
.clouds {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.cloud {
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50px;
  opacity: 0.3;
}

.cloud::before {
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50px;
}

.cloud::after {
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50px;
}

.cloud-1 {
  width: 80px;
  height: 30px;
  top: 20%;
  left: -100px;
  animation: cloud-drift 25s infinite linear;
}

.cloud-1::before {
  width: 50px;
  height: 50px;
  top: -25px;
  left: 10px;
}

.cloud-1::after {
  width: 60px;
  height: 40px;
  top: -15px;
  right: 15px;
}

.cloud-2 {
  width: 60px;
  height: 25px;
  top: 35%;
  left: -80px;
  animation: cloud-drift 30s infinite linear;
  animation-delay: 10s;
}

.cloud-2::before {
  width: 40px;
  height: 40px;
  top: -20px;
  left: 5px;
}

.cloud-2::after {
  width: 50px;
  height: 30px;
  top: -10px;
  right: 10px;
}

.cloud-3 {
  width: 100px;
  height: 35px;
  top: 15%;
  left: -120px;
  animation: cloud-drift 35s infinite linear;
  animation-delay: 20s;
}

.cloud-3::before {
  width: 60px;
  height: 60px;
  top: -30px;
  left: 15px;
}

.cloud-3::after {
  width: 70px;
  height: 45px;
  top: -20px;
  right: 20px;
}

/* 云朵漂移动画 */
@keyframes cloud-drift {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 0.3;
  }
  90% {
    opacity: 0.3;
  }
  100% {
    transform: translateX(calc(100vw + 200px));
    opacity: 0;
  }
}
/* 建筑物灯光闪烁 */
.building-lights {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.building-light {
  position: absolute;
  width: 3px;
  height: 4px;
  background: rgba(255, 255, 0, 0.8);
  border-radius: 1px;
  box-shadow: 0 0 8px rgba(255, 255, 0, 0.6);
}

.light-1 {
  top: 45%;
  left: 25%;
  animation: building-flicker 3s infinite;
  animation-delay: 0s;
}
.light-2 {
  top: 50%;
  left: 35%;
  animation: building-flicker 4s infinite;
  animation-delay: 1s;
}
.light-3 {
  top: 42%;
  left: 45%;
  animation: building-flicker 2.5s infinite;
  animation-delay: 2s;
}
.light-4 {
  top: 48%;
  left: 55%;
  animation: building-flicker 3.5s infinite;
  animation-delay: 0.5s;
}
.light-5 {
  top: 44%;
  left: 65%;
  animation: building-flicker 4.2s infinite;
  animation-delay: 1.5s;
}
.light-6 {
  top: 52%;
  left: 75%;
  animation: building-flicker 2.8s infinite;
  animation-delay: 2.5s;
}
.light-7 {
  top: 46%;
  left: 85%;
  animation: building-flicker 3.8s infinite;
  animation-delay: 3s;
}

/* 建筑物灯光闪烁动画 */
@keyframes building-flicker {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.1;
  }
  85% {
    opacity: 0.9;
  }
}

/* 光晕效果 */
.aurora {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.aurora-beam {
  position: absolute;
  width: 200px;
  height: 300px;
  background: linear-gradient(
    45deg,
    rgba(0, 255, 255, 0.1) 0%,
    rgba(255, 0, 255, 0.1) 50%,
    rgba(0, 255, 0, 0.1) 100%
  );
  border-radius: 50%;
  filter: blur(20px);
  animation: aurora-dance 15s infinite ease-in-out;
}

.aurora-1 {
  top: 10%;
  left: 20%;
  animation-delay: 0s;
}

.aurora-2 {
  top: 5%;
  left: 60%;
  animation-delay: 5s;
}

.aurora-3 {
  top: 15%;
  left: 80%;
  animation-delay: 10s;
}

/* 极光舞动动画 */
@keyframes aurora-dance {
  0%,
  100% {
    opacity: 0.2;
    transform: translateY(0) scale(1);
  }
  25% {
    opacity: 0.4;
    transform: translateY(-20px) scale(1.1);
  }
  50% {
    opacity: 0.6;
    transform: translateY(-10px) scale(0.9);
  }
  75% {
    opacity: 0.3;
    transform: translateY(-30px) scale(1.2);
  }
}

/* 增强星星闪烁效果 */
.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 6px #ffffff, 0 0 12px #ffffff, 0 0 18px #ffffff;
  animation: enhanced-twinkle 2s infinite;
}

/* 增强的星星闪烁动画 */
@keyframes enhanced-twinkle {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(1);
    box-shadow: 0 0 6px #ffffff, 0 0 12px #ffffff, 0 0 18px #ffffff;
  }
  25% {
    opacity: 0.8;
    transform: scale(1.3);
    box-shadow: 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 30px #87ceeb;
  }
  50% {
    opacity: 1;
    transform: scale(1.5);
    box-shadow: 0 0 15px #ffffff, 0 0 25px #ffffff, 0 0 35px #87ceeb;
  }
  75% {
    opacity: 0.6;
    transform: scale(1.1);
    box-shadow: 0 0 8px #ffffff, 0 0 16px #ffffff, 0 0 24px #87ceeb;
  }
}