/* ==========================================================
   视频模板卡片 + 封面画面（首页与站内共用）
   ========================================================== */
.mbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 28px; flex-wrap: wrap; }
.mcats { display: flex; gap: 6px; flex-wrap: wrap; }
.mcats button { height: 34px; padding: 0 14px; border-radius: 999px; font-size: 14px; color: var(--muted); border: 1px solid var(--border-muted); transition: all .2s; }
.mcats button:hover { color: var(--fg); border-color: var(--border); }
.mcats button.on { color: #0d1117; background: var(--fg); border-color: var(--fg); }
.mtabs { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--hair); }
.mtabs button { height: 28px; padding: 0 14px; border-radius: 999px; font-size: 13.5px; color: var(--muted); }
.mtabs button.on { background: var(--bg-3); color: var(--fg); }

.art-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 20px; }
.vcard { min-width: 0; }
.vthumb { position: relative; display: block; overflow: hidden; border-radius: 12px; background: var(--bg-2); box-shadow: 0 0 0 1px var(--hair); transition: box-shadow .3s, transform .4s var(--ease); }
.vcard:hover .vthumb { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(240,246,252,.16), 0 24px 50px -24px rgba(0,0,0,.9); }
.vthumb .motion-art { transition: filter .3s; }
.vthumb .art-micro, .vthumb .art-bottom { display: none; }
.vthumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 6; opacity: 0; transition: opacity .3s; }
.vthumb video.ready { opacity: 1; }
.vbadge { position: absolute; z-index: 8; left: 10px; top: 10px; display: flex; gap: 4px; }
.vbadge span { font-family: var(--mono); font-size: 10.5px; color: #fff; background: rgba(1,4,9,.55); backdrop-filter: blur(6px); padding: 3px 7px; border-radius: 999px; }
.vbadge span.ref { background: rgba(31,111,235,.85); }
.vtc { position: absolute; z-index: 8; right: 10px; bottom: 12px; font-family: var(--mono); font-size: 10.5px; color: #fff; background: rgba(1,4,9,.55); backdrop-filter: blur(6px); padding: 3px 7px; border-radius: 999px; }
.vscrub { position: absolute; z-index: 9; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(255,255,255,.12); }
.vscrub i { position: absolute; inset: 0 auto 0 0; width: 0; background: rgba(255,255,255,.9); }
.vuse { position: absolute; z-index: 9; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity .25s; }
.vuse span { font-size: 13.5px; font-weight: 600; padding: 9px 16px; border-radius: 999px; background: #fff; color: #0d1117; transform: translateY(6px); transition: transform .3s var(--ease); }
.vcard:hover .vuse, .vthumb:focus-visible .vuse { opacity: 1; }
.vcard:hover .vuse span { transform: none; }
.vcard:hover .motion-art { filter: brightness(.6) saturate(.9); }
.vmeta { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 14px; }
.vmeta h3 { margin: 0; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vprice { font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
.vprice.free { color: var(--green); }
.vsub { margin-top: 4px; font-size: 13px; color: var(--subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.empty { grid-column: 1 / -1; padding: 60px 0; text-align: center; color: var(--muted); }
.market-bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--hair); display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 13px; color: var(--subtle); flex-wrap: wrap; }
/* ---- 封面画面：原创图形，按帧进度 --p 驱动 ---- */
.motion-art {
  --p: .62;
  aspect-ratio: 1.38; position: relative; overflow: hidden; isolation: isolate;
  container-type: inline-size; text-align: left; color: #111; background: #eee;
  font-family: "Mona Sans", "Helvetica Neue", Arial, "PingFang SC", sans-serif;
}
.art-micro { position: absolute; z-index: 5; top: 7%; left: 7%; right: 7%; display: flex; justify-content: space-between; font: 1.75cqw/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.art-bottom { position: absolute; z-index: 5; bottom: 7%; left: 7%; right: 7%; display: flex; justify-content: space-between; align-items: flex-end; font: 1.65cqw/1.55 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.art-display { position: absolute; font-weight: 600; line-height: .9; letter-spacing: -0.065em; }
.art-in { --k: clamp(0, calc((var(--p) - var(--d, 0)) * 5), 1); opacity: var(--k); transform: translateY(calc((1 - var(--k)) * 30%)); display: inline-block; }

/* 1 标题动画 · Prism */
.art-prism { background: #e9eadf; color: #1b231a; }
.art-prism .art-display { left: 7%; top: 22%; font-size: 17cqw; z-index: 3; }
.art-prism .art-display em { font-style: normal; color: #7a8676; }
.prism-star { position: absolute; right: -12%; top: 6%; width: 74%; aspect-ratio: 1; z-index: 1; transform: rotate(calc(var(--p) * 120deg)); filter: drop-shadow(6px 14px 10px rgba(80,90,60,.25)); }

/* 2 产品发布 · Noir */
.art-noir { background: radial-gradient(ellipse at 56% 36%, #4a4e57, #1f2229 60%, #121419); color: #f1f4fb; }
.art-noir .art-display { left: 7%; top: 20%; font-size: 13cqw; font-weight: 400; z-index: 3; }
.noir-render { position: absolute; right: -2%; bottom: -4%; width: 62%; z-index: 2; transform: rotate(calc(-14deg + var(--p) * 10deg)) translateY(calc((1 - var(--p)) * 8%)); filter: drop-shadow(8px 18px 14px rgba(0,0,0,.6)); }
.noir-sweep { position: absolute; inset: 0; z-index: 4; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.12) 50%, transparent 60%); transform: translateX(calc((var(--p) * 2 - 1) * 100%)); mix-blend-mode: screen; }

/* 3 数据短片 · Bloom */
.art-data { background: #f0bd9e; color: #4f2316; }
.art-data .art-display { left: 7%; top: 21%; font-size: 10.6cqw; line-height: 1.02; font-weight: 500; z-index: 3; }
.art-data .data-num { position: absolute; right: 8%; top: 20%; font-size: 5cqw; font-weight: 500; letter-spacing: -0.04em; z-index: 3; }
.data-bars { position: absolute; right: 5%; bottom: 17%; width: 62%; height: 60%; display: flex; align-items: flex-end; gap: 6%; }
.data-bars i { flex: 1; height: var(--h); border-radius: 60% 60% 0 0; background: #c75f43; transform-origin: bottom; transform: scaleY(clamp(.05, calc((var(--p) - var(--d)) * 3), 1)); }
.data-bars i:nth-child(2) { background: #a3402e; } .data-bars i:nth-child(3) { background: #7a2d25; } .data-bars i:nth-child(4) { background: #5c2620; }

/* 4 片头片尾 · Afterhours */
.art-after { background: #121413; color: #d2ff72; }
.art-after .art-display { left: -4%; top: 24%; font-size: 28cqw; font-weight: 800; line-height: .8; letter-spacing: -0.075em; transform: rotate(-9deg) translateX(calc(var(--p) * -6%)); }
.art-after .art-display span { display: block; margin-left: 11%; color: transparent; -webkit-text-stroke: .25cqw #d2ff72; }
.after-stripe { position: absolute; z-index: 4; width: 190%; height: 10%; left: -45%; top: 46%; background: #d2ff72; color: #13200f; transform: rotate(27deg) translateX(calc(var(--p) * -12%)); display: flex; align-items: center; justify-content: center; font: 600 1.9cqw var(--mono); letter-spacing: 1.2cqw; white-space: nowrap; }

/* 5 口播字幕 · 竖屏 */
.art-caption { background: linear-gradient(140deg, #2a1d3d, #120d1d 70%); color: #fff; }
.cap-phone { position: absolute; left: 50%; top: 7%; bottom: 7%; aspect-ratio: 9 / 16; transform: translateX(-50%); border-radius: 3cqw; overflow: hidden; border: .3cqw solid rgba(255,255,255,.18); background: linear-gradient(180deg, #6f4d8f, #2b1f42 55%, #17111f); box-shadow: 0 2cqw 6cqw rgba(0,0,0,.5); }
.cap-phone::before { content: ""; position: absolute; left: 22%; right: 22%; top: 16%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #f7c7a8, #b6788f 60%, transparent 62%); opacity: .8; }
.cap-phone::after { content: ""; position: absolute; left: 12%; right: 12%; top: 46%; height: 34%; border-radius: 40% 40% 0 0; background: #24193a; }
.cap-lines { position: absolute; z-index: 3; left: 6%; right: 6%; bottom: 13%; text-align: center; font-size: 3.5cqw; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; }
.cap-lines span { color: rgba(255,255,255,.45); }
.cap-lines span.on { color: #fff; }
.cap-lines span.hl { color: #1b1426; background: #ffd84d; border-radius: .6cqw; padding: 0 .6cqw; }
.cap-side { position: absolute; z-index: 3; right: 7%; top: 30%; display: flex; flex-direction: column; gap: 1.6cqw; }
.cap-side i { width: 3.2cqw; height: 3.2cqw; border-radius: 50%; background: rgba(255,255,255,.22); }
.art-caption .cap-tag { position: absolute; z-index: 5; left: 7%; top: 44%; font: 600 4.6cqw/1.05 var(--font); letter-spacing: -0.04em; color: #fff; }
.art-caption .cap-tag small { display: block; font: 1.7cqw var(--mono); letter-spacing: .08em; color: #c7b3e6; margin-top: 2cqw; }

/* 6 转场 · Shift */
.art-wipe { background: #0e1a2b; color: #eaf2ff; }
.wipe-a, .wipe-b { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; font-size: 15cqw; letter-spacing: -0.07em; }
.wipe-a { background: #0e1a2b; color: #dbe8ff; }
.wipe-b { background: #ff6a3d; color: #1c0d06; clip-path: polygon(calc(var(--p) * 160% - 30%) 0, 160% 0, 160% 100%, calc(var(--p) * 160% - 60%) 100%); }
.wipe-bar { position: absolute; top: -10%; bottom: -10%; width: 5%; background: #ffd84d; left: calc(var(--p) * 160% - 47%); transform: skewX(-17deg); z-index: 3; box-shadow: 0 0 3cqw rgba(255,216,77,.6); }
.art-wipe .art-micro, .art-wipe .art-bottom { color: #fff; mix-blend-mode: difference; }

/* 7 音乐可视化 · Pulse */
.art-wave { background: radial-gradient(circle at 50% 50%, #18233a, #070b14 70%); color: #bfe3ff; }
.wave-ring { position: absolute; left: 50%; top: 50%; width: 58%; aspect-ratio: 1; transform: translate(-50%, -50%); }
.wave-ring i { position: absolute; left: 50%; top: 50%; width: 1.1cqw; height: calc(4cqw + var(--a) * 9cqw); margin-left: -.55cqw; border-radius: 1cqw; transform-origin: 50% 0; transform: rotate(var(--r)) translateY(14cqw); background: linear-gradient(180deg, #79c0ff, #a371f7 60%, #f778ba); }
.wave-core { position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(calc(.92 + var(--beat, 0) * .12)); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffffff, #79c0ff 40%, #1f6feb 75%); box-shadow: 0 0 6cqw rgba(88,166,255,.55); display: grid; place-items: center; color: #08111f; font: 700 2.4cqw var(--mono); }

/* 8 产品发布 · Still */
.art-still { background: radial-gradient(ellipse at 70% 28%, #e6d9c2, #c8b392); color: #524631; }
.art-still::before { content: ""; position: absolute; width: 90%; height: 140%; left: 55%; top: -10%; background: linear-gradient(90deg, transparent, rgba(74,57,38,.18), transparent); transform: rotate(35deg) translateX(calc(var(--p) * 10%)); filter: blur(6px); }
.art-still .art-display { left: 8%; top: 22%; font-family: Georgia, "Songti SC", serif; font-weight: 400; font-size: 18.5cqw; z-index: 3; }
.still-bottle { position: absolute; z-index: 2; right: 12%; bottom: 10%; width: 25%; height: 62%; border-radius: 12% 12% 18% 18% / 6% 6% 10% 10%; background: linear-gradient(90deg, #6b3f1e, #b8763c 35%, #e2a565 48%, #94562a 70%, #4c2a12); box-shadow: 2cqw 3cqw 4cqw rgba(60,40,20,.35); transform: translateY(calc((1 - var(--p)) * 6%)); }
.still-bottle::before { content: ""; position: absolute; left: 14%; right: 14%; top: -18%; height: 20%; border-radius: 6% 6% 0 0; background: linear-gradient(90deg, #c9c3b6, #f5f1e8 45%, #a8a196); }
.still-bottle::after { content: "STILL."; position: absolute; left: 0; right: 0; top: 34%; height: 30%; background: #f2ece0; display: grid; place-items: center; font: 600 1.6cqw var(--mono); letter-spacing: .1em; color: #6b5a3f; }

/* 9 年度报告 · Signal */
.art-signal { background: #d6e8f1; color: #183a58; }
.art-signal .art-display { left: 7%; top: 22%; font-size: 27cqw; font-weight: 600; letter-spacing: -0.09em; z-index: 3; }
.art-signal .art-display small { font-size: 8.5cqw; vertical-align: top; letter-spacing: -0.05em; margin-left: 1%; }
.signal-waves { position: absolute; right: -16%; top: 50%; width: 78%; aspect-ratio: 1; transform: translateY(-50%); }
.signal-waves i { position: absolute; inset: calc(var(--n) * 3%); border: .22cqw solid rgba(24,58,88,.5); border-radius: 50%; transform: scale(calc(.94 + var(--p) * .06)) rotate(calc(var(--n) * 4deg)); }



.vbadge { top: auto; bottom: 12px; }
.vtc { bottom: 12px; }
.vthumb .art-prism .art-display { font-size: 15cqw; }
@media (max-width: 1180px) { .art-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .art-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mcats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; }
  .mcats::-webkit-scrollbar { display: none; }
  .mcats button { flex: 0 0 auto; }
}
@media (max-width: 640px) { .art-grid { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1680px) {
  .mcats button { height: 38px; padding: 0 16px; font-size: 15px; }
  .mtabs button { height: 32px; font-size: 14.5px; }
  .art-grid { gap: 48px 28px; }
  .vmeta h3 { font-size: 17px; } .vprice { font-size: 13px; } .vsub { font-size: 14.5px; }
  .vbadge span, .vtc { font-size: 12px; }
  .market-bottom { font-size: 14px; }
}
@media (min-width: 2200px) { .vmeta h3 { font-size: 19px; } .vsub { font-size: 15.5px; } }