.pib-wrap {
	position: relative;
	display: inline-block;
	max-width: 100%;
	line-height: 0;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}

.pib-blur-img {
	display: block;
	line-height: 0;
}

.pib-blur-img img {
	display: block;
	max-width: 100%;
	height: auto;
	filter: blur(22px) saturate(1.1);
	transform: scale(1.06); /* ব্লার এজ লুকানোর জন্য সামান্য জুম */
	transition: filter 1s ease, transform 1s ease;
	pointer-events: none;
	user-select: none;
}

.pib-wrap.pib-unlocked .pib-blur-img img {
	filter: blur(0) saturate(1);
	transform: scale(1);
	pointer-events: auto;
	user-select: auto;
}

/* ---------- Overlay ---------- */
.pib-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	background: linear-gradient(135deg, rgba(20, 20, 30, 0.55), rgba(20, 20, 30, 0.35));
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	color: #fff;
	text-align: center;
	font-family: inherit;
	transition: opacity 0.6s ease, visibility 0.6s ease;
	opacity: 1;
	visibility: visible;
}

.pib-wrap.pib-unlocked .pib-overlay {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* ---------- Circular progress ring ---------- */
.pib-ring {
	--pib-progress: 0deg;
	position: relative;
	width: 78px;
	height: 78px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: conic-gradient(#ffd23f var(--pib-progress), rgba(255, 255, 255, 0.18) 0deg);
	transition: background 0.3s linear;
}

.pib-ring::before {
	content: "";
	position: absolute;
	inset: 6px;
	border-radius: 50%;
	background: rgba(20, 20, 30, 0.75);
	backdrop-filter: blur(4px);
}

.pib-ring-inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.pib-lock {
	font-size: 18px;
	margin-bottom: 2px;
	animation: pib-pulse 1.6s ease-in-out infinite;
}

.pib-countdown {
	font-size: 20px;
	font-weight: 800;
	letter-spacing: 0.5px;
	font-variant-numeric: tabular-nums;
}

.pib-label {
	font-size: 12.5px;
	font-weight: 500;
	color: #f1f1f1;
	opacity: 0.92;
	max-width: 200px;
	line-height: 1.4;
}

.pib-label small {
	display: block;
	font-size: 11px;
	opacity: 0.7;
	margin-top: 2px;
}

/* idle state: আগে থেকে শুরু হয়নি, ভিউপোর্টে আসার অপেক্ষায় */
.pib-wrap:not(.pib-active):not(.pib-unlocked) .pib-ring {
	background: conic-gradient(rgba(255, 255, 255, 0.18) 0deg, rgba(255, 255, 255, 0.18) 360deg);
}
.pib-wrap:not(.pib-active):not(.pib-unlocked) .pib-countdown {
	opacity: 0.6;
}

@keyframes pib-pulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.15); opacity: 0.8; }
}

/* unlock flash effect */
@keyframes pib-flash {
	0% { box-shadow: 0 0 0 0 rgba(255, 210, 63, 0.5); }
	100% { box-shadow: 0 0 0 30px rgba(255, 210, 63, 0); }
}

.pib-wrap.pib-unlocked {
	animation: pib-flash 0.8s ease-out;
}