/* ===== 基础样式 ===== */
* { scrollbar-width: thin; scrollbar-color: hsl(260, 20%, 18%) transparent; }
*::-webkit-scrollbar { width: 6px; background: transparent; }
*::-webkit-scrollbar-thumb { background: hsl(260, 20%, 18%); border-radius: 3px; }

html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== 渐变文字 ===== */
.gradient-text {
  background: linear-gradient(135deg, hsl(260, 70%, 75%), hsl(280, 70%, 65%), hsl(260, 70%, 75%));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===== 星空背景 ===== */
.starry-bg {
  background:
    radial-gradient(ellipse at 20% 80%, rgba(139, 92, 246, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(56, 189, 248, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(139, 92, 246, 0.04) 0%, transparent 70%),
    hsl(260, 25%, 8%);
}

/* ===== 粒子画布 ===== */
#particle-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* ===== 动画 ===== */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.animate-float {
  animation: float 3s ease-in-out infinite;
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up {
  animation: fade-in-up 0.6s ease-out forwards;
}

@keyframes glow-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
.animate-glow-pulse {
  animation: glow-pulse 4s ease-in-out infinite;
}

@keyframes candle {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}
.animate-candle {
  animation: candle 2s ease-in-out infinite;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.shimmer-text {
  background: linear-gradient(90deg, hsl(260, 70%, 65%) 0%, hsl(280, 70%, 75%) 50%, hsl(260, 70%, 65%) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 3s ease-in-out infinite;
}

/* ===== 卡片发光 ===== */
.card-glow:hover {
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.15), 0 0 40px rgba(139, 92, 246, 0.08);
  border-color: rgba(139, 92, 246, 0.3) !important;
}

/* ===== 移动端菜单 ===== */
#mobileMenu {
  transition: all 0.3s ease;
}

/* ===== 导航栏滚动效果 ===== */
nav.scrolled {
  background: rgba(18, 12, 30, 0.9) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid hsl(260, 20%, 18%);
}

/* ===== 滚动显示动画 ===== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: all 0.6s ease-out;
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* ===== 按钮渐变 ===== */
.btn-gradient {
  background: linear-gradient(135deg, hsl(260, 70%, 65%), hsl(280, 70%, 55%));
  transition: all 0.3s ease;
}
.btn-gradient:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.3);
}

/* ===== 下载页选中卡片 ===== */
.platform-card.selected {
  border-color: hsl(260, 70%, 65%) !important;
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.2);
}

/* ===== 标签颜色 ===== */
.tag-green { background: rgba(16, 185, 129, 0.15); color: #34d399; border-color: rgba(16, 185, 129, 0.25); }
.tag-amber { background: rgba(245, 158, 11, 0.15); color: #fbbf24; border-color: rgba(245, 158, 11, 0.25); }
.tag-rose { background: rgba(244, 63, 94, 0.15); color: #fb7185; border-color: rgba(244, 63, 94, 0.25); }