/* ===== 东燊科技 Donsen — 未来科技感视觉层（fx.css）=====
   设计概念：现实与科幻交融
   - 深色板块 = 深空：半透明背景 + 星空画布 + 透视网格地板 + 辉光
   - 浅色板块 = 现实：明亮洁净，保留 HUD 细节点缀（角框 / 单色 kicker / 扫描线）
   - 全局动态：鼠标游走聚光 / 自定义光标 / 点击爆炸粒子 / 卡片 3D 倾斜 / 数字滚动
   尊重 prefers-reduced-motion 与 ?static=1（取证模式） */

:root{
  --cyan:#5BE9FF;
  --violet:#9D8CFF;
  --space-950:#040A16;
  --hud-line:rgba(91,155,255,.55);
}

/* ---------- 深空底 ---------- */
body{
  background:
    radial-gradient(1100px 720px at 82% -12%, rgba(30,95,216,.20), transparent 60%),
    radial-gradient(900px 640px at -8% 108%, rgba(157,140,255,.12), transparent 55%),
    linear-gradient(180deg,var(--space-950),#06101F 42%,var(--space-950));
}

/* 星空画布：固定在内容之下（负 z-index：盖住 body 背景、被各板块背景遮盖） */
#starfield{position:fixed;inset:0;z-index:-1;pointer-events:none;display:block}

/* 深色板块改半透明，让深空与星点透出来 */
.hero{
  background:
    radial-gradient(860px 560px at 78% 8%, rgba(30,95,216,.30), transparent 62%),
    linear-gradient(160deg,rgba(6,15,34,.86) 0%,rgba(10,26,51,.80) 45%,rgba(16,37,74,.74) 100%);
}
.section-dark{background:linear-gradient(170deg,rgba(10,26,51,.88),rgba(6,15,34,.92))}
.section-contact{background:linear-gradient(160deg,rgba(16,37,74,.86),rgba(4,10,22,.94))}

/* ---------- HERO 科幻件 ---------- */
/* 透视网格地板：向观众方向滚动（外层静态透视，内层网格 translateY 纯合成动画，避免 background-position 每帧重绘） */
.hero-floor{
  position:absolute;left:-20%;right:-20%;bottom:-4%;height:44%;pointer-events:none;
  transform:perspective(520px) rotateX(62deg);
  transform-origin:top center;
  mask-image:linear-gradient(180deg,transparent,#000 30%,#000 85%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 85%,transparent);
}
.hero-floor::before{
  content:'';position:absolute;left:0;right:0;top:-100%;bottom:-64px;
  background-image:
    linear-gradient(rgba(91,155,255,.22) 1px,transparent 1px),
    linear-gradient(90deg,rgba(91,155,255,.22) 1px,transparent 1px);
  background-size:64px 64px;
  animation:floorScroll 5.5s linear infinite;
}
@keyframes floorScroll{from{transform:translateY(0)}to{transform:translateY(64px)}}

/* 扫描光束：周期性扫过首屏（transform 动画，避免布局属性触发 CLS/重排） */
.hero-scan{
  position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none;overflow:hidden;
}
.hero-scan::before{
  content:'';position:absolute;left:-30%;right:-30%;height:180px;top:0;
  background:linear-gradient(180deg,transparent,rgba(91,233,255,.07) 45%,rgba(91,233,255,.14) 50%,transparent);
  filter:blur(2px);
  animation:scanSweep 7s ease-in-out infinite;
}
@keyframes scanSweep{0%{transform:translateY(-180px)}55%{transform:translateY(150vh)}100%{transform:translateY(150vh)}}

/* 视觉舱 HUD 角框 + 旋转轨道环（凤凰标识的能量场） */
.hero-pod{position:relative}
.hero-pod::before,.hero-pod::after{
  content:'';position:absolute;width:30px;height:30px;pointer-events:none;
}
.hero-pod::before{top:-1px;left:-1px;border-top:2px solid var(--cyan);border-left:2px solid var(--cyan);border-radius:28px 0 0 0}
.hero-pod::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--cyan);border-right:2px solid var(--cyan);border-radius:0 0 28px 0}
.pod-corner{position:absolute;width:30px;height:30px;pointer-events:none}
.pod-corner.c-tr{top:-1px;right:-1px;border-top:2px solid var(--cyan);border-right:2px solid var(--cyan);border-radius:0 28px 0 0}
.pod-corner.c-bl{bottom:-1px;left:-1px;border-bottom:2px solid var(--cyan);border-left:2px solid var(--cyan);border-radius:0 0 0 28px}
.hero-orbit{
  position:absolute;left:50%;top:36%;width:min(284px,68vw);aspect-ratio:1;pointer-events:none;
  border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 70%,rgba(91,233,255,.55) 84%,rgba(255,179,122,.65) 93%,transparent 100%);
  mask:radial-gradient(circle,transparent 60.5%,#000 62.5%,#000 65.5%,transparent 67%);
  -webkit-mask:radial-gradient(circle,transparent 60.5%,#000 62.5%,#000 65.5%,transparent 67%);
  animation:orbitSpin 12s linear infinite;
}
@keyframes orbitSpin{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}

/* 标语末尾终端光标 */
.hero-slogan{position:relative;display:inline-block}
.hero-slogan::after{
  content:'';display:inline-block;width:.5em;height:1em;margin-left:.18em;vertical-align:-.12em;
  background:var(--cyan);box-shadow:0 0 12px rgba(91,233,255,.8);
  animation:blink 1.1s steps(1) infinite;
}
@keyframes blink{50%{opacity:0}}

/* 首屏数据条：等宽数字 + 微光 */
.hero-stats .stat b{font-family:ui-monospace,Consolas,"Courier New",monospace;text-shadow:0 0 18px rgba(91,155,255,.55)}
.hero-stats .stat span{font-family:ui-monospace,Consolas,monospace;letter-spacing:.5px}

/* ---------- 全局 HUD 细节 ---------- */
/* 单色科技 kicker + 闪烁信号点 */
.section-kicker{font-family:ui-monospace,Consolas,monospace;display:inline-flex;align-items:center;gap:8px}
.section-kicker::before{
  content:'';width:7px;height:7px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 10px var(--cyan);animation:blink 1.6s steps(1) infinite;
}

/* 按钮微光扫过（transform 驱动，skew 合并进同一 transform） */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{
  content:'';position:absolute;top:0;bottom:0;left:0;width:60%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:translateX(-200%) skewX(-18deg);transition:transform .55s ease;pointer-events:none;
}
.btn:hover::after{transform:translateX(225%) skewX(-18deg)}
.btn-primary{border:1px solid rgba(91,233,255,.45);box-shadow:0 8px 30px rgba(30,95,216,.45),0 0 22px rgba(91,233,255,.18) inset}
.btn-ghost{backdrop-filter:blur(6px)}

/* 卡片：指针跟随辉光 + 3D 倾斜底座（不常驻 will-change——transform 变化时浏览器自动提层，常驻 = 27 个合成层常驻显存） */
.product,.tech-card,.case-card,.contact-card,.benefit-item{position:relative}
.product::before,.tech-card::before,.case-card::before,.contact-card::before,.benefit-item::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(91,155,255,.16),transparent 65%);
  opacity:0;transition:opacity .35s;
}
.product:hover::before,.tech-card:hover::before,.case-card:hover::before,.contact-card:hover::before,.benefit-item:hover::before{opacity:1}
[data-tilt]{transform-style:preserve-3d;transition:transform .18s ease-out}

/* 产品状态 pill：呼吸微光（translateX 纯合成，替代 background-position 重绘） */
.pill-status{position:relative;overflow:hidden}
.pill-status::after{
  content:'';position:absolute;top:0;bottom:0;left:-60%;width:55%;border-radius:inherit;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);
  animation:pillSheen 3.2s ease-in-out infinite;
}
@keyframes pillSheen{0%{transform:translateX(0)}55%,100%{transform:translateX(320%)}}

/* 时间线节点：脉冲（伪元素 opacity/scale 纯合成，替代 box-shadow 逐帧重绘） */
.tl-year::after{
  content:'';position:absolute;inset:-2px;border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 8px rgba(46,124,246,.12);opacity:0;
  animation:tlPulse 2.8s ease-in-out infinite;
}
@keyframes tlPulse{0%,100%{opacity:0;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}

/* 浅色板块的科幻点缀：细网格 + 顶部辉光 */
.section-light{position:relative;overflow:hidden}
.section-light::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(46,124,246,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(46,124,246,.05) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 20%,transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 20%,transparent 70%);
}
.section-light::after{
  content:'';position:absolute;top:0;left:8%;right:8%;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(46,124,246,.5),transparent);
}

/* ---------- 鼠标效果 ---------- */
/* 聚光灯：跟随指针的柔光（深色区可见） */
#spotlight{
  position:fixed;top:0;left:0;width:640px;height:640px;margin:-320px 0 0 -320px;
  pointer-events:none;z-index:50;opacity:0;transition:opacity .6s;
  background:radial-gradient(circle,rgba(91,155,255,.10) 0%,rgba(91,155,255,.05) 35%,transparent 68%);
}
html.fx-on #spotlight{opacity:1}

/* 自定义光标：光点 + 滞后光环（仅在 fx 激活且精确指针设备） */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:10001;display:none}
html.fx-on .cursor-dot,html.fx-on .cursor-ring{display:block}
.cursor-dot{width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
.cursor-ring{
  width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
  border:1.5px solid rgba(91,233,255,.75);
  transition:width .22s,height .22s,margin .22s,border-color .22s,opacity .22s;
}
.cursor-ring.is-hot{width:52px;height:52px;margin:-26px 0 0 -26px;border-color:rgba(255,255,255,.9)}
html:not(.fx-on) .cursor-dot,html:not(.fx-on) .cursor-ring{display:none}
@media (pointer:coarse){.cursor-dot,.cursor-ring{display:none!important}}

/* 隐藏原生光标（仅当 JS 光效激活时，避免脚本失效导致无光标） */
html.fx-on,html.fx-on a,html.fx-on button,html.fx-on .lang-toggle{cursor:none}

/* 点击冲击波环 */
.shockwave{
  position:fixed;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  border:2px solid rgba(91,233,255,.9);pointer-events:none;z-index:10000;
  animation:shock .62s cubic-bezier(.16,.84,.44,1) forwards;
}
@keyframes shock{
  from{transform:scale(1);opacity:.95;border-width:3px}
  to{transform:scale(16);opacity:0;border-width:1px}
}
.shockwave.warm{border-color:rgba(255,179,122,.9)}

/* 爆炸粒子画布 */
#fx-layer{position:fixed;inset:0;z-index:9999;pointer-events:none;display:block}

/* 全屏扫描线（极淡 CRT 质感；不用 mix-blend-mode——全屏混合会让下方所有动画层每帧重新混合） */
.scanlines{
  position:fixed;inset:0;pointer-events:none;z-index:9998;
  background:repeating-linear-gradient(180deg,transparent 0 3px,rgba(91,155,255,.045) 3px 4px);
}

/* 导航底部能量线（translateX 纯合成） */
.nav::after{
  content:'';position:absolute;left:0;bottom:-1px;height:1px;width:55%;
  background:linear-gradient(90deg,transparent,rgba(91,233,255,.55),rgba(46,124,246,.35),transparent);
  animation:navEnergy 5s ease-in-out infinite;
}
@keyframes navEnergy{0%{transform:translateX(-100%)}55%,100%{transform:translateX(182%)}}
.nav-link.active{position:relative}
.nav-link.active::after{
  content:'';position:absolute;left:14px;right:14px;bottom:3px;height:2px;border-radius:2px;
  background:var(--cyan);box-shadow:0 0 8px var(--cyan);
}

/* ---------- 取证/减动效模式：静态呈现 ---------- */
@media (prefers-reduced-motion:reduce){
  .hero-floor,.hero-scan::before,.hero-orbit,.section-kicker::before,.hero-slogan::after,
  .pill-status::after,.tl-year,.nav::after,.btn::after,.pod-eq i,.eyebrow-dot{animation:none!important}
  .hero-floor{display:none}
  #starfield,#fx-layer,#spotlight,.scanlines,.cursor-dot,.cursor-ring{display:none!important}
}