/* ==========================================================================
   工作台 · 背景动态层（自行实现，参考视觉思路，不复制任何第三方代码）
   6 层：渐变漂移 / 极光 / 彩色光球(含视差) / 淡网格 / 上升粒子 / 暗角
   仅在登录页引入。
   ========================================================================== */

/* ---- 第 1 层：缓慢漂移的多段渐变 ---- */
.wb-bg__drift {
  position: absolute;
  inset: -20%;
  background: linear-gradient(125deg,
    #ffffff 0%, #f4f0ff 18%, #eef7ff 36%,
    #fdf1f8 54%, #f0fbff 72%, #f4f0ff 86%, #ffffff 100%);
  background-size: 420% 420%;
  animation: wb-drift 26s ease-in-out infinite;
  will-change: background-position;
}
@keyframes wb-drift {
  0%   { background-position: 0% 50%; }
  25%  { background-position: 55% 12%; }
  50%  { background-position: 100% 50%; }
  75%  { background-position: 45% 88%; }
  100% { background-position: 0% 50%; }
}

/* ---- 第 2 层：柔和极光，整体轻微游移旋转 ---- */
.wb-bg__aurora {
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(38% 44% at 22% 26%, rgba(176,158,255,.34), transparent 68%),
    radial-gradient(42% 40% at 78% 22%, rgba(140,190,255,.32), transparent 70%),
    radial-gradient(46% 46% at 70% 82%, rgba(255,178,222,.28), transparent 70%),
    radial-gradient(40% 42% at 18% 78%, rgba(140,226,244,.28), transparent 70%);
  filter: blur(6px);
  animation: wb-aurora 34s ease-in-out infinite;
  will-change: transform;
}
@keyframes wb-aurora {
  0%   { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
  33%  { transform: translate3d(-3%,2%,0) rotate(3deg) scale(1.06); }
  66%  { transform: translate3d(2.5%,-2%,0) rotate(-2.5deg) scale(1.03); }
  100% { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
}

/* ---- 第 3 层：模糊彩色光球，外层视差 + 内层漂浮 ---- */
.wb-orbs { position: absolute; inset: 0; }
.wb-orb {
  position: absolute;
  display: block;
  transform: translate3d(calc(var(--mx, 0) * var(--px, 0) * 1px),
                         calc(var(--my, 0) * var(--py, 0) * 1px), 0);
  transition: transform .9s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.wb-orb > i { display: block; width: 100%; height: 100%; border-radius: 50%; will-change: transform; }

.wb-orb--violet { top: -12%; left: -8%; width: 46vmax; height: 46vmax; }
.wb-orb--blue   { top: 2%;   right: -14%; width: 42vmax; height: 42vmax; }
.wb-orb--pink   { bottom: -20%; left: 4%;  width: 40vmax; height: 40vmax; }
.wb-orb--cyan   { bottom: -12%; right: 0%; width: 34vmax; height: 34vmax; }

.wb-orb--violet > i {
  background: radial-gradient(circle, rgba(150,128,250,.60) 0%, rgba(157,139,247,.26) 42%, rgba(157,139,247,.08) 64%, transparent 72%);
  filter: blur(40px);
  animation: wb-orb-a 21s ease-in-out infinite;
}
.wb-orb--blue > i {
  background: radial-gradient(circle, rgba(110,170,255,.56) 0%, rgba(123,176,255,.24) 44%, rgba(123,176,255,.07) 66%, transparent 74%);
  filter: blur(46px);
  animation: wb-orb-b 27s ease-in-out infinite;
}
.wb-orb--pink > i {
  background: radial-gradient(circle, rgba(248,150,205,.50) 0%, rgba(249,168,212,.22) 44%, rgba(249,168,212,.07) 66%, transparent 76%);
  filter: blur(48px);
  animation: wb-orb-c 24s ease-in-out infinite;
}
.wb-orb--cyan > i {
  background: radial-gradient(circle, rgba(120,220,242,.46) 0%, rgba(134,223,242,.20) 44%, rgba(134,223,242,.06) 66%, transparent 76%);
  filter: blur(44px);
  animation: wb-orb-b 31s ease-in-out infinite;
}
@keyframes wb-orb-a {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(5%, 6%, 0) scale(1.12); }
  100% { transform: translate3d(0,0,0) scale(1); }
}
@keyframes wb-orb-b {
  0%   { transform: translate3d(0,0,0) scale(1.05); }
  50%  { transform: translate3d(-6%, 5%, 0) scale(.94); }
  100% { transform: translate3d(0,0,0) scale(1.05); }
}
@keyframes wb-orb-c {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(4%, -6%, 0) scale(1.09); }
  100% { transform: translate3d(0,0,0) scale(1); }
}

/* ---- 第 4 层：淡网格缓慢平移 ---- */
.wb-bg__grid--live {
  animation: wb-grid-move 40s linear infinite;
}
@keyframes wb-grid-move {
  to { background-position: 60px 60px, 60px 60px; }
}

/* ---- 第 5 层：缓慢上升的粒子 ---- */
.wb-bg__particles { position: absolute; inset: 0; }
.wb-particle {
  position: absolute;
  bottom: -14px;
  border-radius: 50%;
  background: var(--p-color, rgba(160,140,240,.7));
  opacity: 0;
  animation: wb-particle-rise var(--p-dur, 22s) linear var(--p-delay, 0s) infinite;
  will-change: transform, opacity;
}
@keyframes wb-particle-rise {
  0%   { opacity: 0; transform: translate3d(0,0,0) scale(.5); }
  10%  { opacity: var(--p-opacity, .7); }
  50%  { transform: translate3d(var(--p-sway, 20px), -52vh, 0) scale(1); }
  85%  { opacity: var(--p-opacity, .7); }
  100% { opacity: 0; transform: translate3d(0, -106vh, 0) scale(.6); }
}

/* ---- 第 6 层：极淡暗角 ---- */
.wb-bg__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 92% 78% at 50% 46%, transparent 42%, rgba(120,108,175,.08) 100%);
}

/* ---- 减少动态效果：全部静止 ---- */
@media (prefers-reduced-motion: reduce) {
  .wb-bg__drift,
  .wb-bg__aurora,
  .wb-orb > i,
  .wb-bg__grid--live,
  .wb-particle {
    animation: none !important;
  }
  .wb-bg__particles { display: none; }
  .wb-orb { transition: none; transform: none !important; }
}

/* ---- 移动端：粒子减半由 JS 控制；网格隐藏以省电 ---- */
@media (max-width: 720px) {
  .wb-bg__grid--live { display: none; }
  .wb-orb--pink { display: none; }
}