/* 切片工作台 · 动效层。
   改版前全站只有达人排行的表格行有入场动画（materials.css 的 row-enter），其他列表、卡片、
   折叠面板、按钮都是瞬间切换，点下去没有任何反馈。这一层把同一套时值和缓动铺到全站：
   入场 .3s、按下 .12s、缓动统一 cubic-bezier(.22,.65,.32,1)，和排行页原有的手感一致。
   全部动效在 prefers-reduced-motion: reduce 下关闭。 */

@keyframes qp-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes qp-fade{from{opacity:0}to{opacity:1}}
@keyframes qp-open{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ---------- 1. 列表入场：前 12 项依次错开，之后统一 ---------- */
.video-grid>.video-card,
.authorized-grid>.authorized-card,
.lc-grid>.lc-card,
.stage-board>.stage-col,
.lc-admin-list>.lc-admin-row,
.lc-review-list>.lc-review,
.module-list-body>*,
.tool-grid>*,
.quick-link-grid>a,
.help-path>.help-step{animation:qp-rise .3s cubic-bezier(.22,.65,.32,1) backwards}
.video-grid>*:nth-child(1),.authorized-grid>*:nth-child(1),.lc-grid>*:nth-child(1),.stage-board>*:nth-child(1),.lc-admin-list>*:nth-child(1),.lc-review-list>*:nth-child(1),.module-list-body>*:nth-child(1),.tool-grid>*:nth-child(1),.quick-link-grid>*:nth-child(1),.help-path>*:nth-child(1){animation-delay:0ms}
.video-grid>*:nth-child(2),.authorized-grid>*:nth-child(2),.lc-grid>*:nth-child(2),.stage-board>*:nth-child(2),.lc-admin-list>*:nth-child(2),.lc-review-list>*:nth-child(2),.module-list-body>*:nth-child(2),.tool-grid>*:nth-child(2),.quick-link-grid>*:nth-child(2),.help-path>*:nth-child(2){animation-delay:24ms}
.video-grid>*:nth-child(3),.authorized-grid>*:nth-child(3),.lc-grid>*:nth-child(3),.stage-board>*:nth-child(3),.lc-admin-list>*:nth-child(3),.lc-review-list>*:nth-child(3),.module-list-body>*:nth-child(3),.tool-grid>*:nth-child(3),.quick-link-grid>*:nth-child(3),.help-path>*:nth-child(3){animation-delay:48ms}
.video-grid>*:nth-child(4),.authorized-grid>*:nth-child(4),.lc-grid>*:nth-child(4),.stage-board>*:nth-child(4),.lc-admin-list>*:nth-child(4),.lc-review-list>*:nth-child(4),.module-list-body>*:nth-child(4),.tool-grid>*:nth-child(4),.quick-link-grid>*:nth-child(4),.help-path>*:nth-child(4){animation-delay:72ms}
.video-grid>*:nth-child(5),.authorized-grid>*:nth-child(5),.lc-grid>*:nth-child(5),.lc-admin-list>*:nth-child(5),.lc-review-list>*:nth-child(5),.module-list-body>*:nth-child(5){animation-delay:96ms}
.video-grid>*:nth-child(6),.authorized-grid>*:nth-child(6),.lc-grid>*:nth-child(6),.lc-admin-list>*:nth-child(6),.lc-review-list>*:nth-child(6),.module-list-body>*:nth-child(6){animation-delay:114ms}
.video-grid>*:nth-child(7),.authorized-grid>*:nth-child(7),.lc-grid>*:nth-child(7),.lc-admin-list>*:nth-child(7),.module-list-body>*:nth-child(7){animation-delay:130ms}
.video-grid>*:nth-child(8),.authorized-grid>*:nth-child(8),.lc-grid>*:nth-child(8),.lc-admin-list>*:nth-child(8),.module-list-body>*:nth-child(8){animation-delay:144ms}
.video-grid>*:nth-child(n+9),.authorized-grid>*:nth-child(n+9),.lc-grid>*:nth-child(n+9),.lc-admin-list>*:nth-child(n+9),.module-list-body>*:nth-child(n+9){animation-delay:156ms}

/* 在途看板里的每条素材单独错开一点，推进一格之后能看出哪一条动了 */
.stage-col>.stage-item{animation:qp-rise .26s cubic-bezier(.22,.65,.32,1) backwards}
.stage-col>.stage-item:nth-child(3){animation-delay:40ms}
.stage-col>.stage-item:nth-child(4){animation-delay:80ms}
.stage-rail>a{animation:qp-fade .34s ease backwards}
.stage-rail>a:nth-child(2){animation-delay:60ms}
.stage-rail>a:nth-child(3){animation-delay:120ms}

/* ---------- 2. 面板与页面：进入时轻微上浮 ---------- */
#main.content-ready>.hero,
#main.content-ready>.breadcrumb,
.page-viewport>.lc,
.page-viewport>.module-list-frame,
.page-viewport>.module-two-columns,
.page-viewport>.panel,
.creator-desktop>section,
.creator-desktop>.inspiration-desk{animation:qp-rise .32s cubic-bezier(.22,.65,.32,1) backwards}
.page-viewport>.module-two-columns{animation-delay:30ms}

/* ---------- 3. 按下有反馈 ---------- */
.video-card,.authorized-card,.lc-card,.asset-card,.tool-card,.stage-item,.help-step,
.quick-link-grid>a,.lc-admin-row,.directory-link,.lc-pager-item,.stage-rail>a,.dock-item{
  transition:transform var(--t-fast,.14s) var(--ease),box-shadow var(--t-base,.2s) var(--ease),border-color var(--t-base,.2s) var(--ease),background-color var(--t-base,.2s) var(--ease)}
.video-card:active,.authorized-card:active,.lc-card:active,.asset-card:active,.tool-card:active,
.help-step:active,.quick-link-grid>a:active,.directory-link:active,.lc-pager-item:active,.stage-rail>a:active{transform:scale(.988)}
.stage-item:active{transform:scale(.99)}
.lc-card:hover,.stage-rail>a:hover,.lc-pager-item:hover{transform:translateY(-1px)}
.lc-admin-row:hover,.lc-review:hover{background:var(--surface,#fafafa)}

/* 图标按钮和小动作键：按下去要有点下沉 */
.stage-next,.stage-tool,.lc-icon-button,.icon-button,.lc-text-button,.home-text-button{
  transition:transform var(--t-fast,.14s) var(--ease),background-color var(--t-fast,.14s) var(--ease),color var(--t-fast,.14s) var(--ease)}
.stage-next:active,.stage-tool:active,.lc-icon-button:active,.icon-button:active{transform:scale(.9)}
.stage-next:hover .icon{transform:translateX(1px)}
.stage-next .icon{transition:transform var(--t-fast,.14s) var(--ease)}

/* 列表里的"详情 →"箭头跟着走一步 */
.row-open .icon,.lc-card-where,.stage-more .icon,.directory-link .icon{transition:transform var(--t-fast,.14s) var(--ease)}
.row-open:hover .icon,.stage-more:hover .icon,.directory-link:hover .icon{transform:translateX(2px)}

/* ---------- 4. 折叠展开 ----------
   支持 interpolate-size 的浏览器（Chrome 129+ / Safari 26+）直接把高度从 0 过渡到 auto，
   这是唯一真正"丝滑"的做法；不支持的退回内容淡入上移，不会报错也不会跳。 */
details[open]>:not(summary){animation:qp-open .26s cubic-bezier(.22,.9,.24,1)}
details>summary::marker,details>summary::-webkit-details-marker{transition:transform var(--t-base,.2s) var(--ease)}
@supports selector(::details-content){
  details.qp-smooth::details-content{
    block-size:0;overflow:clip;opacity:0;
    transition:block-size .28s cubic-bezier(.22,.9,.24,1),opacity .22s ease,content-visibility .28s allow-discrete;
  }
  details.qp-smooth[open]::details-content{block-size:auto;opacity:1}
  details.qp-smooth[open]>:not(summary){animation:none}
}
@supports (interpolate-size: allow-keywords){:root{interpolate-size:allow-keywords}}
details>summary{transition:color var(--t-fast,.14s) var(--ease),background-color var(--t-fast,.14s) var(--ease)}
.lc-aside-box>summary::after,.lc-inline-category>summary::before{transition:transform var(--t-base,.2s) var(--ease)}
.lc-inline-category[open]>summary::before{transform:rotate(45deg);display:inline-block}

/* ---------- 5. 标签与分段控件 ---------- */
.filter-tabs button,.segmented button,.lc-cats button,.browse-tabs button,.utility-tab,.admin-tabs button{
  transition:color var(--t-fast,.14s) var(--ease),background-color var(--t-fast,.14s) var(--ease),transform var(--t-fast,.14s) var(--ease)}
.filter-tabs button:active,.segmented button:active,.utility-tab:active{transform:scale(.97)}

/* ---------- 6. 表单与状态 ---------- */
.lc input,.lc textarea,.lc select,.search input{transition:border-color var(--t-fast,.14s) var(--ease),box-shadow var(--t-fast,.14s) var(--ease)}
[role=status]:not(:empty),.lc-save-state:not(:empty){animation:qp-fade .24s ease}

@media(prefers-reduced-motion:reduce){
  .video-grid>*,.creator-grid>*,.lc-grid>*,.stage-board>*,.stage-col>*,.stage-rail>a,
  .lc-admin-list>*,.lc-review-list>*,.module-list-body>*,.tool-grid>*,.quick-link-grid>a,.help-path>*,
  #main.content-ready>.hero,#main.content-ready>.breadcrumb,.page-viewport>.lc,.page-viewport>.module-list-frame,
  .page-viewport>.module-two-columns,.page-viewport>.panel,.creator-desktop>section,.creator-desktop>.inspiration-desk,
  details[open]>:not(summary),[role=status]:not(:empty){animation:none!important}
  details.qp-smooth::details-content{transition:none!important}
  .video-card:active,.authorized-card:active,.lc-card:active,.asset-card:active,.tool-card:active,.help-step:active,
  .quick-link-grid>a:active,.directory-link:active,.lc-pager-item:active,.stage-rail>a:active,.stage-item:active,
  .stage-next:active,.stage-tool:active,.lc-icon-button:active,.icon-button:active,
  .filter-tabs button:active,.segmented button:active,.utility-tab:active,
  .lc-card:hover,.stage-rail>a:hover,.lc-pager-item:hover{transform:none!important}
}

/* ---------- 7. 收纳与侧栏：统一曲线，收起展开更跟手 ---------- */
.workspace-sidebar,.app-shell,.global-header,.workspace-scroll{transition-timing-function:cubic-bezier(.22,.9,.24,1)}
.today-panel,.personal-unified,.module-stub{will-change:transform}
.lc-aside-box>summary,.lc-inline-category>summary,.help-questions summary,.optional-image>summary{cursor:pointer}
.help-questions details[open] summary .icon{transform:rotate(45deg)}
.help-questions summary .icon{transition:transform var(--t-base,.2s) var(--ease)}