/* ============================================================
   华芯购 hxgsc.com — 动态主题层 motion.css（V3 定稿视觉）
   深色星云 + AI芯片背景 + 玻璃拟态 + 3D芯片舞台 + 渐显
   追加在 site.css 之后加载，覆盖浅色变量与关键组件
   ============================================================ */

/* ---------- 变量翻转：浅色 → 深色星云 ---------- */
:root{
  --ink:#eef3ff;
  --ink-dim:#b6c2e0;
  --ink-faint:#8a97b8;
  --bg:#05070f;
  --bg-2:#0a1020;
  --card:rgba(255,255,255,.055);
  --glass:rgba(13,20,40,.55);
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.18);
  --blue:#38b6ff;
  --blue-deep:#7fb4ff;
  --violet:#a78bfa;
  --cyan:#38e5ff;
  --orange:#ffb25e;
  --green:#4ade80;
  --red:#ff7a7a;
  --ok:#4ade80;
  --grad:linear-gradient(135deg,#38b6ff 0%,#8b5cf6 55%,#38e5ff 110%);
  --grad-soft:linear-gradient(135deg,rgba(56,182,255,.14),rgba(139,92,246,.14),rgba(56,229,255,.14));
  --shadow:0 14px 40px rgba(0,0,0,.35);
  --shadow-lg:0 24px 60px rgba(0,0,0,.5);
}

/* ---------- 全局深色底 + 粒子画布层 ---------- */
body{
  background:radial-gradient(120% 90% at 70% 10%,#101a3a 0%,#070b1a 45%,#03040c 100%) !important;
  color:var(--ink);
}
body::before{
  background:
    radial-gradient(46vw 34vw at 8% -4%,rgba(56,182,255,.16),transparent 62%),
    radial-gradient(42vw 32vw at 96% 6%,rgba(139,92,246,.14),transparent 60%),
    radial-gradient(40vw 30vw at 55% 108%,rgba(56,229,255,.12),transparent 62%),
    var(--bg) !important;
}
#motion-canvas{position:fixed;inset:0;z-index:0;pointer-events:none !important;width:100%;height:100%}

/* 全局 AI 芯片背景（fixed 底层，所有页面共享，滚动视差由 JS 驱动） */
#ai-bg-layer{
  position:fixed;inset:-14% 0;z-index:0;pointer-events:none !important;
  background:url('/assets/ai-chip-bg.jpg') no-repeat center/cover;opacity:.34;
  will-change:transform;
}
#ai-bg-layer::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 18%,transparent 25%,rgba(3,4,12,.62) 80%,#03040c 100%);
}
#motion-canvas,#ai-bg-layer{display:block}

/* 内容层提至背景之上（nav-wrap/topbar 保持 site.css 的 fixed+z-index，勿覆盖） */
.page,footer,main,section.sec{position:relative;z-index:2;pointer-events:auto}
header.hero{position:relative;z-index:2}

/* ---------- 顶部信息条（深色玻璃） ---------- */
.topbar{background:linear-gradient(90deg,rgba(10,18,42,.9),rgba(20,32,66,.9),rgba(10,40,66,.9)) !important;
  backdrop-filter:blur(12px)}

/* ---------- 胶囊导航（深色玻璃） ---------- */
.nav{background:rgba(13,20,40,.5);border:1px solid rgba(255,255,255,.12);
  box-shadow:0 10px 34px rgba(0,0,0,.35)}
.nav-solid{background:rgba(10,16,32,.82)}
.nav-logo span{
  background:linear-gradient(120deg,#38b6ff,#a78bfa,#38e5ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 12px rgba(56,182,255,.35))}
.nav-logo img{filter:drop-shadow(0 0 10px rgba(56,182,255,.5))}
.nav-links a{color:var(--ink-dim)}
.nav-links a:hover,.nav-links a.is-active{color:#fff;background:rgba(56,182,255,.16)}
.nav-burger{color:#fff}

/* ---------- HERO（首页定稿视觉） ---------- */
.hero{position:relative}
.hero-bg{background:transparent}
.hero-bg::before{opacity:.85;
  background:
    radial-gradient(34vw 30vw at 18% 16%,rgba(56,182,255,.20),transparent 60%),
    radial-gradient(30vw 28vw at 82% 20%,rgba(139,92,246,.18),transparent 62%),
    radial-gradient(36vw 30vw at 62% 96%,rgba(56,229,255,.14),transparent 62%)}
.hero-bg::after{opacity:.4;background-image:
  linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px)}
.hero-bg img{opacity:.08}
.hero .eyebrow{color:#cfe4ff;border-color:rgba(255,255,255,.16);background:rgba(13,20,40,.4)}
.hero h1{color:#fff}
.hero h1 em{background:linear-gradient(120deg,#7fb4ff,#a78bfa,#38e5ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{color:var(--ink-dim)}

/* 首页 Hero 右侧 3D 芯片舞台（renderHome 输出 .hero-stage） */
.hero-stage{position:relative;width:100%;max-width:460px;aspect-ratio:1/1;margin:0 auto}
.hero-stage-inner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.hs-ring{position:absolute;border-radius:50%;border:1px solid;opacity:.75}
.hs-ring.r1{width:82%;height:82%;border-color:rgba(56,229,255,.5);animation:hs-spin 14s linear infinite}
.hs-ring.r2{width:66%;height:66%;border-color:rgba(167,139,250,.45);border-style:dashed;animation:hs-spin 20s linear infinite reverse}
.hs-ring.r3{width:96%;height:96%;border-color:rgba(255,79,216,.3);animation:hs-spin 30s linear infinite}
.hs-ring::after{content:"";position:absolute;top:-3px;left:50%;width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 14px var(--cyan)}
.hs-ring.r2::after{background:var(--violet);box-shadow:0 0 14px var(--violet)}
@keyframes hs-spin{to{transform:rotate(360deg)}}
.hs-track{position:absolute;inset:9%;pointer-events:none;animation:hs-track 2.6s ease-in-out infinite}
.hs-track::before,.hs-track::after{content:"";position:absolute;width:26px;height:26px;border:2px solid var(--cyan);opacity:.9}
.hs-track::before{top:-2px;left:-2px;border-right:none;border-bottom:none;border-radius:6px 0 0 0}
.hs-track::after{bottom:-2px;right:-2px;border-left:none;border-top:none;border-radius:0 0 6px 0}
.hs-track .tl,.hs-track .br{position:absolute;width:26px;height:26px;border:2px solid var(--cyan);opacity:.9}
.hs-track .tl{top:-2px;right:-2px;border-left:none;border-bottom:none;border-radius:0 6px 0 0}
.hs-track .br{bottom:-2px;left:-2px;border-right:none;border-top:none;border-radius:0 0 0 6px}
@keyframes hs-track{0%,100%{box-shadow:0 0 0 rgba(56,229,255,0)}50%{box-shadow:0 0 34px rgba(56,229,255,.22)}}
.hs-scan{position:absolute;left:9%;right:9%;height:2px;top:20%;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  box-shadow:0 0 16px var(--cyan);opacity:.85;animation:hs-scan 3.4s ease-in-out infinite}
@keyframes hs-scan{0%{top:16%}50%{top:82%}100%{top:16%}}
.hs-chip{position:relative;width:44%;height:44%;transform-style:preserve-3d;animation:hs-chip 7s ease-in-out infinite}
.hs-chip .face{position:absolute;inset:0;border-radius:16px;
  background:linear-gradient(135deg,rgba(56,229,255,.16),rgba(139,92,246,.10) 50%,rgba(255,79,216,.14));
  border:1.5px solid rgba(56,229,255,.6);
  box-shadow:0 0 34px rgba(56,229,255,.35),inset 0 0 24px rgba(56,229,255,.18)}
.hs-chip .face::before{content:"";position:absolute;inset:12%;border:1px dashed rgba(56,229,255,.5);border-radius:10px;
  background-image:linear-gradient(rgba(56,229,255,.18) 1px,transparent 1px),
    linear-gradient(90deg,rgba(56,229,255,.18) 1px,transparent 1px);background-size:14px 14px}
.hs-chip .die{position:absolute;inset:22%;border-radius:8px;
  background:linear-gradient(135deg,rgba(255,215,106,.5),rgba(255,79,216,.35));
  box-shadow:0 0 20px rgba(255,215,106,.55),inset 0 0 12px rgba(255,215,106,.4);
  animation:hs-die 2.2s ease-in-out infinite}
@keyframes hs-die{0%,100%{opacity:.85}50%{opacity:1;box-shadow:0 0 34px rgba(255,215,106,.8)}}
.hs-chip .pin{position:absolute;width:6px;height:18px;background:linear-gradient(180deg,#ffd76a,rgba(255,215,106,.3));border-radius:2px}
.hs-chip .pin.p1{top:-16px;left:20%}.hs-chip .pin.p2{top:-16px;left:46%}.hs-chip .pin.p3{top:-16px;left:72%}
.hs-chip .pin.p4{bottom:-16px;left:20%}.hs-chip .pin.p5{bottom:-16px;left:46%}.hs-chip .pin.p6{bottom:-16px;left:72%}
.hs-chip .pin.p7{left:-14px;top:22%;transform:rotate(90deg)}
.hs-chip .pin.p8{left:-14px;top:52%;transform:rotate(90deg)}
.hs-chip .pin.p9{right:-14px;top:22%;transform:rotate(90deg)}
.hs-chip .pin.p10{right:-14px;top:52%;transform:rotate(90deg)}
@keyframes hs-chip{0%,100%{transform:translateY(0) rotateX(0) rotateZ(0)}50%{transform:translateY(-16px) rotateX(4deg) rotateZ(2deg)}}
.hs-panel{position:absolute;background:rgba(6,12,40,.62);border:1px solid rgba(56,229,255,.35);
  border-radius:10px;padding:10px 14px;font-size:11px;color:var(--cyan);
  backdrop-filter:blur(8px);box-shadow:0 0 18px rgba(56,229,255,.15);animation:hs-panel 5s ease-in-out infinite}
.hs-panel b{color:#fff;font-weight:700}
.hs-panel.dp1{top:2%;right:4%;animation-delay:.2s}
.hs-panel.dp2{bottom:6%;left:0;animation-delay:1.4s}
.hs-panel.dp3{top:30%;left:-4%;animation-delay:2.6s}
@keyframes hs-panel{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.hs-panel.dp1::after{content:"▲";font-size:9px;color:#4ade80;margin-left:4px}
.hs-stat{position:absolute;right:0;bottom:2%;
  background:linear-gradient(135deg,rgba(56,182,255,.16),rgba(139,92,246,.16));
  border:1px solid rgba(56,229,255,.4);border-radius:14px;padding:14px 20px;
  backdrop-filter:blur(10px);box-shadow:0 0 26px rgba(56,229,255,.2);animation:hs-stat 3s ease-in-out infinite}
@keyframes hs-stat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.hs-stat .num{font-size:30px;font-weight:900;letter-spacing:1px;color:#fff}
.hs-stat .num span{color:var(--cyan)}
.hs-stat .lbl{font-size:12px;color:var(--ink-dim);margin-top:2px}

/* Hero 左右分栏（首页） */
.hero-v3{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(18px,3vw,44px)}
.hero-v3 .hero-main{flex:1 1 500px;min-width:0}
.hero-stage-col{flex:1 1 420px;min-width:280px;max-width:520px;display:flex;flex-direction:column;gap:16px}
.hero-v3 .hero-stage{flex:1 1 420px;min-width:260px;max-width:520px}
.hero-v3 .hero-side{flex:none;max-width:none;width:100%;flex-direction:row;align-items:stretch;padding-top:0}
.hero-v3 .hero-side .hero-call{flex:1}
.hero-v3 .hero-side .hero-qr{flex:1}
.hero-v3 .hero-side .hero-qr img{width:120px;height:120px}
@media(max-width:1080px){
  .hero-stage-col{flex-basis:100%;max-width:460px;margin:0 auto}
  .hero-v3 .hero-side{max-width:none;flex-basis:100%;flex-direction:row;align-items:stretch}
  .hero-v3 .hero-side .hero-call{flex:1}
  .hero-v3 .hero-side .hero-qr{flex:1}
}

/* ---------- 通用区块：玻璃化 ---------- */
.sec{position:relative}
.sec .eyebrow{color:#cfe4ff}
.stat,.svc-card,.proc,.cat,.brand,.faq,.panel,.contact-card,.wall-brand,.cat-strip-item,
.app-card,.why,.stock-card,.brand-card,.trust,.hot-table-wrap,.search-box{
  background:rgba(255,255,255,.055) !important;
  border-color:rgba(255,255,255,.11) !important;
  box-shadow:0 14px 40px rgba(0,0,0,.35) !important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.stat b{background:linear-gradient(135deg,#7fb4ff,#a78bfa);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat small,.brand small,.cat small,.svc-card p,.proc p,.why p,.app-card p,.contact-card p,
.sec-lead,.search-hint,.form-note,.faq .ans,.footer p,footer p,footer a{color:var(--ink-dim)}
.svc-card h3,.proc h3,.app-card h3,.why b,.contact-card h3,.stock-card .sc-mpn,
.brand-card b,.wall-brand b,.cat-strip-item .cs-txt b,.stat small,.trust b,.faq summary{color:var(--ink)}
.svc-num{color:var(--violet)}
.spec span{color:var(--ink)}
.spec div small,.sc-meta span,.contact-item small{color:var(--ink-faint)}
.spec .tag{background:linear-gradient(135deg,rgba(56,182,255,.16),rgba(139,92,246,.18));color:#cfe4ff}
.hot-table th{background:linear-gradient(135deg,rgba(56,182,255,.10),rgba(139,92,246,.10));color:var(--ink-dim)}
.hot-table td{color:var(--ink);border-color:var(--line)}
.hot-table tbody tr:hover{background:rgba(56,182,255,.05)}
.hot-table td.mpn a{color:#7fb4ff}
.hot-table td.desc{color:var(--ink-dim)}
.hot-table td.stock{color:#4ade80}
.pager{color:var(--ink-dim)}
.pager a{border-color:var(--line-strong);color:#cfe4ff}

/* ---------- 表单深色 ---------- */
.field input,.field textarea,.field select,form input,form textarea,form select{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:var(--ink)}
.field input::placeholder,form input::placeholder{color:var(--ink-faint)}
.field input:focus,.field textarea:focus,form input:focus,form textarea:focus,form select:focus{
  border-color:var(--blue);box-shadow:0 0 0 4px rgba(56,182,255,.14)}
.field label{color:var(--ink-dim)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:640px){.field-row{grid-template-columns:1fr}}
.field select option{background:#0a1020;color:var(--ink)}

/* ---------- 搜索框 ---------- */
.hero-search{background:rgba(255,255,255,.07);border-color:rgba(56,182,255,.35);box-shadow:0 14px 40px rgba(56,182,255,.12)}
.hero-search input{color:#fff}
.hero-search input::placeholder{color:var(--ink-faint)}
.search-suggest{background:rgba(13,20,40,.92);border-color:rgba(255,255,255,.14);backdrop-filter:blur(14px)}
.search-suggest a{border-color:rgba(255,255,255,.06)}
.search-suggest a:hover{background:rgba(56,182,255,.12)}
.search-suggest b{color:#fff}
.search-suggest .ss-brand{color:var(--ink-dim)}
.search-suggest .ss-pkg{background:rgba(255,255,255,.10);color:var(--ink-dim)}
.search-suggest .ss-qty{color:#4ade80}

/* ---------- 品牌/分类卡片 ---------- */
.brand-logo,.cat-ico,.cs-ico{background:linear-gradient(135deg,#38b6ff,#8b5cf6)}
.brand-logo-img{filter:brightness(1.05)}
.wb-logo{background:rgba(255,255,255,.06)}
.mpn-chip{background:linear-gradient(135deg,rgba(56,182,255,.12),rgba(56,229,255,.08));border-color:rgba(56,182,255,.25);color:#9cc8ff}
.mpn-chip small{color:#4ade80}
.mpn-chip:hover{background:linear-gradient(135deg,rgba(56,182,255,.2),rgba(56,229,255,.14))}
.cat-pill{background:linear-gradient(135deg,rgba(56,182,255,.12),rgba(56,229,255,.08));border-color:rgba(56,182,255,.25);color:#9cc8ff}
.chip{background:rgba(56,182,255,.12);border-color:rgba(56,182,255,.22);color:#9cc8ff}
.chip:hover{background:rgba(56,182,255,.22)}

/* ---------- 联系/二维码 ---------- */
.hero-qr,.qr img,.wechat-qr{background:rgba(255,255,255,.06);border-color:var(--line)}
.contact-ico{background:var(--grad-soft)}
.promise{background:var(--grad-soft);color:var(--ink-dim)}
.form-success .ref,.contact-card a,.contact-item b{color:#9cc8ff}

/* ---------- 页脚深色 ---------- */
footer{background:linear-gradient(180deg,rgba(10,16,32,.9),rgba(5,8,18,.98));border-top:1px solid rgba(255,255,255,.08)}
.foot-brand b{
  background:linear-gradient(120deg,#38b6ff,#a78bfa,#38e5ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 10px rgba(56,182,255,.3))}
.foot-brand img{filter:drop-shadow(0 0 10px rgba(56,182,255,.5))}
footer h4{color:var(--ink-faint)}
footer a:hover{color:#fff}
.foot-bottom{color:var(--ink-faint)}

/* ---------- BOM banner / CTA 带（保留渐变，加深） ---------- */
.bom-banner{box-shadow:0 24px 60px rgba(0,0,0,.45)}
.cta-band{box-shadow:0 24px 60px rgba(0,0,0,.45)}
.btn-white{color:#1d4ed8}
.btn-ghost-w{color:#fff}

/* ---------- 渐显动画（滚动进入视口） ---------- */
.reveal{opacity:1}   /* 无 JS 时直接可见 */
html.js .reveal{opacity:0;transform:translateY(34px);transition:opacity .85s ease,transform .85s ease}
html.js .reveal.in{opacity:1;transform:none}
html.js .reveal.d1{transition-delay:.06s}.html.js .reveal.d2{transition-delay:.12s}
html.js .reveal.d3{transition-delay:.18s}.html.js .reveal.d4{transition-delay:.24s}
html.js .reveal.d5{transition-delay:.3s}.html.js .reveal.d6{transition-delay:.36s}
/* 兜底：JS 加载后 1.6s 内仍未触发 IO 的元素强制可见可点 */
html.js .reveal{animation:reveal-fallback 1s ease 1.6s forwards}
@keyframes reveal-fallback{to{opacity:1;transform:none}}

/* ---------- 浮动窗深色 ---------- */
.float-qr-panel{background:rgba(13,20,40,.94);border-color:rgba(255,255,255,.14);backdrop-filter:blur(14px)}
.float-qr-panel small{color:var(--ink-dim)}

/* ---------- 移动端 ---------- */
@media(max-width:720px){
  .hero-stage{max-width:330px}
  .hs-panel.dp3{display:none}
  .reveal{transform:translateY(22px)}
}

/* 减少动态偏好 */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}
}