/* Solon Polish — 浅色全面提质 + 全站动效层（叠加于 solon-ui.css 之上）
 * 令牌：缓动 cubic-bezier(.22,1,.36,1) · 显现 640ms/16px · 错落 70ms · 数字滚动 1000ms
 * 所有 .rv 类只由 JS 注入——无 JS 时页面照常可见，不会出现"隐形内容"
 */

/* ── 页面载入：整体淡入 ── */
@keyframes solonFadeIn{from{opacity:0}to{opacity:1}}
body{animation:solonFadeIn .38s ease-out both}

/* ── 滚动显现（JS 注入 .rv，入视加 .in） ── */
.rv{opacity:0;transform:translateY(16px);transition:opacity .64s cubic-bezier(.22,1,.36,1) var(--d,0ms),transform .64s cubic-bezier(.22,1,.36,1) var(--d,0ms)}
.rv.in{opacity:1;transform:none}

/* ── 首屏 Hero：入场编排 + 光影流动 ── */
@keyframes heroRise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
body > .hero .kick{animation:heroRise .7s cubic-bezier(.22,1,.36,1) .05s both}
body > .hero h1{animation:heroRise .8s cubic-bezier(.22,1,.36,1) .16s both}
body > .hero .cnsub{animation:heroRise .8s cubic-bezier(.22,1,.36,1) .28s both}
body > .hero .lede{animation:heroRise .8s cubic-bezier(.22,1,.36,1) .38s both}
body > .hero .cta{animation:heroRise .8s cubic-bezier(.22,1,.36,1) .5s both}
body > .hero .stats{animation:heroRise .9s cubic-bezier(.22,1,.36,1) .62s both}

/* Hero 标题 em：荧光绿渐变文字 + 缓慢流光 */
@keyframes emSheen{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
body > .hero h1 em{
  background:linear-gradient(100deg,#E9FF7A 0%,#CCFF00 38%,#7FD600 62%,#E9FF7A 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:emSheen 7s ease-in-out infinite;
}
body > .hero h1 em::after{background:linear-gradient(90deg,#CCFF00,#E9FF7A,#CCFF00)!important;background-size:200% 100%!important;animation:emSheen 5s linear infinite}

/* Hero 底部光环：呼吸脉动 */
@keyframes haloPulse{0%,100%{transform:translateX(-50%) scale(1);opacity:.9}50%{transform:translateX(-50%) scale(1.045);opacity:1}}
body > .hero::after{animation:haloPulse 9s ease-in-out infinite}

/* Hero 点阵：极慢漂移（视差感） */
@keyframes dotDrift{from{background-position:0 0}to{background-position:300px 300px}}
body > .hero::before{animation:dotDrift 90s linear infinite}

/* gdot 指示灯：呼吸闪烁 */
@keyframes gdotPulse{0%,100%{box-shadow:0 0 8px rgba(204,255,0,.5)}50%{box-shadow:0 0 22px rgba(204,255,0,.95)}}
body > .hero .gdot,body .gdot{animation:gdotPulse 2.6s ease-in-out infinite}

/* ── 按钮：光泽扫过（sheen） ── */
.pill{position:relative;overflow:hidden}
.pill::after{
  content:"";position:absolute;top:0;left:-80%;width:45%;height:100%;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg);transition:left .55s ease;
}
.pill:hover::after{left:130%}
.pill.green:active{transform:translateY(1px) scale(.985)}

/* ── 卡片：更立体的悬浮 ── */
.card,.stk,.ncard,.ovc,.ofr{will-change:transform}
.card:hover,.stk:hover,.ncard:hover,.ovc:hover,.ofr:hover{transform:translateY(-3px)}

/* ── 小节标题：绿色渐变底线随显现生长 ── */
.wrap h2{position:relative}
.wrap h2::after{
  content:"";position:absolute;left:0;bottom:-7px;height:2.5px;width:58px;border-radius:2px;
  background:linear-gradient(90deg,#CCFF00,#8FB800);
  transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.22,1,.36,1) .18s;
  box-shadow:0 2px 12px rgba(204,255,0,.4);
}
.wrap h2.in::after,.wrap h2 .in::after{transform:scaleX(1)}

/* ── 步骤条当前项：微光 ── */
.steps .step.cur{box-shadow:0 6px 20px rgba(11,13,10,.16),0 0 0 1.5px #0B0D0A}

/* ── 内容链接：下划线生长 ── */
.wrap p a:not(.pill):not(.cp),.wrap li a:not(.pill){
  background:linear-gradient(currentColor,currentColor) no-repeat left calc(100% + 1px)/0% 1.5px;
  transition:background-size .3s ease;
  padding-bottom:1px;
}
.wrap p a:not(.pill):not(.cp):hover,.wrap li a:not(.pill):hover{background-size:100% 1.5px}

/* ── 页脚：渐变发际线 ── */
footer{border-top:0!important;position:relative}
footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1.5px;
  background:linear-gradient(90deg,transparent,#CCFF00 30%,#8FB800 70%,transparent);
  opacity:.5;
}

/* ── 内页大标题：入场 + 字距收紧 ── */
@keyframes titleRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.wrap > .kick{animation:titleRise .6s cubic-bezier(.22,1,.36,1) .04s both}
.wrap > h1{animation:titleRise .7s cubic-bezier(.22,1,.36,1) .12s both}
.wrap > .lede{animation:titleRise .7s cubic-bezier(.22,1,.36,1) .22s both}

/* ── 输入聚焦光晕强化 ── */
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3.5px rgba(204,255,0,.22)!important}

/* ── 数字滚动时的等宽保护 ── */
.cnt{font-variant-numeric:tabular-nums}

@media(max-width:760px){
  .rv{transform:translateY(12px)}
  .wrap h2::after{width:44px;bottom:-6px}
}

/* ══════════ Polish V2 · 高级感动态视觉层（JS 注入，无 JS 零影响） ══════════ */

/* ── 顶部滚动进度条 ── */
.slx-progress{
  position:fixed;top:0;left:0;height:2.5px;width:100%;z-index:1200;pointer-events:none;
  transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,#CCFF00,#8FB800 70%,#CCFF00);
  box-shadow:0 1px 8px rgba(204,255,0,.45);
}

/* ── 极光流光背景（全站，fixed，内容之上层由 z-index 隔离） ── */
.slx-aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.slx-aurora i{position:absolute;border-radius:50%;filter:blur(110px);will-change:transform}
.slx-aurora i:nth-child(1){width:56vw;height:56vw;left:-16vw;top:-20vw;
  background:radial-gradient(circle,rgba(204,255,0,.30),transparent 65%);animation:slxAur1 26s ease-in-out infinite}
.slx-aurora i:nth-child(2){width:44vw;height:44vw;right:-14vw;top:24vh;
  background:radial-gradient(circle,rgba(0,200,5,.14),transparent 65%);animation:slxAur2 33s ease-in-out infinite}
.slx-aurora i:nth-child(3){width:42vw;height:42vw;left:24vw;bottom:-22vw;
  background:radial-gradient(circle,rgba(233,255,122,.26),transparent 65%);animation:slxAur3 39s ease-in-out infinite}
@keyframes slxAur1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,4vh) scale(1.12)}}
@keyframes slxAur2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-5vw,6vh) scale(1.08)}}
@keyframes slxAur3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(4vw,-5vh) scale(1.15)}}

/* ── 链网粒子画布（fixed 全屏，「链上网络」母题） ── */
#slx-net{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55}

/* 内容层抬升，压住背景层 */
body > .hero,.wrap,.top,footer{position:relative;z-index:1}

/* ── 顶栏滚动态：加深阴影 ── */
.top{transition:box-shadow .3s ease}
.top.sc{box-shadow:0 8px 28px rgba(20,20,18,.10)}

/* ── 滚动显现 V2：模糊聚焦（blur → 清晰） ── */
.rv{filter:blur(6px);transition:opacity .64s cubic-bezier(.22,1,.36,1) var(--d,0ms),transform .64s cubic-bezier(.22,1,.36,1) var(--d,0ms),filter .64s cubic-bezier(.22,1,.36,1) var(--d,0ms)}
.rv.in{filter:blur(0)}

/* ── 卡片鼠标聚光灯（JS 写入 --mx/--my） ── */
.card::before,.stk::before,.ncard::before,.ovc::before,.ofr::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity .35s ease;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(204,255,0,.15),transparent 65%);
}
.card:hover::before,.stk:hover::before,.ncard:hover::before,.ovc:hover::before,.ofr:hover::before{opacity:1}
.card,.stk,.ncard,.ovc,.ofr{position:relative}

/* ── 表格行悬停：暖底高亮 ── */
.wrap table tr:hover td,.phases .phase:hover{background:rgba(204,255,0,.055)}
.wrap table tr td{transition:background .2s ease}

/* ── 磁性按钮的平滑回弹（JS 驱动 transform） ── */
.pill{transition:transform .18s ease-out,opacity .15s}

/* ── Hero 视差元素开启合成层 ── */
body > .hero h1,body > .hero .cnsub,body > .hero .lede,body > .hero .stats{will-change:transform,opacity}

@media(max-width:760px){
  .slx-aurora i{filter:blur(80px)}
  #slx-net{opacity:.4}
}
@media(prefers-reduced-motion:reduce){
  body{animation:none}
  .rv{opacity:1;transform:none;transition:none;filter:none}
  body > .hero *,.wrap > .kick,.wrap > h1,.wrap > .lede{animation:none!important}
  body > .hero h1 em{animation:none;-webkit-text-fill-color:#CCFF00;color:#CCFF00}
  body > .hero::before,body > .hero::after{animation:none}
  .pill::after{display:none}
  .slx-aurora,#slx-net,.slx-progress{display:none!important}
}
