/* 骨架屏（js/skeleton.js）：内容还没到的地方按它最终的样子占位，一道高光横着扫过去，代替转圈。
   颜色全从 --fg 混出来：明暗主题、首页 / 画布 / 工作室各自改过的那套变量都自动跟着走。
   这个文件要排在所有样式表最后：媒体等待态、首页项目卡片那几条要盖过各页面自己的写法。 */

/* ---------- 块状占位 ---------- */
.skel{position:relative;overflow:hidden;background:color-mix(in srgb,var(--fg) 7%,transparent)}
/* 高光走伪元素 + transform，在合成层上跑，不逼整块重绘 */
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);pointer-events:none;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--fg) 7%,transparent),transparent);
  animation:skel-sweep 1.6s ease-in-out infinite}
.skel-line{display:block;width:var(--w,100%);height:10px;border-radius:4px}
.skel-line.sm{height:8px}
.skel-pill{display:inline-block;width:var(--w,48px);height:18px;border-radius:99px}
.skel-bar{display:block;height:36px;border-radius:99px}
.skel-box{display:block;flex:0 0 auto;width:16px;height:16px;border-radius:4px}
.skel-item{pointer-events:none;user-select:none}
.skel-item .abody{display:flex;flex-direction:column;gap:10px}
.skel-item .cmeta{gap:8px}
.skel-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- 图片 / 视频：出第一帧之前 ---------- */
/* <img> / <video> 是替换元素挂不了伪元素，流光直接画在元素自己的背景上（没画面时露出来的就是背景）。
   各处给媒体垫的底色（成片卡片的 #0d1016 之类）这时要让位，所以用 !important；出了画面属性一撤就原样回来。 */
:is(img,video)[data-skel="wait"]{
  background:linear-gradient(90deg,transparent 30%,color-mix(in srgb,var(--fg) 8%,transparent) 50%,transparent 70%) 0 0/300% 100% no-repeat
    color-mix(in srgb,var(--fg) 7%,transparent) !important;
  animation:skel-sheen 1.6s ease-in-out infinite !important;
  color:transparent}
:is(img,video)[data-skel="in"]{animation:skel-in .35s ease-out}

/* ---------- 生成中 ---------- */
/* 成片 / 三维卡片：整块画框铺流光，阶段文字、进度条、剩余时间压在上面。
   出了实时预览（.haspv）就让位给预览图，.wait 缩成底部那条半透明状态栏（form.css）。 */
.thumb:not(.haspv)>.wait.live{align-self:stretch;justify-content:center;
  background:linear-gradient(90deg,transparent 30%,color-mix(in srgb,var(--fg) 7%,transparent) 50%,transparent 70%) 0 0/300% 100% no-repeat;
  animation:skel-sheen 1.6s ease-in-out infinite}
/* 工作台画布上的片段：排队 / 生成中那块占位。失败的（.err）不扫，出了实时预览也不扫 */
.clip .cv .ph:not(.err):not(:has(>.pv)){
  background:linear-gradient(90deg,transparent 30%,color-mix(in srgb,var(--fg) 7%,transparent) 50%,transparent 70%) 0 0/300% 100% no-repeat;
  animation:skel-sheen 1.6s ease-in-out infinite}

/* ---------- 列表还没拉回来 ---------- */
/* 创作页（视频 / 声音 / 三维）：记录回来之前，空状态那块直接排成卡片网格，列宽和 .ct-page .cards 一致。
   标题「正在载入生成记录」留给读屏。 */
.ct-empty:not(.ct-loading)>.skel-item{display:none}
.ct-empty.ct-loading{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:22px 16px;
  align-items:start;min-height:0;padding:0;text-align:left}
.ct-empty.ct-loading>:not(.skel-item,h3){display:none}
.ct-empty.ct-loading>h3{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ct-empty.ct-loading>.skel-item{margin:0}
/* 首页「最近项目」：占位直接套真实卡片的类，跟着各断点的布局走。
   它在的时候「正在加载项目…」只留给读屏；加载中整组半透明那条（home.css）别作用到占位上，本来就够淡了 */
#hm-projects:has(>.skel-item)+#hm-project-status{position:absolute;width:1px;height:1px;padding:0;margin:0;border:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#hm-projects[aria-busy] .skel-item .hm-project{opacity:1}
.skel-item .hm-project-text .skel-line{height:12px;margin:3px 0}
.skel-item .hm-project-text .skel-line.sm{height:9px}
/* 一行一条的列表（生成历史）：和 .wb-history-item 一样的行高和分隔线 */
.skel-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.skel-row>span{flex:1;min-width:0}
.skel-row .skel-line{height:11px;margin:4px 0}
.skel-row .skel-line.sm{height:9px;margin-top:9px}

@keyframes skel-sweep{to{transform:translateX(100%)}}
@keyframes skel-sheen{from{background-position:100% 0}to{background-position:0 0}}
@keyframes skel-in{from{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .skel::after{display:none}
  :is(img,video)[data-skel="wait"]{animation:none !important}
  :is(img,video)[data-skel="in"],.thumb>.wait.live,.clip .cv .ph{animation:none}
}