/*
 * The "Ad" block style (divb-hq#9, docs/SPEC-category-ads.md §3.4).
 *
 * Rescued from the `extended_profiles` plugin, whose stylesheet was the only home of the
 * promo the live tag archive still carries. The rules are the old ones; what changed:
 *
 * - `.is-style-mf-ad` joins `.mf-ad` as the frame's selector, so a promo can be started
 *   from the editor's Styles panel. The old class names stay the selectors, so the live
 *   markup moves into a snippet unchanged.
 * - The keyframe is `mf-ad-glow` instead of `glow-pulse`. A keyframe name is global, and a
 *   generic one is a collision waiting for the next theme.
 * - A reader who asked for less motion gets the glow without the pulse (at the bottom).
 *
 * Loaded only on a page that renders a promo (Mf_Snippet_Ad_Style::enqueue_when_used()),
 * never for every group on the site.
 */

.mf-ad,
.is-style-mf-ad {
	position: relative;
	border-radius: 10px;
	transition: box-shadow 0.4s;
}

.mf-ad:hover,
.is-style-mf-ad:hover {
	animation: mf-ad-glow 4s ease-in-out infinite;
}

.mf-ad__bg {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, #d9472b 0%, #b33216 60%, #5b2a47 100%);
}

.mf-ad__label {
	display: inline-block;
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 3px 7px;
	background: rgba(0, 0, 0, 0.25);
	color: #fff;
	opacity: 0.8;
	border-radius: 3px;
	font-family: Inter, system-ui, sans-serif;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

.mf-ad a,
.is-style-mf-ad a {
	text-decoration: none;
}

@keyframes mf-ad-glow {

	0%,
	100% {
		box-shadow: rgba(255, 163, 71, 0.5) 0 0 8px, rgba(232, 73, 15, 0.3) 0 0 16px;
	}

	50% {
		box-shadow:
			rgba(255, 163, 71, 0.8) 0 0 14px,
			rgba(232, 73, 15, 0.5) 0 0 28px,
			rgba(232, 73, 15, 0.2) 0 0 40px;
	}
}

/* A reader who asked for less motion keeps the glow, without the pulse. */
@media (prefers-reduced-motion: reduce) {

	.mf-ad:hover,
	.is-style-mf-ad:hover {
		animation: none;
		box-shadow: rgba(255, 163, 71, 0.5) 0 0 8px, rgba(232, 73, 15, 0.3) 0 0 16px;
	}
}