/* ==========================================================
 * 视频音乐动画（视频壁纸） —— 短代码 [video_wallpaper]
 * ========================================================== */

/* ---------- 文章里的播放按钮：12px 小黑三角，插入在哪就显示在哪（靠左） ---------- */
.kvw-btn {display:inline-block;width:12px;height:12px;padding:0;margin:0;border:0;background:url(../video-wallpaper/play.png) no-repeat center/contain;vertical-align:-1px;cursor:pointer;transition:opacity .4s ease,visibility .4s ease,transform .2s ease;}
.kvw-btn:hover {transform:scale(1.2);}
[data-bs-theme=dark] .kvw-btn {filter:invert(1);}
/* 加载中：闪烁提示 */
.kvw-btn.is-loading {animation:kvw-blink 1s ease-in-out infinite;}
@keyframes kvw-blink {50% {opacity:.25;}}
/* 播放中：按钮消失（保留占位，文字不会跳动），结束后恢复 */
.kvw-btn.is-playing {opacity:0;visibility:hidden;pointer-events:none;}

/* ---------- 视频壁纸层 ----------
 * 固定在视口上（滚动不动），横向对齐文章卡片，并被裁剪到卡片可见区域；
 * z-index:-1 让它位于文字下方。left/width/height/clip-path 由 JS 实时计算。 */
.kvw-layer {position:fixed;top:0;left:0;width:0;height:100vh;z-index:-1;overflow:hidden;pointer-events:none;}
.kvw-layer video {display:block;width:100%;height:100%;object-fit:cover;opacity:0;filter:blur(40px);transform:scale(1.1);transition:opacity 2s ease,filter 2s ease,transform 2s ease;will-change:opacity,filter,transform;}
/* 入场：2 秒从很模糊到清晰，原样显示（不透明） */
.kvw-layer.is-in video {opacity:1;filter:blur(0);transform:scale(1);}
/* 退场：结束前 2 秒重新模糊并消失 */
.kvw-layer.is-in.is-out video {opacity:0;filter:blur(40px);transform:scale(1.1);}

/* 播放期间文章卡片背景透明，露出下面的视频（卡片底色由视频层自己补上） */
.kvw-card,.kvw-card .post-single {background-color:transparent !important;}

/* ---------- 导航栏：向上收缩消失 / 播放完慢慢下伸恢复 ---------- */
body.kvw-nav-anim .kizumi_header .navbar {transition:transform 1s cubic-bezier(.4,0,.2,1),opacity 1s ease !important;transform-origin:top center;}
body.kvw-nav-hidden .kizumi_header .navbar {transform:translateY(-130%) scaleY(.4) !important;opacity:0 !important;pointer-events:none !important;}