/* ============================================================
   认证页背景 (登录/注册/找回密码)
   用于: 前台 body 场景 .abg-scene (fixed z0) + 后台设置页 .pv 预览
   数据: 后台「内容-背景图设置」configuration('login_bg')
   特效子元素由 assets/js/authbg.js 按 data-fx 生成
   ============================================================ */

/* ---------- 场景基础 ---------- */
.abg-scene{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:#0b1220}
.abg-scene~.auth-wrap{position:relative;z-index:1;background:transparent}
.abg-scene i{position:absolute;pointer-events:none}
@media (max-width:640px){
  .abg-scene ~ .auth-wrap{background:rgba(255,255,255,.06)}
}

/* ---------- 图片背景模式 ---------- */
.abg-scene.abg-img{background-color:#0a0f1e;background-repeat:no-repeat;background-position:center;background-size:cover}
.abg-scene.abg-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,6,23,.52),rgba(2,6,23,.26) 45%,rgba(2,6,23,.58))}

/* ============================================================
   特效一: 星尘粒子 particles —— 上升发光的动态粒子
   ============================================================ */
.abg-scene[data-fx="particles"]{background:linear-gradient(180deg,#04050f 0%,#0a1033 55%,#1d1050 100%)}
.abg-scene[data-fx="particles"]::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 70% at 20% 0%,rgba(27,138,232,.18),transparent 55%),radial-gradient(120% 80% at 85% 110%,rgba(46,160,255,.16),transparent 55%)}
.abg-scene[data-fx="particles"] i.p{bottom:-30px;border-radius:50%;animation:abgPUp linear infinite}
@keyframes abgPUp{0%{transform:translate3d(0,0,0) scale(1);opacity:0}10%{opacity:var(--po,.8)}85%{opacity:var(--po,.8)}100%{transform:translate3d(var(--px,40px),-115vh,0) scale(.5);opacity:0}}

/* ============================================================
   特效二: 光晕弥散 halo —— 柔和彩色光斑漂浮
   ============================================================ */
.abg-scene[data-fx="halo"]{background:linear-gradient(160deg,#05060f,#0a0f2e 50%,#150b33)}
.abg-scene[data-fx="halo"]::before{content:"";position:absolute;inset:-10%;background:radial-gradient(circle at 50% 120%,rgba(27,138,232,.28),transparent 55%);filter:blur(30px)}
.abg-scene[data-fx="halo"] i.h{border-radius:50%;filter:blur(42px);animation:abgHalo 18s ease-in-out infinite alternate}
@keyframes abgHalo{0%{transform:translate(0,0) scale(1);opacity:.35}100%{transform:translate(var(--dx,80px),var(--dy,-50px)) scale(1.3);opacity:.75}}

/* ============================================================
   特效三: 流动光锥 rays —— 光线锥束缓慢旋转
   ============================================================ */
.abg-scene[data-fx="rays"]{background:linear-gradient(180deg,#05062a 0%,#0b1140 55%,#05060f 100%)}
.abg-scene[data-fx="rays"]::before{content:"";position:absolute;left:50%;top:-55%;width:230vmax;height:230vmax;transform:translateX(-50%) rotate(0deg);background:conic-gradient(from 0deg,rgba(120,190,255,.20) 0deg,transparent 7deg,rgba(255,214,170,.12) 16deg,transparent 26deg,rgba(120,190,255,.18) 36deg,transparent 45deg,rgba(255,170,120,.10) 55deg,transparent 66deg);-webkit-mask-image:radial-gradient(circle at 50% 8%,#000 0%,transparent 58%);mask-image:radial-gradient(circle at 50% 8%,#000 0%,transparent 58%);animation:abgRays 46s linear infinite}
.abg-scene[data-fx="rays"]::after{content:"";position:absolute;left:50%;top:-20%;width:120vmin;height:120vmin;transform:translateX(-50%);background:radial-gradient(circle at 50% 14%,rgba(220,235,255,.5),rgba(147,197,253,.12) 32%,transparent 60%);filter:blur(18px);animation:abgSun 9s ease-in-out infinite alternate}
@keyframes abgRays{to{transform:translateX(-50%) rotate(360deg)}}
@keyframes abgSun{0%{opacity:.6}100%{opacity:1}}

/* ============================================================
   特效四: 流星雨 meteor —— 流星划过
   ============================================================ */
.abg-scene[data-fx="meteor"]{background-image:radial-gradient(1px 1px at 25% 22%,rgba(255,255,255,.85),transparent 1.5px),radial-gradient(1px 1px at 70% 42%,rgba(190,210,255,.6),transparent 1.5px),radial-gradient(1.4px 1.4px at 46% 70%,rgba(255,255,255,.7),transparent 2px),radial-gradient(1px 1px at 85% 15%,rgba(220,235,255,.65),transparent 1.5px),linear-gradient(180deg,#01030c 0%,#0b1133 58%,#131842 100%)}
.abg-scene[data-fx="meteor"] i.m{top:var(--t,10%);left:var(--l,60%);width:150px;height:2px;border-radius:99px;background:linear-gradient(270deg,transparent,rgba(255,255,255,.25) 30%,#dceeff 88%,#ffffff);box-shadow:0 0 8px rgba(180,215,255,.8);opacity:0;animation:abgMet var(--du,5s) linear infinite;animation-delay:var(--de,0s)}
@keyframes abgMet{0%{transform:translate3d(0,0,0) rotate(158deg);opacity:0}4%{opacity:1}20%{opacity:.9}100%{transform:translate3d(var(--mx,-70vw),var(--my,26vh),0) rotate(158deg);opacity:0}}

/* ============================================================
   特效五: 极光流转 aurora —— 流光绸带
   ============================================================ */
.abg-scene[data-fx="aurora"]{background:linear-gradient(180deg,#01030f 0%,#071028 55%,#101b3f 100%)}
.abg-scene[data-fx="aurora"]::before{content:"";position:absolute;left:-12%;top:6%;width:70%;height:40%;border-radius:50%;background:linear-gradient(90deg,transparent,rgba(16,185,129,.5),rgba(74,171,255,.42),transparent);filter:blur(40px);transform:rotate(-9deg);animation:abgAur1 19s ease-in-out infinite alternate}
.abg-scene[data-fx="aurora"]::after{content:"";position:absolute;right:-10%;top:32%;width:72%;height:34%;border-radius:50%;background:linear-gradient(90deg,transparent,rgba(168,85,247,.45),rgba(56,189,248,.4),transparent);filter:blur(46px);transform:rotate(11deg);animation:abgAur2 25s ease-in-out infinite alternate}
@keyframes abgAur1{0%{transform:rotate(-9deg) translateY(0) scaleX(1);opacity:.5}100%{transform:rotate(-3deg) translateY(46px) scaleX(1.22);opacity:.95}}
@keyframes abgAur2{0%{transform:rotate(11deg) translateY(0) scaleX(1);opacity:.45}100%{transform:rotate(3deg) translateY(-58px) scaleX(1.3);opacity:.9}}

/* ============================================================
   特效六: 星云光涌 nebula —— 彩色星云呼吸
   ============================================================ */
.abg-scene[data-fx="nebula"]{background:radial-gradient(60% 55% at 22% 18%,rgba(124,58,237,.5),transparent 62%),radial-gradient(56% 62% at 82% 72%,rgba(6,182,212,.44),transparent 64%),radial-gradient(75% 70% at 52% 48%,rgba(244,63,94,.3),transparent 66%),radial-gradient(120% 90% at 50% 115%,rgba(56,130,246,.3),transparent 60%),linear-gradient(165deg,#07040f,#090d28 55%,#031018);animation:abgNeb 14s ease-in-out infinite alternate}
.abg-scene[data-fx="nebula"] i.s{width:2px;height:2px;border-radius:50%;background:#fff;animation:abgTw 4s ease-in-out infinite}
.abg-scene[data-fx="nebula"] i.s.b{background:#a5b4fc}
@keyframes abgNeb{0%{filter:hue-rotate(0deg) saturate(.9) brightness(1)}100%{filter:hue-rotate(30deg) saturate(1.15) brightness(1.28)}}
@keyframes abgTw{0%,100%{opacity:.15}50%{opacity:1}}

/* ============================================================
   特效七: 能量脉冲 pulse —— 扩散光环
   ============================================================ */
.abg-scene[data-fx="pulse"]{background:radial-gradient(ellipse 90% 45% at 50% 116%,rgba(74,171,255,.5),transparent 62%),linear-gradient(180deg,#02030a,#081035 65%,#0d1440)}
.abg-scene[data-fx="pulse"] i.o{left:50%;top:70%;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;background:radial-gradient(circle,rgba(150,200,255,.9),rgba(74,171,255,.25) 55%,transparent 70%);filter:blur(2px);animation:abgOrb 3.2s ease-in-out infinite alternate}
.abg-scene[data-fx="pulse"] i.r{left:50%;top:70%;width:130px;height:130px;margin:-65px 0 0 -65px;border-radius:50%;border:1px solid rgba(140,190,255,.85);box-shadow:0 0 18px rgba(120,180,255,.5),inset 0 0 14px rgba(120,180,255,.35);opacity:0;animation:abgRing 5.5s ease-out infinite;animation-delay:var(--de,0s)}
@keyframes abgOrb{0%{transform:scale(.85);opacity:.75}100%{transform:scale(1.25);opacity:1}}
@keyframes abgRing{0%{transform:scale(.2);opacity:0}10%{opacity:.9}100%{transform:scale(7);opacity:0}}

/* ============================================================
   特效八: 科技光网 grid —— 透视网格 + 流光扫描
   ============================================================ */
.abg-scene[data-fx="grid"]{background:linear-gradient(180deg,#020510,#071236 58%,#0a1130)}
.abg-scene[data-fx="grid"]::before{content:"";position:absolute;left:-42%;right:-42%;top:-60%;bottom:-18%;background-image:linear-gradient(rgba(96,165,250,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(96,165,250,.22) 1px,transparent 1px);background-size:44px 44px;transform-origin:center top;transform:perspective(620px) rotateX(63deg);animation:abgGridY 15s linear infinite}
.abg-scene[data-fx="grid"]::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 0%,rgba(96,180,255,.10) 45%,rgba(210,235,255,.3) 50%,rgba(96,180,255,.10) 55%,transparent 100%);background-size:100% 34vh;animation:abgScan 8s linear infinite}
@keyframes abgGridY{0%{background-position:0 0}100%{background-position:0 44px}}
@keyframes abgScan{0%{background-position:0 -34vh}100%{background-position:0 130vh}}

/* ============================================================
   后台设置页预览容器(将场景由 fixed 收敛为绝对定位)
   ============================================================ */
.pvbox{position:relative;overflow:hidden;background:#0b1220}
.pvbox .abg-scene{position:absolute !important;inset:0;z-index:0}
.pvbox .pv-card{position:relative;z-index:1;background:#fff}