/* ═══════════════════════════════════════════════
   AI Trend Radar · 动画 & 特效样式
   ═══════════════════════════════════════════════ */

/* ── 入场动画 ── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes slideRight {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

.anim-fade-up  { animation: fadeInUp 0.35s ease both; }
.anim-fade     { animation: fadeIn   0.3s  ease both; }
.anim-scale    { animation: scaleIn  0.3s  ease both; }
.anim-slide-r  { animation: slideRight 0.3s ease both; }

/* 延迟 */
.delay-1 { animation-delay: 0.05s; }
.delay-2 { animation-delay: 0.10s; }
.delay-3 { animation-delay: 0.15s; }
.delay-4 { animation-delay: 0.20s; }
.delay-5 { animation-delay: 0.25s; }
.delay-6 { animation-delay: 0.30s; }

/* ── 光晕效果 ── */
.glow-blue   { box-shadow: 0 0 20px rgba(79,142,247,0.2); }
.glow-green  { box-shadow: 0 0 20px rgba(61,214,140,0.2); }
.glow-orange { box-shadow: 0 0 20px rgba(245,158,58,0.2); }

/* ── 数字计数动画 ── */
.count-up { transition: all 0.6s ease; }

/* ── 热度脉冲 ── */
.hot-pulse::after {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--red);
  margin-left: 6px;
  animation: hotpulse 1.5s ease-in-out infinite;
  vertical-align: middle;
}
@keyframes hotpulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.5); opacity: 0.6; }
}

/* ── 趋势上升动画 ── */
.trend-up-anim {
  animation: trendUp 0.5s ease;
}
@keyframes trendUp {
  0%   { color: var(--text); }
  50%  { color: var(--green); }
  100% { color: inherit; }
}

/* ── 卡片悬停光效 ── */
.hover-glow {
  position: relative;
  overflow: hidden;
}
.hover-glow::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle at center, rgba(79,142,247,0.04) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.hover-glow:hover::before { opacity: 1; }

/* ── 分数颜色动态 ── */
.score-90-plus { color: #3dd68c; }
.score-70-plus { color: #f5d03a; }
.score-50-plus { color: #f59e3a; }
.score-low-val { color: #8fa3c0; }

/* ── 火焰排名指示器 ── */
.rank-1::before { content: '🥇'; margin-right: 4px; }
.rank-2::before { content: '🥈'; margin-right: 4px; }
.rank-3::before { content: '🥉'; margin-right: 4px; }

/* ── 标签云词大小 ── */
.kw-size-1 { font-size: 11px; opacity: 0.7; }
.kw-size-2 { font-size: 13px; opacity: 0.8; }
.kw-size-3 { font-size: 15px; opacity: 0.9; }
.kw-size-4 { font-size: 18px; opacity: 1.0; }
.kw-size-5 { font-size: 22px; opacity: 1.0; font-weight: 700; }

/* ── 加载态骨架行 ── */
.skel-line {
  height: 14px;
  border-radius: 7px;
  margin-bottom: 8px;
}
.skel-line:last-child { margin-bottom: 0; width: 60% !important; }

/* ── 图表占位 ── */
.chart-placeholder {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text3);
  font-size: 13px;
  gap: 8px;
}

/* ── 实时标记 ── */
.live-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.live-tag::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse 1.5s infinite;
}

/* ── 渐变文字 ── */
.gradient-text {
  background: linear-gradient(135deg, #fff 0%, var(--accent) 50%, var(--accent2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gradient-text-green {
  background: linear-gradient(135deg, var(--green) 0%, var(--cyan) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}