/* ================================================================
   DinoBlog · motion.css — 阻尼 / 弹簧 / 丝滑交互层
   ----------------------------------------------------------------
   在 css/style.css 之后加载：只做增量增强，不改变页面结构。
   动效原则：
   - 只动 transform / opacity（不触发布局，滚动不掉帧）
   - 大面板用临界阻尼（不回弹），小元素用轻弹簧（微回弹）
   - 结构/可读性规则始终生效；只有动画与过渡尊重 prefers-reduced-motion
   ================================================================ */

:root {
  /* 轻弹簧：小幅过冲，用于菜单/小元素 */
  --m-spring: cubic-bezier(.34, 1.32, .64, 1);
  /* 软弹簧：几乎无回弹，用于抽屉/侧栏等大面板 */
  --m-spring-soft: cubic-bezier(.22, 1, .36, 1);
  /* 阻尼滑出：长尾，用于位移与页面切换 */
  --m-ease: cubic-bezier(.22, 1, .36, 1);
  --m-ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --m-dur-1: .14s;
  --m-dur-2: .20s;
  --m-dur-3: .30s;
  --m-dur-4: .36s;
}

/* ================================================================
   0 · 结构层（任何动效偏好下都必须成立）
   ================================================================ */

/* 窄屏保持原字号，宽屏再放大：避免 901–1099px 胶囊被撑破 */
@media (min-width: 1100px) {
  .topnav-links > a,
  .nav-dd-toggle {
    font-size: 12.5px;
    padding: 6px 11px;
    letter-spacing: .01em;
  }
}
.topnav-links { gap: 3px; position: relative; }
.topnav-links > a,
.topnav-links .nav-dd { position: relative; z-index: 1; }

/* 滑行墨条：绝对定位，任何情况下都不参与布局 */
.topnav-links .nav-ink {
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 29px;
  transform: translate3d(0, -50%, 0);
  border-radius: 999px;
  background: var(--field);
  border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}
.topnav-links.has-ink .nav-ink { opacity: 1; }
.topnav-links .nav-ink.on-active {
  background: var(--accent-soft);
  border-color: var(--ring);
}
/* 首次定位不做过渡：避免墨条从导航左侧滑到当前页 */
.topnav-links.no-ink-anim .nav-ink { transition: none !important; }
/* 墨条接管底色，避免两层底色叠加发灰（也避免动效关闭时出现双底） */
.topnav-links.has-ink > a:hover,
.topnav-links.has-ink > a.active,
.topnav-links.has-ink .nav-dd-toggle:hover,
.topnav-links.has-ink .nav-dd.open .nav-dd-toggle { background: transparent; }

/* 汉堡：三条线在任意状态下都要正确显示 */
.burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  width: 16px;
  height: 14px;
}
.burger i {
  display: block;
  width: 100%;
  height: 1.7px;
  border-radius: 2px;
  background: currentColor;
}
body.drawer-open .burger i:nth-child(1) { transform: translateY(6.15px) rotate(45deg); }
body.drawer-open .burger i:nth-child(2) { opacity: 0; transform: scaleX(.3); }
body.drawer-open .burger i:nth-child(3) { transform: translateY(-6.15px) rotate(-45deg); }

/* 长文：右侧留白足够时提前显示目录（1200–1399px），阅读长文不必再点浮层 */
@media (min-width: 1200px) and (max-width: 1399px) {
  .post-toc { display: block; max-height: calc(100vh - 300px); }
}
.md-content :is(h2, h3, h4) { scroll-margin-top: 88px; }
@media (max-width: 900px) {
  .md-content :is(h2, h3, h4) { scroll-margin-top: 76px; }
}
body.immersive .md-content :is(h2, h3, h4) { scroll-margin-top: 16px; }

/* ================================================================
   1 · 动效层（仅无「减少动效」偏好时启用）
   ================================================================ */
@media (prefers-reduced-motion: no-preference) {
  /* ---------- 1.1 通用按压 / 悬停 ---------- */
  .btn, .icon-btn, .tag, .pill, .post-cat, .cat-item, .react-btn, .pt-btn,
  .pagination a, .sort-item, .home-category, .personal-link, .capsule, .link-item,
  .friend-item, .drawer-settings, .search-suggest-list a, .nav-dd-item,
  .comment-kids-toggle, .hero-links a {
    transition: transform var(--m-dur-1) var(--m-spring),
                background-color var(--m-dur-2) var(--m-ease),
                border-color var(--m-dur-2) var(--m-ease),
                color var(--m-dur-2) var(--m-ease),
                box-shadow var(--m-dur-3) var(--m-ease),
                opacity var(--m-dur-2) var(--m-ease);
  }
  @media (hover: hover) {
    .btn:hover, .pt-btn:hover, .react-btn:hover, .tag:hover, .pill:hover,
    .post-cat:hover, .cat-item:hover, .personal-link:hover, .capsule:hover,
    .sort-item:hover, .home-category:hover, .drawer-settings:hover,
    .comment-kids-toggle:hover {
      transform: translateY(-1px);
    }
    .icon-btn:hover { transform: translateY(-1px) scale(1.06); }
  }
  .btn:active, .icon-btn:active, .tag:active, .pill:active, .post-cat:active,
  .cat-item:active, .react-btn:active, .pt-btn:active, .pagination a:active,
  .sort-item:active, .home-category:active, .personal-link:active, .capsule:active,
  .drawer-settings:active {
    transform: translateY(0) scale(.96);
    transition-duration: .1s;
  }

  .cat-mark { transition: transform var(--m-dur-2) var(--m-spring); }
  @media (hover: hover) {
    .cat-item:not(.cur):hover .cat-mark { transform: rotate(15deg) scale(1.12); }
  }
  .cat-item:active .cat-mark { transform: scale(.8); }
  .cat-confirmed.cur .cat-mark { animation: catMarkIn .28s var(--m-spring); }
  @keyframes catMarkIn { from { transform: rotate(-18deg) scale(.68); } }

  /* ---------- 1.2 滑行墨条与「更多」下拉 ---------- */
  .topnav-links .nav-ink {
    transition: transform var(--m-dur-3) var(--m-spring),
                width var(--m-dur-3) var(--m-spring),
                opacity var(--m-dur-2) var(--m-ease),
                background-color var(--m-dur-2) var(--m-ease),
                border-color var(--m-dur-2) var(--m-ease);
  }
  .nav-dd-menu {
    transform-origin: top right;
    transform: translateY(-6px) scale(.97);
    transition: opacity var(--m-dur-2) var(--m-ease),
                transform var(--m-dur-3) var(--m-spring-soft),
                visibility 0s linear var(--m-dur-3);
  }
  .nav-dd.open .nav-dd-menu {
    transform: translateY(0) scale(1);
    transition: opacity var(--m-dur-2) var(--m-ease),
                transform var(--m-dur-3) var(--m-spring-soft),
                visibility 0s;
  }
  .nav-dd-caret { transition: transform var(--m-dur-3) var(--m-spring); }
  .nav-dd-item {
    opacity: 0;
    transform: translateY(-7px);
    transition: background-color var(--m-dur-2) var(--m-ease),
                color var(--m-dur-2) var(--m-ease),
                opacity var(--m-dur-2) var(--m-ease),
                transform var(--m-dur-3) var(--m-spring);
  }
  .nav-dd.open .nav-dd-item { opacity: 1; transform: none; }
  .nav-dd.open .nav-dd-item:nth-child(n+2) { transition-delay: 0s, 0s, 15ms, 15ms; }
  .nav-dd.open .nav-dd-item:nth-child(n+4) { transition-delay: 0s, 0s, 30ms, 30ms; }
  .nav-dd.open .nav-dd-item:nth-child(n+6) { transition-delay: 0s, 0s, 45ms, 45ms; }

  @media (min-width: 901px) {
    .topnav {
      transition: transform var(--m-dur-4) var(--m-ease),
                  background-color var(--m-dur-3) ease,
                  box-shadow var(--m-dur-3) var(--m-ease),
                  border-color var(--m-dur-3) var(--m-ease);
    }
    .topnav.is-scrolled {
      box-shadow: 0 18px 46px -16px rgba(2, 6, 16, .55),
                  0 2px 10px rgba(2, 6, 16, .14);
    }
    :root[data-theme="light"] .topnav.is-scrolled {
      box-shadow: 0 18px 46px -18px rgba(31, 51, 89, .30),
                  0 2px 10px rgba(31, 51, 89, .08);
    }
    /* 向下滚动收起、向上滚动滑出：给阅读留出完整视野 */
    .topnav.nav-hidden { transform: translate(-50%, calc(-100% - 26px)); }
  }

  /* ---------- 1.3 移动端抽屉与汉堡 ---------- */
  .drawer {
    transition: transform var(--m-dur-4) var(--m-spring-soft),
                visibility 0s linear var(--m-dur-4);
  }
  body.drawer-open .drawer {
    transition: transform var(--m-dur-4) var(--m-spring-soft), visibility 0s;
  }
  .drawer-links .drawer-link {
    transition: opacity var(--m-dur-2) var(--m-ease),
                transform var(--m-dur-3) var(--m-spring),
                background-color var(--m-dur-2) var(--m-ease),
                color var(--m-dur-2) var(--m-ease);
  }
  /* 由 js/motion.js 写入 --i：逐条错峰滑入 */
  body.drawer-open .drawer-links .drawer-link {
    --m-drawer-delay: min(100ms, calc(var(--i, 0) * 14ms));
    transition-delay: var(--m-drawer-delay), var(--m-drawer-delay), 0s, 0s;
  }
  .drawer .drawer-links .drawer-link { transition-delay: 0s; }
  .drawer-mask {
    transition: opacity var(--m-dur-3) var(--m-ease),
                visibility 0s linear var(--m-dur-3);
  }
  .burger i {
    transition: transform var(--m-dur-3) var(--m-spring),
                opacity var(--m-dur-2) var(--m-ease);
  }

  /* ---------- 1.4 文章卡片：弹簧抬升 + 跟随指针的柔光 ---------- */
  @media (hover: hover) and (min-width: 721px) {
    .article-card {
      transition: transform var(--m-dur-3) var(--m-spring),
                  box-shadow var(--m-dur-3) var(--m-ease),
                  border-color var(--m-dur-2) var(--m-ease);
    }
    .article-card:hover { transform: translateY(-3px); }
    .article-card:active { transform: translateY(-2px) scale(.997); }
    .article-card:focus-within { border-color: var(--ring); }
    .ac-img img { transition: transform var(--m-dur-4) var(--m-ease); }
    .article-card:hover .ac-img img { transform: scale(1.04); }
    .article-card::before {
      content: "";
      position: absolute;
      inset: 0 auto auto 0;
      width: 360px;
      height: 360px;
      z-index: 2;
      pointer-events: none;
      opacity: 0;
      background: radial-gradient(circle closest-side, rgba(255, 255, 255, .13), transparent);
      transform: translate3d(calc(var(--m-mx, 0px) - 50%), calc(var(--m-my, 0px) - 50%), 0);
      transition: opacity var(--m-dur-2) var(--m-ease);
    }
    .article-card.m-spot-active:hover::before { opacity: 1; }
    :root[data-theme="light"] .article-card::before {
      background: radial-gradient(circle closest-side, color-mix(in srgb, var(--accent) 13%, transparent), transparent);
    }
    .link-item:hover, .friend-item:hover { transform: translateY(-2px); }
  }

  /* 首屏和滚动进入共用一套距离、节奏和缓动。 */
  .category-panel-head svg { transition: transform var(--m-dur-2) var(--m-ease); }
  .m-reveal:not(.m-in) { animation: none; }
  .m-reveal:not(.m-in):not(:focus-within) { opacity: 0; }
  .m-reveal.m-in { animation: rise var(--entry-duration) var(--ease); }
  .m-reveal.m-in:focus-within { animation-duration: 0s; }

  /* 文章周边控件使用缓出曲线 */
  #pjax-main.is-article .btn,
  #pjax-main.is-article .tag,
  #pjax-main.is-article .post-cat,
  #pjax-main.is-article .react-btn,
  #pjax-main.is-article .pt-btn,
  #pjax-main.is-article .comment-kids-toggle,
  #pjax-main.is-article .pagination a { transition-timing-function: var(--m-ease); }

  /* ---------- 1.7 文章页 ---------- */
  .post-cover, .post-head { animation: rise var(--entry-duration) var(--ease) backwards; }

  /* 阅读进度条：更细的渐变 + 光晕 */
  .read-progress { height: 3px; }
  .read-progress > i {
    background: linear-gradient(90deg, var(--accent), var(--accent-ink));
    box-shadow: 0 0 12px var(--ring);
  }

  /* 目录：条目悬停轻移，当前节高亮为柔光胶囊 */
  .post-toc {
    transition: box-shadow var(--m-dur-3) var(--m-ease),
                border-color var(--m-dur-3) var(--m-ease),
                transform var(--m-dur-3) var(--m-spring);
  }
  .post-toc a {
    border-radius: 0 8px 8px 0;
    transition: color var(--m-dur-2) var(--m-ease),
                background-color var(--m-dur-2) var(--m-ease),
                border-color var(--m-dur-2) var(--m-ease),
                transform var(--m-dur-3) var(--m-ease);
  }
  /* 目录属于文章阅读界面：悬停只做底色反馈，不再位移回弹 */
  .post-toc a:hover { background: var(--field); transform: none; }
  .post-toc { transition-timing-function: var(--m-ease); }
  .post-toc a.cur {
    background: var(--accent-soft);
    border-radius: 0 8px 8px 0;
    box-shadow: inset 0 0 0 1px var(--ring);
  }

  /* ---------- 1.8 其它浮层 ---------- */
  .back-top {
    transition: opacity var(--m-dur-2) var(--m-ease),
                visibility 0s linear var(--m-dur-2),
                transform var(--m-dur-3) var(--m-spring),
                color var(--m-dur-2) var(--m-ease),
                background-color var(--m-dur-2) var(--m-ease),
                border-color var(--m-dur-2) var(--m-ease);
  }
  .back-top:hover { transform: translateY(-3px); }
  .read-pct {
    transform: translateY(-4px);
    transition: opacity var(--m-dur-3) var(--m-ease),
                transform var(--m-dur-3) var(--m-spring);
  }
  .read-pct.show { transform: none; }
  .lightbox-mask { animation: mLbMaskIn .28s var(--m-ease) both; }
  /* 只淡入透明度：图片缩放由 JS 写 inline transform，动画不能占用 transform */
  .lightbox-mask img { animation: mLbImgIn .38s var(--m-ease); }
  @keyframes mLbMaskIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes mLbImgIn { from { opacity: 0; } }
}

/* ================================================================
   2 · 减少动效偏好：退回即时状态（结构规则仍保留）
   ================================================================ */
/* 打印：滚动进入元素必须完整可见（打印时不会触发 IntersectionObserver） */
@media print {
  .m-reveal { opacity: 1 !important; animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-ink,
  #pjax-main,
  .article-card,
  .back-top,
  .read-pct,
  .drawer,
  .drawer-link,
  .nav-dd-menu,
  .nav-dd-item,
  .burger i { transition: none !important; }
  .post-cover, .post-head,
  .lightbox-mask, .lightbox-mask img { animation: none !important; }
  .topnav { transition: none !important; }
  .topnav.nav-hidden { transform: translateX(-50%) !important; }
  .nav-dd-item { opacity: 1 !important; transform: none !important; }
}