/* ── CAHOPE Play Button ───────────────────────────────────────────────── */

:root {
	--cpb-size:       72px;
	--cpb-icon:       22px;
	--cpb-bg:         #bce8f8;
	--cpb-icon-color: #ffffff;
	--cpb-ring:       #bce8f8;
	--cpb-ring-scale: 1.6;
	--cpb-dur:        2s;
}

.cpb-outer {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Wrapper — establishes the stacking context */
.cpb-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width:  var(--cpb-size);
	height: var(--cpb-size);
}

/* ── Play Button ──────────────────────────────────────────────────────── */

.cpb-btn {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width:  var(--cpb-size);
	height: var(--cpb-size);
	border-radius: 50%;
	background: var(--cpb-bg);
	border: none;
	cursor: pointer;
	text-decoration: none;
	transition: transform 0.2s ease, background 0.2s ease;
}

.cpb-btn:hover {
	transform: scale(1.08);
}

.cpb-btn:focus-visible {
	outline: 3px solid var(--cpb-bg);
	outline-offset: 4px;
}

.cpb-icon {
	width:  var(--cpb-icon);
	height: var(--cpb-icon);
	fill: var(--cpb-icon-color);
	/* Nudge the default triangle visually centred */
	transform: translateX(2px);
}

.cpb-icon--custom {
	width:  var(--cpb-svg-size, 28px);
	height: var(--cpb-svg-size, 28px);
	transform: none;
	object-fit: contain;
}

/* ── Animated Ring ────────────────────────────────────────────────────── */

.cpb-ring {
	position: absolute;
	z-index: 1;            /* behind the button */
	top:  50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.6);
	width:  var(--cpb-size);
	height: var(--cpb-size);
	border-radius: 50%;
	background: var(--cpb-ring);
	opacity: 0;
	animation: cpb-pulse var(--cpb-dur) ease-out infinite;
}

@keyframes cpb-pulse {
	0% {
		transform: translate(-50%, -50%) scale(0.6);
		opacity: 0;
	}
	40% {
		opacity: 0.55;
	}
	100% {
		transform: translate(-50%, -50%) scale(var(--cpb-ring-scale));
		opacity: 0;
	}
}

/* ── Reduced Motion ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.cpb-ring { animation: none; }
}