/* ─────────────────────────────────────────────────────────────────────────────
   15-motion.css · 全站过渡动画（业主 2026-10-12 v7 部署）
   · 侧栏展开 / 收起：宽度顺滑过渡，图标原地不动，文字淡出淡入，分组名收成细线；
   · 标签切换：粉色下划线从旧标签滑到新标签（JS：xyPlayMotion）；
   · 换页：内容分层浮现；同页切标签：列表轻浮现；
   · 抽屉：更柔的滑入、遮罩淡入、内容分层浮现。
   系统设置「减少动态效果」时全部关闭。
   ───────────────────────────────────────────────────────────────────────────── */
:root { --m-ease: cubic-bezier(.22, 1, .36, 1); --m-dur: .46s; }

/* ── 1. 侧栏展开 / 收起（只在电脑端，手机端侧栏是抽屉） ───────────────────────────
   收起态原本「居中 + 文字裁成 1px」会瞬间跳变；这里改成左对齐到同一位置（76px 栏里图标中心 38px），
   宽度动画时图标不动、只是文字被栏宽裁掉并淡出，看起来是栏在「收」。 */
@media (min-width: 981px) {
  .sidebar { overflow: hidden; transition: width var(--m-dur) var(--m-ease); }
  .sidebar .brand { transition: padding var(--m-dur) var(--m-ease); }
  .sidebar .brand-copy { white-space: nowrap; transition: opacity .26s .14s ease-out, transform var(--m-dur) var(--m-ease); }
  .sidebar.context-collapsed .brand { justify-content: flex-start; padding: 20px 0 16px 17px; }
  .sidebar.context-collapsed .brand-copy { display: grid; flex: none; opacity: 0; transform: translateX(-8px); pointer-events: none; transition: opacity .12s ease-out, transform .3s var(--m-ease); }

  .sidebar .nav-flat button { transition: background var(--t-fast), color var(--t-fast), padding var(--m-dur) var(--m-ease), min-height var(--m-dur) var(--m-ease); }
  .sidebar .nav-flat button > span { transition: opacity .26s .16s ease-out; }
  .sidebar.context-collapsed .nav-flat button { justify-content: flex-start; padding: 0 0 0 17px; }
  .sidebar.context-collapsed .nav-flat button > span { position: static; width: auto; height: auto; clip-path: none; opacity: 0; transition: opacity .1s ease-out; }

  /* 分组名 → 细分隔线 */
  .sidebar .nav-flat-label {
    height: 17px; line-height: 17px; overflow: hidden; white-space: nowrap;
    transition: height var(--m-dur) var(--m-ease), margin var(--m-dur) var(--m-ease), padding var(--m-dur) var(--m-ease), color .26s .16s ease-out, background-color .1s ease-out;
  }
  .sidebar.context-collapsed .nav-flat-label { height: 1px; background-color: var(--hairline); transition: height var(--m-dur) var(--m-ease), margin var(--m-dur) var(--m-ease), padding var(--m-dur) var(--m-ease), color .1s ease-out, background-color .3s .16s ease-out; }

  /* 角标、底部两个按钮要换位置：换位那一刻先藏起来，等栏宽到位再浮现（JS 加 .is-morph） */
  .sidebar.is-morph :is(.nav-count, .rail-collapse, .sidebar-logout) { animation: xy-m-pop .34s .3s var(--m-ease) both; }
  .sidebar.is-morph::after { animation: xy-m-fade .3s .3s ease-out both; }
  .sidebar .rail-collapse svg { transition: transform var(--m-dur) var(--m-ease); }
  .sidebar.is-morph .rail-collapse svg { animation: xy-m-turn .5s .2s var(--m-ease) both; }
}
@keyframes xy-m-pop { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }
@keyframes xy-m-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes xy-m-turn { from { transform: rotate(-90deg) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── 2. 标签：下划线滑动（JS 做位移），文字颜色柔一点 ───────────────────────────── */
.xy-tab { transition: color .22s ease-out; }
.xy-tab[aria-selected="true"]::after, .xy-tab[aria-pressed="true"]::after { transform-origin: left center; will-change: transform; }

/* ── 3. 抽屉：更柔的滑入 / 利落的收回，遮罩淡入 ──────────────────────────────── */
#drawer.show { transition: transform .52s var(--m-ease), opacity .3s ease-out; }
#drawer:not(.show) { transition: transform .26s cubic-bezier(.4, 0, 1, 1), opacity .22s ease-in; }
#backdrop.show { transition: opacity .34s ease-out; }
@starting-style { #backdrop.show { opacity: 0; } }

/* ── 4. 顶栏页名：换页时轻轻换上（JS 触发） ─────────────────────────────────── */
#pageTitle { display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  .sidebar, .sidebar *, .sidebar::after, .xy-tab, #drawer, #backdrop { transition: none !important; animation: none !important; }
}