/* 映序 · 丝滑动效层
   只做合成层友好的动效（transform / opacity / translate / scale），不改布局。
   规则挂在 :root.yx 下，motion.js 加载后才生效；减少动态效果和低性能模式自动降级。 */

/* 光标聚光的坐标不向子元素继承：大面板随鼠标移动时不再让整棵子树重算样式 */
@property --mx { syntax:'<length-percentage>'; inherits:false; initial-value:50%; }
@property --my { syntax:'<length-percentage>'; inherits:false; initial-value:50%; }
@property --rx { syntax:'<angle>'; inherits:false; initial-value:0deg; }
@property --ry { syntax:'<angle>'; inherits:false; initial-value:0deg; }
:root.luxe body.account-app :is(.panel-box,.wb-surface,.home-section,.studio-stage,.studio-inspector,.model-card,.ml-card,.task-row,.connection-card,.studio-parameter-bar,.home-hero,.side-nav .tab)::before { --mx:inherit; --my:inherit; }

:root.yx {
  /* 苹果式曲线：快速起步、柔和落定；spring 带一点回弹 */
  --yx-out:cubic-bezier(.22,1,.36,1);
  --yx-spring:cubic-bezier(.32,1.28,.54,1);
  --yx-snap:cubic-bezier(.3,.7,.1,1);
}
@supports (transition-timing-function:linear(0,1)) {
  :root.yx {
    --yx-spring:linear(0,.009,.035 2.1%,.141 4.4%,.281 6.7%,.723 12.9%,.938 16.7%,1.017 19.4%,1.077,1.121 24.7%,1.149 27.3%,1.159 30.2%,1.153 32.3%,1.12 37.1%,1.017 47.4%,.995 51.1%,.982 54.8%,.979 59.6%,.991 72.5%,1.001 86.1%,1);
    --yx-spring-soft:linear(0,.019 1.5%,.078 3.1%,.302 7.5%,.538 12.5%,.749 18.2%,.902 24.8%,.981 31.7%,1.016 39.2%,1.022 46.3%,1.005 65.4%,1);
  }
}

/* ───── 页面切换：内容区块依次浮现，只动 translate / opacity，GPU 合成 ─────
   只在切换后的短窗口（body.yx-switching）里生效，数据刷新重绘区块时不会反复闪；
   只用 backwards 填充：动画结束后不残留层叠上下文，下拉菜单 / 固定定位不受影响 */
:root.yx.luxe body.account-app.atelier-v2.champagne .tab-panel:not([hidden]) { animation:none; }
:root.yx body.account-app.yx-switching .tab-panel:not([hidden]) > * {
  animation:yx-enter .42s var(--yx-spring-soft,var(--yx-out)) backwards;
}
:root.yx body.account-app.yx-switching .tab-panel:not([hidden]) > :nth-child(2) { animation-delay:.03s; }
:root.yx body.account-app.yx-switching .tab-panel:not([hidden]) > :nth-child(3) { animation-delay:.06s; }
:root.yx body.account-app.yx-switching .tab-panel:not([hidden]) > :nth-child(n+4) { animation-delay:.09s; }
@keyframes yx-enter { from { opacity:0; translate:0 14px; scale:.992; } }

/* 顶部标题跟随切换轻轻换场 */
:root.yx body.account-app.yx-switching :is(#page-title,#page-index,#breadcrumb-current) { animation:yx-title .36s var(--yx-out) backwards; }
@keyframes yx-title { from { opacity:0; translate:0 6px; } }

/* ───── 侧栏：选中光块平滑滑动 ───── */
:root.yx.luxe body.account-app.atelier-v2.champagne .side-nav .tab {
  transition:color .2s var(--yx-out),background .25s var(--yx-out),border-color .25s,box-shadow .35s var(--yx-out),transform .45s var(--yx-spring);
}
:root.yx.luxe body.account-app.atelier-v2.champagne .side-nav .tab:active { transform:scale(.97); transition-duration:.08s; }

/* ───── 按钮：按下即时收缩，松手弹簧回位 ───── */
:root.yx.luxe body.account-app.atelier-v2.champagne :is(.btn,.icon-btn,.page-button,.wbj-btn,.topbar-chip) {
  transition-property:transform,box-shadow,background,background-position,border-color,color,filter,opacity;
  transition-duration:.45s,.3s,.25s,.6s,.25s,.25s,.25s,.25s;
  transition-timing-function:var(--yx-spring),var(--yx-out),var(--yx-out),var(--yx-out),ease,ease,ease,ease;
}
:root.yx.luxe body.account-app.atelier-v2.champagne :is(.btn,.icon-btn,.page-button,.wbj-btn,.topbar-chip):active:not(:disabled) {
  transform:translateY(1px) scale(.965); transition-duration:.07s;
}

/* ───── 卡片：倾斜与悬浮用弹簧收尾 ───── */
:root.yx.luxe body.account-app.atelier-v2.champagne :is(.model-card,.ml-card) {
  transition:transform .55s var(--yx-spring),box-shadow .35s var(--yx-out),border-color .25s;
}
:root.yx.luxe body.account-app.atelier-v2.champagne :is(.model-card,.ml-card).lx-tilt { transition:transform .12s linear,box-shadow .35s var(--yx-out),border-color .25s; }

/* ───── 弹窗：弹簧放大进入，遮罩柔和淡入 ───── */
:root.yx.luxe body.account-app.atelier-v2.champagne dialog[open] { animation:yx-pop .5s var(--yx-spring) backwards; }
:root.yx.luxe body.account-app.atelier-v2.champagne dialog[open]::backdrop { animation:yx-fade .28s var(--yx-out) backwards; }
@keyframes yx-pop { from { opacity:0; translate:0 12px; scale:.94; } }
@keyframes yx-fade { from { opacity:0; } }

/* ───── 列表卡片随滚动浮现（滚动驱动动画，运行在合成线程，重新渲染也不会闪） ───── */
@supports (animation-timeline:view()) {
  :root.yx body.account-app :is(.model-card,.ml-card,.task-row,.wbj-frame,.ig-card,.home-section) {
    animation:yx-reveal linear backwards;
    animation-timeline:view();
    animation-range:entry 0px entry 220px;
  }
  @keyframes yx-reveal { from { opacity:.001; translate:0 28px; scale:.985; } }
}

/* ───── 请求进度条：点了功能马上有反馈 ───── */
#yx-progress {
  position:fixed; inset:0 0 auto; height:2px; z-index:2147483000; pointer-events:none;
  transform-origin:0 50%; transform:scaleX(0); opacity:0;
  background:linear-gradient(90deg,#c09550,#f2d9a2 55%,#fff3d1);
  box-shadow:0 0 10px #e8c98799,0 0 2px #fff3d1;
  will-change:transform,opacity;
}
:root.yx [data-yx-pending] { cursor:progress; }

/* ───── 低性能设备：保持外观，去掉最贵的实时模糊和常驻动画 ───── */
:root.yx.lx-lite body.account-app :is(.brand-mark,.sync-label i,.workspace-dot),
:root.yx.lx-lite body.account-app :is(.popular-models-elapsed,#announcement-popup-dialog)::before { animation:none !important; }
:root.yx.lx-lite body.account-app :is(.model-card,.ml-card,.task-row,.wbj-frame,.ig-card,.home-section) { animation:none; }

@media (prefers-reduced-motion:reduce) {
  :root.yx body.account-app.yx-switching .tab-panel:not([hidden]) > *,
  :root.yx body.account-app :is(.model-card,.ml-card,.task-row,.wbj-frame,.ig-card,.home-section),
  :root.yx body.account-app :is(#page-title,#page-index,#breadcrumb-current),
  :root.yx.luxe body.account-app.atelier-v2.champagne dialog[open] { animation:none !important; }
  #yx-progress { display:none; }
}