/* ==========================================================================
   薯灵感 · 设计升级层（design-upgrade.css）
   2026-09-30 · 参考 Aceternity UI / MotionSites / ReactBits / Uiverse 转译原生实现
   约束：只动 transform 与 opacity（渐变背景走 background，不参与逐帧动画）
        尊重 prefers-reduced-motion；光标类仅桌面端
   加载：design-system.css 之后
   ========================================================================== */

/* ==========================================================================
   一、Hero 灯泡（💡）—— 呼吸光晕 / 钨丝闪烁 / 金色粒子 / 底座摇摆 /
       加载点亮 / 悬停增强 / 点击光波
   ========================================================================== */
.hero-banner, .uo-hero { --bulb: 104px; }
/* 首页落地页 Hero 更大，灯泡相应放大并避开视频蒙层 */
.uo-hero { --bulb: 120px; }

/* JS 注入真实灯泡后，隐藏原 ::after 的静态 emoji，避免重影。
   注意：只针对 .hero-banner（其 ::after 是 💡）；首页 .uo-hero 的 ::after
   是粉色装饰光斑，不能隐藏，否则失去氛围底色。 */
.hero-banner.has-bulb::after { display: none; }

/* ⚠️ 特异度必须是 0-3-0：background-effects.css 的
   `.sm-bg-waves > *`（position:relative; z-index:1，0-2-0）会在
   module-bindings 给 .hero / .uo-hero 加上 .sm-bg-waves 后命中灯泡本体，
   把它降级成 relative → <i> 保持 inline → 宽高失效，实测渲染成 0×0。
   这里用「宿主类 + 双写自身类」拿到 0-3-0 夺回，既不改共享文件也避免 !important。 */
.hero-banner .hero-bulb.hero-bulb,
.uo-hero .hero-bulb.hero-bulb,
.hero .hero-bulb.hero-bulb {
  position: absolute;
  right: 16px; bottom: 8px;
  width: var(--bulb); height: var(--bulb);
  display: block;
  pointer-events: none;
  z-index: 0;
  /* 悬停增强放在容器上：容器本身没有动画，不会被 animation 覆盖 */
  transform: scale(1);
  transition: transform var(--d-comp) var(--ease-spring);
  will-change: transform;
}
.hero-bulb { display: block; }
/* 首页 Hero：灯泡放大后用百分比定位，避免窄屏贴边（必须写在基础规则之后才能生效） */
.uo-hero .hero-bulb.hero-bulb { right: 4%; bottom: 7%; }
.hero-banner:hover .hero-bulb,
.uo-hero:hover .hero-bulb { transform: scale(1.07); }

/* 呼吸光晕：radial-gradient 静态背景，只动 opacity + transform */
.hb-halo {
  position: absolute; left: 50%; top: 50%;
  width: 210%; height: 210%;
  margin: -105% 0 0 -105%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 214, 102, .55) 0%, rgba(255, 214, 102, .18) 38%, rgba(255, 214, 102, 0) 70%);
  opacity: 0;
  animation: hb-breathe 5.2s var(--ease-in-out) 1.1s infinite;
  will-change: transform, opacity;
}

/* 悬停时额外补一层更强光晕，纯 opacity 淡入（不覆盖动画属性） */
.hb-boost {
  position: absolute; left: 50%; top: 50%;
  width: 260%; height: 260%;
  margin: -130% 0 0 -130%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 231, 150, .42) 0%, rgba(255, 214, 102, .14) 45%, rgba(255, 214, 102, 0) 72%);
  opacity: 0;
  transition: opacity var(--d-comp) var(--ease-out);
}
.hero-banner:hover .hb-boost,
.uo-hero:hover .hb-boost { opacity: 1; }

/* 底座摇摆：transform 独占 */
.hb-core {
  position: absolute; inset: 0;
  display: block;
  transform-origin: 50% 8%;
  animation: hb-sway 6.4s var(--ease-in-out) 1.1s infinite;
  will-change: transform;
}

/* 钨丝闪烁：opacity 独占（与 hb-core 的 transform 动画并存不冲突） */
.hb-flick {
  position: absolute; inset: 0;
  display: block;
  animation: hb-flicker 7s steps(1, end) 1.6s infinite;
}

/* 灯泡本体：加载点亮（opacity 淡入）+ 可继承父级闪烁 */
.hb-emoji {
  position: absolute; inset: 0;
  display: block;
  font-size: var(--bulb);
  line-height: 1;
  font-style: normal;
  text-align: center;
  opacity: .22;
  animation: hb-lightup .95s var(--ease-out) .2s both;
}

/* 金色粒子环绕：每颗自转轨道 + 独立闪烁（transform / opacity 分离） */
.hb-p {
  position: absolute; left: 50%; top: 50%;
  width: 5px; height: 5px; margin: -2.var(--s-4) 0 0 -2.var(--s-4);
  border-radius: 50%;
  background: #FFD666;
  box-shadow: 0 0 6px rgba(255, 214, 102, .9);
  animation: hb-orbit var(--dur, 9s) linear infinite,
             hb-twinkle var(--tw, 2.6s) var(--ease-in-out) infinite;
  animation-delay: var(--delay, 0s), var(--delay, 0s);
  will-change: transform, opacity;
}

/* 点击光波：一次性扩散圆环 */
.hero-bulb::after {
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: 100%; height: 100%;
  margin: -50% 0 0 -50%;
  border-radius: 50%;
  border: 2px solid rgba(255, 231, 150, .95);
  opacity: 0;
  transform: scale(.5);
  pointer-events: none;
}
.hero-bulb.hb-wave::after { animation: hb-ring .72s var(--ease-out); }

@keyframes hb-breathe {
  0%, 100% { opacity: .28; transform: scale(.92); }
  50%      { opacity: .62; transform: scale(1.06); }
}
@keyframes hb-sway {
  0%, 100% { transform: rotate(-5deg); }
  50%      { transform: rotate(5deg); }
}
@keyframes hb-flicker {
  0%, 42%, 46%, 100% { opacity: 1; }
  43%                { opacity: .74; }
  44%                { opacity: .92; }
  45%                { opacity: .66; }
  78%                { opacity: .82; }
}
@keyframes hb-lightup {
  0%   { opacity: 0; transform: scale(.72); }
  55%  { opacity: .48; transform: scale(1.04); }
  100% { opacity: .24; transform: scale(1); }
}
@keyframes hb-orbit {
  from { transform: rotate(0deg)   translateX(var(--r, 52px)) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(var(--r, 52px)) rotate(-360deg); }
}
@keyframes hb-twinkle {
  0%, 100% { opacity: .25; }
  50%      { opacity: .95; }
}
@keyframes hb-ring {
  0%   { opacity: .9; transform: scale(.5); }
  100% { opacity: 0;  transform: scale(1.9); }
}

/* 移动端灯泡收小，避免压住文字 */
@media (max-width: 768px) {
  .hero-banner { --bulb: 68px; }
  .hero-bulb { right: 8px; bottom: 4px; opacity: .8; }
}

/* ==========================================================================
   二、Hero 内容阶梯入场（标题由 SplitText 接管，这里只管副标题与数据）
   ========================================================================== */
.hero-banner.has-bulb > p,
.hero-banner.has-bulb .hero-stats {
  animation: du-rise .62s var(--ease-out) both;
}
.hero-banner.has-bulb > p          { animation-delay: .30s; }
.hero-banner.has-bulb .hero-stats  { animation-delay: .42s; }
@keyframes du-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* hero-stats 走 8px 网格 */
.hero-banner .hero-stats { gap: var(--s-24); }
.hero-banner .hero-stats div b { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   三、模块入口卡片（home.html .grid > .card）—— Bento 观感 + GlareHover
   ========================================================================== */
.home .grid > .card,
.grid > a.card {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-24);
  border: 1px solid var(--bd-2);
  background: var(--bg-surface);
  box-shadow: var(--sh-sm);
  transition: transform var(--d-comp) var(--ease-out),
              box-shadow var(--d-comp) var(--ease-out),
              border-color var(--d-comp) var(--ease-out);
  will-change: transform;
}
.grid > a.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-lg);
  border-color: rgba(255, 36, 66, .28);
}
.grid > a.card:active { transform: translateY(-2px) scale(.995); }

/* GlareHover：斜向高光扫过（只动 transform） */
.grid > a.card::after {
  content: '';
  position: absolute; top: -60%; left: -120%;
  width: 60%; height: 220%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 100%);
  transform: rotate(18deg);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--d-micro) var(--ease-out);
}
.grid > a.card:hover::after {
  opacity: .5;
  animation: du-glare .85s var(--ease-out);
}
@keyframes du-glare {
  from { transform: rotate(18deg) translateX(0); }
  to   { transform: rotate(18deg) translateX(340%); }
}

/* 图标：悬停微抬 + 品牌光晕（纯 transform） */
.grid > a.card .ico {
  transition: transform var(--d-comp) var(--ease-spring);
}
.grid > a.card:hover .ico { transform: translateY(-2px) scale(1.06); }

/* 「进入模块」箭头：悬停右移 */
.grid > a.card .go { transition: color var(--d-micro) var(--ease-out); }
.grid > a.card:hover .go { color: var(--brand-2-text, #D81B37); }
.grid > a.card .go .icon-inline,
.grid > a.card:hover .go i[data-icon] { transform: translateX(3px); }
.grid > a.card .go i[data-icon] { transition: transform var(--d-micro) var(--ease-spring); }

/* 阶梯入场：前 8 张按序淡入（后面 8 张由滚动揭示接管） */
.grid > a.card { animation: du-card-in .5s var(--ease-out) both; }
.grid > a.card:nth-child(1) { animation-delay: .04s; }
.grid > a.card:nth-child(2) { animation-delay: .08s; }
.grid > a.card:nth-child(3) { animation-delay: .12s; }
.grid > a.card:nth-child(4) { animation-delay: .16s; }
.grid > a.card:nth-child(5) { animation-delay: .20s; }
.grid > a.card:nth-child(6) { animation-delay: .24s; }
.grid > a.card:nth-child(7) { animation-delay: .28s; }
.grid > a.card:nth-child(8) { animation-delay: .32s; }
@keyframes du-card-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   四、按钮微交互（Uiverse 风：按压下沉 + 悬停抬升 + 高光扫过）
   ========================================================================== */
.btn, .btn-primary, .btn-ghost {
  transition: transform var(--d-micro) var(--ease-spring),
              box-shadow var(--d-micro) var(--ease-out),
              background-color var(--d-micro) var(--ease-out);
}
.btn:hover, .btn-ghost:hover { transform: translateY(-1px); }
.btn:active, .btn-ghost:active, .btn-primary:active { transform: translateY(1px) scale(.98); }

.btn-primary {
  box-shadow: var(--sh-glow);
  background-image: var(--pink-grad);
}
.btn-primary:hover { box-shadow: var(--sh-glow-lg); }

/* 主 CTA 扫光 */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: '';
  position: absolute; top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.45), rgba(255,255,255,0));
  transform: skewX(-20deg);
  opacity: 0;
  pointer-events: none;
}
.btn-primary:hover::after { opacity: 1; animation: du-glare-x .75s var(--ease-out); }
@keyframes du-glare-x {
  from { transform: skewX(-20deg) translateX(0); }
  to   { transform: skewX(-20deg) translateX(330%); }
}

/* ==========================================================================
   五、应用内卡片（index.html SPA）统一层级与悬停
   ========================================================================== */
.page > .card {
  border-radius: var(--r-16);
  border: 1px solid var(--bd-2);
  box-shadow: var(--sh-sm);
  transition: box-shadow var(--d-comp) var(--ease-out);
}
.page > .card:hover { box-shadow: var(--sh-md); }

/* 分区标题下方的细分隔线更轻 */
.sec-head { border-color: var(--bd-1); }

/* ==========================================================================
   六、顶部导航液体玻璃增强（data-liquid-glass 已在 nav-effects 中启用）
   ========================================================================== */
.topbar {
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--bd-1);
}

/* ==========================================================================
   七、骨架屏 / 空状态兜底样式（与 list-animations 配合）
   ========================================================================== */
.sm-skeleton { border-radius: var(--r-12); }

/* ==========================================================================
   八、降级：prefers-reduced-motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hb-halo, .hb-core, .hb-flick, .hb-emoji, .hb-p,
  .hero-bulb::after, .grid > a.card, .grid > a.card::after,
  .hero-banner.has-bulb > p, .hero-banner.has-bulb .hero-stats {
    animation: none !important;
  }
  .hb-emoji { opacity: .22 !important; }
  .hb-halo { opacity: .4 !important; }
  .hb-p { display: none !important; }
  .grid > a.card { opacity: 1 !important; transform: none !important; }
  .grid > a.card:hover { transform: none !important; }
}

/* ==========================================================================
   九、首页模块网格：Bento Grid
   4 列 + 4 张宽卡（第 1/6/11/16 张各跨 2 列）
   16 张卡 = 12 单列 + 4 双列 = 20 个列槽 = 恰好 5 行 × 4 列，无空洞。
   窄屏（<1040px）保持原有的 auto-fill 单列流，避免卡片被压窄。
   ========================================================================== */
@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid > .card:nth-child(1),
  .grid > .card:nth-child(6),
  .grid > .card:nth-child(11),
  .grid > .card:nth-child(16) { grid-column: span 2; }
  /* 首张主推位：更大的图标与标题，形成视觉起点 */
  .grid > .card:nth-child(1) .ico {
    width: 58px; height: 58px; border-radius: 16px; font-size: 28px;
  }
  .grid > .card:nth-child(1) h3 { font-size: 19px; }
}

/* ==========================================================================
   十、表格质感：粘性表头 + 行悬停高亮 + 行入场
   作用于 /deals /keywords /ledger /rules 的 .table-wrap
   ========================================================================== */
.table-wrap thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--bg-surface, #fff);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.table-wrap tbody td {
  transition: background var(--d-micro, 200ms) var(--ease-out, ease);
}
.table-wrap tbody tr:hover td {
  background: var(--brand-softer, #FFF5F7);
}
.table-wrap tbody tr:hover td:first-child {
  box-shadow: inset 3px 0 0 var(--brand-2, #FF2442);
}

/* ==========================================================================
   十一、独立页卡片 / 统计块质感
   ========================================================================== */
.wrap > .card, .content > .card { border-radius: var(--r-16, 16px); }
.stats .stat {
  border-radius: var(--r-12, 12px);
  transition: transform var(--d-comp, 300ms) var(--ease-out, ease),
              box-shadow var(--d-comp, 300ms) var(--ease-out, ease),
              border-color var(--d-comp, 300ms) var(--ease-out, ease);
}
.stats .stat:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
  border-color: var(--brand-ring, rgba(255, 36, 66, .18));
}
/* 独立页主按钮加品牌光晕（与首页 btn-primary 一致） */
.wrap .btn-primary { box-shadow: var(--sh-glow); }
.wrap .btn-primary:hover { box-shadow: var(--sh-glow-lg); }

@media (prefers-reduced-motion: reduce) {
  .stats .stat:hover { transform: none; }
}

/* ==========================================================================
   十二、性能：离屏 / 后台自动暂停装饰动画
   - .hb-off：Hero 滚出视口后由 motion-core 的 IntersectionObserver 打上
   - html.sm-hidden：页面切到后台/最小化时由 visibilitychange 打上
   只暂停「无限循环的装饰动画」，一次性入场动画不受影响。
   ========================================================================== */
.hero-bulb.hb-off, .hero-bulb.hb-off * , .hero-bulb.hb-off::after {
  animation-play-state: paused !important;
}
html.sm-hidden .hero-bulb *, html.sm-hidden .hero-bulb::after,
html.sm-hidden .aurora i, html.sm-hidden .aurora em,
html.sm-hidden .sm-bg-waves::before, html.sm-hidden .sm-bg-waves::after,
html.sm-hidden .sm-bg-galaxy::before, html.sm-hidden .sm-bg-galaxy::after,
html.sm-hidden .sm-bg-silk::before, html.sm-hidden .sm-bg-silk::after,
html.sm-hidden .sm-bg-particles::before, html.sm-hidden .sm-bg-plasma::before,
html.sm-hidden .sm-bg-plasma::after {
  animation-play-state: paused !important;
}

/* ==========================================================================
   十三、移动端微调：Hero 灯泡缩小并内收，避免与数据卡视觉打架
   ========================================================================== */
@media (max-width: 768px) {
  .uo-hero { --bulb: 84px; }
  .uo-hero .hero-bulb.hero-bulb { right: 2%; bottom: 2.5%; }
  .hero-banner { --bulb: 78px; }
}