/*
 * Block: sn/brand-promo
 * The in-content panel for the promoted operator: a lit stage, the brand
 * lock-up and the photograph. It is the loudest block in the set on purpose —
 * it is the one the manager asked to be impossible to miss — but it stays
 * INSIDE the content column rather than breaking full-bleed, so a guide can
 * carry two or three of them without the page turning into a billboard.
 *
 * It is also the theme's one MARCHING BORDER, which is the brief's animated
 * frame reserved for hero and featured elements. There is exactly one
 * featured element per page, so there is exactly one of these.
 *
 * PSEUDO-ELEMENT BUDGET:
 *   .x2f12fd36::before   pattern stack
 *   .x2f12fd36::after    the marching-ants frame
 */

.x2f12fd36 {
	position: relative;
	overflow: hidden;
	display: grid;
	gap: var(--sn-sp-8);
	margin: var(--sn-sp-16) 0;
	padding: var(--sn-sp-8) var(--sn-sp-6);
	background:
		radial-gradient(90% 120% at 12% -15%, rgba(57, 255, 20, .20), transparent 62%),
		radial-gradient(80% 110% at 92% 110%, rgba(30, 155, 255, .20), transparent 60%),
		var(--sn-lacquer-grad);
	border: var(--sn-rule-heavy) solid var(--sn-acc-1);
	border-radius: var(--sn-radius);
	box-shadow:
		inset 0 0 50px color-mix(in srgb, var(--sn-acc-1) 12%, transparent),
		0 0 28px color-mix(in srgb, var(--sn-acc-1) 45%, transparent),
		0 0 80px color-mix(in srgb, var(--sn-acc-3) 25%, transparent);
	color: var(--sn-text);
}

.x2f12fd36::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: var(--sn-grid); /* the house texture: halftone over scanlines */
}

/*
 * THE MARCHING FRAME. Four repeating-gradient strips rather than a conic
 * sweep — it works on any aspect ratio and costs one pseudo-element.
 *
 * INSET, not outset: the panel carries `overflow: hidden` for the photograph,
 * so a frame at a negative inset would simply be clipped away. It sits 6px
 * inside the solid border, which also reads better — two concentric frames,
 * the brief's sticker-ring idea in motion.
 */
.x2f12fd36::after {
	content: '';
	position: absolute;
	inset: 6px;
	z-index: 2;
	pointer-events: none;
	background:
		repeating-linear-gradient(90deg, var(--sn-acc-3) 0 12px, transparent 12px 24px) 0 0 / 100% 2px no-repeat,
		repeating-linear-gradient(90deg, var(--sn-acc-3) 0 12px, transparent 12px 24px) 0 100% / 100% 2px no-repeat,
		repeating-linear-gradient(0deg, var(--sn-acc-3) 0 12px, transparent 12px 24px) 0 0 / 2px 100% no-repeat,
		repeating-linear-gradient(0deg, var(--sn-acc-3) 0 12px, transparent 12px 24px) 100% 0 / 2px 100% no-repeat;
	animation: xdbc3fdc7 1.2s linear infinite;
}

.x15048cf9 {
	position: relative;
	z-index: 1;
	min-width: 0;
}

.xf77089b2 {
	margin: 0 0 var(--sn-sp-6);
	color: var(--sn-heading);
}

.x113ca372 {
	display: flex;
	align-items: center;
	gap: var(--sn-sp-4);
	margin-bottom: var(--sn-sp-6);
}

.x3ec5bf10 {
	flex: 0 0 auto;
	display: block;
	width: 64px;
	height: 64px;
	padding: var(--sn-sp-2);
	border-radius: var(--sn-radius-sm);
	background: var(--sn-surface-2);
	border: var(--sn-rule) solid var(--sn-acc-3);
	box-shadow: 0 0 16px color-mix(in srgb, var(--sn-acc-3) 45%, transparent);
}

.x3ec5bf10 img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/*
 * The wordmark is RGB-SPLIT with a slime glow, NOT a gradient fill. Two
 * reasons, and the second is the important one:
 *   - the action gradient appears in exactly two places on this skin (the
 *     reading-progress bar and the cta-banner slab), which is what keeps it
 *     meaning "this is the action"; a third use here would dilute it;
 *   - background-clip:text needs a `color` fallback or the text vanishes
 *     where the clip is unsupported, and this is the promoted brand's NAME —
 *     the one string on the page that must never fail to render.
 */
.x8ffc05e9 {
	color: var(--sn-heading);
	font-family: var(--sn-font-display);
	font-size: 2rem;
	font-weight: 600;
	line-height: 1.25;
	text-shadow: var(--sn-ts-3);
}

.xcb60adec {
	margin-bottom: var(--sn-sp-8);
	font-size: var(--sn-fs-sm);
	line-height: var(--sn-lh-body);
}

.xcb60adec > :first-child { margin-top: 0; }
.xcb60adec > :last-child { margin-bottom: 0; }

.x1877db25 {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sn-sp-4);
}

.x02f08361 {
	display: inline-flex;
	align-items: center;
	gap: var(--sn-sp-2);
}

.x02f08361 svg {
	width: 20px;
	height: 20px;
}

.x31b9ce4e {
	position: relative;
	z-index: 1;
	margin: 0;
	align-self: end;
}

.x31b9ce4e img {
	display: block;
	width: 100%;
	height: auto;
	/* No frame and no radius: the photo is expected to be a cut-out on a
	   transparent background, which a border would box in awkwardly. The
	   drop-shadow follows the subject's alpha instead — a neon BLOOM, because
	   there are no offset shadows on this skin. */
	filter:
		drop-shadow(0 0 18px color-mix(in srgb, var(--sn-acc-1) 45%, transparent))
		drop-shadow(0 0 50px color-mix(in srgb, var(--sn-acc-3) 30%, transparent));
}

@media (min-width: 768px) {
	.x2f12fd36 {
		padding: var(--sn-sp-12) var(--sn-sp-8);
	}

	.xd4180c75 {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
		align-items: center;
		gap: var(--sn-sp-8);
	}
}

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

	.x31b9ce4e img {
		filter: none;
	}
}