/* ============================================================================
   紫微本地站 · 玻璃与视觉层（assets/glass.css）
   归属：motion-glass。只在 shared.css 之后加载。
   规矩：全部选择器带 body 前缀压特异性，零 !important，零 url(http...)。
   分工：这里只写视觉属性（背景 / 模糊 / 阴影 / 描边 / 圆角 / 过渡 / 变换），
        布局（display / grid / gap / padding / position / font-size）归 shared.css 与 mobile.css。
   玻璃只出现在契约第 4 节列的位置：吸顶 .topnav、卡片悬停、.hero-glass、弹层（本站无）、academy 表头。
   .sheet / .grid / body 上不出现 backdrop-filter。
   ============================================================================ */

:root{
  --dur-1:120ms; --dur-2:220ms; --dur-3:420ms;
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --ease-in-out:cubic-bezier(.4,0,.2,1);
  /* 玻璃与阴影令牌：纸色系，不用纯白纯黑。
     材质依据见 design/references.md §4：
     - Apple HIG Materials：薄的材质更透，作用是「让背景内容仍有存在感」；系统保住文字对比靠的是
       「先模糊背景 + 调整其明度」，不是把底色堆白。
     - Windows 11 Acrylic 配方：background → blur → 混合 → tint → 噪点。我们不加噪点（零图片资源），
       改用更亮的 1px 内高光承担它的「亮边」。
     - GitHub kevinbism/liquid-glass-effect：tint 只有 rgba(255,255,255,.15) + saturate(180%)，
       说明「透」主要来自低 alpha 与高饱和，不是来自加大模糊。
     上一版 .72 + blur(14px) saturate(1.08)：纸色压得太实，滚动时像一条白板糊住内容，
     用户反馈「透明度太低」。现降 tint 到 .46、饱和提到 1.75、模糊到 24px。 */
  --zw-glass:rgba(247,244,236,.46);
  --zw-glass-deep:rgba(247,244,236,.58);   /* 滚动后内容真的到条底下，略收一点换可读性 */
  --zw-glass-hi:rgba(255,253,248,.92);     /* 内高光：亮到能看见 1px 玻璃边 */
  --zw-line-soft:rgba(226,220,206,.55);    /* 发丝描边：更透，不抢纸纹 */
  --zw-shadow-1:0 1px 1px rgba(28,27,25,.02), 0 12px 30px -26px rgba(28,27,25,.45);
  --zw-shadow-2:0 1px 1px rgba(28,27,25,.03), 0 22px 46px -30px rgba(28,27,25,.42);
  --zw-shadow-nav:0 1px 0 rgba(222,216,204,.9), 0 14px 28px -22px rgba(28,27,25,.4);
  --zw-paper-warm:#fdfbf6;
}

/* ---------------------------------------------------------------------------
   1 · 吸顶导航的玻璃。position/sticky 由 shared.css 负责，这里只加材质与状态。
   --------------------------------------------------------------------------- */
body .topnav{
  background:var(--zw-glass);
  box-shadow:inset 0 1px 0 var(--zw-glass-hi);
  /* 24px：条高 44px、可见面积只占视口 5.3%，加大半径的代价可控（见 references.md §4 的面积×半径预算） */
  -webkit-backdrop-filter:blur(24px) saturate(1.75);
  backdrop-filter:blur(24px) saturate(1.75);
  transition:background var(--dur-2) var(--ease-out),
             box-shadow var(--dur-2) var(--ease-out),
             border-color var(--dur-2) var(--ease-out);
}
/* motion.js 在滚动 > 8px 时给 body 挂 .zw-scrolled */
body.zw-scrolled .topnav{
  background:var(--zw-glass-deep);
  border-bottom-color:rgba(222,216,204,.4);
  box-shadow:var(--zw-shadow-nav);
}
body .topnav a{
  transition:color var(--dur-1) linear, border-bottom-color var(--dur-2) var(--ease-out);
}

/* ---------------------------------------------------------------------------
   2 · 首页 hero：唯一允许常驻模糊的大面板块
   --------------------------------------------------------------------------- */
body .hero-glass{
  border:1px solid var(--zw-line-soft);
  border-radius:6px;
  padding:20px 22px 18px;
  /* 顶亮底透：上沿压住标题可读性，下沿让纸底墨晕透上来 */
  background:linear-gradient(180deg, rgba(255,253,248,.78) 0%, rgba(247,244,236,.42) 100%);
  box-shadow:inset 0 1px 0 var(--zw-glass-hi), var(--zw-shadow-2);
  /* 这块面积最大（≈16% 视口），半径只提到 16px，别跟着顶栏一起加 */
  -webkit-backdrop-filter:blur(16px) saturate(1.45);
  backdrop-filter:blur(16px) saturate(1.45);
}
body .hero-glass .lede{font-size:13.5px;line-height:1.85}

/* ---------------------------------------------------------------------------
   3 · 卡片：静止实色 + 大而淡阴影；悬停才浮起、才模糊
   只在真指针设备上生效（.zw-hover 由 motion.js 判断 (hover:hover) and (pointer:fine) 后挂到 body）
   --------------------------------------------------------------------------- */
body .card,
body .mcard,
body .tw-card,
body .sj-card,
body .hm-pane,
body .lr-panel,
body .alg-step,
body .sheet,
body .center,
body .pal{border-radius:6px}

body .card,
body .mcard{
  box-shadow:var(--zw-shadow-1);
  transition:transform var(--dur-2) var(--ease-out),
             box-shadow var(--dur-2) var(--ease-out),
             border-color var(--dur-2) var(--ease-out),
             background-color var(--dur-2) var(--ease-out);
  /* backdrop-filter 不过渡：模糊半径每帧插值会持续触发重绘/合成，perf 实测这是全站最先掉帧的属性 */
}
body .sheet{
  border-color:var(--zw-line-soft);
  box-shadow:var(--zw-shadow-2);
}

@media (hover:hover) and (pointer:fine){
  body.zw-hover .card:hover,
  body.zw-hover .mcard:hover{
    transform:translateY(-1px);
    border-color:rgba(47,111,94,.42);
    /* 悬停这一层也用同一套材质：tint .58 + saturate 1.5，卡片下面压着的东西要能看出形来 */
    background-color:rgba(255,253,248,.58);
    box-shadow:inset 0 1px 0 var(--zw-glass-hi), var(--zw-shadow-2);
    -webkit-backdrop-filter:blur(12px) saturate(1.5);
    backdrop-filter:blur(12px) saturate(1.5);
  }

  /* 命盘宫位：悬停玻璃高亮 + 星曜名上浮 1px。
     这里刻意不加 backdrop-filter：12 宫会被鼠标连续扫过，模糊层反复创建/销毁是掉帧源，
     只留 background-color + 内描边 + 阴影，观感一样是「浮起来」。 */
  body.zw-hover .pal{
    transition:background-color var(--dur-2) var(--ease-out),
               box-shadow var(--dur-2) var(--ease-out),
               border-color var(--dur-2) var(--ease-out);
  }
  body.zw-hover .pal:hover{
    background-color:rgba(255,253,248,.6);
    border-color:rgba(47,111,94,.45);
    box-shadow:inset 0 0 0 1px rgba(47,111,94,.12), 0 10px 24px -20px rgba(28,27,25,.5);
  }
  body.zw-hover .pal:hover .star{transform:translateY(-1px)}
}

body .star{
  display:inline-block;
  transition:transform var(--dur-2) var(--ease-out);
}

/* ---------------------------------------------------------------------------
   4 · 学术中心：表头吸顶时才是玻璃（只能出现在 academy 这一处表格）
   --------------------------------------------------------------------------- */
body .ac-wrap{border-radius:6px;box-shadow:0 1px 1px rgba(28,27,25,.02), 0 26px 60px -56px rgba(28,27,25,.5)}
body .ac-tb thead th{
  position:sticky;
  top:44px;                 /* 让开吸顶的 .topnav（约 44px），表头不能钻到导航底下 */
  z-index:2;
  /* 不透明纸色，不再做玻璃：14 行 × 12 列的密表滚过去时，半透明表头会把下面
     的碎字透上来（实测「险/信/晓/宜传」叠在标签之间），可读性优先。 */
  background:#fffdfa;
  box-shadow:inset 0 -1px 0 rgba(222,216,204,.95);
}
@media (max-width:900px){
  body .ac-tb thead th{top:46px}   /* 手机形态导航略高，表头再让开 2px */
}
body .ac-chip{
  border-radius:999px;
  transition:color var(--dur-1) linear, border-color var(--dur-2) var(--ease-out),
             background-color var(--dur-2) var(--ease-out);
}

/* ---------------------------------------------------------------------------
   5 · 圆角与纸色：卡片 6px / 胶囊 999px；不出现纯白 #fff、纯黑 #000
   只改颜色与圆角，不动尺寸
   --------------------------------------------------------------------------- */
body input,
body select,
body textarea,
body .seg{background:var(--zw-paper-warm);border-radius:6px}
body .seg input:checked+span{color:var(--zw-paper-warm)}
body button{color:var(--zw-paper-warm);border-radius:6px}
body .mu{color:var(--zw-paper-warm)}
body .center{background:var(--card)}
body .tag,
body .local-tag{border-radius:999px}
body .tag{padding:1px 8px;letter-spacing:0}

/* 按钮按下 120ms */
body button{
  transition:transform var(--dur-1) var(--ease-out),
             box-shadow var(--dur-1) var(--ease-out),
             background-color var(--dur-1) linear,
             border-color var(--dur-1) linear;
}
body button:active{transform:scale(.985)}
body button.ghost{box-shadow:none}

/* 中文标题字距归 0（汉字加字距会散）；拉丁小标签保持原样 */
body h1,
body h2,
body .star,
body .ft .pname,
body .center .role,
body .center .big,
body .pal .hd,
body .sub,
body .ac-flab,
body .local-tag{letter-spacing:0}
body h1,
body h2{line-height:1.4}

/* 键盘焦点：唯一允许的描边强调 */
body a:focus-visible,
body button:focus-visible,
body input:focus-visible,
body select:focus-visible,
body textarea:focus-visible{
  outline:2px solid rgba(47,111,94,.55);
  outline-offset:2px;
}

/* ---------------------------------------------------------------------------
   6 · 入场：隐藏态只存在于动画自身（backwards 填充），基础态永远可见。
   所以 JS 不启动 / ?nomotion / 减少动效时内容照常显示，不可能白屏。
   .zw-reveal 只是 motion.js 的过程标记，本身不改样式；首屏不加，打开即是完整画面。
   用 animation 而非 transition，是为了结束后不把 transform 钉住（悬停位移仍可用）。
   --------------------------------------------------------------------------- */
body .zw-reveal.zw-in{animation:zw-in var(--dur-3) var(--ease-out) backwards}
@keyframes zw-in{from{opacity:0;transform:translateY(10px)}}

/* ---------------------------------------------------------------------------
   7 · 减少动效：一律关掉（含 hover 位移、按下缩放、入场）
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  body .zw-reveal.zw-in{animation:none;opacity:1;transform:none}
  body .topnav,
  body .topnav a,
  body .card,
  body .mcard,
  body .pal,
  body .star,
  body .ac-chip,
  body button{transition:none}
  body button:active{transform:none}
  body .mcard:hover,
  body .card:hover,
  body .pal:hover,
  body .pal:hover .star{transform:none}
}

/* ---------------------------------------------------------------------------
   8 · 跨文档 View Transition：能在同一份 CSS 里声明，就两边页面都生效。
   file:// 下浏览器通常不支持跨文档过渡，会静默退回普通跳转（不是错误）。
   --------------------------------------------------------------------------- */
@view-transition{navigation:auto}

/* ---------------------------------------------------------------------------
   9 · 打印：玻璃与阴影全部退出
   --------------------------------------------------------------------------- */
@media print{
  body .topnav{background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  body .hero-glass,
  body .card,
  body .mcard,
  body .sheet,
  body .ac-wrap,
  body .ac-tb thead th{
    background:#fff;
    box-shadow:none;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    border-radius:0;
  }
  body .zw-reveal.zw-in{animation:none;opacity:1;transform:none}
}