/* =====================================================================
 * fx2.css —— 视觉特效层 V6.0（科技感增强）
 * 叠加层：不动布局骨架，全部动画仅 transform/opacity/filter。
 * ===================================================================== */

/* ============ 1. 登录页：背景图 + 光晕 + HUD ============ */
#loginGate{overflow:hidden}
#loginGate .lgdeco{
  background-image:
    linear-gradient(var(--line2) 1px,transparent 1px),
    linear-gradient(90deg,var(--line2) 1px,transparent 1px),
    url("assets/login-bg.jpg");
  background-size:34px 34px,34px 34px,cover;
  background-position:0 0,0 0,center;
  opacity:.55;}
#loginGate::before{content:"";position:absolute;inset:-30%;pointer-events:none;z-index:0;
  background:
    radial-gradient(560px 420px at 12% 8%,rgba(255,138,61,.14),transparent 62%),
    radial-gradient(720px 520px at 88% 92%,rgba(47,155,255,.20),transparent 65%),
    radial-gradient(520px 380px at 70% 12%,rgba(47,155,255,.10),transparent 60%);
  animation:fx2aurora 16s ease-in-out infinite alternate;}
@keyframes fx2aurora{
  0%{transform:translate3d(-2%,-1.5%,0) scale(1);filter:hue-rotate(0deg);}
  50%{transform:translate3d(2%,1.5%,0) scale(1.06);filter:hue-rotate(14deg);}
  100%{transform:translate3d(-1.5%,2%,0) scale(1.02);filter:hue-rotate(-8deg);}}
/* 扫描光带横扫整屏 */
#loginGate::after{content:"";position:absolute;left:0;right:0;height:220px;pointer-events:none;z-index:0;
  background:linear-gradient(180deg,transparent,rgba(120,200,255,.07) 45%,rgba(160,220,255,.14) 50%,rgba(120,200,255,.07) 55%,transparent);
  animation:fx2scanline 7.5s linear infinite;}
@keyframes fx2scanline{0%{top:-24%;} 100%{top:112%;}}
/* 登录卡左栏 3D 装配舞台（WebGL 嵌入式场景） */
#loginGate .fx2stage{position:relative;height:252px;margin:14px 0 4px;border-radius:14px;overflow:hidden;
  border:1px solid rgba(74,140,220,.22);pointer-events:none;
  background:radial-gradient(120% 90% at 50% 108%,rgba(38,96,190,.24),rgba(10,20,38,.1) 60%,transparent);
  animation:fx2fadeSlide .8s .4s both;}
#loginGate .fx2stage canvas{position:absolute;inset:0;width:100% !important;height:100% !important;display:block;}
#loginGate{--hb:14px;--hl:22px;}
#loginGate>.lgwrap::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  padding:1px;background:linear-gradient(var(--line),transparent 30%,transparent 70%,var(--line));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;}
/* 登录卡流光描边（仅 2px 环形描边，不透入卡片内部） */
#loginGate .lgwrap{isolation:isolate;}
#loginGate .lgwrap::after{content:"";position:absolute;inset:-2px;border-radius:17px;pointer-events:none;z-index:1;
  padding:2px;
  background:conic-gradient(from var(--ang,0deg),transparent 0 66%,rgba(47,155,255,.95) 79%,rgba(255,138,61,.95) 88%,transparent 97%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:fx2spin 5.5s linear infinite;filter:drop-shadow(0 0 8px rgba(47,155,255,.7));opacity:.95;}
@property --ang{syntax:"<angle>";initial-value:0deg;inherits:false;}
@keyframes fx2spin{to{--ang:360deg;}}
/* 左上/右下 HUD 角标 */
#loginGate .lgbrand::before{content:"◤";position:absolute;left:-30px;top:-26px;font-size:15px;color:var(--hud);opacity:.8;}
#loginGate .lgbox::after{content:"◢";position:absolute;right:10px;bottom:6px;font-size:13px;color:var(--hud);opacity:.65;}
/* 品牌 LOGO 悬浮 + 光晕 */
#loginGate .lgbrand>svg{animation:fx2logo 6s ease-in-out infinite;
  filter:drop-shadow(0 0 18px rgba(47,155,255,.65)) drop-shadow(0 6px 22px rgba(0,0,0,.6));}
@keyframes fx2logo{0%,100%{transform:translateY(0) rotate(-2deg);} 50%{transform:translateY(-9px) rotate(2deg);}}
/* 标题渐显（特性条已由 3D 装配舞台取代） */
#loginGate .lgbrand h1{animation:fx2fadeSlide .8s .15s var(--fx,cubic-bezier(.22,.61,.36,1)) both;}
#loginGate .lgbrand .lgsub{animation:fx2fadeSlide .8s .3s both;}
#loginGate .lgbox .frow{animation:fx2fadeSlide .6s both;}
#loginGate .lgbox .frow:nth-of-type(1){animation-delay:.55s;}
#loginGate .lgbox .frow:nth-of-type(2){animation-delay:.68s;}
#loginGate .lgbox .frow:nth-of-type(3){animation-delay:.8s;}
#loginGate .lgbtn{animation:fx2fadeSlide .6s .92s both;}
#loginGate .lghint,#loginGate .lgfoot{animation:fx2fadeSlide .8s 1.1s both;}
@keyframes fx2fadeSlide{from{opacity:0;transform:translateY(14px);filter:blur(4px);} to{opacity:1;transform:none;filter:none;}}
/* 输入框聚焦光环 */
#loginGate .inp{transition:border-color .25s,box-shadow .25s,background .25s;}
#loginGate .inp:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(47,155,255,.22),0 0 18px -4px rgba(47,155,255,.65);}
/* 登录按钮升级：流动渐变 */
#loginGate .lgbtn{background:linear-gradient(115deg,#1f7ae0,#2f9bff 38%,#37b6ff 55%,#2f9bff 70%,#1f7ae0);
  background-size:230% 100%;animation:fx2btnflow 3.2s linear infinite;}
@keyframes fx2btnflow{0%{background-position:0% 0;} 100%{background-position:-230% 0;}}

/* ============ 2. 登录成功转场（fx2.js 配合延迟 display:none） ============ */
body.auth #loginGate{display:flex;pointer-events:none;}
body.auth #loginGate.fx2out{animation:fx2gateOut .72s cubic-bezier(.5,0,.8,.4) both;}
@keyframes fx2gateOut{
  0%{opacity:1;transform:scale(1);filter:blur(0) brightness(1);}
  55%{opacity:1;transform:scale(1.035);filter:blur(0) brightness(1.5);}
  100%{opacity:0;transform:scale(1.12);filter:blur(14px) brightness(2.2);}}

/* ============ 3. 内页全局增强 ============ */
/* 粒子画布垫底 */
#fx2Canvas{z-index:0;opacity:.5;}
body.auth #fx2Canvas{z-index:1;opacity:.9;}
/* 主界面 glass 面板微光边 */
main>.panel,header{position:relative;}
main>.panel::after{content:"";position:absolute;top:0;left:8%;right:8%;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(140,205,255,.5),transparent);
  opacity:.4;animation:fx2topGlow 6s ease-in-out infinite;}
@keyframes fx2topGlow{0%,100%{opacity:.18;} 50%{opacity:.65;}}
/* 模块标题左侧竖条呼吸 */
.panel>h2{position:relative;}
.panel>h2::before{animation:livePulse 3s ease-in-out infinite;}
/* 表格行入场错峰 */
.tbl tbody tr{animation:fx2rowIn .4s var(--fx,cubic-bezier(.22,.61,.36,1)) both;}
.tbl tbody tr:nth-child(1){animation-delay:.02s;}
.tbl tbody tr:nth-child(2){animation-delay:.06s;}
.tbl tbody tr:nth-child(3){animation-delay:.1s;}
.tbl tbody tr:nth-child(4){animation-delay:.14s;}
.tbl tbody tr:nth-child(5){animation-delay:.18s;}
.tbl tbody tr:nth-child(6){animation-delay:.22s;}
@keyframes fx2rowIn{from{opacity:0;transform:translateX(-10px);} to{opacity:1;transform:none;}}
/* KPI 数字发光滚动 */
.kpi .v{font-variant-numeric:tabular-nums;}
/* 3D 倾斜由 fx2.js 写 transform；此处补过渡与阴影 */
.ccard,.pcard,.kpi{transition:transform .18s ease-out,box-shadow .3s,border-color .3s;will-change:transform;}
/* 点击波纹 */
.btn,.thbtn,.mi,.exchip{position:relative;overflow:hidden;}
.fx2ripple{position:absolute;border-radius:50%;pointer-events:none;z-index:5;
  background:radial-gradient(circle,rgba(160,220,255,.4) 0%,rgba(160,220,255,.14) 42%,transparent 70%);
  transform:scale(0);animation:fx2rip .62s ease-out forwards;}
@keyframes fx2rip{to{transform:scale(1);opacity:0;}}
/* toast / 弹窗已有入场；补充考核报告弹层 */
.exovl{backdrop-filter:blur(10px) saturate(1.2);}
/* 浅色主题下降低特效强度 */
body.light #loginGate .lgdeco{opacity:.28;}
body.light #loginGate::before{opacity:.5;}
body.light #loginGate .fx2stage{border-color:rgba(23,69,110,.25);opacity:.85;}
body.light #fx2Canvas{opacity:.28;}
body.light .fx2ripple{background:radial-gradient(circle,rgba(23,69,110,.22) 0%,transparent 70%);}

/* ============ 4. 降低动效偏好 ============ */
@media (prefers-reduced-motion:reduce){
  #fx2Canvas{display:none;}
  #loginGate::before,#loginGate::after,#loginGate .lgwrap::after,
  #loginGate .fx2stage,#loginGate .lgbrand>svg{animation:none !important;}
}