/* 全局初始化与居中定位 */
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #1a1a2e; /* 科技感深蓝色背景 */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  overflow: hidden;
}

/* 加载器容器层 */
.loader {
  text-align: center;
  position: relative;
  transition: opacity 0.5s ease, transform 0.5s ease; /* 用于 JS 淡出动画 */
}

/* 🚀 修复核心：调整弹性布局，增大字母之间的间距 */
.swaying-text {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px; /* 👈 增大了间距（从4px改到15px），防止字母粘在一起 */
}

/* 针对每一个字母/符号设置样式 */
.swaying-text span {
  font-size: 3rem;
  font-weight: bold;
  color: #00fff0; /* 初始青色 */
  text-shadow: 0 0 10px rgba(0, 255, 240, 0.5);
  display: inline-block;
  
  /* 🚀 修复核心：给每个字母固定一个安全宽度并居中，确保旋转时不会撞到旁边的字母 */
  width: 40px; 
  text-align: center; 
  
  /* 绑定 sway 动画：时长 1.2 秒，无限循环，来回播放 */
  animation: sway 1.2s ease-in-out infinite alternate;
}

/* 利用 CSS 变量和 nth-child 让字母产生时间差，形成波浪效果 */
.swaying-text span:nth-child(1) { animation-delay: 0.05s; }
.swaying-text span:nth-child(2) { animation-delay: 0.10s; }
.swaying-text span:nth-child(3) { animation-delay: 0.15s; }
.swaying-text span:nth-child(4) { animation-delay: 0.20s; }
.swaying-text span:nth-child(5) { animation-delay: 0.25s; }
.swaying-text span:nth-child(6) { animation-delay: 0.30s; }
.swaying-text span:nth-child(7) { animation-delay: 0.35s; }
.swaying-text span:nth-child(8) { animation-delay: 0.40s; }
.swaying-text span:nth-child(9) { animation-delay: 0.45s; }
.swaying-text span:nth-child(10) { animation-delay: 0.50s; }

/* 核心摇摆动画：融合了位移（Y轴）、旋转和霓虹颜色渐变 */
@keyframes sway {
  0% {
    transform: translateY(0) rotate(-15deg);
    color: #00fff0;
    text-shadow: 0 0 10px rgba(0, 255, 240, 0.5);
  }
  100% {
    transform: translateY(-15px) rotate(15deg);
    color: #ff007f; /* 摇摆到右侧变成霓虹粉 */
    text-shadow: 0 0 15px rgba(255, 0, 127, 0.8);
  }
}

/* 底部微调阴影 */
.loader-shadow {
  width: 200px; /* 适当拉宽阴影以匹配更宽的字阵 */
  height: 8px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  margin: 25px auto 0;
  filter: blur(4px);
  animation: shadow-scale 1.2s ease-in-out infinite alternate;
}

/* 阴影随文字上下摆动而放大缩小 */
@keyframes shadow-scale {
  0% { transform: scaleX(1); opacity: 0.6; }
  100% { transform: scaleX(0.6); opacity: 0.1; }
}