@charset "UTF-8";
/* ==========================================================================
   宁夏鼎鸿福建设工程有限公司 · 官方网站
   fx.css — 动效层（在 main.css 之后加载）
   品牌预加载 / 揭幕帘 / 滚动进度 / 自定义光标 / 粒子首屏 / 3D 卡片 /
   光斑 / 跑马灯 / 里程表数字 / 极光 / 时间轴进度 / 视差 / 流光 / 涟漪
   ========================================================================== */

/* ---------- 1. 品牌预加载 ---------- */
#preloader {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background:
    radial-gradient(120% 90% at 50% 0%, #0a3272 0%, #041d42 46%, #010c22 100%);
  color: #fff;
  transition: opacity .5s var(--ease), visibility .5s;
}
#preloader.is-done { opacity: 0; visibility: hidden; }

.pl__grid {
  position: absolute; inset: -10%; opacity: .16;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .5) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .5) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 50% 50%, #000 10%, transparent 62%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 10%, transparent 62%);
  animation: plGrid 26s linear infinite;
}
@keyframes plGrid { to { background-position: 64px 64px, 64px 64px; } }

.pl__glow {
  position: absolute; width: 620px; height: 620px; border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 99, 235, .32), transparent 62%);
  filter: blur(20px); animation: plFloat 7s ease-in-out infinite alternate;
}
@keyframes plFloat { to { transform: translate3d(0, -50px, 0) scale(1.12); } }

.pl__inner { position: relative; text-align: center; padding: 0 24px; }

.pl__emblem { position: relative; width: 148px; height: 148px; margin: 0 auto 34px; }
.pl__emblem img {
  position: absolute; inset: 0; margin: auto; width: 84px; height: auto;
  filter: drop-shadow(0 0 22px rgba(37, 99, 235, .55));
  animation: plLogoIn 1.1s var(--ease) both;
}
@keyframes plLogoIn {
  from { opacity: 0; transform: scale(.6) rotate(-14deg); }
  to { opacity: 1; transform: none; }
}
.pl__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: plSpin 5.5s linear infinite; }
.pl__ring circle { fill: none; stroke-width: 2; }
.pl__ring .r1 { stroke: rgba(255, 255, 255, .16); }
.pl__ring .r2 {
  stroke: var(--red); stroke-linecap: round;
  stroke-dasharray: 90 250; transform-origin: 50% 50%;
  filter: drop-shadow(0 0 6px rgba(37, 99, 235, .8));
}
.pl__ring .r3 {
  stroke: #fff; stroke-linecap: round; opacity: .7;
  stroke-dasharray: 34 340; transform-origin: 50% 50%;
  animation: plSpin 3s linear infinite reverse;
}
@keyframes plSpin { to { transform: rotate(360deg); } }

.pl__cn {
  font-size: clamp(1.1rem, 2.4vw, 1.5rem); font-weight: 400; letter-spacing: .34em;
  text-indent: .34em; margin: 0 0 12px;
  animation: plUp .9s var(--ease) .18s both;
}
.pl__en {
  font-size: .64rem; letter-spacing: .2em; color: #8fb2e2; text-transform: uppercase;
  margin: 0 0 34px; animation: plUp .9s var(--ease) .3s both;
}
@keyframes plUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.pl__bar {
  width: min(320px, 74vw); height: 2px; margin: 0 auto 16px;
  background: rgba(255, 255, 255, .16); border-radius: 2px; overflow: hidden;
}
.pl__bar span {
  display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, var(--red), var(--gold) 60%, #fff);
  box-shadow: 0 0 14px rgba(37, 99, 235, .9);
  transition: transform .2s linear;
}
.pl__pct { font-size: .78rem; letter-spacing: .24em; color: #a8c4e8; margin: 0; }
.pl__pct span { font-variant-numeric: tabular-nums; color: #fff; font-weight: 400; }
.pl__pct i { font-style: normal; margin-left: 3px; }

.pl__slogan {
  position: absolute; left: 0; right: 0; bottom: 40px; text-align: center;
  font-size: .78rem; letter-spacing: .5em; text-indent: .5em; color: rgba(255, 255, 255, .38);
  animation: plFade 1.4s var(--ease) .5s both;
}
@keyframes plFade { from { opacity: 0; letter-spacing: .8em; } to { opacity: 1; } }

/* 牛顿摆加载器：4 球，两端摆动，中间静止 */
.newtons-cradle {
  --uib-size: 50px;
  --uib-speed: 1.2s;
  --uib-color: #fff;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--uib-size);
  height: var(--uib-size);
}
.newtons-cradle__dot {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  width: 25%;
  transform-origin: top center;
}
.newtons-cradle__dot::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--uib-color);
}
.newtons-cradle__dot:first-child {
  animation: swing var(--uib-speed) linear infinite;
}
.newtons-cradle__dot:last-child {
  animation: swing2 var(--uib-speed) linear infinite;
}
@keyframes swing {
  0% { transform: rotate(0deg); animation-timing-function: ease-out; }
  25% { transform: rotate(70deg); animation-timing-function: ease-in; }
  50% { transform: rotate(0deg); animation-timing-function: linear; }
}
@keyframes swing2 {
  0% { transform: rotate(0deg); animation-timing-function: ease-out; }
  25% { transform: rotate(-70deg); animation-timing-function: ease-in; }
  50% { transform: rotate(0deg); animation-timing-function: linear; }
}

/* ---------- 2. 揭幕帘 ---------- */
.veil { position: fixed; inset: 0; z-index: 9998; display: flex; pointer-events: none; }
.veil span {
  flex: 1; background: #041d42; transform-origin: top;
  transition: transform .85s var(--ease);
}
.veil span:nth-child(1) { transition-delay: .00s; }
.veil span:nth-child(2) { transition-delay: .07s; }
.veil span:nth-child(3) { transition-delay: .14s; }
.veil span:nth-child(4) { transition-delay: .21s; }
.veil span:nth-child(5) { transition-delay: .28s; }
.veil span:nth-child(6) { transition-delay: .35s; }
.veil.is-open span { transform: scaleY(0); }

html.is-loading, html.is-loading body { overflow: hidden; height: 100%; }

/* ---------- 3. 顶部滚动进度 ---------- */
#scrollProgress {
  position: fixed; bottom: 0; left: 0; right: 0; height: 3px; z-index: 1100;
  transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, #2563eb 0%, #3b82f6 40%, #60a5fa 70%, #fff 100%);
  box-shadow: 0 0 14px rgba(37, 99, 235, .7);
  will-change: transform;
}

/* ---------- 4. 自定义光标 ---------- */
#cursorDot, #cursorRing {
  position: fixed; top: 0; left: 0; z-index: 9500; pointer-events: none;
  border-radius: 50%; opacity: 0;
  transition: opacity .3s var(--ease), width .3s var(--ease), height .3s var(--ease),
  background .3s var(--ease), border-color .3s var(--ease);
  mix-blend-mode: normal;
}
#cursorDot { width: 6px; height: 6px; background: var(--red); margin: -3px 0 0 -3px; }
#cursorRing {
  width: 38px; height: 38px; margin: -19px 0 0 -19px;
  border: 1px solid rgba(7, 56, 125, .45);
  background: rgba(255, 255, 255, .06);
}
body.cursor-ready #cursorDot, body.cursor-ready #cursorRing { opacity: 1; }
#cursorRing.is-hot {
  width: 76px; height: 76px; margin: -38px 0 0 -38px;
  background: rgba(37, 99, 235, .1); border-color: rgba(37, 99, 235, .55);
}
#cursorRing::after {
  content: attr(data-label);
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 11px; font-weight: 400; letter-spacing: .08em; color: var(--navy);
  opacity: 0; transform: scale(.7); transition: opacity .25s, transform .25s;
}
#cursorRing.is-hot::after { opacity: 1; transform: none; }

/* ---------- 5. 文本遮罩 / 分字入场 ---------- */
.fx-line { display: block; overflow: hidden; }
.fx-line > span { display: inline-block; will-change: transform; }

.fx-char {
  display: inline-block; opacity: 0; transform: translateY(.62em) rotateX(-55deg);
  transform-origin: 50% 100%;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.fx-sr { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.fx-sr.is-in { opacity: 1; transform: none; }

/* 首屏 / 内页横幅入场：全部走纯 CSS 关键帧，不依赖脚本时序，
   终态恒为可见（both 填充），杜绝卡在透明态 */
@keyframes fxRise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}
@keyframes fxLineUp {
  from { transform: translateY(112%); }
  to { transform: none; }
}

/* 首屏标题帘幕上移：动画走外层，避免内层 text-clip 在合成层上丢失绘制 */
.hero__title .fx-line { display: block; overflow: hidden; animation: fxLineUp 1.05s var(--ease) both; }
.hero__title .fx-line > span { display: inline-block; }
.hero__title .fx-line:nth-child(2) { animation-delay: .14s; }

.hero h1.hero__title em {
  position: relative; color: #ffd2d5;
  text-shadow: 0 0 36px rgba(37, 99, 235, .55), 0 2px 12px rgba(4, 29, 66, .5);
}
.hero h1.hero__title em::after {
  content: ""; position: absolute; left: 0; right: .06em; bottom: .02em; height: .09em;
  border-radius: 999px; transform-origin: left center;
  background: linear-gradient(90deg, var(--red), var(--gold) 70%, #ffe9a8);
  box-shadow: 0 0 18px rgba(37, 99, 235, .75);
  animation: emBar 1s var(--ease) .78s both;
}
@keyframes emBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.hero__badge { animation: fxRise .8s var(--ease) .12s both; }
.hero__slogan { animation: fxRise .8s var(--ease) .34s both; }
.hero__desc { animation: fxRise .8s var(--ease) .46s both; }
.hero__actions { animation: fxRise .8s var(--ease) .58s both; }
.hero__stats { animation: fxRise .9s var(--ease) .70s both; }

/* 内页横幅入场 */
.pagehead__inner > * { animation: fxRise .85s var(--ease) both; }
.pagehead__inner > *:nth-child(1) { animation-delay: .05s; }
.pagehead__inner > *:nth-child(2) { animation-delay: .19s; }
.pagehead__inner > *:nth-child(3) { animation-delay: .33s; }

/* ---------- 6. 首屏粒子画布 + 极光 ---------- */
/* 画布留在背景层内部自然层序，不参与根层叠上下文，避免与固定头部的
   backdrop-filter 叠加产生边缘光晕 */
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero__bg, .pagehead__bg { isolation: isolate; }
.hero__bg img { animation: kenBurns 26s ease-in-out infinite alternate; transform: scale(1.06); }
@keyframes kenBurns { to { transform: scale(1.18) translate3d(-1.5%, -1%, 0); } }

.aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.aurora span {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5;
  will-change: transform;
}
.aurora .a1 { width: 420px; height: 420px; left: -8%; top: 4%; background: rgba(37, 99, 235, .5); animation: auroraA 17s ease-in-out infinite alternate; }
.aurora .a2 { width: 520px; height: 520px; right: -10%; top: -12%; background: rgba(22, 87, 184, .55); animation: auroraB 21s ease-in-out infinite alternate; }
.aurora .a3 { width: 360px; height: 360px; left: 38%; bottom: -18%; background: rgba(201, 162, 39, .3); animation: auroraC 25s ease-in-out infinite alternate; }
@keyframes auroraA { to { transform: translate3d(120px, 90px, 0) scale(1.2); } }
@keyframes auroraB { to { transform: translate3d(-140px, 120px, 0) scale(1.25); } }
@keyframes auroraC { to { transform: translate3d(90px, -110px, 0) scale(1.15); } }

/* ---------- 7. 卡片 3D + 鼠标光斑 ---------- */
[data-tilt] { transform-style: preserve-3d; will-change: transform; }
[data-tilt] > * { transform: translateZ(0); }
.card, .biz__item, .why__item, .field, .metric, .qual__col, .contact-card, .contact-side,
.culture__item { position: relative; overflow: hidden; }

.spot {
  position: absolute; inset: -1px; z-index: 0; pointer-events: none; opacity: 0;
  transition: opacity .4s var(--ease);
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(37, 99, 235, .13), transparent 62%);
}
.biz__item .spot, .contact-side .spot, .culture__item .spot { background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .16), transparent 62%); }
[data-tilt]:hover .spot { opacity: 1; }
.card > *, .biz__item > *, .why__item > *, .field > *, .metric > *,
.qual__col > *, .contact-card > *, .culture__item > *, .flow__step > * { position: relative; z-index: 1; }

/* 卡片描边流光 */
.card::before, .why__item::before, .field::before {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 11px; pointer-events: none;
  padding: 1px;
  background: linear-gradient(135deg, transparent 30%, rgba(37, 99, 235, .85), transparent 70%) 0 0 / 260% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .35s var(--ease);
}
.card:hover::before, .why__item:hover::before, .field:hover::before { opacity: 1; animation: borderFlow 1.6s linear; }
@keyframes borderFlow { to { background-position: 260% 0; } background-position: 0 0; }

[data-tilt] { transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s; }
[data-tilt]:hover { box-shadow: 0 26px 60px rgba(7, 56, 125, .17); }

/* 图标微动 */
.card__icon svg, .why__item svg, .field h3 svg, .qual__col h3 svg, .qhse__col h3 svg {
  transition: transform .5s var(--ease);
}
.card:hover .card__icon svg, .why__item:hover > svg { transform: scale(1.14) rotate(-6deg); }
.field:hover h3 svg { transform: scale(1.18); }
.qual__col:hover h3 svg, .qhse__col:hover h3 svg { transform: scale(1.15); }
.card:hover .card__icon { animation: iconPop .6s var(--ease); }
@keyframes iconPop { 40% { transform: scale(1.12) rotate(-8deg); } }

/* ---------- 9. 按钮流光 + 涟漪 ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn > * { position: relative; z-index: 2; }
.btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 55%; z-index: 1;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: translateX(-140%) skewX(-18deg);
}
.btn:hover::after { animation: btnSweep .85s var(--ease); }
@keyframes btnSweep { to { transform: translateX(300%) skewX(-18deg); } }
.btn:active { transform: translateY(0) scale(.97); }
[data-magnetic] { will-change: transform; }

.ripple {
  position: absolute; border-radius: 50%; transform: scale(0); pointer-events: none; z-index: 1;
  background: rgba(255, 255, 255, .45);
  animation: rippleGo .65s var(--ease) forwards;
}
@keyframes rippleGo { to { transform: scale(2.6); opacity: 0; } }

/* ---------- 10. 里程表数字 ---------- */
.od { display: inline-flex; align-items: baseline; }
.od__slot {
  display: block; overflow: hidden;
  height: 1.16em; line-height: 1.16;
}
.od__slot > span {
  display: block; line-height: 1.16;
  transition: transform .85s var(--ease);
}
.od__slot > span.out { transform: translateY(-100%); }
.od__slot > span.in { transform: translateY(0); }
.metric b, .hero__stat b { line-height: 1.16; }
.metric b, .hero__stat b { position: relative; }
.metric b::after, .hero__stat b::after {
  content: ""; position: absolute; top: 0; left: -30%; width: 40%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-20deg); opacity: 0; pointer-events: none;
}
.metric.is-lit b::after, .hero__stat.is-lit b::after { animation: numShine 1.1s var(--ease); }
@keyframes numShine { 0% { opacity: 0; left: -40%; } 40% { opacity: 1; } 100% { opacity: 0; left: 130%; } }

/* ---------- 11. 章节标题装饰线 ---------- */
.sec-head h2 { position: relative; }
.sec-head--center h2::after {
  content: ""; display: block; width: 128px; height: 3px; margin: 18px auto 0;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--red), var(--gold), transparent);
  transform: scaleX(0); transform-origin: center;
  transition: transform .9s var(--ease) .25s;
}
.sec-head--center.is-in h2::after { transform: scaleX(1); }
.sec-head__eyebrow::before, .sec-head__eyebrow::after { transition: width .6s var(--ease); }
.sec-head.is-in .sec-head__eyebrow::before { width: 40px; }
.sec-head.is-in .sec-head__eyebrow::after { width: 40px; }

/* ---------- 12. 时间轴滚动进度 ---------- */
.tl-rail {
  position: absolute; left: 50%; top: 6px; bottom: 6px; width: 2px; z-index: 1;
  transform: translateX(-50%); pointer-events: none;
}
.tl-rail::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--navy-100), var(--navy), var(--navy-100));
}
.tl-rail i {
  position: absolute; left: 0; right: 0; top: 0; height: 100%; transform-origin: top;
  transform: scaleY(var(--tp, 0));
  background: linear-gradient(180deg, var(--red), var(--gold));
  box-shadow: 0 0 12px rgba(37, 99, 235, .6);
}
.tl-item::before { z-index: 3; }
.tl-item.is-lit::before { animation: dotPing 1s var(--ease); }
@keyframes dotPing {
  0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, .55); }
  100% { box-shadow: 0 0 0 16px rgba(37, 99, 235, 0); }
}

/* ---------- 13. 视差 ---------- */
[data-par] { will-change: transform; }

/* ---------- 14. 回到顶部进度环 ---------- */
.totop { overflow: hidden; }
.totop__ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.totop__ring circle { fill: none; stroke: rgba(255, 255, 255, .35); stroke-width: 2; }
.totop__ring .prog {
  stroke: var(--gold); stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 50% 50%;
  transition: stroke-dashoffset .15s linear;
}
.totop svg:not(.totop__ring) { position: relative; z-index: 2; }
.totop:hover { box-shadow: 0 12px 32px rgba(37, 99, 235, .4); }

/* ---------- 15. 数字滚动条 / 强调发光 ---------- */
.metric:hover b, .hero__stat:hover b { text-shadow: 0 0 26px rgba(7, 56, 125, .32); }
.hero__stat b { font-variant-numeric: tabular-nums; }

/* ---------- 16. 入场序列（全局错峰） ---------- */
.fx-sr[data-d="1"] { transition-delay: .08s; }
.fx-sr[data-d="2"] { transition-delay: .16s; }
.fx-sr[data-d="3"] { transition-delay: .24s; }
.fx-sr[data-d="4"] { transition-delay: .32s; }
.fx-sr[data-d="5"] { transition-delay: .4s; }

/* ---------- 17. 降级：尊重系统减少动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  .pl__ring, .pl__grid, .pl__glow, .pl__slogan, .aurora span,
  .hero__bg img, .hero h1.hero__title em::after { animation: none !important; }
  .hero__canvas { display: none; }
  #cursorDot, #cursorRing { display: none; }
  .fx-char, .fx-sr, .hero__title .fx-line, .hero__slogan, .hero__desc,
  .hero__actions, .hero__badge, .hero__stats, .pagehead__inner > * {
    opacity: 1 !important; transform: none !important; animation: none !important;
  }
  .veil { display: none; }
  #preloader { display: none; }
  .sec-head--center h2::after { transform: scaleX(1); }
  [data-tilt] { transform: none !important; }
}

/* ---------- 18. 窄屏微调 ---------- */
@media (max-width: 780px) {
  #cursorDot, #cursorRing { display: none; }
  .pl__slogan { font-size: .68rem; letter-spacing: .34em; }
  .aurora .a3 { display: none; }
}

/* ============================================================
   BROADSIDE 层 · fx.css（预加载 / 进度条 / 扫光移除）
   ============================================================ */
#preloader { background: #111111; }
.pl__glow { display: none; }
.pl__grid { opacity: .1; }
.pl__emblem img { filter: none; }
.pl__ring .r1 { stroke: rgba(255, 255, 255, .22); }
.pl__ring .r2 { stroke: var(--red); filter: none; }
.pl__ring .r3 { stroke: var(--gold); }
.pl__en { color: #C9C3B4; }
.pl__pct { color: #C9C3B4; }
.pl__bar { background: rgba(255, 255, 255, .2); }
.pl__bar span { background: #FF3D1F; box-shadow: none !important; }

#scrollProgress {
  background: linear-gradient(90deg, #FF3D1F 0 40%, #D8F14B 40% 70%, #1F3DFF 70% 100%);
  box-shadow: none !important;
}

/* 平面风：按钮扫光高光移除，按下改为硬位移 */
.btn::after { content: none !important; }
.btn:hover::after { animation: none; }
.btn:active { transform: translate(2px, 2px); }

/* ---------- 预加载器：3D 方块组装落地动画（Uiverse.io by InfinityLoopGames，替换牛顿摆）
   配色适配 BROADSIDE：墨黑方块 / 纸色遮罩 / 深色模式自动翻转；keyframes 以 bsl- 命名空间隔离 ---------- */
#preloader .loader {
  --duration: 3s;
  --primary: #111111;
  --primary-light: #4a4a4a;
  --primary-rgba: rgba(17, 17, 17, 0);
  width: 200px;
  height: 320px;
  position: relative;
  transform-style: preserve-3d;
  transform: scale(.62);
  margin: -64px 0;
  flex: none;
}
[data-theme="dark"] #preloader .loader {
  --primary: #e4dfd2;
  --primary-light: #8a8577;
  --primary-rgba: rgba(228, 223, 210, 0);
}
@media (max-width: 760px) {
  #preloader .loader { transform: scale(.44); margin: -89px 0; }
}
#preloader .loader::before,
#preloader .loader::after {
  --r: 20.5deg;
  content: "";
  width: 320px;
  height: 140px;
  position: absolute;
  right: 32%;
  bottom: -11px;
  background: var(--bg);
  transform: translateZ(200px) rotate(var(--r));
  animation: bsl-mask var(--duration) linear forwards infinite;
}
#preloader .loader::after {
  --r: -20.5deg;
  right: auto;
  left: 32%;
}
#preloader .loader .ground {
  position: absolute;
  left: -50px;
  bottom: -120px;
  transform-style: preserve-3d;
  transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
}
#preloader .loader .ground div {
  transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0);
  width: 200px;
  height: 200px;
  background: var(--primary);
  background: linear-gradient(45deg, var(--primary) 0%, var(--primary) 50%, var(--primary-light) 50%, var(--primary-light) 100%);
  transform-style: preserve-3d;
  animation: bsl-ground var(--duration) linear forwards infinite;
}
#preloader .loader .ground div::before,
#preloader .loader .ground div::after {
  --rx: 90deg;
  --ry: 0deg;
  --x: 44px;
  --y: 162px;
  --z: -50px;
  content: "";
  width: 156px;
  height: 300px;
  opacity: 0;
  background: linear-gradient(var(--primary), var(--primary-rgba));
  position: absolute;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) translate(var(--x), var(--y)) translateZ(var(--z));
  animation: bsl-shine var(--duration) linear forwards infinite;
}
#preloader .loader .ground div::after {
  --rx: 90deg;
  --ry: 90deg;
  --x: 0;
  --y: 177px;
  --z: 150px;
}
#preloader .loader .box {
  --x: 0;
  --y: 0;
  position: absolute;
  animation: var(--duration) linear forwards infinite;
  transform: translate(var(--x), var(--y));
}
#preloader .loader .box div {
  background-color: var(--primary);
  width: 48px;
  height: 48px;
  position: relative;
  transform-style: preserve-3d;
  animation: var(--duration) ease forwards infinite;
  transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
}
#preloader .loader .box div::before,
#preloader .loader .box div::after {
  --rx: 90deg;
  --ry: 0deg;
  --z: 24px;
  --y: -24px;
  --x: 0;
  content: "";
  position: absolute;
  background-color: inherit;
  width: inherit;
  height: inherit;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) translate(var(--x), var(--y)) translateZ(var(--z));
  filter: brightness(var(--b, 1.2));
}
#preloader .loader .box div::after {
  --rx: 0deg;
  --ry: 90deg;
  --x: 24px;
  --y: 0;
  --b: 1.4;
}
#preloader .loader .box.box0 { --x: -220px; --y: -120px; left: 58px; top: 108px; }
#preloader .loader .box.box1 { --x: -260px; --y: 120px; left: 25px; top: 120px; }
#preloader .loader .box.box2 { --x: 120px; --y: -190px; left: 58px; top: 64px; }
#preloader .loader .box.box3 { --x: 280px; --y: -40px; left: 91px; top: 120px; }
#preloader .loader .box.box4 { --x: 60px; --y: 200px; left: 58px; top: 132px; }
#preloader .loader .box.box5 { --x: -220px; --y: -120px; left: 25px; top: 76px; }
#preloader .loader .box.box6 { --x: -260px; --y: 120px; left: 91px; top: 76px; }
#preloader .loader .box.box7 { --x: -240px; --y: 200px; left: 58px; top: 87px; }
#preloader .loader .box0 { animation-name: bsl-move0; }
#preloader .loader .box0 div { animation-name: bsl-scale0; }
#preloader .loader .box1 { animation-name: bsl-move1; }
#preloader .loader .box1 div { animation-name: bsl-scale1; }
#preloader .loader .box2 { animation-name: bsl-move2; }
#preloader .loader .box2 div { animation-name: bsl-scale2; }
#preloader .loader .box3 { animation-name: bsl-move3; }
#preloader .loader .box3 div { animation-name: bsl-scale3; }
#preloader .loader .box4 { animation-name: bsl-move4; }
#preloader .loader .box4 div { animation-name: bsl-scale4; }
#preloader .loader .box5 { animation-name: bsl-move5; }
#preloader .loader .box5 div { animation-name: bsl-scale5; }
#preloader .loader .box6 { animation-name: bsl-move6; }
#preloader .loader .box6 div { animation-name: bsl-scale6; }
#preloader .loader .box7 { animation-name: bsl-move7; }
#preloader .loader .box7 div { animation-name: bsl-scale7; }
@keyframes bsl-move0 {
  12% { transform: translate(var(--x), var(--y)); }
  25%, 52% { transform: translate(0, 0); }
  80% { transform: translate(0, -32px); }
  90%, 100% { transform: translate(0, 188px); }
}
@keyframes bsl-move1 {
  16% { transform: translate(var(--x), var(--y)); }
  29%, 52% { transform: translate(0, 0); }
  80% { transform: translate(0, -32px); }
  90%, 100% { transform: translate(0, 188px); }
}
@keyframes bsl-move2 {
  20% { transform: translate(var(--x), var(--y)); }
  33%, 52% { transform: translate(0, 0); }
  80% { transform: translate(0, -32px); }
  90%, 100% { transform: translate(0, 188px); }
}
@keyframes bsl-move3 {
  24% { transform: translate(var(--x), var(--y)); }
  37%, 52% { transform: translate(0, 0); }
  80% { transform: translate(0, -32px); }
  90%, 100% { transform: translate(0, 188px); }
}
@keyframes bsl-move4 {
  28% { transform: translate(var(--x), var(--y)); }
  41%, 52% { transform: translate(0, 0); }
  80% { transform: translate(0, -32px); }
  90%, 100% { transform: translate(0, 188px); }
}
@keyframes bsl-move5 {
  32% { transform: translate(var(--x), var(--y)); }
  45%, 52% { transform: translate(0, 0); }
  80% { transform: translate(0, -32px); }
  90%, 100% { transform: translate(0, 188px); }
}
@keyframes bsl-move6 {
  36% { transform: translate(var(--x), var(--y)); }
  49%, 52% { transform: translate(0, 0); }
  80% { transform: translate(0, -32px); }
  90%, 100% { transform: translate(0, 188px); }
}
@keyframes bsl-move7 {
  40% { transform: translate(var(--x), var(--y)); }
  52%, 53% { transform: translate(0, 0); }
  80% { transform: translate(0, -32px); }
  90%, 100% { transform: translate(0, 188px); }
}
@keyframes bsl-scale0 {
  6% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0); }
  14%, 100% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1); }
}
@keyframes bsl-scale1 {
  10% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0); }
  18%, 100% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1); }
}
@keyframes bsl-scale2 {
  14% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0); }
  22%, 100% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1); }
}
@keyframes bsl-scale3 {
  18% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0); }
  26%, 100% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1); }
}
@keyframes bsl-scale4 {
  22% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0); }
  30%, 100% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1); }
}
@keyframes bsl-scale5 {
  26% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0); }
  34%, 100% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1); }
}
@keyframes bsl-scale6 {
  30% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0); }
  38%, 100% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1); }
}
@keyframes bsl-scale7 {
  34% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0); }
  42%, 100% { transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1); }
}
@keyframes bsl-ground {
  0%, 65% { transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0); }
  75%, 90% { transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(1); }
  100% { transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px) translateZ(100px) scale(0); }
}
@keyframes bsl-shine {
  0%, 70% { opacity: 0; }
  75%, 87% { opacity: 0.2; }
  100% { opacity: 0; }
}
@keyframes bsl-mask {
  0%, 65% { opacity: 0; }
  66%, 100% { opacity: 1; }
}

/* ===== B. 全站排版审计修复：杂蓝清理 ===== */
.veil span { background: var(--ink); }                        /* 揭幕帘深蓝 #041d42 */
.aurora { display: none; }                                    /* 蓝金光斑（DOM 在 3 页） */
.spot { background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .14), transparent 62%); }  /* 跟随光斑蓝→中性白 */
.pl__en, .pl__pct { color: #C9C3B4; }                         /* 预加载浅蓝字 */
#cursorRing { border-color: rgba(17, 17, 17, .45); }
#cursorRing.is-hot { background: rgba(17, 17, 17, .06); border-color: rgba(17, 17, 17, .55); }
[data-theme="dark"] #cursorRing { border-color: rgba(242, 238, 228, .5); }
[data-theme="dark"] #cursorRing.is-hot { background: rgba(255, 255, 255, .05); }