/* ============================================================
   盛航云 · 动效增强层 (fx.css)
   滚动进度条 / 鼠标光斑 / 极光光斑 / 波浪分隔 / 跑马灯 /
   玻璃导航 / 卡片渐变描边 / Hero 可视化面板
   与 style.css 协同：浅色清新基调，所有动画受
   prefers-reduced-motion 全局规则自动降级
   ============================================================ */

/* ---- 顶部滚动进度条 ---- */
.fx-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:999;pointer-events:none}
.fx-progress i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#2563eb,#06b6d4,#38bdf8);box-shadow:0 0 14px rgba(37,99,235,.55);will-change:transform}

/* ---- 鼠标光斑跟随：双层柔光（置于内容层之下，永不遮挡按钮） ---- */
.fx-spotlight{position:fixed;left:0;top:0;width:760px;height:760px;margin-left:-380px;margin-top:-380px;border-radius:50%;pointer-events:none;z-index:-1;background:radial-gradient(circle 120px at center,rgba(56,189,248,.10) 0%,transparent 62%),radial-gradient(circle 430px at center,rgba(37,99,235,.05) 0%,transparent 66%);opacity:0;transition:opacity .6s}
body.fx-on .fx-spotlight{opacity:1}

/* ---- 极光流动光斑（Hero / 市场横幅） ---- */
.aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.aurora i{position:absolute;border-radius:50%;filter:blur(56px);opacity:.38;will-change:transform}
.aurora i:nth-child(1){width:44vw;height:44vw;min-width:320px;min-height:320px;left:-8%;top:-24%;background:radial-gradient(circle,#7dd3fc 0%,transparent 68%);animation:aurora1 22s ease-in-out infinite alternate}
.aurora i:nth-child(2){width:36vw;height:36vw;min-width:260px;min-height:260px;right:-10%;top:10%;background:radial-gradient(circle,#a5b4fc 0%,transparent 68%);animation:aurora2 27s ease-in-out infinite alternate}
.aurora i:nth-child(3){width:30vw;height:30vw;min-width:220px;min-height:220px;left:32%;bottom:-30%;background:radial-gradient(circle,#67e8f9 0%,transparent 68%);animation:aurora3 19s ease-in-out infinite alternate}
@keyframes aurora1{to{transform:translate(16%,20%) scale(1.18)}}
@keyframes aurora2{to{transform:translate(-18%,14%) scale(1.12)}}
@keyframes aurora3{to{transform:translate(12%,-18%) scale(1.24)}}

/* ---- 波浪分隔（已移除，见 HTML/fx.js） ---- */

/* ---- 跑马灯横幅（已移除，见 index.html） ---- */

/* ---- 导航滚动后：纯白不透明（不糊化滑过的内容，绝不遮挡按钮） ---- */
.topbar.scrolled{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}

/* ---- 卡片悬停渐变描边 + 透视（配合 GSAP 3D 倾斜） ---- */
.grid,.cat-grid{perspective:1100px}
.card:hover,.cat-card:hover{border-color:transparent;background-image:linear-gradient(var(--card),var(--card)),linear-gradient(135deg,#60a5fa,#22d3ee);background-origin:border-box;background-clip:padding-box,border-box}
.magnetic{will-change:transform}

/* ---- 首页 Hero 可视化玻璃面板（≥1280px 以网格双栏呈现，绝不遮挡内容） ---- */
.hero-inner{display:grid;grid-template-columns:minmax(0,1fr);align-items:center}
.hero-copy{min-width:0}
.hero-visual{display:none;position:relative;pointer-events:none}
@media (min-width:1280px){
  .hero-inner{grid-template-columns:minmax(0,1fr) minmax(320px,400px);column-gap:clamp(28px,4vw,64px)}
  .hero-visual{display:block}
  .quick-entry{grid-column:1/-1}
}
.hv-card{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-radius:18px;padding:clamp(16px,1.6vw,22px);box-shadow:0 30px 60px rgba(4,20,60,.35);animation:hvIn 1s .3s ease backwards}
@keyframes hvIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.hv-head{display:flex;align-items:center;gap:6px;margin-bottom:14px}
.hv-head b{margin-left:auto;font-size:12px;color:rgba(255,255,255,.85);font-weight:600;white-space:nowrap}
.hv-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.35)}
.hv-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.hv-stats div{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:12px 10px;text-align:center}
.hv-stats b{display:block;font-size:clamp(15px,1.5vw,19px);color:#fff;font-variant-numeric:tabular-nums}
.hv-stats span{display:block;font-size:11px;color:rgba(255,255,255,.72);margin-top:2px}
.hv-chart{display:flex;align-items:flex-end;gap:8px;height:110px;margin:16px 0 14px}
.hv-chart i{flex:1;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,rgba(103,232,249,.9),rgba(37,99,235,.55));transform-origin:bottom;animation:hvGrow .9s ease backwards;box-shadow:0 0 18px rgba(103,232,249,.25)}
.hv-chart i:nth-child(1){animation-delay:.5s}.hv-chart i:nth-child(2){animation-delay:.58s}.hv-chart i:nth-child(3){animation-delay:.66s}.hv-chart i:nth-child(4){animation-delay:.74s}.hv-chart i:nth-child(5){animation-delay:.82s}.hv-chart i:nth-child(6){animation-delay:.9s}.hv-chart i:nth-child(7){animation-delay:.98s}
@keyframes hvGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.hv-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(255,255,255,.14);padding-top:12px;font-size:12px;color:rgba(255,255,255,.8)}
.hv-foot b{color:#a5f3fc;font-size:14px;font-variant-numeric:tabular-nums}
.hv-foot b small{font-weight:400;font-size:11px;color:rgba(255,255,255,.65)}
.hv-float{position:absolute;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:999px;padding:8px 14px;font-size:12px;color:#fff;box-shadow:0 14px 30px rgba(4,20,60,.3);white-space:nowrap}
.hv-float .p-icon{width:22px;height:22px;border-radius:7px;background:rgba(255,255,255,.18);color:#a5f3fc;display:flex;align-items:center;justify-content:center}
.hv-float .p-icon svg{width:12px;height:12px}
.hv-f1{left:-20px;top:-26px;animation:hvFloat 6s ease-in-out infinite}
.hv-f2{right:-14px;bottom:-18px;animation:hvFloat 7s 1s ease-in-out infinite}
@keyframes hvFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* ---- 页脚顶部流光 ---- */
footer{position:relative}
footer::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#2563eb,#06b6d4,#38bdf8);background-size:200% 100%;animation:gradText 6s linear infinite}

/* ============================================================
   华美增强 v6：层级入场 / 面板呼吸 / 按钮光环 / 输入聚焦
   ============================================================ */

/* Hero 文案逐层入场（徽章 → 标题 → 副标题 → 特性 → 按钮） */
.hero-copy .hero-badge{animation-delay:0s}
.hero-copy h1{animation-delay:.08s}
.hero-copy p.sub{animation-delay:.16s}
.hero-copy p.meta{animation-delay:.24s}
.hero-copy .hero-btns{animation-delay:.32s}

/* 可视化面板呼吸浮动（入场动画结束后开始） */
.hv-card{animation:hvIn 1s .3s ease backwards,hvBob 7s 1.8s ease-in-out infinite}
@keyframes hvBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* 主按钮悬停光环 */
.btn-primary:hover{box-shadow:0 12px 28px rgba(29,78,216,.4),0 0 0 6px rgba(56,189,248,.14)}

/* 输入框聚焦轻浮 */
.input:focus{transform:translateY(-1px)}

/* ============================================================
   v7 腾讯云风格：浅色 Hero 下的面板与徽章配色
   ============================================================ */
.hv-card{background:#fff;border:1px solid rgba(13,51,131,.08);box-shadow:0 30px 60px rgba(0,40,120,.28)}
.hv-head b{color:#0a2f6b;font-weight:700}
.hv-dot{width:10px;height:10px;background:#4d9fff}
.hv-stats div{background:rgba(58,132,255,.09);border:1px solid rgba(13,51,131,.10)}
.hv-stats b{color:#0a2f6b}
.hv-stats span{color:#6b7c99}
.hv-chart i{background:linear-gradient(180deg,#4d9fff,#0a6cff);box-shadow:0 0 14px rgba(10,108,255,.22)}
.hv-foot{color:#5b6b8c;border-color:rgba(13,51,131,.12)}
.hv-foot b{color:#0a6cff}
.hv-foot b small{color:#8a97ad}
.hv-float{background:rgba(255,255,255,.92);border:1px solid #d9e6ff;color:#33405c;box-shadow:0 12px 26px rgba(13,51,131,.14)}
.hv-float .p-icon{background:#e8f2ff;color:#0a6cff}