/* ui-motion.css · 全站页面切换过渡 + 保存反馈动效
   生效前提：<html> 上带 class="wb-motion"（由各页面 <head> 里的内联脚本添加）。
   没有 JS 时不加这个类，页面完全保持原样。 */

@keyframes wbIn    { from { opacity: 0 } to { opacity: 1 } }
@keyframes wbUp    { from { opacity: 0; transform: translate3d(0, 8px, 0) } to { opacity: 1; transform: translate3d(0, 0, 0) } }
@keyframes wbSpin  { to { transform: rotate(360deg) } }
@keyframes wbFlash { from { opacity: 0; transform: translate3d(0, -8px, 0) } to { opacity: 1; transform: none } }

/* 进入：整页淡入，主体内容微上浮 8px */
html.wb-motion body { animation: wbIn .24s ease both; }
html.wb-motion main,
html.wb-motion .lyear-layout-content,
html.wb-motion .uc-main { animation: wbUp .28s cubic-bezier(.22, .61, .36, 1) both; }

/* 离场：点击站内链接后整页淡出 */
html.wb-motion body.wb-leaving { animation: none; opacity: .45; transition: opacity .15s ease; }

/* 顶部进度条 */
#wbBar { position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 2147483000; opacity: 0;
  background: linear-gradient(90deg, #2ec4b6, #7ce8dc);
  box-shadow: 0 0 10px rgba(46, 196, 182, .6);
  transition: width .45s cubic-bezier(.2, .7, .3, 1), opacity .2s ease; pointer-events: none; }
#wbBar.on { opacity: 1; }

/* 提交按钮的“保存中”状态 */
.wb-busy { opacity: .72 !important; pointer-events: none !important; cursor: progress !important; }
.wb-busy::after { content: ''; display: inline-block; width: 11px; height: 11px; margin-left: 8px;
  vertical-align: -1px; border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: wbSpin .7s linear infinite; }

/* 保存后的提示条：滑入，随后淡出 */
.wb-flash { animation: wbFlash .32s cubic-bezier(.22, .61, .36, 1) both; }
.wb-flash-hide { opacity: 0 !important; transform: translate3d(0, -6px, 0) !important;
  transition: opacity .28s ease, transform .28s ease; }

@media (prefers-reduced-motion: reduce) {
  html.wb-motion body,
  html.wb-motion main,
  html.wb-motion .lyear-layout-content,
  html.wb-motion .uc-main { animation: none !important; }
  html.wb-motion body.wb-leaving { opacity: 1 !important; }
  #wbBar { display: none !important; }
}
