/* 动画样式: 所有CSS @keyframes */ 
/* =========================
   低帧率像素风格动画
   直接在 @keyframes 中嵌入 steps 或通过预设类强制使用
   ========================= */

/* 1. 星球呼吸灯：8FPS，透明度跳变 */
@keyframes breathing-light {
  0%   { opacity: 0.4; transform: scale(0.95); }
  50%  { opacity: 1;   transform: scale(1.05); }
  100% { opacity: 0.4; transform: scale(0.95); }
}
.breathing-light {
  animation: breathing-light 2s infinite steps(8, end);
}

/* 2. 标题字母闪烁：霓虹跳变，steps(1) 制造瞬时切换 */
@keyframes title-flicker {
  0%, 100% { opacity: 1;   filter: brightness(1); }
  10%       { opacity: 0.4; filter: brightness(1.8); }
  20%       { opacity: 1;   filter: brightness(1); }
  30%       { opacity: 0.5; filter: brightness(1.6); }
  40%       { opacity: 1;   filter: brightness(1); }
  50%       { opacity: 0.3; filter: brightness(2); }
  60%       { opacity: 1;   filter: brightness(1); }
  70%       { opacity: 0.6; filter: brightness(1.4); }
  80%       { opacity: 1;   filter: brightness(1); }
  90%       { opacity: 0.4; filter: brightness(1.8); }
}
.title-flicker {
  animation: title-flicker 1.5s infinite steps(1, end);
}

/* 3. 按钮星星环绕：12FPS 旋转 */
@keyframes button-stars {
  from { transform: rotate(0deg) translateX(20px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(20px) rotate(-360deg); }
}
.button-stars {
  animation: button-stars 6s linear infinite steps(12, end);
}

/* 4. 流星划过：12FPS 线性位移 */
@keyframes shooting-star {
  0%   { transform: translate(-20%, -20%) rotate(45deg); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translate(120%, 120%) rotate(45deg); opacity: 0; }
}
.shooting-star {
  animation: shooting-star 3s infinite steps(12, end);
}

/* 5. 模态窗口淡入：保持平滑，非像素风格 */
@keyframes modal-fade-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* 6. 模态窗口淡出：保持平滑，非像素风格 */
@keyframes modal-fade-out {
  from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  to   { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
}

/* 7. 进度条填充：保持平滑，非像素风格 */
@keyframes progress-bar-fill {
  from { width: 0%; }
  to   { width: 100%; }
}