/**
 * Character contact shadow — design-system.md §10 exception (2026-08-06).
 * Soft elliptical ground contact under Shturko/Churuli/Umko/Menko renders.
 * Deliberately distinct from card/button UI shadows.
 */

:root {
	--shturko-character-contact-shadow: radial-gradient(
		ellipse 58% 16% at 50% 92%,
		rgba(43, 49, 43, 0.34) 0%,
		rgba(43, 49, 43, 0.16) 38%,
		transparent 72%
	);
}

.shturko-character,
.ng-mission-host,
.ng-mission-cameo,
.kd-card__mascot {
	background-image: var(--shturko-character-contact-shadow) !important;
	background-repeat: no-repeat !important;
	background-size: 100% 100% !important;
	background-color: transparent;
}

/* Wrapper form when markup can wrap the <img> */
.shturko-character {
	position: relative;
	display: inline-block;
	line-height: 0;
}

.shturko-character > img {
	position: relative;
	z-index: 1;
	display: block;
	max-width: 100%;
	height: auto;
	background: none;
}

.shturko-character::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 1%;
	width: 64%;
	height: 10%;
	transform: translateX(-50%);
	background: radial-gradient(
		ellipse at center,
		rgba(43, 49, 43, 0.36) 0%,
		rgba(43, 49, 43, 0.14) 42%,
		transparent 72%
	);
	pointer-events: none;
	z-index: 0;
}

/* When using ::after wrapper, skip the img background gradient */
.shturko-character > img.ng-mission-host,
.shturko-character > img.ng-mission-cameo,
.shturko-character > img.kd-card__mascot,
.shturko-character > img.homepage__about-cast-img {
	background-image: none;
}

/* Kitchen articulation card: keep mascot inside rounded clip so ears are not cut */
.kd-card__face .kd-card__mascot {
	right: 18px !important;
	bottom: 18px !important;
	width: clamp(58px, 17vw, 76px) !important;
	max-width: 28% !important;
	object-fit: contain;
	object-position: center bottom;
	background-image: none !important;
}

/* About cast: clustered group (owl on top) — keep compact, not full-bleed tall */
.homepage__about-cast-img {
	max-width: min(92vw, 920px) !important;
	/* Contact shadows are baked into the group render; skip CSS ellipse overlay */
	background-image: none !important;
	filter: none;
}