/* ============================================================================
   登录页 · AI 神经球背景（2026-10-08 v5 · 真的会动）
   ----------------------------------------------------------------------------
   沿革：
     v1  深空位图     → 太黑、丑
     v2  亮色玻璃球   → AI 生图的"透明底"其实是**画上去的棋盘格**，软抠失败 ⇒ 线上一个"棋盘泡泡"
     v3  纯 SVG 神经球 → 方向对，但尺寸策略错：固定 700px + right 定位 ⇒ PC 只右边一块、H5 看不见
     v4  铺满整屏     → 容器 fixed inset:0 + object-fit:cover ⇒ 任意比例都铺满 ✅
     v5  （本版）**动起来** —— 修掉 v4"看着像静止图片"的真病根：
   ----------------------------------------------------------------------------
   🔴🔴 **真病根（2026-10-08 用连拍 md5 实证）**：
      浏览器**不执行 ` <img src="x.svg">` 内部的 SMIL / CSS 动画**。
      同一张 svg 当文档直接打开时动画正常 ⇒ 文件没问题，是"以 img 引入"这条路径不跑动画。
      v1~v4 把所有动画都画在 SVG 里、用 `<img>` 引进来 ⇒ **线上整个球是一张静止图片**。
   本版两条一起上：
     ① 把 SVG **注入进 DOM**（`login-globe-live`）⇒ 内部的 SMIL / CSS 动画才会执行；
        注入前先显示 `<img>` 版本兜底（JS 挂了也有一张静止的球，不会白屏）。
     ② 给**容器**加一条纯 CSS 旋转 —— transform 动画走 GPU 合成，是最直观、最省的那条动效。
   🔴 为什么容器可以安全整体旋转：球在 SVG 里是**居中圆**，绕中心旋转轮廓不变
      （透视/裁切都不会露边）；所以用「100vmax 正方形 + 居中」即可，不需要为旋转额外放大。
      （反例：v4 那种 `inset:0 + object-fit:cover` 的矩形盒子若直接旋转，四角必露底。）
   🔴 作用域：只挂 `#loginView`，注册页 `#registerView` 一律不碰。
   🔴 所有动画遵守 `prefers-reduced-motion`。
   ========================================================================== */

#loginView {
  --brand:  #F95901;
  --brand2: #FF9A4D;
  --cyan:   #2BB3C0;
  --violet: #8B7CF6;
  --ink:    #6E7F99;
}

/* ---------- ① 底色：暖白 → 浅冷（和白色登录卡同梯度） + 三处柔光 ---------- */
#loginView {
  background-color: #FBF9F7;
  background-image:
    radial-gradient(56% 46% at 80% 16%, rgba(249,89,1,.11),  transparent 62%),
    radial-gradient(44% 40% at 10% 90%, rgba(139,124,246,.10), transparent 64%),
    radial-gradient(40% 34% at 94% 94%, rgba(43,179,192,.09),  transparent 64%),
    linear-gradient(152deg, #FDFBF9 0%, #F8F7F7 44%, #F1F4F8 100%);
  background-attachment: fixed;
  overflow: hidden;
}

/* ---------- ② 神经球容器：100vmax 正方形居中 + 整体缓慢自转 ---------- */
#loginView .auth-globe {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 100vmax;               /* 正方形：短边方向也必然盖满 */
  height: 100vmax;
  transform: translate(-50%, -50%) rotate(0deg);   /* 基础值也带居中 ⇒ 关动画时不会跑偏 */
  z-index: 0;
  pointer-events: none;         /* 绝不挡表单点击 */
  animation: globeSpin 90s linear infinite;
  will-change: transform;       /* 提到合成层，旋转不重绘 */
}
@keyframes globeSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 兜底：JS 未注入时显示的静止球（<img> 里 SVG 内部动画不跑，但至少画面是对的） */
#loginView .auth-globe > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;          /* 容器与 SVG 都是正方形 ⇒ 精确贴合 */
  display: block;
}

/* 注入口：SVG 被 innerHTML 注入这里，内部 SMIL/CSS 动画才会执行 */
#loginView .auth-globe-live {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .5s ease;
}
#loginView .auth-globe-live.cng-on { opacity: 1; }
#loginView .auth-globe-live > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------- ③ 粒子（很轻，只补氛围、不抢球）
   🔴🔴 这里**必须**用「transform 位移一个 200% 的 ::before」，不能用
      `animation: background-position` —— 后者每帧触发**整屏重绘**，
      实测把 60.5fps 直接打到 30.2fps（线上 v1~v4 一直挂着这个开销）。
      transform 走合成层，位移不重绘 ⇒ 实测基本免费。
      位移量取 tile(320px) 的整数倍 ⇒ 循环无缝（-640/-320 都是 320 的倍数）。 */
#loginView .auth-particles {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
#loginView .auth-particles::before {
  content: "";
  position: absolute;
  left: -50%;
  top: -50%;
  width: 200%;
  height: 200%;
  background:
    radial-gradient(1.6px 1.6px at 14% 24%, rgba(249,89,1,.34),   transparent 60%),
    radial-gradient(1.6px 1.6px at 30% 66%, rgba(110,127,153,.30), transparent 60%),
    radial-gradient(1.6px 1.6px at 54% 30%, rgba(43,179,192,.30),  transparent 60%),
    radial-gradient(1.6px 1.6px at 76% 74%, rgba(139,124,246,.28), transparent 60%),
    radial-gradient(2.2px 2.2px at 22% 88%, rgba(249,89,1,.22),   transparent 60%),
    radial-gradient(2.2px 2.2px at 46% 12%, rgba(139,124,246,.24), transparent 60%),
    radial-gradient(2.2px 2.2px at 88% 44%, rgba(43,179,192,.20),  transparent 60%),
    radial-gradient(2.8px 2.8px at 8%  48%, rgba(249,89,1,.20),   transparent 60%),
    radial-gradient(2.8px 2.8px at 66% 90%, rgba(110,127,153,.20), transparent 60%);
  background-size: 320px 320px;
  background-repeat: repeat;
  animation: particlesDrift 90s linear infinite;
  will-change: transform;
}
@keyframes particlesDrift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-640px, -320px, 0); }
}

/* ---------- ④ 内容层抬到背景之上 ---------- */
#loginView .auth-topbar,
#loginView .auth-wrap {
  position: relative;
  z-index: 10;
}
#loginView .auth-topbar {
  background: transparent;
  border-bottom-color: transparent;
}
/* 顶栏「登录」二字直接压在网格上会发花 ⇒ 顶部压一层白纱，只压顶部、不碰中间 */
#loginView .auth-topbar::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  background: linear-gradient(to bottom, rgba(253,251,249,.92), rgba(253,251,249,0));
  z-index: -1;
  pointer-events: none;
}

/* ---------- ⑤ 卡片：白卡在中性浅底上，用中性阴影（不抢色） ---------- */
#loginView .auth-card {
  box-shadow:
    0 26px 64px rgba(40,52,74,.13),
    0 8px 20px rgba(40,52,74,.07),
    0 1px 0 rgba(255,255,255,.7) inset;
  border: 1px solid rgba(255,255,255,.85);
}
#loginView .auth-logo {
  box-shadow:
    0 14px 34px rgba(249,89,1,.34),
    0 0 0 6px rgba(255,255,255,.75);
}

/* ---------- ⑥ 窄屏：cover 已自适应，只把卡加实一点 ---------- */
@media (max-width: 520px) {
  #loginView .auth-card { background: rgba(255,255,255,.97); }
}

/* ---------- ⑦ 系统开了"减少动态效果"就静止（transform 基础值仍带居中，不会跑偏） ---------- */
@media (prefers-reduced-motion: reduce) {
  #loginView .auth-globe,
  #loginView .auth-particles {
    animation: none !important;
  }
}