/* Hover Preview for Video Thumbnails */
.hpv-host{position:relative;}
.hpv-video{
	position:absolute;inset:0;width:100%;height:100%;
	object-fit:cover;background:#000;display:block;
	pointer-events:none;opacity:0;transition:opacity .18s ease;
	border-radius:inherit;
}
.hpv-video.is-ready{opacity:1;}

.hpv-spinner{
	position:absolute;top:8px;left:8px;width:16px;height:16px;
	border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;
	animation:hpv-spin .7s linear infinite;pointer-events:none;
}
@keyframes hpv-spin{to{transform:rotate(360deg)}}

.hpv-progress{
	position:absolute;left:0;right:0;bottom:0;height:3px;
	background:rgba(255,255,255,.25);pointer-events:none;
}
.hpv-progress>span{
	display:block;height:100%;width:0;background:#ff3d71;
	transition:width .12s linear;
}

.hpv-hint{
	position:absolute;left:50%;bottom:10px;transform:translateX(-50%);
	padding:4px 10px;border-radius:999px;font:600 11px/1.4 system-ui,sans-serif;
	color:#fff;background:rgba(0,0,0,.65);white-space:nowrap;pointer-events:none;
	opacity:0;transition:opacity .2s;
}
.hpv-hint.is-visible{opacity:1;}