/* ============================================================
   动效层
   和配色解耦：任何一套主题都能开。所有隐藏态都挂在
   html[data-motion="on"] 下面，而 data-motion 由 fx.js 设置——
   JS 没跑起来时页面就是静态的，不会出现「内容永远不显示」。

   取向：跟着指针走的光、边缘高光、进场、磁吸。不做粒子、不做
   自定义光标、不做整屏视差——那三样在工具站里只会碍事。
   ============================================================ */

html[data-motion="on"] {
  --fx-ease: cubic-bezier(.22, .8, .25, 1);
}

/* ---------- 极光背景：只在 aurora 主题下存在 ---------- */
/* z-index:-1 + body 透明，才能让 fixed 层待在内容后面又盖住底色 */
html[data-theme="aurora"] { background: var(--bg); }
html[data-theme="aurora"] body { background: transparent; }

.fx-bg { display: none; }
html[data-theme="aurora"] .fx-bg {
  display: block;
  position: fixed; inset: 0; z-index: -1;
  overflow: hidden; pointer-events: none;
}
.fx-bg .glow {
  position: absolute; border-radius: 50%;
  will-change: transform;
}
.fx-bg .g1 {
  width: 88vw; height: 88vw; left: -18vw; top: -30vw;
  background: radial-gradient(circle at 50% 50%, rgba(124, 92, 255, .42) 0%, rgba(124, 92, 255, .14) 40%, transparent 68%);
  animation: fxDrift1 26s ease-in-out infinite alternate;
}
.fx-bg .g2 {
  width: 66vw; height: 66vw; right: -18vw; top: -2vw;
  background: radial-gradient(circle at 50% 50%, rgba(40, 210, 190, .26) 0%, rgba(40, 210, 190, .07) 42%, transparent 70%);
  animation: fxDrift2 33s ease-in-out infinite alternate;
}
.fx-bg .g3 {
  width: 72vw; height: 48vw; left: 16vw; bottom: -24vw;
  background: radial-gradient(circle at 50% 50%, rgba(95, 139, 255, .20) 0%, rgba(95, 139, 255, .05) 45%, transparent 72%);
  animation: fxDrift3 40s ease-in-out infinite alternate;
}
/* 网格：只在顶部有，往下淡掉。满屏网格会跟正文的横线打架 */
.fx-bg .grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(139, 124, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139, 124, 255, .07) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 92% 58% at 50% 0%, #000 18%, transparent 76%);
  mask-image: radial-gradient(ellipse 92% 58% at 50% 0%, #000 18%, transparent 76%);
  opacity: .7;
}
@keyframes fxDrift1 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(7vw, 5vw, 0) scale(1.14); }
}
@keyframes fxDrift2 {
  from { transform: translate3d(0, 0, 0) scale(1.05); }
  to   { transform: translate3d(-6vw, 7vw, 0) scale(.94); }
}
@keyframes fxDrift3 {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-5vw, -4vw, 0); }
}

/* 关掉动效时，极光背景的漂移也停住——静态光斑留着做氛围，
   但不再有东西在背后慢慢晃 */
html[data-motion="off"] .fx-bg .glow { animation: none; }

/* ---------- 指针光斑：一层跟着鼠标的柔光 ---------- */
/* 用 mix-blend-mode: screen 叠在暗底上像「被照亮」，而不是蒙一层灰 */
.fx-spot {
  position: fixed; left: 0; top: 0;
  width: 520px; height: 520px; margin: -260px 0 0 -260px;
  border-radius: 50%; pointer-events: none;
  z-index: 2; opacity: 0;
  background: radial-gradient(circle at 50% 50%, rgba(139, 124, 255, .16) 0%, rgba(139, 124, 255, .05) 44%, transparent 68%);
  mix-blend-mode: screen;
  transition: opacity .5s ease;
  will-change: transform;
}
.fx-spot.on { opacity: 1; }
/* 青瓷 / 素白 / 赭石下只是极淡的一点光，不抢主题色 */
html:not([data-theme="aurora"]) .fx-spot.on { opacity: .42; }
html[data-theme="paper"] .fx-spot { mix-blend-mode: multiply; }
/* 触屏没有指针，光斑没有意义 */
@media (hover: none) { .fx-spot { display: none; } }

/* ---------- 滚动进场 ---------- */
html[data-motion="on"] .fx-reveal {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity .62s var(--fx-ease), transform .62s var(--fx-ease);
  transition-delay: var(--fx-d, 0ms);
}
html[data-motion="on"] .fx-reveal.in {
  opacity: 1;
  transform: none;
}

/* ---------- 卡片边缘高光：跟随指针的 radial ---------- */
html[data-motion="on"] .fx-glow { position: relative; }
html[data-motion="on"] .fx-glow::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(240px circle at var(--fx-mx, 50%) var(--fx-my, 50%), rgba(139, 124, 255, .14) 0%, transparent 62%);
  opacity: 0;
  transition: opacity .28s ease;
  z-index: 1;
}
/* .fx-hover 是脚本按「指针此刻落在哪张卡上」加的类，和 :hover 一起用：
   真实鼠标走 :hover，合成的指针事件（自动化测试、程序化交互）走类 */
html[data-motion="on"] .fx-glow:hover::after,
html[data-motion="on"] .fx-glow.fx-hover::after { opacity: 1; }
/* 素白主题上紫色光晕会显脏，换成中性灰 */
html[data-theme="paper"] .fx-glow::after {
  background: radial-gradient(240px circle at var(--fx-mx, 50%) var(--fx-my, 50%), rgba(35, 38, 42, .06) 0%, transparent 62%);
}

/* ---------- 代码窗 3D 倾斜 ---------- */
html[data-motion="on"] .fx-tilt {
  transform: perspective(1100px)
             rotateX(var(--fx-rx, 0deg))
             rotateY(var(--fx-ry, 0deg));
  transition: transform .45s var(--fx-ease), box-shadow .45s var(--fx-ease);
  will-change: transform;
}
html[data-motion="on"] .fx-tilt.fx-tilting { transition: transform .1s linear; }

/* ---------- 代码窗扫描：像代码正在生成 ---------- */
html[data-motion="on"] .fx-scan pre { clip-path: inset(0 0 100% 0); }
html[data-motion="on"] .fx-scan.in pre { animation: fxScan 1.45s var(--fx-ease) forwards; }
.fx-scanline {
  position: absolute; left: 0; right: 0; height: 2px; top: 30px;
  background: linear-gradient(90deg, transparent 0%, rgba(139, 124, 255, .75) 38%, rgba(55, 214, 192, .75) 62%, transparent 100%);
  opacity: 0; pointer-events: none;
  box-shadow: 0 0 14px rgba(139, 124, 255, .55);
}
html[data-motion="on"] .fx-scan.in .fx-scanline { animation: fxScanLine 1.45s var(--fx-ease) forwards; }
@keyframes fxScan {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes fxScanLine {
  0%   { opacity: 0; transform: translateY(0); }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(calc(var(--fx-scan-h, 240px) - 30px)); }
}

/* ---------- 按钮磁吸与涟漪 ---------- */
html[data-motion="on"] .fx-magnet {
  transition: transform .32s var(--fx-ease), background .16s, border-color .16s, color .16s;
  will-change: transform;
}
html[data-motion="on"] .fx-magnet.fx-pulling {
  transition: transform .08s linear, background .16s, border-color .16s, color .16s;
}
.fx-ripple {
  position: absolute; border-radius: 50%;
  pointer-events: none; transform: scale(0);
  background: currentColor; opacity: .26;
  animation: fxRipple .62s ease-out forwards;
}
@keyframes fxRipple {
  to { transform: scale(2.8); opacity: 0; }
}

/* ---------- 顶栏：滚动后压暗 + 背景模糊 ---------- */
html[data-motion="on"] .topbar {
  transition: box-shadow .3s ease, background-color .3s ease, border-color .3s ease;
}
html[data-motion="on"] .topbar.fx-scrolled {
  background: var(--bg);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 12px 32px -24px rgba(0, 0, 0, .95);
}
/* 支持 color-mix 的浏览器让顶栏真正透出下层，不支持的退化成实底（上面那条） */
@supports (background: color-mix(in srgb, red 50%, transparent)) {
  html[data-motion="on"] .topbar.fx-scrolled {
    background: color-mix(in srgb, var(--bg) 84%, transparent);
  }
  html[data-theme="aurora"][data-motion="on"] .topbar.fx-scrolled {
    background: color-mix(in srgb, var(--bg) 72%, transparent);
  }
}

/* 2px 阅读进度：贴顶栏底边，紫青渐变，不占布局高度 */
.fx-progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--gold) 0%, var(--cyan) 100%);
  opacity: .7; pointer-events: none;
  will-change: transform;
}

/* ---------- 视图切换 / 引擎详情入场 ---------- */
html[data-motion="on"] .view:not([hidden]) {
  animation: fxViewIn .32s var(--fx-ease);
}
@keyframes fxViewIn {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
}

html[data-motion="on"] .engdetail .engtab { transition: background .18s ease; }

/* ---------- 引擎条与导航的细过渡 ---------- */
html[data-motion="on"] .engtab::before { transition: width .18s ease, background .18s ease; }
html[data-motion="on"] .topnav a { transition: color .15s, background .15s; }
html[data-motion="on"] .chip { transition: color .16s, border-color .16s, background .16s, transform .16s; }
html[data-motion="on"] .chip:hover { transform: translateY(-1px); }
html[data-motion="on"] .kb-hit { transition: border-color .18s, transform .18s; }

/* ---------- 主题切换：只做过色，不闪白 ---------- */
html[data-motion="on"] body,
html[data-motion="on"] .topbar,
html[data-motion="on"] .codewin,
html[data-motion="on"] .card,
html[data-motion="on"] .feat {
  transition-property: background-color, border-color, color, box-shadow;
  transition-duration: .32s;
  transition-timing-function: ease;
}

/* ---------- 系统要求减少动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  .fx-bg .glow { animation: none; }
  html[data-motion="on"] .fx-reveal { opacity: 1; transform: none; }
  html[data-motion="on"] .fx-scan pre { clip-path: none; }
  html[data-motion="on"] .fx-scan.in pre,
  html[data-motion="on"] .fx-scan.in .fx-scanline { animation: none; }
  html[data-motion="on"] .fx-tilt { transform: none; }
  html[data-motion="on"] .view:not([hidden]) { animation: none; }
}

/* 440 以下的窄屏：光斑和倾斜都收掉，省电也省心 */
@media (max-width: 620px) {
  .fx-spot { display: none; }
  html[data-motion="on"] .fx-tilt { transform: none; }
}