/* 深空星云 - Deep Space Nebula（高级灰白版） */
/* 配色：高级灰白宇宙感，克制留白，保留星空结构 */

.background-deepspace-nebula {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
  background: #f5f5f5;
}

/* 主星云层 - 灰阶渐变背景 */
.background-deepspace-nebula::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background:
    radial-gradient(ellipse at 18% 25%, rgba(180, 180, 190, 0.08) 0%, transparent 48%),
    radial-gradient(ellipse at 78% 28%, rgba(170, 175, 185, 0.08) 0%, transparent 52%),
    radial-gradient(ellipse at 42% 72%, rgba(185, 182, 188, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 82%, rgba(160, 165, 175, 0.06) 0%, transparent 42%),
    radial-gradient(circle at 50% 55%, rgba(150, 152, 160, 0.05) 0%, transparent 62%),
    linear-gradient(180deg,
      #e8e8e8 0%,
      #f2f2f2 25%,
      #e0e0e0 50%,
      #f0f0f0 75%,
      #e5e5e5 100%
    );
  animation: none;
  opacity: 0.95;
  filter: blur(1px);
}

/* 次级星云层 - 极淡灰阶云雾 */
.background-deepspace-nebula::after {
  content: '';
  position: absolute;
  top: -30%;
  left: -30%;
  width: 160%;
  height: 160%;
  background:
    radial-gradient(ellipse at 60% 40%, rgba(140, 145, 155, 0.06) 0%, transparent 52%),
    radial-gradient(ellipse at 28% 62%, rgba(150, 148, 158, 0.05) 0%, transparent 48%),
    radial-gradient(ellipse at 75% 78%, rgba(130, 135, 145, 0.05) 0%, transparent 42%),
    radial-gradient(ellipse at 50% 20%, rgba(160, 162, 168, 0.04) 0%, transparent 55%);
  animation: none;
  mix-blend-mode: multiply;
  opacity: 0.6;
  filter: blur(4px);
}

/* 星点层 - 灰阶星点 */
.background-deepspace-nebula .stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    /* 大星点 */
    radial-gradient(circle, rgba(100, 100, 105, 0.5) 0%, transparent 2px),
    radial-gradient(circle, rgba(80, 80, 85, 0.45) 0%, transparent 2px),
    radial-gradient(circle, rgba(90, 90, 95, 0.48) 0%, transparent 2px),
    /* 中星点 */
    radial-gradient(circle, rgba(120, 120, 125, 0.4) 0%, transparent 1.5px),
    radial-gradient(circle, rgba(70, 70, 75, 0.35) 0%, transparent 1.5px),
    radial-gradient(circle, rgba(85, 85, 90, 0.38) 0%, transparent 1.5px),
    /* 小星点 */
    radial-gradient(circle, rgba(100, 100, 105, 0.3) 0%, transparent 1px),
    radial-gradient(circle, rgba(60, 60, 65, 0.25) 0%, transparent 1px),
    radial-gradient(circle, rgba(75, 75, 80, 0.28) 0%, transparent 1px);
  background-size:
    550px 550px,
    600px 600px,
    650px 650px,
    350px 350px,
    380px 380px,
    400px 400px,
    200px 200px,
    220px 220px,
    240px 240px;
  background-position:
    0% 0%,
    40% 60%,
    80% 20%,
    25% 25%,
    75% 75%,
    50% 90%,
    15% 70%,
    85% 40%,
    60% 10%;
  animation: none;
  opacity: 0.85;
}

/* 星点闪烁效果 - 灰阶 */
.background-deepspace-nebula .stars::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    radial-gradient(circle, rgba(120, 120, 125, 0.4) 0%, transparent 1.5px),
    radial-gradient(circle, rgba(90, 90, 95, 0.35) 0%, transparent 1.5px),
    radial-gradient(circle, rgba(100, 100, 105, 0.38) 0%, transparent 1.5px);
  background-size:
    450px 450px,
    500px 500px,
    480px 480px;
  background-position:
    30% 40%,
    70% 15%,
    20% 85%;
  animation: none;
}

/* 流星层 - 灰阶（默认隐藏） */
.background-deepspace-nebula .stars::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(135deg, transparent 30%, rgba(100, 100, 105, 0.35) 45%, transparent 50%),
    linear-gradient(150deg, transparent 25%, rgba(80, 80, 85, 0.3) 40%, transparent 45%);
  background-size: 200px 200px, 250px 250px;
  background-position: -300% -300%, -400% -400%;
  animation: none;
  opacity: 0;
}

/* Logo水印层 - 极淡灰 */
.background-deepspace-nebula .logo-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46vmin;
  height: 46vmin;
  transform: translate(-50%, -50%);
  opacity: 0.12;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='-24 -24 498 498' stroke='%236b7280' stroke-width='30' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='rotate(180 193.9767 209.92345) translate(-1.8177 0)'%3E%3Cpath d='M 154.3797 311.9151 A 263.2899 263.2899 0 0 1 10.0493 419.8469 A 209.5463 209.5463 0 0 1 23.6779 268.5065 A 189.4178 189.4178 0 0 1 195.7944 0 A 189.4178 189.4178 0 0 1 367.911 268.5065 A 209.5463 209.5463 0 0 1 381.5395 419.8469 A 263.2899 263.2899 0 0 1 237.2091 311.9151 A 386.6506 386.6506 0 0 1 195.7944 314.0863 A 386.6506 386.6506 0 0 1 154.3797 311.9151 Z'/%3E%3Ccircle cx='101.8355' cy='167.3482' r='46.9794'/%3E%3Ccircle cx='289.7533' cy='167.3482' r='46.9794'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  mix-blend-mode: normal;
  animation: none;
  pointer-events: none;
}

/* 动画定义 */

/* 主星云呼吸动画 */
@keyframes nebulaPulse {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 0.95;
  }
  25% {
    transform: scale(1.03) rotate(0.5deg);
    opacity: 0.92;
  }
  50% {
    transform: scale(1.05) rotate(1deg);
    opacity: 0.88;
  }
  75% {
    transform: scale(1.03) rotate(0.5deg);
    opacity: 0.92;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 0.95;
  }
}

/* 星云流动动画 */
@keyframes nebulaFlow {
  0% {
    transform: translate(0%, 0%) rotate(0deg);
    opacity: 0.7;
  }
  33% {
    transform: translate(3%, 2%) rotate(1deg);
    opacity: 0.6;
  }
  66% {
    transform: translate(-2%, 3%) rotate(-1deg);
    opacity: 0.8;
  }
  100% {
    transform: translate(0%, 0%) rotate(0deg);
    opacity: 0.7;
  }
}

/* 星点漂移动画 */
@keyframes starsFloat {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-50px, -50px);
  }
}

/* 星点闪烁动画 */
@keyframes starsTwinkle {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  25% {
    opacity: 0.8;
    transform: scale(1.2);
  }
  50% {
    opacity: 0.3;
    transform: scale(0.9);
  }
  75% {
    opacity: 0.9;
    transform: scale(1.1);
  }
}

/* 流星动画 */
@keyframes shootingStars {
  0% {
    background-position: -300% -300%, -400% -400%;
    opacity: 0;
  }
  5% {
    opacity: 0.5;
  }
  10% {
    background-position: 0% 0%, 0% 0%;
    opacity: 1;
  }
  15% {
    opacity: 0;
  }
  100% {
    background-position: 300% 300%, 400% 400%;
    opacity: 0;
  }
}

/* 水印慢漂移 */
@keyframes watermarkDrift {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -52%) scale(1.03);
  }
}

/* 响应式优化 */
@media (max-width: 768px) {
  .background-deepspace-nebula::before {
    animation-duration: 70s;
  }

  .background-deepspace-nebula .stars {
    animation-duration: 100s;
  }
}

/* 低动效偏好 - 全部静止 */
@media (prefers-reduced-motion: reduce) {
  .background-deepspace-nebula::before,
  .background-deepspace-nebula::after,
  .background-deepspace-nebula .stars,
  .background-deepspace-nebula .stars::before,
  .background-deepspace-nebula .stars::after,
  .background-deepspace-nebula .logo-watermark {
    animation: none !important;
  }
}

/* 无动画模式：根带 .background-no-motion 时禁用本背景所有动画（覆盖本文件内动画） */
.background-deepspace-nebula.background-no-motion,
.background-deepspace-nebula.background-no-motion::before,
.background-deepspace-nebula.background-no-motion::after,
.background-deepspace-nebula.background-no-motion * {
  animation: none !important;
}