/* 白屏阶段会执行的 CSS 加载动画 */
body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff; /* 默认亮色背景，避免闪烁 */
}

/* 兼容暗黑模式的背景色 */
@media (prefers-color-scheme: dark) {
  body,
  html {
    background-color: #141414;
  }
}

#app-loading {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  z-index: 9999;
}

.music-note {
  font-size: 42px;
  font-family: Arial, "Microsoft YaHei", sans-serif;
  /* 使用 ease-in-out 和完整的关键帧来确保循环过渡顺滑 */
  animation: note-bounce 1.5s ease-in-out infinite;
  display: inline-block;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(0); /* 初始占位 */
}

/* 使用负延迟（negative animation-delay），让所有音符一开始就处于不同阶段的运动状态，彻底解决等待后突然跳动的顿挫感 */
.note-1 {
  color: #ff6b6b;
  animation-delay: -1.2s;
}
.note-2 {
  color: #4d96ff;
  animation-delay: -0.9s;
}
.note-3 {
  color: #6bcb77;
  animation-delay: -0.6s;
}
.note-4 {
  color: #ffd93d;
  animation-delay: -0.3s;
}
.note-5 {
  color: #b983ff;
  animation-delay: 0s;
}

@keyframes note-bounce {
  0%,
  100% {
    transform: translateY(15px);
  }
  50% {
    transform: translateY(-15px);
  }
}