/* ============================================================================
 * 腾龙 GEO · 前沿工艺增强层 2.0（P3 指挥中心观感升级）
 * 叠加在 shared/design-system.css 之上，纯加法；不修改 design-system 令牌与规则。
 * 运营台 /admin/ 与 客户台 /portal/ 共用。所有动效尊重 prefers-reduced-motion。
 * 能力：① 多层极光背景 ② 玻璃卡片抬升 + 光标辉光 ③ 磁吸卡片/磁贴 ④ 滚动渐显
 *       ⑤ 统一弹簧缓动 ⑥ 主按钮流光 ⑦ 主题平滑过渡 ⑧ 焦点可访问性。
 * 依赖 design-system.css 的 --ease / --dur / --primary / --primary-2 /
 *       --border-strong / --shadow-glass 令牌与 .js-magnetic / .theme-transition 钩子。
 * ==========================================================================*/

/* ---------- 1. 多层极光背景：固定、GPU 合成、置于内容之下 ---------- */
/* 主层：更大更柔的光晕，缓慢呼吸 */
body::before {
  content: "";
  position: fixed;
  inset: -25% -25% -25% -25%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(42% 40% at 16% 20%, rgba(91, 140, 255, 0.18), transparent 62%),
    radial-gradient(38% 36% at 84% 16%, rgba(124, 92, 255, 0.16), transparent 62%),
    radial-gradient(44% 42% at 72% 84%, rgba(56, 189, 248, 0.12), transparent 64%),
    radial-gradient(36% 34% at 30% 88%, rgba(124, 92, 255, 0.10), transparent 60%);
  filter: blur(46px) saturate(150%);
  opacity: 0.95;
  animation: aurora 26s ease-in-out infinite alternate;
  will-change: transform;
}
/* 副层：细密高光，叠出"星云"纵深感 */
body::after {
  content: "";
  position: fixed;
  inset: -25% -25% -25% -25%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(22% 20% at 60% 30%, rgba(255, 255, 255, 0.05), transparent 70%),
    radial-gradient(18% 16% at 26% 60%, rgba(91, 140, 255, 0.07), transparent 70%);
  filter: blur(20px);
  opacity: 0.6;
  animation: auroraB 32s ease-in-out infinite alternate;
  will-change: transform;
}
[data-theme="light"] body::before { opacity: 0.55; }
[data-theme="light"] body::after { opacity: 0.35; }
@keyframes aurora {
  0%   { transform: translate3d(-2.5%, -1.5%, 0) scale(1.04) rotate(0deg); }
  50%  { transform: translate3d(2.5%, 1.8%, 0) scale(1.09) rotate(2deg); }
  100% { transform: translate3d(-1.5%, 2.2%, 0) scale(1.05) rotate(-1deg); }
}
@keyframes auroraB {
  0%   { transform: translate3d(1.5%, -2%, 0) scale(1.0); }
  100% { transform: translate3d(-2%, 2%, 0) scale(1.08); }
}

/* ---------- 2. 玻璃卡片抬升 + 光标辉光 ---------- */
/* 在 design-system 玻璃卡基础上补：内描边高光 + 双层阴影，强化"浮起"层次 */
.card, .panel, .modal, .plan-card {
  border: 1px solid var(--border, rgba(255,255,255,0.10));
  box-shadow: var(--shadow-glass), 0 1px 0 rgba(255,255,255,0.05) inset;
  position: relative;
  isolation: isolate;
}
/* 顶部高光线，营造玻璃边缘折射 */
.card::before, .panel::before, .plan-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
  pointer-events: none;
  opacity: 0.7;
}
/* 光标辉光：由 premium.js 注入 --mx/--my 坐标，叠加柔光 */
.card, .plan-card, .tile {
  background-image:
    radial-gradient(220px 220px at var(--mx, 50%) var(--my, 0%),
      color-mix(in srgb, var(--primary) 14%, transparent), transparent 70%),
    linear-gradient(160deg, var(--surface-2, rgba(255,255,255,0.06)), var(--surface, rgba(255,255,255,0.04)));
  background-blend-mode: screen, normal;
}

/* ---------- 3. 滚动渐显：元素进入视口时从下方浮入 ---------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s var(--ease-spring, var(--ease)), transform 0.6s var(--ease-spring, var(--ease)); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- 4. 统一弹簧缓动 + 入场错落 ---------- */
:root { --ease-spring: cubic-bezier(0.22, 1, 0.36, 1); }
.card, .panel, .kpi, .tile, .plan-card, .step, .issue {
  animation: rise 0.55s var(--ease-spring) both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(18px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
/* KPI 用更轻快的 flip-in 区分节奏 */
.kpi { animation: kpiIn 0.6s var(--ease-spring) both; }
@keyframes kpiIn {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
/* 同屏多元素错落，营造"落位"层次感 */
.grid > *, .kpi-grid > *, .plan-grid > *, .tile-grid > *,
.grid.three > *, .grid.two > * { animation: rise 0.55s var(--ease-spring) both; }
.grid > *:nth-child(2), .kpi-grid > *:nth-child(2), .plan-grid > *:nth-child(2), .tile-grid > *:nth-child(2) { animation-delay: 0.04s; }
.grid > *:nth-child(3), .kpi-grid > *:nth-child(3), .plan-grid > *:nth-child(3), .tile-grid > *:nth-child(3) { animation-delay: 0.08s; }
.grid > *:nth-child(4), .kpi-grid > *:nth-child(4), .plan-grid > *:nth-child(4), .tile-grid > *:nth-child(4) { animation-delay: 0.12s; }
.grid > *:nth-child(5), .kpi-grid > *:nth-child(5), .plan-grid > *:nth-child(5), .tile-grid > *:nth-child(5) { animation-delay: 0.16s; }
.grid > *:nth-child(6), .kpi-grid > *:nth-child(6), .plan-grid > *:nth-child(6), .tile-grid > *:nth-child(6) { animation-delay: 0.20s; }
.grid > *:nth-child(7), .kpi-grid > *:nth-child(7), .plan-grid > *:nth-child(7), .tile-grid > *:nth-child(7) { animation-delay: 0.24s; }
.grid > *:nth-child(8), .kpi-grid > *:nth-child(8), .plan-grid > *:nth-child(8), .tile-grid > *:nth-child(8) { animation-delay: 0.28s; }
.grid > *:nth-child(9), .kpi-grid > *:nth-child(9), .plan-grid > *:nth-child(9), .tile-grid > *:nth-child(9) { animation-delay: 0.32s; }
.grid > *:nth-child(10), .kpi-grid > *:nth-child(10), .plan-grid > *:nth-child(10), .tile-grid > *:nth-child(10) { animation-delay: 0.36s; }
.grid > *:nth-child(11), .kpi-grid > *:nth-child(11), .plan-grid > *:nth-child(11), .tile-grid > *:nth-child(11) { animation-delay: 0.40s; }
.grid > *:nth-child(12), .kpi-grid > *:nth-child(12), .plan-grid > *:nth-child(12), .tile-grid > *:nth-child(12) { animation-delay: 0.44s; }

/* ---------- 5. 磁吸：位移由 premium.js 设置；此处禁用原生 hover 位移避免冲突 ---------- */
html.js-magnetic .btn--primary,
html.js-magnetic .card,
html.js-magnetic .tile,
html.js-magnetic .plan-card {
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), border-color 0.18s var(--ease);
}
html.js-magnetic .btn--primary:hover,
html.js-magnetic .card:hover,
html.js-magnetic .tile:hover,
html.js-magnetic .plan-card:hover { transform: none; }

/* 卡片/磁贴悬停抬升（admin.css 未含 hover 位移，此处补） */
.tile { transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.tile:hover { transform: translateY(-3px); border-color: var(--border-strong); }
.plan-card { transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.plan-card:hover { transform: translateY(-3px); border-color: var(--primary); }

/* ---------- 6. 主按钮流光：扫光高亮，提升"可点击"质感 ---------- */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::after {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-18deg);
  transition: left 0.6s var(--ease);
  pointer-events: none;
}
.btn--primary:hover::after { left: 130%; }

/* ---------- 7. 主题平滑过渡：切换瞬间加 .theme-transition，premium.js 控制时长 ---------- */
html.theme-transition,
html.theme-transition body,
html.theme-transition .card,
html.theme-transition .panel,
html.theme-transition .sidebar,
html.theme-transition .kpi,
html.theme-transition .btn,
html.theme-transition .nav__item,
html.theme-transition .field__input,
html.theme-transition .field select,
html.theme-transition .field textarea,
html.theme-transition .table-wrap,
html.theme-transition .badge,
html.theme-transition .login-card,
html.theme-transition .topbar,
html.theme-transition .tile,
html.theme-transition .plan-card {
  transition: background-color 0.45s var(--ease), color 0.45s var(--ease),
              border-color 0.45s var(--ease), box-shadow 0.45s var(--ease) !important;
}

/* ---------- 8. 焦点可访问性（WCAG 2.1 AA） ---------- */
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.btn:focus-visible,
.nav__item:focus-visible,
.field__input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible,
.chip:focus-visible,
.icon-btn:focus-visible,
.side-logout:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---------- 9. 尊重无障碍：减少动态 ---------- */
@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none; }
  .card, .panel, .kpi, .tile, .plan-card, .step, .issue,
  .grid > *, .kpi-grid > *, .plan-grid > *, .tile-grid > *,
  .grid.three > *, .grid.two > * { animation: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  html.js-magnetic .btn--primary,
  html.js-magnetic .card,
  html.js-magnetic .tile,
  html.js-magnetic .plan-card { transition: none; }
  .btn--primary::after { display: none; }
  * { scroll-behavior: auto !important; }
}