/* ==========================================================================
   monish · 2/11 · base.css
   reset / 排版基线 / 工具类 / 焦点 / 选中 / 滚动入场 / 打印
   只用 §2 令牌；不依赖 §3 之外的 class（v1 的 .container 已废弃）。
   ========================================================================== */

/* ----------------------------------------------------------------- reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* 锚点定位：折叠后的 rail 顶栏 + 呼吸空间 */
  scroll-padding-top: calc(var(--nav-height) + var(--space-4));
  scrollbar-color: var(--line) transparent;
  /* 常驻滚动条槽位：打开搜索/抽屉时 body 会被锁成 overflow:hidden，
     没有这一行滚动条会消失、整页内容右移几像素（用户反馈过的抖动）。 */
  scrollbar-gutter: stable;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ol, ul, pre {
  margin: 0;
}

ul[class],
ol[class] {
  padding: 0;
  list-style: none;
}

img,
picture {
  display: block;
  max-width: 100%;
  height: auto;
  border-style: none;
}

svg {
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

table {
  border-collapse: collapse;
}

/* ---------------------------------------------------------------- 页面基调 */
/* 浅灰画布；那张大圆角白卡由 shell.css 的 .shell 承担 */
body {
  min-height: 100vh;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 主题切换的克制过渡（reduced-motion 在 responsive.css 中统一关闭） */
  transition: background-color var(--speed) var(--ease), color var(--speed) var(--ease);
}

/* 抽屉 / 搜索 / lightbox 打开时的滚动锁 */
body.no-scroll,
body.is-lightbox-open {
  overflow: hidden;
}

/* ------------------------------------------------------------------ 标题 */
/* 超粗标题统一走 --font-display；字体本身只有一档超粗字重（fonts.css 声明
   400~900 区间），所以这里写 700 既不会合成粗体，中文回退黑体也能正确加粗。 */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  color: var(--text);
  text-wrap: balance;
  scroll-margin-top: calc(var(--nav-height) + var(--space-4));
}

h1 { font-size: var(--fs-title); }
h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.0625rem; }
h5, h6 { font-size: 1rem; }

p {
  margin-bottom: var(--space-4);
}

strong, b {
  font-weight: 600;
}

small {
  font-size: .875em;
}

/* ------------------------------------------------------------------ 链接 */
/* v2 主体是黑白灰：链接默认继承文字色，绿色只出现在 hover / 激活 / 正文链接 */
a {
  color: inherit;
  text-decoration: none;
  transition: color var(--speed-fast) var(--ease);
}

a:hover {
  color: var(--accent-strong);
}

/* ------------------------------------------------------------- 等宽硬约定 */
/* 契约 §5.3：Hexo 高亮产物是裸 <pre><span class="line">，没有 <code> 元素，
   所以必须显式给 pre/code 声明等宽，否则会掉到浏览器默认 monospace。 */
pre,
code,
kbd,
samp {
  font-family: var(--font-mono);
}

/* ------------------------------------------------------------- 工具 class */
.no-scroll {
  overflow: hidden;
}

.is-hidden {
  display: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------- 焦点/选中 */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* 只在键盘导航时显示外框，鼠标点击不显示 */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: none;
}

::selection {
  background: var(--accent-soft);
  color: var(--text);
}

/* ---------------------------------------------------------------- 滚动条 */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--line);
  border: 2px solid var(--canvas);
  border-radius: var(--radius-pill);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-faint);
}

/* ------------------------------------------------------------ 滚动入场 */
/* 「纸张浮起」：位移只有 14px，落点用 ease-out-expo（快进慢出、软着陆），
   时长 460ms。列表项之间按 --i 错峰 70ms —— 只动 opacity/transform。 */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--speed-medium) var(--ease-out-expo),
    transform var(--speed-medium) var(--ease-out-expo);
  /* 兜底错峰：JS 会给同一组内的元素写 --reveal-delay（如 70ms / 140ms） */
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* 错峰：优先用原生 sibling-index()（无需模板写 --i，Chromium 已支持），
   不支持时回落到模板/JS 写的 --reveal-delay。延迟只写在未揭示态，
   所以已经出现过的那批不会再排队。 */
@supports (animation-delay: calc(sibling-index() * 1ms)) {
  [data-reveal] {
    transition-delay: calc(sibling-index() * var(--stagger));
  }
}

/* ------------------------------------------------------------------------
   Rung 1.5：原生滚动驱动动画（CSS-only，跑在合成线程上，零 JS）
   作为渐进增强 —— 只有支持 animation-timeline: view() 的浏览器才吃到；
   Firefox 目前不支持，那里就退回上面的 IntersectionObserver 版本。
   ------------------------------------------------------------------------ */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* 正文里的块级内容随滚动淡入上升，滚出视口上方时淡出（不回到 0，
       避免快速滚动时正文大面积空白）。 */
    .monish-prose > :is(h2, h3, h4, figure, pre, blockquote, table) {
      animation: monish-rise-in linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 26%;
    }
  }
}

@keyframes monish-rise-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 动画关闭时始终可见、无位移。
   注意 data-animation 挂在 <html> 上（layout.ejs），不是 body —— 之前写成
   body[...] 永远匹配不到，等于「关闭动画」这个开关一直是失效的。 */
html[data-animation="false"] [data-reveal],
html[data-animation="false"] .monish-prose > :is(h2, h3, h4, figure, pre, blockquote, table) {
  opacity: 1;
  transform: none;
  transition: none;
  animation: none;
}

/* ============================================================ 页面切换 */
/* 跨文档 View Transition（@view-transition 由 head.ejs 按配置声明，纯 CSS）。
   思路：
   · 只给 .main 起 view-transition-name → 左栏、页脚、滚动条都留在 root 快照里
   · root 的进出动画清空 → 它们瞬时切换，看起来就是「一动不动」
   · 于是换页时只有右栏内容卡在动：旧页轻轻上移淡出，新页从下方浮上来
   不支持的浏览器自动退化成下面的「入场动画」，不会白屏也不会报错。 */
.main {
  view-transition-name: main;
}

/* root 组不参与动画：左栏 / 页脚 / 滚动条保持纹丝不动 */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-group(main) {
  animation-duration: 380ms;
  animation-timing-function: var(--ease-out-expo);
}

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(main) {
    animation: 180ms var(--ease) both monish-vt-out;
  }

  ::view-transition-new(main) {
    animation: 380ms var(--ease-out-expo) both monish-vt-in;
  }
}

@keyframes monish-vt-out {
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@keyframes monish-vt-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

/* 动画整体关闭时连过渡名字都不给，等于退回普通跳转 */
html[data-animation="false"] .main {
  view-transition-name: none;
}

/* ---------------------------------------------------------------------
   非 View Transition 浏览器的「页面打开」动画
   @supports 只能近似判断（Chrome 111+ 有 view-transition-name，跨文档
   过渡要 126+），所以 111~125 会出现「既没过渡也不进入场动画」的窄区间 ——
   可接受：那几版本来就已经是很新的浏览器，页面本身没有任何问题。
   --------------------------------------------------------------------- */
@keyframes monish-page-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@supports not (view-transition-name: none) {
  @media (prefers-reduced-motion: no-preference) {
    /* 文章页：一张卡拆成四段依次入场（标题 → 目录 → 正文 → 页脚） */
    html[data-page="post"] .card > .card-head,
    html[data-page="post"] .card > .post-toc,
    html[data-page="post"] .card > .card-body,
    html[data-page="post"] .card > .card-foot {
      animation: monish-page-in 460ms var(--ease-out-expo) both;
    }

    html[data-page="post"] .card > .card-head { animation-delay: 20ms; }
    html[data-page="post"] .card > .post-toc { animation-delay: 90ms; }
    html[data-page="post"] .card > .card-body { animation-delay: 130ms; }
    html[data-page="post"] .card > .card-foot { animation-delay: 170ms; }

    /* 其它页面：整个主区淡入上浮（列表项自己还有 data-reveal 的错峰） */
    html:not([data-page="post"]) .main {
      animation: monish-page-in 420ms var(--ease-out-expo) both;
    }
  }

  html[data-animation="false"] .main,
  html[data-animation="false"] .card > * {
    animation: none;
  }
}

/* ------------------------------------------------------------------ 打印 */
@media print {
  html {
    scroll-behavior: auto;
  }

  body {
    background: var(--surface);
    color: var(--text);
    font-size: 12pt;
  }

  a {
    color: inherit;
    text-decoration: underline;
  }

  img {
    break-inside: avoid;
  }
}