/*! MODECHECK · 动效与质感层 v0.5.0
 *
 * 这一层只做「观感增强」，全部是覆盖 / 附加规则，不改动任何布局骨架与业务结构。
 * 三条硬原则：
 *   1) 只动 transform / opacity / backdrop-filter，绝不碰 top/left/width/height 触发重排（保流畅）。
 *   2) 任何动效都能被 prefers-reduced-motion 一键关掉。
 *   3) 背景液态层与指针光斑只在支持 hover 的设备上启用。
 *
 * 加载顺序：必须在 app.css 之后（后加载才能覆盖）。
 */

/* ================================================================ 设计令牌 */

:root {
  /* 弹性曲线：轻微过冲，用于「落定」类动画 */
  --ease-spring: cubic-bezier(.34, 1.46, .52, 1);
  /* 顺出曲线：用于大位移，尾段收得干净 */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);

  --t-press: .09s;
  --t-fast: .18s;
  --t: .28s;
  --t-slow: .46s;

  /* 玻璃表面 */
  --glass: rgba(255, 255, 255, .76);
  --glass-2: rgba(255, 255, 255, .64);
  --glass-hi: rgba(255, 255, 255, .88);
  --glass-line: rgba(255, 255, 255, .62);
  --glass-blur: blur(16px) saturate(165%);

  /* 阴影层级 */
  --lift-1: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -16px rgba(16, 24, 40, .30);
  --lift-2: 0 2px 4px rgba(16, 24, 40, .05), 0 20px 44px -22px rgba(16, 24, 40, .34);
  --lift-3: 0 26px 60px -26px rgba(16, 24, 40, .40);
  --glow-brand: 0 10px 26px -14px rgba(79, 70, 229, .70);
}

/* details 展开时的 auto 高度过渡（Chrome 131+ 可用，其余浏览器自动降级为瞬时展开） */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
}

html { scroll-behavior: smooth; }

/* 内容层必须压在液态背景层之上 */
main, footer { position: relative; z-index: 1; }

/* ================================================================ 液态背景层
 * 固定铺满视口，只做 transform 位移（GPU 合成，不重排），滚动时轻微视差。
 */

.mc-bg {
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
  transform: translate3d(0, calc(var(--mc-sy, 0) * 1px), 0);
}
.mc-bg i {
  position: absolute; display: block;
  border-radius: 50%;
  animation-name: mcDrift;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  will-change: transform;
}
@keyframes mcDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  33%  { transform: translate3d(3.5vw, -3vh, 0) scale(1.09); }
  66%  { transform: translate3d(-3vw, 3.5vh, 0) scale(.94); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

/* ================================================================ 顶部滚动进度条 */

.mc-progress {
  position: fixed; left: 0; top: 0; height: 2.5px; width: 100%;
  z-index: 60; pointer-events: none;
  background: transparent;
}
.mc-progress i {
  display: block; height: 100%; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, #6366f1, #0ea5e9 52%, #a855f7);
  box-shadow: 0 0 12px rgba(99, 102, 241, .55);
  transition: transform .12s linear, opacity .3s;
  opacity: 0;
}
.mc-progress.on i { opacity: 1; }

/* ================================================================ 顶栏：玻璃 + 液态指示块 */

.nav {
  background: rgba(255, 255, 255, .62);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
  transition: background var(--t) var(--ease-soft), box-shadow var(--t) var(--ease-soft),
              border-color var(--t) var(--ease-soft);
}
.nav.mc-scrolled {
  background: rgba(255, 255, 255, .84);
  border-bottom-color: rgba(227, 230, 235, .9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 12px 32px -24px rgba(16, 24, 40, .55);
}

/* 品牌方块：悬停时轻微转动 + 发光（液态高光） */
.brand .logo {
  transition: transform var(--t) var(--ease-spring), box-shadow var(--t) var(--ease-out);
  box-shadow: 0 6px 16px -8px rgba(79, 70, 229, .8);
}
.brand:hover .logo { transform: rotate(-6deg) scale(1.06); box-shadow: 0 10px 22px -8px rgba(79, 70, 229, .9); }

.nav-links { position: relative; }

.nav-links a {
  position: relative; z-index: 1;
  transition: color var(--t-fast) var(--ease-soft), transform var(--t) var(--ease-spring),
              background var(--t-fast) var(--ease-soft);
}
.nav-links a:hover { background: transparent; transform: translateY(-1px); }
.nav-links a.on { background: transparent; }

/* 活动指示块：在两个栏目之间滑动，带弹性回弹 */
.mc-pill {
  position: absolute; left: 0; top: 50%;
  border-radius: 999px; pointer-events: none;
  background: linear-gradient(135deg, rgba(99, 102, 241, .18), rgba(79, 70, 229, .12));
  border: 1px solid rgba(99, 102, 241, .22);
  box-shadow: 0 8px 20px -14px rgba(79, 70, 229, .9), inset 0 1px 0 rgba(255, 255, 255, .7);
  transform: translate3d(0, -50%, 0) scale(.6);
  opacity: 0;
  transition: transform var(--t-slow) var(--ease-spring), width var(--t-slow) var(--ease-spring),
              height var(--t) var(--ease-out), opacity var(--t) var(--ease-out),
              border-radius var(--t) var(--ease-spring);
}
.mc-pill.on { opacity: 1; transform: translate3d(var(--px, 0), -50%, 0) scale(1); }

/* ================================================================ 通用表面：毛玻璃 + 浮起 */

.card {
  position: relative;
  background: linear-gradient(180deg, var(--glass-hi), var(--glass));
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-color: var(--glass-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), var(--lift-1);
  transition: box-shadow var(--t) var(--ease-out), border-color var(--t) var(--ease-out),
              background var(--t) var(--ease-out), transform var(--t) var(--ease-out);
}
.card:hover {
  border-color: rgba(99, 102, 241, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), var(--lift-2);
}

.stat {
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  transition: background var(--t) var(--ease-out), transform var(--t) var(--ease-spring);
}
.stat:hover { background: rgba(255, 255, 255, .9); transform: translateY(-2px); }

.feature {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--glass-hi), var(--glass-2));
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-color: var(--glass-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), var(--lift-1);
  transition: transform var(--t) var(--ease-spring), box-shadow var(--t) var(--ease-out),
              border-color var(--t) var(--ease-out);
}
.feature:hover {
  transform: translateY(-4px);
  border-color: rgba(99, 102, 241, .26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), var(--lift-3);
}
.feature .ico { transition: transform var(--t) var(--ease-spring), box-shadow var(--t) var(--ease-out); }
.feature:hover .ico { transform: scale(1.1) rotate(-4deg); box-shadow: 0 10px 20px -12px rgba(79, 70, 229, .9); }

.table-wrap {
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-color: var(--glass-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), var(--lift-1);
}

.hist-item {
  background: var(--glass-hi);
  border-color: var(--glass-line);
  box-shadow: var(--lift-1);
  transition: transform var(--t) var(--ease-spring), box-shadow var(--t) var(--ease-out),
              border-color var(--t) var(--ease-out), opacity var(--t) var(--ease-out);
}
.hist-item:hover { transform: translateY(-2px); border-color: rgba(99, 102, 241, .26); box-shadow: var(--lift-2); }

.fam, .kv > div, .codebox, .share-box {
  background: rgba(255, 255, 255, .66);
  transition: transform var(--t) var(--ease-spring), box-shadow var(--t) var(--ease-out),
              border-color var(--t) var(--ease-out), background var(--t) var(--ease-out);
}
.kv > div:hover, .fam:hover { transform: translateY(-2px); box-shadow: var(--lift-1); border-color: rgba(99, 102, 241, .2); }

/* 指针光斑：跟随鼠标的柔光（只在 hover 设备上由 JS 写入 --mx/--my） */
@media (hover: hover) and (pointer: fine) {
  :where(.card, .feature, .stat, .hist-item, .fam)::after {
    content: '';
    position: absolute; inset: 0; border-radius: inherit;
    pointer-events: none; opacity: 0;
    background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 0%),
                rgba(99, 102, 241, .14), transparent 62%);
    transition: opacity var(--t) var(--ease-out);
  }
  :where(.card, .feature, .stat, .hist-item, .fam):hover::after { opacity: 1; }
}

/* ================================================================ 按钮：按压弹性 + 光泽扫过 + 涟漪 */

.btn {
  position: relative; overflow: hidden;
  transition: transform var(--t-fast) var(--ease-spring), box-shadow var(--t) var(--ease-out),
              background var(--t-fast) var(--ease-soft), border-color var(--t-fast) var(--ease-soft),
              color var(--t-fast) var(--ease-soft);
  will-change: transform;
}
.btn:hover { transform: translateY(-1.5px); box-shadow: var(--lift-1); }
.btn:active { transform: translateY(0) scale(.965); transition-duration: var(--t-press); }
.btn:focus-visible { box-shadow: 0 0 0 3px rgba(99, 102, 241, .28); outline: none; }

.btn.primary {
  background: linear-gradient(135deg, #6366f1, #4f46e5 62%, #4338ca);
  border-color: transparent;
  box-shadow: var(--glow-brand), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.btn.primary:hover {
  background: linear-gradient(135deg, #6d70f5, #4f46e5 60%, #3c31c4);
  box-shadow: 0 16px 34px -16px rgba(79, 70, 229, .9), inset 0 1px 0 rgba(255, 255, 255, .3);
}
/* 高光扫过：悬停时一道斜向光泽掠过按钮 */
.btn.primary::before {
  content: '';
  position: absolute; top: -20%; bottom: -20%; left: -70%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: skewX(-18deg);
  transition: left .62s var(--ease-out);
  pointer-events: none;
}
.btn.primary:hover::before { left: 130%; }

/* 涟漪：点击处扩散一圈柔光 */
.mc-ripple {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 68%);
  transform: scale(.2); opacity: .85;
  pointer-events: none;
  animation: mcRipple .62s var(--ease-out) forwards;
}
.btn:not(.primary) .mc-ripple,
.btn.ghost .mc-ripple {
  background: radial-gradient(circle, rgba(99, 102, 241, .35), rgba(99, 102, 241, 0) 68%);
}
@keyframes mcRipple { to { transform: scale(2.4); opacity: 0; } }

/* 图标按钮 / 小按钮不做位移，只做缩放，避免在密集行里跳动 */
.btn.sm:hover { transform: translateY(-1px); }

.btn:disabled { transform: none; box-shadow: none; }

/* ================================================================ 表单控件 */

.field input, .field select, .field textarea,
.num-in, .adm-search input, .price-row input, .adm-note {
  transition: border-color var(--t-fast) var(--ease-soft), box-shadow var(--t) var(--ease-out),
              background var(--t-fast) var(--ease-soft), transform var(--t) var(--ease-spring);
}
.field input:hover, .field select:hover, .field textarea:hover,
.num-in:hover, .adm-search input:hover { border-color: #c2c9d4; }
.field input:focus, .field select:focus, .field textarea:focus,
.num-in:focus, .adm-search input:focus, .price-row input:focus, .adm-note:focus {
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .14), 0 8px 20px -18px rgba(79, 70, 229, .9);
}

/* ================================================================ 首页 Hero：液态流动 + 逐行上浮 */

.hero {
  position: relative; overflow: hidden;
  isolation: isolate;
}
/* 缓慢流动的彩色光雾（在 hero 自己这层里，不越界） */
.hero::before {
  content: '';
  position: absolute; inset: -24% -12%; z-index: -1;
  background:
    radial-gradient(38% 46% at 16% 28%, rgba(129, 140, 248, .55), transparent 68%),
    radial-gradient(34% 42% at 80% 20%, rgba(14, 165, 233, .42), transparent 70%),
    radial-gradient(42% 52% at 62% 92%, rgba(168, 85, 247, .38), transparent 72%);
  animation: mcHeroFlow 24s ease-in-out infinite;
  will-change: transform;
}
@keyframes mcHeroFlow {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-3.5%, 2.5%, 0) scale(1.08); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

.hero .kicker, .hero p.lead, .hero .cta {
  animation: mcRise var(--t-slow) var(--ease-out) both;
}
.hero .kicker { animation-delay: .02s; }
.hero p.lead { animation-delay: .22s; }
.hero .cta { animation-delay: .30s; }

/* 标题逐行上浮（由 JS 拆行包裹，见 motion.js） */
.mc-line { display: block; overflow: hidden; padding-bottom: .06em; }
.mc-line > span {
  display: inline-block;
  animation: mcLineUp .78s var(--ease-spring) backwards;
  animation-delay: calc(var(--i, 0) * 90ms);
}
@keyframes mcLineUp { from { transform: translate3d(0, 108%, 0) rotate(1.6deg); } }

.hero .btn { transition: transform var(--t) var(--ease-spring), box-shadow var(--t) var(--ease-out),
                         background var(--t) var(--ease-soft), border-color var(--t) var(--ease-soft); }
.hero .btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .8); }
.hero .btn.primary { color: #1e1b4b; }
.hero .btn.primary::before { background: linear-gradient(100deg, transparent, rgba(79, 70, 229, .22), transparent); }

/* 数字统计：等宽数字 + 轻微浮动 */
.stat b { transition: color var(--t-fast) var(--ease-soft); }

/* ================================================================ 报告页：仪表环 / 分数条 / 探针 */

.gauge svg circle:last-of-type { will-change: stroke-dasharray; }
.gauge .gv b { animation: mcPop .5s var(--ease-spring) .12s both; }
.gauge { transition: transform var(--t) var(--ease-spring); }
.gauge:hover { transform: scale(1.03); }

.bar i { transition: width .9s var(--ease-out); }

.probe {
  transition: border-color var(--t) var(--ease-out), box-shadow var(--t) var(--ease-out),
              background var(--t) var(--ease-out);
}
.probe:hover { border-color: rgba(99, 102, 241, .24); box-shadow: var(--lift-1); }
.probe > summary { transition: background var(--t-fast) var(--ease-soft); }
.probe > summary:hover { background: rgba(99, 102, 241, .05); }
.probe > summary .pt { transition: color var(--t-fast) var(--ease-soft); }

/* details 展开/收起的高度过渡（现代浏览器平滑，老浏览器瞬时） */
@supports selector(::details-content) {
  .probe::details-content {
    block-size: 0; overflow: hidden; opacity: 0;
    transition: block-size var(--t) var(--ease-out), opacity var(--t) var(--ease-out),
                content-visibility var(--t) allow-discrete;
  }
  .probe[open]::details-content { block-size: auto; opacity: 1; }
}

/* ================================================================ 表格 / 列表 / 日志 */

table.tbl tbody tr {
  transition: background var(--t-fast) var(--ease-soft), box-shadow var(--t-fast) var(--ease-soft);
}
table.tbl tbody tr:hover { background: rgba(99, 102, 241, .055); }
table.tbl tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--brand-2); }
table.tbl td, table.tbl th { transition: background var(--t-fast) var(--ease-soft); }
.host-cell a { transition: color var(--t-fast) var(--ease-soft); }
.host-cell a:hover { color: var(--brand); text-decoration: none; }

/* 日志逐行滑入 */
.log div { animation: mcLogIn .3s var(--ease-out) both; }
@keyframes mcLogIn { from { opacity: 0; transform: translate3d(-9px, 0, 0); } }

/* 进度条填充带一点流动光 */
.progress-line .track i {
  background-image: linear-gradient(90deg, #6366f1, #0ea5e9);
  box-shadow: 0 0 10px rgba(99, 102, 241, .5);
}

/* 提示条：从左侧弹入 */
.notice { animation: mcSlideIn .42s var(--ease-spring) backwards; }
@keyframes mcSlideIn { from { opacity: 0; transform: translate3d(-10px, 0, 0); } }

/* 标签页：悬停微抬，选中项更明确 */
.adm-tab { transition: transform var(--t-fast) var(--ease-spring), background var(--t-fast) var(--ease-soft),
                       color var(--t-fast) var(--ease-soft), border-color var(--t-fast) var(--ease-soft),
                       box-shadow var(--t) var(--ease-out); }
.adm-tab:hover { transform: translateY(-1.5px); }
.adm-tab.on { background: rgba(255, 255, 255, .92); box-shadow: 0 -6px 18px -14px rgba(79, 70, 229, .9); }
.adm-badge { animation: mcPop .4s var(--ease-spring) both; }

/* 表格里的单元格输入 */
.adm-pick-all { transition: color var(--t-fast) var(--ease-soft); }

/* ================================================================ 视图切换 / 入场动画
 * .mc-anim  —— 位移 + 淡入（层叠入场的主表现）
 * .mc-xonly —— 只位移不淡入（嵌在已入场容器里的子块，避免透明度叠加发闷）
 */

#app.mc-page-in { animation: mcFade .24s var(--ease-out) both; }

/* 注意 fill 必须用 backwards：both / forwards 会让动画值一直压着 transform，
 * 导致 .feature / .hist-item 这类既有入场动画又要 hover 位移的元素永远抬不起来。 */
.mc-anim {
  animation: mcRise .58s var(--ease-out) backwards;
  animation-delay: var(--d, 0ms);
}
.mc-xonly {
  animation: mcRiseX .58s var(--ease-out) backwards;
  animation-delay: var(--d, 0ms);
}
.mc-anim.mc-pop, .mc-xonly.mc-pop { animation-name: mcRiseScale; }
@keyframes mcRise {
  from { opacity: 0; transform: translate3d(0, 16px, 0); }
}
@keyframes mcRiseX {
  from { transform: translate3d(0, 14px, 0); }
}
@keyframes mcRiseScale {
  from { opacity: 0; transform: translate3d(0, 12px, 0) scale(.985); }
}
@keyframes mcFade { from { opacity: 0; } }

/* 滚动显现：进入视口时再演 */
.mc-reveal { opacity: 0; }
.mc-reveal.mc-xonly { opacity: 1; }

/* ================================================================ 无障碍 / 降级 */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    transition-duration: .001ms !important;
  }
  .mc-bg, .mc-progress { display: none !important; }
  .mc-reveal { opacity: 1 !important; }
  .hero::before { animation: none !important; }
}

/* 不支持 backdrop-filter 的浏览器：退回近乎实心的白，保证可读性 */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .card, .feature { background: rgba(255, 255, 255, .96); }
  .nav { background: rgba(255, 255, 255, .98); }
  .stat { background: rgba(255, 255, 255, .92); }
}

/* 窄屏：关掉指针光斑与视差（没有鼠标，白耗性能） */
@media (max-width: 900px) {
  .mc-bg { transform: none; }
  .mc-bg i { animation-duration: 40s !important; }
}