/* motion.css — 翻页过渡与入场动效
   能力标记由 assets/js/motion.js 打在 <html> 上：
     html.vt       支持跨文档 View Transitions（交给 CSS 处理）
     html.enter    不支持，退化成一次淡入
     html.no-motion 用户要求减少动效，全部关掉
   文件后半段是「首页动态层」（.progress / .nav.is-scrolled / 指针高光），
   只在 body[data-page="home"] 上由 motion.js 生成或切换类名。
 */

/* ------------------------------------------------- 跨文档翻页过渡 */
@view-transition {
  navigation: auto;
}

/* 导航和主内容各自成组：导航保持不动，正文交叉淡入，
   footer 兜在 root 里一起处理。这样整屏不会「整块闪」。 */
html.vt .nav {
  view-transition-name: nav;
}

html.vt main {
  view-transition-name: main;
}

html.vt::view-transition-old(root),
html.vt::view-transition-new(root) {
  animation-duration: 0.2s;
  animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

html.vt::view-transition-old(main),
html.vt::view-transition-new(main) {
  animation-duration: 0.26s;
  animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

html.vt::view-transition-old(nav),
html.vt::view-transition-new(nav) {
  animation-duration: 0.16s;
}

/* ------------------------------------------------- 入场（无 VT 时） */
html.enter main {
  animation: page-in 0.3s cubic-bezier(0.2, 0, 0, 1) both;
}

@keyframes page-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ----------------------------------------------- 减少动效 / 打印 */
html.no-motion main,
html.no-motion .pal-box {
  animation: none !important;
}

html.no-motion::view-transition-old(root),
html.no-motion::view-transition-new(root),
html.no-motion::view-transition-old(main),
html.no-motion::view-transition-new(main),
html.no-motion::view-transition-old(nav),
html.no-motion::view-transition-new(nav) {
  animation-duration: 0.01ms;
}

@media (prefers-reduced-motion: reduce) {
  html main {
    animation: none !important;
  }
}

@media print {
  html main {
    animation: none !important;
  }
}

/* ==========================================================================
   首页动态层（由样张 preview/style-dynamic.html 合并而来）
   --------------------------------------------------------------------------
   四件克制的事，全部是「装饰层」或「状态提示」，都不参与文档布局：
     .progress        顶部滚动进度，JS 注入的空固定细线，aria-hidden
     .nav.is-scrolled 滚过顶部后给吸顶导航补一层阴影
     ::after          工具行 / 作品卡内跟随光标的高光（读 --mx / --my）
   三层都被 body[data-page="home"] 圈住，也只由 motion.js 在首页驱动：
   没有 JS 时这些规则一条都不会命中；减少动效时整层退场。
   ========================================================================== */

/* ------------------------------------------------- 顶部滚动进度 */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
  z-index: 30;
}

/* ------------------------------------------------- 导航滚动态 */
/* 导航本来就有 1px 下边框，这里只是滚过顶部后再补一层很浅的投影，
   说明「内容已经滚到它后面了」；不改变任何尺寸 */
body[data-page="home"] .nav {
  transition: box-shadow 0.25s ease;
}

body[data-page="home"] .nav.is-scrolled {
  box-shadow: var(--shadow-md);
}

/* ------------------------------------------------- 指针跟随高光 */
/* 高光是 ::after 上的一团浅灰（--line）：
   isolation 让本行 / 本卡成为层叠上下文，z-index:-1 把高光画在
   自身底色之上、文字之下，所以它不会降低任何文字的对比度；
   pointer-events:none，行内的链接照常可以点。 */
body[data-page="home"] .tool-row,
body[data-page="home"] .work {
  position: relative;
  isolation: isolate;
}

body[data-page="home"] .tool-row::after,
body[data-page="home"] .work::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
  background: radial-gradient(
    200px circle at var(--mx, 50%) var(--my, 50%),
    var(--line),
    transparent 70%
  );
}

body[data-page="home"] .tool-row:hover::after,
body[data-page="home"] .tool-row:focus-visible::after,
body[data-page="home"] .work:hover::after,
body[data-page="home"] .work:focus-within::after {
  opacity: 1;
}

/* ------------------------------------------------- 减少动效 / 打印 */
/* 减少动效时这三层直接退场：既不播动画，也不留下「只有动效才看得见」的东西 */
html.no-motion .progress,
html.no-motion body[data-page="home"] .tool-row::after,
html.no-motion body[data-page="home"] .work::after {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .progress,
  body[data-page="home"] .tool-row::after,
  body[data-page="home"] .work::after {
    display: none;
  }

  body[data-page="home"] .nav {
    transition: none;
  }
}

@media print {
  .progress {
    display: none;
  }
}