/* =====================================================================
   湾流智库 · 视觉与交互增强层  (enhance.css)
   加载顺序：必须位于 vis.css 之后（本文件晚于 vis.css 引入，
   故可安全覆盖其带 !important 的规则，同时保持 VIS 光谱品牌不变）。
   设计目标：
     1) 提升整体亮度与对比度，弱化沉闷的深紫平涂；
     2) 用多层光谱光晕 + 智识网格 + 渐变，制造空间纵深而非纯色块；
     3) 配合 enhance.js 的指针光晕 / 滚动视差 / 入场揭示，呈现
        原生般流畅的动态，摆脱静态呆板感；
     4) 全程仅 transform / opacity 动画，尊重 prefers-reduced-motion。
   ===================================================================== */

/* ---- 0. 增强层令牌（在 VIS 令牌之上扩展，不改动品牌） ---- */
:root{
  --enh-deep: linear-gradient(135deg,#34276a 0%,#4a2a8e 38%,#7a2a8e 68%,#b5417e 100%);
  --enh-glow-a: rgba(99,97,218,.55);   /* 靛蓝光晕 */
  --enh-glow-b: rgba(232,68,147,.42);  /* 湾流玫红光晕 */
  --enh-glow-c: rgba(138,79,196,.34);  /* 智库主紫光晕 */
  --enh-tint-purple: rgba(138,79,196,.06);
  --enh-tint-blue:   rgba(50,103,243,.05);
}

/* =====================================================================
   一、深色区块：多层光谱光晕 + 智识网格，提亮并增纵深
   （覆盖 vis.css 的纯 --wl-deep 平涂；用 !important 确保胜出）
   ===================================================================== */
.ban,.cta,.sec-dk,footer,.nvb{
  background:
    radial-gradient(70% 120% at 12% -10%, var(--enh-glow-a), transparent 58%),
    radial-gradient(60% 90%  at 92% 110%, var(--enh-glow-b), transparent 60%),
    radial-gradient(52% 80%  at 60% 0%,   var(--enh-glow-c), transparent 60%),
    var(--enh-deep) !important;
  color:#fff;
  position:relative;
  overflow:hidden;
}
/* 区块内智识网格（科技感，略提亮） */
.ban::after,.cta::after,.nvb::before{
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px) !important;
  background-size:38px 38px;
}
/* 区块顶部一抹光谱高光，制造"光从上方落下"的纵深 */
.ban::before,.sec-dk::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--wl-gradient-h);z-index:2;
}
/* 面包屑 / 副标题提对比度（可读性） */
.ban-s{color:rgba(255,255,255,.62)}
.bc{color:rgba(255,255,255,.42)}
.bc a{color:rgba(255,255,255,.55)}
.bc a:hover{color:var(--wl-pink)}

/* =====================================================================
   二、首页首屏：恢复 AI 概念背景图 + 可读渐变蒙版 + 光谱辉光
   （修复 vis.css 把 .hero-bg 误覆盖为网格的问题）
   ===================================================================== */
.hero{background:#0b1430}
/* 背景图降密：原图密集细线经模糊后化为柔和光谱色晕，只保留色彩与空间纵深；
   真正"可读的线条"交给上方稀疏 SVG 线条场（.hero-lines）承担，整体更简洁 */
.hero-bg{
  background-image:url('/assets/hero-native-ai.png')!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  filter:blur(3px) saturate(1.25) brightness(1.08);
  opacity:.72;
  will-change:transform;
  animation:hero-bg-drift 24s ease-in-out infinite;
}
@keyframes hero-bg-drift{
  0%,100%{background-position:50% 48%}
  25%{background-position:52% 50%}
  50%{background-position:50% 52%}
  75%{background-position:48% 50%}
}
/* 蒙版：左侧加深保证文字可读，右侧透出色晕提亮 + 稀疏网格纹理 */
.hero::after{
  background-image:
    linear-gradient(105deg, rgba(18,14,42,.90) 0%, rgba(40,24,78,.62) 46%, rgba(120,40,110,.26) 100%),
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px) !important;
  background-size:auto,84px 84px,84px 84px;
}
.hero-gl{
  background:radial-gradient(circle,rgba(138,79,196,.30),rgba(50,103,243,.12) 45%,transparent 70%)!important;
  width:680px;height:680px;top:-160px;right:-120px;
}

/* =====================================================================
   三、浅色区块：角落光谱微光，增纵深而不压暗
   ===================================================================== */
.sec{position:relative}
.sec::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(38% 50% at 100% 0%,  var(--enh-tint-purple), transparent 60%),
    radial-gradient(34% 46% at 0% 100%,  var(--enh-tint-blue),   transparent 60%);
}
.sec > .con{position:relative;z-index:1}
.sec-alt{position:relative}
.sec-alt::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(40% 52% at 0% 0%, var(--enh-tint-purple), transparent 62%);
}
.sec-alt > .con{position:relative;z-index:1}

/* =====================================================================
   四、微交互基础样式（悬停反馈 / 光泽 / 辉光）
   ===================================================================== */
/* 4.1 按钮光泽扫光 */
.btn,.ncta{position:relative;overflow:hidden}
.btn::after,.ncta::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.30) 50%,transparent 65%);
  transform:translateX(-130%);transition:transform .65s ease;
}
.btn:hover::after,.ncta:hover::after{transform:translateX(130%)}

/* 4.2 卡片 / 服务卡 / 专家卡 悬停辉光（紫调投影 + 顶边渐变） */
.card:hover,.svc:hover,.ec:hover,.vis-card:hover{
  box-shadow:0 18px 46px rgba(138,79,196,.20),0 6px 18px rgba(50,103,243,.12);
  border-color:var(--wl-violet);
}
.svc:hover{transform:translateY(-4px)}

/* 4.3 导航悬停胶囊 + 标志轻微悬浮 */
.nl{transition:color .2s,background .2s}
.nl:hover{background:rgba(138,79,196,.10);border-radius:6px}
.logo img{transition:transform .4s ease}
.logo:hover img{transform:scale(1.04) rotate(-2deg)}

/* 4.4  eyebrow 强调点（科技感标记） */
.ey{position:relative;padding-left:16px}
.ey::before{
  content:"";position:absolute;left:0;top:50%;width:9px;height:9px;
  transform:translateY(-50%);border-radius:50%;
  background:var(--wl-gradient-h);box-shadow:0 0 10px rgba(138,79,196,.6);
}

/* 4.5 FAB 呼吸辉光（已有渐变，补充光晕脉动） */
#fab .fb{transition:background .2s,box-shadow .3s,transform .2s}
#fab .fb:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(138,79,196,.45)}

/* =====================================================================
   五、指针光晕（由 enhance.js 注入 .cursor-glow 元素）
   ===================================================================== */
.cursor-glow{
  position:fixed;top:0;left:0;width:380px;height:380px;margin:-190px 0 0 -190px;
  border-radius:50%;pointer-events:none;z-index:95;
  background:radial-gradient(circle,rgba(138,79,196,.18),rgba(50,103,243,.10) 42%,transparent 70%);
  mix-blend-mode:screen;opacity:0;transition:opacity .4s ease;will-change:transform;
}
.cursor-glow.on{opacity:1}

/* =====================================================================
   六、入场揭示（渐进增强：仅当 enhance.js 成功加上 .js-reveal 才生效）
   ===================================================================== */
.js-reveal .reveal{
  opacity:0;transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);
  will-change:opacity,transform;
}
.js-reveal .reveal.in{opacity:1;transform:none}

/* =====================================================================
   八、首屏：小字单行 + 稀疏线条场（可动效）
   ===================================================================== */
/* 8.1 首屏小字文案：PC 端一行显示完整，窄屏自适应换行 */
.hero .hd{max-width:none;white-space:nowrap}
.hero .hbadge{white-space:nowrap}
@media (max-width:900px){
  .hero .hd{white-space:normal;max-width:640px}
  .hero .hbadge{white-space:normal}
}

/* 8.2 线条场容器：位于蒙版之上、文案之下；上下各溢出 14% 供视差位移不露边 */
.hero-lines{
  position:absolute;left:0;right:0;top:-14%;bottom:-14%;
  z-index:2;pointer-events:none;will-change:transform;
}
.hero-lines svg{display:block;width:100%;height:100%}
.hero .hi{z-index:3}

/* 8.3 结构主线：静态低亮度；悬停提亮加粗 */
.hl-streams path{
  fill:none;stroke:url(#hlg);stroke-width:1.25;opacity:.26;
  transition:opacity .8s ease,stroke-width .8s ease;
}
/* 8.4 能量流：短划线沿主线缓慢流动 —— 静态状态下的轻微微动 */
.hl-flows path{
  fill:none;stroke:url(#hlg);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:70 1494;opacity:.5;
  animation:hl-flow 26s linear infinite;
  transition:opacity .8s ease,stroke-width .8s ease;
}
@keyframes hl-flow{from{stroke-dashoffset:0}to{stroke-dashoffset:-1564}}
/* 8.5 光脉冲：默认不可见，悬停时点亮并快速流动
   （动画始终在跑，仅用 opacity 显隐 → 悬停瞬间相位连续、无跳变） */
.hl-pulses path{
  fill:none;stroke:url(#hlg);stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:26 900;opacity:0;
  animation:hl-pulse-flow 7s linear infinite;
  transition:opacity .5s ease;
}
@keyframes hl-pulse-flow{from{stroke-dashoffset:0}to{stroke-dashoffset:-926}}
/* 8.6 节点网络 + 节点呼吸 */
.hl-net{animation:hl-drift 22s ease-in-out infinite}
.hl-net line{
  stroke:url(#hlg);stroke-width:1;opacity:.2;
  transition:opacity .8s ease;
}
@keyframes hl-drift{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(-16px,-11px,0)}
}
.hl-node{
  fill:url(#hlrg);opacity:.5;
  transform-box:fill-box;transform-origin:center;
  animation:hl-breathe 6.5s ease-in-out infinite;
}
.hl-node:nth-child(2n){animation-duration:8.2s;animation-delay:-1.4s}
.hl-node:nth-child(3n){animation-duration:7.3s;animation-delay:-2.6s}
@keyframes hl-breathe{
  0%,100%{opacity:.32;transform:scale(.82)}
  50%{opacity:.92;transform:scale(1.18)}
}

/* 8.7 悬停触发：整层提亮 / 脉冲点亮（回落由上面的 transition 平滑负责） */
.hero:hover .hl-streams path{opacity:.52;stroke-width:1.7}
.hero:hover .hl-flows path{opacity:.85}
.hero:hover .hl-pulses path{opacity:.9}
.hero:hover .hl-net line{opacity:.4}
.hero:hover .hl-node{opacity:.9}

/* 8.8 光标光斑（由 enhance.js 以 transform 移动，走合成层，不触发重排） */
.hero-spot{
  position:absolute;left:0;top:0;width:760px;height:760px;margin:-380px 0 0 -380px;
  border-radius:50%;pointer-events:none;z-index:2;opacity:0;
  background:radial-gradient(circle,rgba(168,118,255,.26),rgba(50,103,243,.12) 42%,transparent 68%);
  mix-blend-mode:screen;transition:opacity .5s ease;will-change:transform;
}
.hero-spot.on{opacity:1}

/* =====================================================================
   九、公众号二维码区块
   ===================================================================== */
.qr-card{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:24px;background:var(--bg);border:1px solid var(--g1);border-radius:14px;
}
.qr-box{
  width:240px;height:240px;max-width:100%;border-radius:10px;overflow:hidden;
  background:#fff;border:1px solid var(--g1);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(138,79,196,.12);
  transition:transform .35s ease,box-shadow .35s ease;
}
.qr-box img{width:100%;height:100%;display:block;object-fit:contain}
.qr-box:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(138,79,196,.2)}
.qr-cap{font-size:12px;color:var(--g3);text-align:center;line-height:1.7;margin:0}

/* =====================================================================
   七、无障碍：减少动态偏好下全部关闭
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  .cursor-glow{display:none!important}
  .hero-spot{display:none!important}
  .js-reveal .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .btn::after,.ncta::after{display:none!important}
  /* 线条场：停掉全部动画，能量流还原为静态实线，保持简洁外观 */
  .hero-lines *{animation:none!important}
  .hl-pulses path{display:none!important}
  .hl-flows path{stroke-dasharray:none!important;opacity:.4!important}
  .hl-node{opacity:.7!important;transform:none!important}
  .hl-net line{opacity:.24!important}
  .hero-bg{animation:none!important}
}