/* BODHI Dashboard · css/base.css · 通用底子：strip 扫播动画 / 16:9 / 卡片 lift / 进度环 / 细滚动条
   ⚠ 层叠顺序 = index.html 里 <link> 的先后，别随手调换。*/

/* BODHI Dashboard 自定义样式：strip 切片 + 卡片细节 */

/* Strip 16:9 单帧预览 + hover 扫播 5 帧动画。
   strip.jpg 是 5 帧横向拼接（80:9）；用 background-size: 500% 100% 把整张塞进 16:9 容器，
   通过 background-position 切换显示哪一帧。默认显示第 1 帧；hover 时动画扫过 5 帧。 */
.strip-frame {
  aspect-ratio: 16 / 9;
  background-color: #0c0a09;
  background-repeat: no-repeat;
  background-size: 500% 100%;
  background-position: 0 0;
  position: relative;
  overflow: hidden;
}
/* 5 帧横向 sprite：background-size 500% 下，帧 i 的位置 = i/4*100%（0/25/50/75/100%）。
   steps(5, jump-none) 在 0%→100% 上产生 5 个均匀停顿，正好对齐 5 帧，末帧后跳回首帧循环。 */
@keyframes strip-scan {
  from { background-position: 0% 0; }
  to   { background-position: 100% 0; }
}
.strip-frame:hover {
  animation: strip-scan 2s steps(5, jump-none) infinite;
}
.strip-frame .strip-meta {
  position: absolute;
  bottom: 4px;
  right: 6px;
  font-size: 10px;
  padding: 1px 5px;
  background: rgba(0,0,0,0.65);
  color: #fff;
  border-radius: 3px;
  letter-spacing: 0.05em;
  font-family: var(--font-mono, monospace);
}
.strip-frame .strip-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.65);
  font-size: 28px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms;
}
.strip-frame:hover .strip-play { opacity: 1; }

/* 16:9 wrapper for single image preview */
.aspect-16-9 {
  aspect-ratio: 16 / 9;
}

/* take strip 预览滚动播放：5 帧横条按帧步进循环（点击才真正加载视频） */
.take-strip-anim {
  background-size: 500% 100%;
  background-repeat: no-repeat;
}
.take-strip-anim:hover, .group\/tk:hover .take-strip-anim {
  animation: takeStripCycle 2s steps(5, end) infinite;
}
@keyframes takeStripCycle {
  from { background-position-x: 0%; }
  to   { background-position-x: 125%; }
}

/* 卡片 hover lift */
.lift {
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.lift:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px -4px rgb(0 0 0 / 0.15);
}

/* progress ring */
.ring-bg {
  background: conic-gradient(var(--ring-color) calc(var(--ring-pct) * 1%), rgb(231 229 228) 0);
}
.dark .ring-bg {
  background: conic-gradient(var(--ring-color) calc(var(--ring-pct) * 1%), rgb(41 37 36) 0);
}

/* Scrollbar slim */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgb(214 211 209); border-radius: 4px; }
.dark ::-webkit-scrollbar-thumb { background: rgb(68 64 60); }