/*
 * The play mark on a video article's listing tile (inc/play-badge.php).
 *
 * A frosted disc with a white triangle, centred on the picture and sized as a
 * share of the tile (Armenpress's mark, ~60px on a full card). It must read on
 * a white sky and on a night rally alike, so the disc is a DARK tint of the
 * photograph behind it (backdrop blur + a translucent charcoal) with a hairline
 * light ring, and the triangle carries its own soft shadow. Never baked into
 * the image; never on the article's own lead (Fox prints that without the
 * filter this rides on).
 */

.thumbnail56 > a:has(> .rg-play),
.rg-bio__frame:has(> .rg-play) {
	position: relative;
	display: block;
}

.rg-play {
	--rg-play-size: clamp(36px, 24%, 84px);
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 3;
	width: var(--rg-play-size);
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgb(255 255 255 / 0.24);
	-webkit-backdrop-filter: blur(10px) saturate(140%);
	backdrop-filter: blur(10px) saturate(140%);
	box-shadow:
		inset 0 0 0 1px rgb(255 255 255 / 0.45),
		0 2px 14px rgb(12 10 8 / 0.28);
	pointer-events: none;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* No backdrop blur available: a denser tint carries the contrast alone. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.rg-play { background: rgb(40 38 36 / 0.45); }
}

.rg-play__icon {
	width: 48%;
	height: 48%;
	fill: #fbfaf7;
	filter: drop-shadow(0 1px 3px rgb(12 10 8 / 0.45));
}

a:hover > .rg-play,
a:focus-visible > .rg-play,
.rg-bio__tile:hover .rg-play,
.rg-bio__tile:focus-visible .rg-play {
	transform: translate(-50%, -50%) scale(1.08);
	background: rgb(255 255 255 / 0.34);
}

@media (prefers-reduced-motion: reduce) {
	.rg-play { transition: none; }
}

.rg-play__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}