/* =====================================================================
 * Inspira 风视觉增强层（移植自 Inspira UI / Aceternity / Magic UI 的设计语言）
 * 仅做"视觉层"增强：卡片悬浮微光、按钮渐变描边、顶栏毛玻璃、入场淡入。
 * 不改动任何布局/算法/数据。与主题变量联动，浅色/深色自动适配。
 *
 * 想整体撤掉？删掉各页 <link rel="stylesheet" href="assets/inspira.css?...">
 * 即可，原版文件毫发无损（已备份于 docs/web/_backup_20260719/）。
 * ===================================================================== */

/* ── 1. 卡片悬浮微光 + 浮起（全站 .card / .topic-card / .feature / .framework-card） ── */
/* 做法：在卡片边缘加一层跟随光标的径向渐变（由 --mx/--my 控制），
   通过 ::after 绘制，hover 时显现；同时轻微浮起。浅色用品牌红微光，
   深色用冷蓝微光，保证可读不刺眼。 */

.card,
.topic-card,
.feature,
.framework-card,
.alert,
.watch-card,
.pos-card,
.search {
  position: relative;
  transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease, border-color .22s ease;
}
/* 微光层：默认透明，hover 显现；用 --mx/--my（光标相对卡片位置）定位 */
.card::after,
.topic-card::after,
.feature::after,
.framework-card::after,
.watch-card::after,
.pos-card::after,
.search::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
  background: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 0%),
    rgba(99, 179, 237, 0.14),
    transparent 60%
  );
  z-index: 1;
}
:root[data-theme="dark"] .card::after,
:root[data-theme="dark"] .topic-card::after,
:root[data-theme="dark"] .feature::after,
:root[data-theme="dark"] .framework-card::after,
:root[data-theme="dark"] .watch-card::after,
:root[data-theme="dark"] .pos-card::after,
:root[data-theme="dark"] .search::after {
  background: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 0%),
    rgba(99, 179, 237, 0.14),
    transparent 60%
  );
}
.card:hover::after,
.topic-card:hover::after,
.feature:hover::after,
.framework-card:hover::after,
.watch-card:hover::after,
.pos-card:hover::after,
.search:hover::after {
  opacity: 1;
}
/* 浮起：保留原有 border-color 变化，额外加阴影与位移 */
.card:hover,
.topic-card:hover,
.feature:hover,
.framework-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(24, 24, 27, 0.10), 0 4px 12px rgba(0,0,0,.05);
}
/* 持仓/自选卡片：浮起幅度略小（避免抢戏） */
.watch-card:hover,
.pos-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(24, 24, 27, 0.08), 0 2px 8px rgba(0,0,0,.04);
}
/* 输入框：仅光晕，不浮起（保持稳定） */
.search:hover {
  transform: none;
}
/* 让卡片内部内容在微光之上 */
.card > *, .topic-card > *, .feature > *, .framework-card > * { position: relative; z-index: 2; }
.watch-card > *, .pos-card > *, .search > * { position: relative; z-index: 2; }

/* 渐变描边：在卡片 hover 时给一圈极淡渐变边（资源占用低，纯 border-image） */
.topic-card:hover,
.framework-card:hover {
  border-color: transparent;
  background-image:
    linear-gradient(var(--card), var(--card)),
    linear-gradient(135deg, rgba(59,130,246,.55), rgba(99,179,237,.35));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border: 1px solid transparent;
}
:root[data-theme="dark"] .topic-card:hover,
:root[data-theme="dark"] .framework-card:hover {
  background-image:
    linear-gradient(var(--card), var(--card)),
    linear-gradient(135deg, rgba(99,179,237,.6), rgba(167,139,250,.4));
}

/* ── 1b. 图表卡片 Spotlight（缠论/K线图核心图，比普通卡片更聚光） ── */
/* 跟随光标的聚光斑 + 边缘淡蓝描边环 + 外发光，突出"图形是核心"。 */
.chart-card {
  position: relative;
  transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease, border-color .22s ease;
}
.chart-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .28s ease;
  background: radial-gradient(
    320px circle at var(--mx, 50%) var(--my, 50%),
    rgba(99, 179, 237, 0.18),
    rgba(99, 179, 237, 0.06) 40%,
    transparent 68%
  );
  z-index: 1;
}
.chart-card:hover::after { opacity: 1; }
.chart-card:hover {
  transform: translateY(-3px);
  border-color: rgba(59, 130, 246, 0.45);
  box-shadow:
    0 18px 44px rgba(24, 24, 27, 0.10),
    0 0 0 1px rgba(59, 130, 246, 0.35),
    0 0 24px rgba(99, 179, 237, 0.18);
}
.chart-card > * { position: relative; z-index: 2; }
:root[data-theme="dark"] .chart-card:hover {
  border-color: rgba(99, 179, 237, 0.55);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(99, 179, 237, 0.5),
    0 0 26px rgba(99, 179, 237, 0.28);
}


/* ── 2. 主按钮渐变描边（.btn-primary） ── */
/* 保留近黑底，hover 时转为品牌渐变描边 + 文字点亮，呼应 Inspira 的渐变按钮 */
.btn-primary {
  position: relative;
  background: var(--ink);
  color: var(--ink-inv);
  border: 1px solid var(--ink);
  overflow: hidden;
}
.btn-primary::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--accent), #f59e0b);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .2s ease;
}
.btn-primary:hover {
  background: color-mix(in srgb, var(--ink) 88%, var(--accent));
  color: var(--ink-inv);
  border-color: var(--accent);
}
.btn-primary:hover::before { opacity: 1; }

/* ── 3. 顶栏毛玻璃（glassmorphism） ── */
/* 滚动时半透明 + 背景模糊。浅色沿用暖白玻璃，深色用深色玻璃。
   position:sticky + z-index:50 让顶栏浮在数字雨（z:5）之上，毛玻璃让数字雨从顶栏里隐约透出。 */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--card) 78%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
          backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}

/* ── 4. 区块入场淡入（IntersectionObserver 触发 .in 类） ── */
/* 默认隐藏偏移，进入视口后淡入上移。尊重 reduced-motion。 */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .card::after, .topic-card::after, .feature::after, .framework-card::after { display: none; }
}