/* ============================================================
   Nokia 经典开机动画 —— 样式
   纯黑背景、Nokia 字样点亮、握手线条、开机声波均衡器
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

body {
  background:
    radial-gradient(120% 90% at 50% 120%, rgba(18, 65, 145, .35) 0%, rgba(0,0,0,0) 55%),
    #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  overflow: hidden;
  cursor: default;
}

.stage {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ---- NOKIA 字样：逐字点亮（字距展开） ---- */
.word {
  color: #ffffff;
  font-size: 54px;
  font-weight: 700;
  letter-spacing: 12px;
  padding-left: 12px;            /* 抵消末字距，保持视觉居中 */
  opacity: 0;
  animation: fade 1.3s ease .3s forwards;
  text-shadow: 0 0 18px rgba(18, 65, 145, .55);
}

/* ---- 握手线条 ---- */
.hands {
  width: 150px;
  height: 96px;
  display: block;
  margin: 26px auto 0;
  opacity: 0;
  animation: fade 1.3s ease .9s forwards;
}

/* ---- 开机声波（均衡器） ---- */
.wave {
  margin-top: 30px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.wave span {
  display: inline-block;
  width: 4px;
  height: 10px;
  border-radius: 3px;
  background: linear-gradient(180deg, #5b8def, #ffffff);
  animation: eq 1s ease-in-out infinite;
}
.wave span:nth-child(1) { animation-delay: .0s; }
.wave span:nth-child(2) { animation-delay: .12s; }
.wave span:nth-child(3) { animation-delay: .24s; }
.wave span:nth-child(4) { animation-delay: .36s; }
.wave span:nth-child(5) { animation-delay: .48s; }
.wave span:nth-child(6) { animation-delay: .36s; }
.wave span:nth-child(7) { animation-delay: .24s; }
.wave span:nth-child(8) { animation-delay: .12s; }
.wave span:nth-child(9) { animation-delay: .0s; }

@keyframes eq {
  0%, 100% { height: 9px; }
  50%      { height: 36px; }
}

.hint {
  margin-top: 18px;
  color: #8a8a8a;
  font-size: 14px;
  letter-spacing: 4px;
  opacity: 0;
  animation: fade 1.4s ease 1.3s forwards;
}

@keyframes fade { to { opacity: 1; } }