/* lol-mixer 2026-11-03 优化版 · 纯表现层特效，不改数据逻辑，不挡交互 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(520px 340px at 12% -5%, rgba(99, 102, 241, 0.16), transparent 70%),
    radial-gradient(560px 380px at 92% 8%, rgba(244, 63, 94, 0.12), transparent 70%),
    radial-gradient(700px 420px at 50% 115%, rgba(16, 185, 129, 0.10), transparent 70%);
  animation: haloDrift 18s ease-in-out infinite alternate;
}
@keyframes haloDrift {
  from { transform: scale(1) translateY(0); opacity: 0.9; }
  to { transform: scale(1.06) translateY(-12px); opacity: 1; }
}
#root { position: relative; z-index: 1; }

/* 主标题渐变流动光：作用于已有的渐变标题，不改文字与布局 */
h1.bg-clip-text {
  background-size: 220% auto;
  animation: titleFlow 7s linear infinite;
}
@keyframes titleFlow {
  from { background-position: 0% center; }
  to { background-position: 220% center; }
}

/* 卡片悬停浮起加阴影 */
.glass-card { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.glass-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(99, 102, 241, 0.25), 0 0 0 1px rgba(129, 140, 248, 0.25);
}

/* 排行榜徽章发光（第 1 名最亮） */
.rank-badge-1 { animation: badgeGlow 2.2s ease-in-out infinite; }
@keyframes badgeGlow {
  0%, 100% { box-shadow: 0 0 6px rgba(251, 191, 36, 0.25); }
  50% { box-shadow: 0 0 18px rgba(251, 191, 36, 0.55); }
}

/* 按钮光泽扫过：伪元素不接收点击，不挡文字与输入框 */
button { position: relative; }
button::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.28) 50%, transparent 58%);
  background-size: 250% 100%;
  background-position: 120% 0;
  opacity: 0;
  transition: background-position 0.7s ease, opacity 0.3s ease;
}
button:hover::after { opacity: 1; background-position: -20% 0; }
button:hover { filter: brightness(1.12); }

/* 页面切换淡入：每切换一个带 h2 的栏目，标题区淡入；首屏根容器同样淡入一次 */
#root > div { animation: pageFade 0.45s ease both; }
#root h2 { animation: pageFade 0.45s ease both; }
@keyframes pageFade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 页脚优化版标记：金色发光小字，一眼可见 */
.opt-version {
  color: #fbbf24;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.6);
  animation: badgeGlow 2.2s ease-in-out infinite;
}

@media (max-width: 640px) {
  body::before { opacity: 0.7; }
  .glass-card:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  body::before, h1.bg-clip-text, .rank-badge-1, .opt-version, #root > div, #root h2 {
    animation: none;
  }
}