/* ============================================================
   全站 WebGL 3D 动态交互层
   canvas 背景 · 鼠标光晕 · 入场浮动（卡片 3D 倾斜已关闭）
   ============================================================ */

:root {
  --fx-mx: 50%;
  --fx-my: 30%;
  --fx-rx: 0deg;
  --fx-ry: 0deg;
  --fx-gx: 50%;
  --fx-gy: 50%;
}

/* WebGL 画布：固定底层，不拦截交互 */
.webgl-fx-canvas {
  position: fixed !important;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0 !important;
  pointer-events: none !important;
  display: block;
  opacity: 0.92;
}

/* 覆盖 body > * 的 z-index，确保 canvas 在最底 */
body.has-webgl-fx > .webgl-fx-canvas {
  position: fixed !important;
  z-index: 0 !important;
}

/* 前景层保持可读 */
body.has-webgl-fx > *:not(.webgl-fx-canvas):not(.modal-overlay):not(.toast-box):not(.img-preview-overlay) {
  position: relative;
  z-index: 1;
}

/* 弹层必须保持 fixed，不能被 WebGL 前景规则改成 relative */
body.has-webgl-fx > .modal-overlay,
body.has-webgl-fx > .toast-box,
body.has-webgl-fx > .img-preview-overlay {
  position: fixed !important;
  z-index: 10050 !important;
}
body.has-webgl-fx > .toast-box { z-index: 10100 !important; }
body.has-webgl-fx > .img-preview-overlay { z-index: 10200 !important; }

/* 网格 CSS 背景减弱，让 WebGL 更突出 */
html.webgl-fx-on body::before {
  opacity: 0.45;
}

html.webgl-fx-on body {
  background-image:
    radial-gradient(ellipse 70% 45% at var(--fx-mx) var(--fx-my), rgba(34, 211, 238, 0.1), transparent 55%),
    radial-gradient(ellipse 50% 40% at 100% 100%, rgba(99, 102, 241, 0.08), transparent 45%),
    linear-gradient(180deg, #070b16 0%, #0a1020 100%);
  transition: background 0.4s ease;
}

/* 鼠标跟随光晕（CSS） */
html.webgl-fx-on body::after {
  content: '';
  position: fixed;
  width: min(52vw, 520px);
  height: min(52vw, 520px);
  left: var(--fx-mx);
  top: var(--fx-my);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(34, 211, 238, 0.09) 0%, rgba(99, 102, 241, 0.04) 40%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  transition: left 0.35s cubic-bezier(0.22, 1, 0.36, 1), top 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  mix-blend-mode: screen;
}

/* 3D 倾斜卡片 */
html.webgl-tilt-on .fx-tilt {
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
  transition:
    transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.2s ease,
    border-color 0.2s ease !important;
  transform:
    perspective(900px)
    rotateX(var(--fx-rx, 0deg))
    rotateY(var(--fx-ry, 0deg))
    translateZ(0);
}

html.webgl-tilt-on .fx-tilt.fx-tilt-active {
  border-color: rgba(34, 211, 238, 0.35) !important;
  box-shadow:
    var(--shadow, 0 8px 32px rgba(0, 0, 0, 0.45)),
    0 0 28px rgba(34, 211, 238, 0.14),
    0 12px 40px rgba(0, 0, 0, 0.35) !important;
}

/* 倾斜时内部高光 */
html.webgl-tilt-on .fx-tilt.fx-tilt-active::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--fx-gx, 50%) var(--fx-gy, 50%),
    rgba(34, 211, 238, 0.14),
    transparent 55%
  );
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: screen;
}

/* 确保倾斜目标有定位上下文 */
html.webgl-tilt-on .fx-tilt {
  position: relative;
  overflow: hidden;
}

/* 统计卡 / 快捷入口更明显的 3D */
html.webgl-tilt-on .stat-card.fx-tilt-active,
html.webgl-tilt-on .quick-tile.fx-tilt-active,
html.webgl-tilt-on .rp-card.fx-tilt-active {
  transform:
    perspective(900px)
    rotateX(var(--fx-rx, 0deg))
    rotateY(var(--fx-ry, 0deg))
    translateY(-4px)
    scale(1.02);
}

/* Hero 浮动呼吸 */
html.webgl-fx-on .hero {
  animation: fxHeroFloat 7s ease-in-out infinite alternate;
}

@keyframes fxHeroFloat {
  from { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 40px rgba(34, 211, 238, 0.1); }
  to { box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45), 0 0 56px rgba(34, 211, 238, 0.18); }
}

/* 导航轻微玻璃增强 */
html.webgl-fx-on .top-nav {
  background: rgba(8, 12, 24, 0.72);
}

/* 登录卡悬浮感 */
html.webgl-fx-on .login-card {
  animation: fxLoginIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes fxLoginIn {
  from {
    opacity: 0;
    transform: perspective(900px) translateY(24px) rotateX(8deg) scale(0.96);
  }
  to {
    opacity: 1;
    transform: perspective(900px) translateY(0) rotateX(0) scale(1);
  }
}

/* 页面内容入场 stagger 感 */
html.webgl-fx-on .container,
html.webgl-fx-on .container-lg,
html.webgl-fx-on .container-sm {
  animation: fxPageIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes fxPageIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.992);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* 可视化页：与现有 3D 驾驶舱共存 */
html.webgl-fx-on .viz-stage-bg {
  opacity: 0.55;
}

/* 按钮微交互增强 */
html.webgl-fx-on .btn-primary:hover {
  transform: translateY(-1px) scale(1.02);
}

/* 表格行扫光 */
html.webgl-fx-on .data-table tbody tr {
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
html.webgl-fx-on .data-table tbody tr:hover {
  background: rgba(34, 211, 238, 0.08);
  box-shadow: inset 3px 0 0 rgba(34, 211, 238, 0.55);
}

/* 降级：无 WebGL 时保留 CSS 粒子感 */
html.webgl-fx-fallback body::before {
  opacity: 0.8;
  animation: fxGridDrift 20s linear infinite;
}

@keyframes fxGridDrift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 48px 48px, 48px 48px; }
}

/* 尊重系统减少动态偏好 */
html.webgl-fx-reduced .webgl-fx-canvas,
@media (prefers-reduced-motion: reduce) {
  .webgl-fx-canvas { display: none !important; }
  html.webgl-tilt-on .fx-tilt {
    transform: none !important;
  }
  html.webgl-fx-on .hero,
  html.webgl-fx-on .login-card,
  html.webgl-fx-on .container,
  html.webgl-fx-on .container-lg {
    animation: none !important;
  }
}

/* 移动端：关闭 3D 倾斜，仅保留 WebGL 背景 */
@media (max-width: 768px), (pointer: coarse) {
  html.webgl-tilt-on .fx-tilt {
    transform: none !important;
  }
  html.webgl-fx-on body::after {
    display: none;
  }
  .webgl-fx-canvas {
    opacity: 0.7;
  }
}

/* Toast / Modal 始终在最上 */
.toast-box,
.modal-overlay,
.img-preview-overlay {
  z-index: 9999 !important;
}
.modal-overlay { z-index: 9000 !important; }
.img-preview-overlay { z-index: 10000 !important; }


/* ============================================================
   卡片 3D 倾斜已关闭（强制覆盖残留样式）
   相关卡片改为数据下探交互
   ============================================================ */
html.webgl-tilt-on .fx-tilt,
.fx-tilt,
html.webgl-tilt-on .stat-card.fx-tilt-active,
html.webgl-tilt-on .quick-tile.fx-tilt-active,
html.webgl-tilt-on .rp-card.fx-tilt-active {
  transform: none !important;
  will-change: auto !important;
}
html.webgl-tilt-on .fx-tilt.fx-tilt-active::before,
.fx-tilt.fx-tilt-active::before {
  display: none !important;
  content: none !important;
}