/* 铅华洗尽 PWA 动效系统：统一 token、可整体关闭、只动 transform/opacity。 */
:root{
  --motion-press:110ms;
  --motion-tab-out:110ms;
  --motion-tab:190ms;
  --motion-modal:210ms;
  --motion-modal-out:150ms;
  --motion-pop:250ms;
  --motion-push:290ms;
  --motion-sheet-in:320ms;
  --motion-sheet-out:210ms;
  --ease-out-soft:cubic-bezier(.22,1,.36,1);
  --ease-out-fast:cubic-bezier(.4,0,1,1);
  --ease-sheet:cubic-bezier(.2,.8,.2,1);
}

/* 动效总开关：?motion=off / ?motion=on 会写入 localStorage.filmMotion */
html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after{
  animation-duration:.001ms!important;
  animation-iteration-count:1!important;
  transition-duration:.001ms!important;
  scroll-behavior:auto!important;
}
html[data-motion="off"]::view-transition-old(root),
html[data-motion="off"]::view-transition-new(root),
html[data-motion="off"]::view-transition-old(content),
html[data-motion="off"]::view-transition-new(content),
html[data-motion="off"]::view-transition-old(topbar),
html[data-motion="off"]::view-transition-new(topbar),
html[data-motion="off"]::view-transition-old(bottom-nav),
html[data-motion="off"]::view-transition-new(bottom-nav){animation:none!important}
/* 表单/登录/扫码等页面不做位移过渡，但仍然正常导航 */
html[data-nav-kind="none"]::view-transition-old(root),
html[data-nav-kind="none"]::view-transition-new(root),
html[data-nav-kind="none"]::view-transition-old(content),
html[data-nav-kind="none"]::view-transition-new(content),
html[data-nav-kind="none"]::view-transition-old(topbar),
html[data-nav-kind="none"]::view-transition-new(topbar),
html[data-nav-kind="none"]::view-transition-old(bottom-nav),
html[data-nav-kind="none"]::view-transition-new(bottom-nav){animation:none!important}

/* 跨文档 View Transition：只动内容区，顶栏和底部 Tab 保持稳定 */
@supports (view-transition-name: content){
  .page-content{view-transition-name:content}
  .topbar{view-transition-name:topbar}
  .mobile{view-transition-name:bottom-nav}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  ::view-transition-old(topbar),::view-transition-new(topbar),
  ::view-transition-old(bottom-nav),::view-transition-new(bottom-nav){animation:none}
}
@media(prefers-reduced-motion:no-preference){
  html[data-nav-kind="tab"]::view-transition-old(content){animation:pwa-tab-out var(--motion-tab-out) var(--ease-out-fast) both}
  html[data-nav-kind="tab"]::view-transition-new(content){animation:pwa-tab-in var(--motion-tab) var(--ease-out-soft) both}
  html[data-nav-kind="push"]::view-transition-old(content){animation:pwa-push-out var(--motion-push) var(--ease-out-soft) both}
  html[data-nav-kind="push"]::view-transition-new(content){animation:pwa-push-in var(--motion-push) var(--ease-out-soft) both}
  html[data-nav-kind="pop"]::view-transition-old(content){animation:pwa-pop-out var(--motion-pop) var(--ease-out-soft) both}
  html[data-nav-kind="pop"]::view-transition-new(content){animation:pwa-pop-in var(--motion-pop) var(--ease-out-soft) both}
  @keyframes pwa-tab-out{to{opacity:.72}}
  @keyframes pwa-tab-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @keyframes pwa-push-out{to{opacity:.78;transform:translateX(-14px)}}
  @keyframes pwa-push-in{from{opacity:.82;transform:translateX(24px)}to{opacity:1;transform:none}}
  @keyframes pwa-pop-out{to{opacity:.8;transform:translateX(16px)}}
  @keyframes pwa-pop-in{from{opacity:.82;transform:translateX(-20px)}to{opacity:1;transform:none}}
}
/* 支持 VT 时关闭整页淡入回退，避免和快照动画叠加 */
html.vt-ready .shell,
html.vt-ready .mobile,
html.vt-ready .page-content{animation:none!important}

/* 按压反馈：只作用于按钮和轻量卡片 */
@media(hover:none){
  button:active,.btn:active,.pf-icon:active,.pf-filters button:active,.mobile a:active,.mobile button:active{transform:scale(.98);transition:transform var(--motion-press) ease-out}
  .order-record:active,.metric-card:active,.workspace-actions a:active{transform:scale(.995);transition:transform var(--motion-press) ease-out}
  .nav-row:active{filter:brightness(.97);transition:filter var(--motion-press) ease-out}
}

/* 这三类弹窗的入场/退场完全交给 motion.js，关闭旧的 CSS layout-enter 以免双重动画 */
dialog.navigation-dialog[open],
dialog.notification-center[open],
dialog.return-dialog[open]{animation:none!important}
@media(prefers-reduced-motion:no-preference){
  dialog.navigation-dialog[open]::backdrop,
  dialog.notification-center[open]::backdrop,
  dialog.return-dialog[open]::backdrop{animation:pwa-backdrop-in 180ms ease-out both}
  @keyframes pwa-backdrop-in{from{opacity:0}to{opacity:1}}
}

/* 回寄确认在手机上按底部面板定位；入场/退场沿用现有 motion.js，不重复加动画 */
@media(max-width:700px){
  dialog.return-dialog{
    inset:auto 8px calc(8px + env(safe-area-inset-bottom,0px)) 8px;
    margin:0;width:auto;max-width:none;max-height:85dvh;border-radius:20px;
  }
}