/* ==========================================================
   动效层（参考 Apple 设计规范）
   · 弹簧曲线由 motion.js 生成为 --sp-*（CSS linear()），不支持时回退到贝塞尔
   · 从哪里来回哪里去：弹窗、菜单、AI 面板都从触发它的位置展开
   · 层级：弹窗 / 抽屉打开时，后面的页面轻微后退、变暗
   · 材质：浮层用半透明 + 背景模糊
   · 尊重系统“减弱动态效果 / 降低透明度”，以及站点配置里的动效开关
   ========================================================== */
:root{
  --sp-default:cubic-bezier(.2,.8,.2,1);--sp-default-ms:420ms;
  --sp-snappy:cubic-bezier(.2,.8,.2,1);--sp-snappy-ms:280ms;
  --sp-sheet:cubic-bezier(.22,1,.36,1);--sp-sheet-ms:480ms;
  --sp-bounce:cubic-bezier(.34,1.4,.64,1);--sp-bounce-ms:520ms;
  --sp-soft:cubic-bezier(.2,.8,.2,1);--sp-soft-ms:620ms;
  --glass:color-mix(in srgb,var(--surface) 78%,transparent);
  --glass-line:color-mix(in srgb,var(--line) 75%,transparent);
}
html,body{background:color-mix(in srgb,var(--bg) 80%,var(--ink))}

/* ---------- 页面进入：弹簧位移 + 轻微模糊，逐块出现 ---------- */
@keyframes pageIn{from{opacity:0;transform:translateY(12px) scale(.994);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
.page-enter .page-main > *,.page-enter .rail{animation:pageIn var(--sp-sheet-ms) var(--sp-sheet) both}
.page-enter .page-main > *:nth-child(2){animation-delay:.035s}
.page-enter .page-main > *:nth-child(3){animation-delay:.07s}
.page-enter .page-main > *:nth-child(n+4){animation-delay:.1s}
.page-enter .rail{animation-delay:.09s}
.public.page-enter > *{animation:enterFade .45s ease both}

/* ---------- 层级：打开弹窗时页面后退 ---------- */
.app{transform-origin:50% 38%;transition:transform var(--sp-sheet-ms) var(--sp-sheet),border-radius .35s var(--ease),filter .35s}
body.is-layered .app{transform:scale(.982);border-radius:14px;filter:saturate(.9)}
.scrim{transition:opacity .3s,backdrop-filter .4s}
.scrim.show{backdrop-filter:blur(3px) saturate(1.1);-webkit-backdrop-filter:blur(3px) saturate(1.1)}

/* ---------- 浮层材质 ---------- */
.modal{background:color-mix(in srgb,var(--surface) 95%,transparent);backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5);will-change:transform}
.pop{background:var(--glass);border-color:var(--glass-line);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);
  transform:scale(.94);transition:opacity .16s,transform var(--sp-bounce-ms) var(--sp-bounce)}
.pop.show{transform:none}
.drawer{transition:transform var(--sp-sheet-ms) var(--sp-sheet)}
.toast{transform:translateY(16px) scale(.96);transition:opacity .22s,transform var(--sp-bounce-ms) var(--sp-bounce)}
.toast.show{transform:none}
.palette{transition:opacity .2s,transform var(--sp-sheet-ms) var(--sp-sheet)!important}

/* ---------- 触感：按下缩小、松开回弹 ---------- */
.btn{transition:transform .35s var(--sp-bounce),background-color .15s,border-color .15s,color .15s,opacity .15s}
.btn:active{transform:scale(.965)}
.chip,.seg button,.srv,.team-pill,.qr-btn,.site-nav a,.role-card,.swatch{transition:transform .35s var(--sp-bounce),background-color .15s,border-color .15s,color .15s,box-shadow .2s}
.chip:active,.seg button:active,.srv:active,.team-pill:active,.qr-btn:active,.site-nav a:active,.role-card:active{transform:scale(.97)}
/* 2.6.0：导航项按下不再缩放（高亮块不跟着缩，文字和底色会错位抖动），改成一层很浅的底色 */
.nav a:active:not([aria-current="page"]){background:color-mix(in srgb,var(--surface) 45%,transparent)}
.switch i::after{transition:transform var(--sp-bounce-ms) var(--sp-bounce),width .2s var(--ease)}
.switch:active i::after{width:20px}
.switch input:checked:active + i::after{transform:translateX(12px)}

/* ---------- 卡片悬停抬起 ---------- */
.plug,.team-card,.role-card,.plan-edit,.wg-cat{transition:transform var(--sp-default-ms) var(--sp-default),box-shadow .3s,border-color .2s}
.plug:hover,.team-card:not(.add):hover,.role-card:hover{transform:translateY(-2px);box-shadow:0 14px 28px -18px rgba(29,35,48,.45)}
.tabs .ink{transition:transform var(--sp-sheet-ms) var(--sp-sheet),width var(--sp-sheet-ms) var(--sp-sheet)}
.meter > i{transition:width .7s var(--sp-soft)}

/* 深浅色切换 */
::view-transition-old(root),::view-transition-new(root){animation-duration:.45s;animation-timing-function:ease}

/* ---------- 回退 ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  body.is-layered .app{transform:none;border-radius:0}
  .reveal{opacity:1!important;transform:none!important}
}
html[data-motion="off"] *,html[data-motion="off"] *::before,html[data-motion="off"] *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important}
html[data-motion="off"] .reveal,html[data-motion="reduced"] .reveal{opacity:1;transform:none}
html[data-motion="reduced"] body.is-layered .app,html[data-motion="off"] body.is-layered .app{transform:none;border-radius:0}
html[data-motion="reduced"] .page-enter .page-main > *,html[data-motion="reduced"] .page-enter .rail{animation-name:enterFade;animation-duration:.2s}
@media (prefers-reduced-transparency:reduce){
  .pop,.modal,.ai-panel,.home-nav.scrolled,.save-bar,.hero-stats > div,.eyebrow{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:var(--surface)!important}
  .save-bar{background:var(--ink)!important}
}