/* ============================================================================
 * vfx.css — Canvas VFX overlay + 场景过渡 + 场景背景
 * 依据：art-bible §7.5（技术纪律：只动 transform / opacity）
 *       §2.5（🔒 全局禁红）
 *
 * 🔒 Canvas 合成层：fixed 全屏，pointer-events:none，aria-hidden
 *    z-index: 25 — 高于 topbar(20)、低于 spirit(30)
 *    不参与 DOM reflow，GPU 合成
 *
 * 🔒 场景过渡：只动 #app 的 opacity，120ms
 *    不做滑动（§6.7 连续作答不做整屏转场，只在路由切换时淡入淡出）
 *
 * 🔒 场景背景：body[data-scene] 驱动全屏渐变底色
 *    极低对比度（氛围不是内容），不干扰前景可读性
 * ========================================================================== */

/* Canvas 层（由 vfx.js 创建，这里只做兜底样式） */
.vfx-layer {
  display: block;
  border: 0;
  padding: 0;
  margin: 0;
}

/* 场景过渡：#app opacity 动画 */
#app {
  /* transition 由 vfx.js sceneTransition() 动态设置/清除；
     这里只做兜底，确保 JS 未加载时不影响正常渲染 */
}

/* 🔒 reduced-motion 下不产生任何过渡（tokens.css 已全局处理） */
@media (prefers-reduced-motion: reduce) {
  #app {
    transition: none !important;
  }
}

/* ============================ 场景背景渐变 ============================ */
/* body[data-scene] 由 ui-scene.js 设置，CSS 据此切换全屏底色。
 * 🔒 全部暗色，极低对比度；DANDAO 用暗琥珀不用红（§2.5）。 */

body[data-scene="home"] {
  background: linear-gradient(180deg, #0a1218 0%, #0d1a20 50%, #0a1218 100%);
}
body[data-scene="YANLING"] {
  background: linear-gradient(180deg, #0a0f1e 0%, #0d1428 50%, #0a0f1e 100%);
}
body[data-scene="HENGLU"] {
  background: linear-gradient(180deg, #0e0a1a 0%, #140d28 50%, #0e0a1a 100%);
}
body[data-scene="JIGUAN"] {
  background: linear-gradient(180deg, #0a1116 0%, #0d1820 50%, #0a1116 100%);
}
body[data-scene="DANDAO"] {
  background: linear-gradient(180deg, #141008 0%, #1c140a 50%, #141008 100%);
}
body[data-scene="settle"] {
  background: linear-gradient(180deg, #0a1218 0%, #0d1a20 50%, #0a1218 100%);
}

/* 场景切换过渡（body 背景也跟一道淡入） */
body[data-scene] {
  transition: background 400ms var(--ease-standard, ease);
}