/* 用途：共享页面与加载过渡；文件：public/assets/ui-motion.css。 */
/* 模块：全站界面过渡样式。跨页淡入与请求进度；不阻塞点击和输入。 */
/* 样式分区：@view-transition；维护此组件的布局、外观与交互状态。 */

/* 跨页快照在部分微信 WebView 会停留黑屏；全站使用浏览器原生跳转，不让动画接管导航。 */
@view-transition{navigation:none}
/* 样式分区：::view-transition-old(root)；维护此组件的布局、外观与交互状态。 */

::view-transition-old(root){animation:ui-page-out 120ms ease-out both}
/* 样式分区：::view-transition-new(root)；维护此组件的布局、外观与交互状态。 */

::view-transition-new(root){animation:ui-page-in 200ms ease-out both}
/* 样式分区：@keyframes ui-page-out；维护此组件的布局、外观与交互状态。 */

@keyframes ui-page-out{to{opacity:0}}
/* 样式分区：@keyframes ui-page-in；维护此组件的布局、外观与交互状态。 */

@keyframes ui-page-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* 样式分区：html.ui-loading:before；维护此组件的布局、外观与交互状态。 */

html.ui-loading:before{content:'';position:fixed;top:0;left:0;height:3px;width:35%;background:var(--green,#214c42);z-index:10000;pointer-events:none;border-radius:0 3px 3px 0;animation:ui-request-progress 1.1s ease-in-out infinite}
/* 样式分区：@keyframes ui-request-progress；维护此组件的布局、外观与交互状态。 */

@keyframes ui-request-progress{from{transform:translateX(-105%)}to{transform:translateX(390%)}}
/* 样式分区：@media(prefers-reduced-motion:reduce)；维护此组件的布局、外观与交互状态。 */

@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}html.ui-loading:before{animation:none;width:100%;opacity:.7}}
