/* ---------- Emblem motion: one-time contained scale-in, then Figma's gentle bounce ---------- */
@keyframes mcdp-emblem-ring-op {
	0% {
		animation-timing-function: ease-out;
		opacity: 0;
	}
	8%,
	100% {
		opacity: 1;
	}
}
@keyframes mcdp-hero-title-in {
	from {
		opacity: 0;
		clip-path: inset(100% 0 0);
		transform: translate3d(0, 22px, 0);
	}
	to {
		opacity: 1;
		clip-path: inset(0 0 0);
		transform: translate3d(0, 0, 0);
	}
}
@keyframes mcdp-hero-rule-in {
	from {
		opacity: 0;
		transform: scale3d(0, 1, 1);
	}
	to {
		opacity: 1;
		transform: scale3d(1, 1, 1);
	}
}
@keyframes mcdp-map-hq-pulse {
	0%, 60%, 100% {
		opacity: 1;
		transform: scale(1);
	}
	30% {
		opacity: .7;
		transform: scale(1.15);
	}
}
@keyframes mcdp-emblem-ring-float {
	0%, 100% {
		translate: 0px 0px;
	}
	20.833% {
		animation-timing-function: ease-in-out;
		translate: 0px 0px;
	}
	33.333% {
		animation-timing-function: ease-in-out;
		translate: 0 calc(-1 * var(--mcdp-motion-ring-drift));
	}
	45.833% {
		animation-timing-function: ease-in-out;
		translate: 0 var(--mcdp-motion-ring-drift);
	}
	58.333% {
		animation-timing-function: ease-in-out;
		translate: 0 calc(-1 * var(--mcdp-motion-ring-drift));
	}
	70.833% {
		animation-timing-function: ease-in-out;
		translate: 0 var(--mcdp-motion-ring-drift);
	}
	83.333% {
		translate: 0px 0px;
	}
}
@keyframes mcdp-emblem-ring-sc {
	0% {
		animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
		scale: 0 0;
	}
	25%,
	100% {
		scale: 1 1;
	}
}
@keyframes mcdp-emblem-vec-op {
	0% {
		opacity: 0;
	}
	3% {
		animation-timing-function: ease-out;
		opacity: 0;
	}
	11%,
	100% {
		opacity: 1;
	}
}
@keyframes mcdp-emblem-vec-float {
	0%, 100% {
		translate: 0px 0px;
	}
	23.333% {
		animation-timing-function: ease-in-out;
		translate: 0px 0px;
	}
	35.833% {
		animation-timing-function: ease-in-out;
		translate: 0 calc(-1 * var(--mcdp-motion-vector-drift));
	}
	48.333% {
		animation-timing-function: ease-in-out;
		translate: 0 var(--mcdp-motion-vector-drift);
	}
	60.833% {
		animation-timing-function: ease-in-out;
		translate: 0 calc(-1 * var(--mcdp-motion-vector-drift));
	}
	73.333% {
		animation-timing-function: ease-in-out;
		translate: 0 var(--mcdp-motion-vector-drift);
	}
	83.333% {
		translate: 0px 0px;
	}
}
@keyframes mcdp-emblem-vec-sc {
	0% {
		scale: 0 0;
	}
	3% {
		animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
		scale: 0 0;
	}
	28%,
	100% {
		scale: 1 1;
	}
}
.mcdp-emblem-layer {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
	/* The layer is inlined as a direct child of constrained-layout groups (e.g.
	   Who We Are). Core's content-width max-width and auto margins would
	   otherwise shrink it to a centered column and hard-crop the artwork. */
	max-width: none !important;
	margin: 0 !important;
}
.mcdp-emblem-layer > svg {
	display: block;
	width: 100%;
	height: 100%;
}
.mcdp-emblem-ring {
	transform-origin: 50.6% 51.9%;
	animation: mcdp-emblem-ring-op 10s linear 1 both,
		mcdp-emblem-ring-sc 10s linear 1 both,
		mcdp-emblem-ring-float var(--mcdp-motion-ambient) linear infinite;
}
.mcdp-emblem-vectors {
	animation: mcdp-emblem-vec-op 10s linear 1 both,
		mcdp-emblem-vec-sc 10s linear 1 both,
		mcdp-emblem-vec-float var(--mcdp-motion-ambient) linear infinite;
}
.mcdp-emblem-vectors {
	transform-origin: 47.9% 71.1%;
}
.mcdp-hero-home > .mcdp-emblem-vectors > svg {
	/* The Figma-exported vector group is taller than its 1920x1080 root
	 * viewport. Let that complete group render, then fit it inside the hero;
	 * otherwise the root SVG permanently cuts off the mark before the outer
	 * animation layer can scale or position it. */
	overflow: visible;
}
@media (max-width: 767px) {
	.mcdp-hero-home > .mcdp-emblem-vectors > svg,
	.mcdp-hero-home:not(.mcdp-emblem-enhanced)::after {
		filter: brightness(.25);
	}
	.mcdp-hero-home > .mcdp-emblem-vectors > svg path[opacity] {
		opacity: .85;
	}
}
.mcdp-emblem-weare {
	transform-origin: 71.6% 52%;
}
@media (max-width: 767px) {
	/* Keep offscreen interior artwork static on phones. The homepage ring and
	   vectors remain animated so its hero retains the same authored entrance
	   and float motion as larger viewports. */
	/* WebKit can spend hundreds of milliseconds rasterizing the 1920px SVG's
	   large Gaussian blur when this offscreen section enters the viewport.
	   Use the pre-rasterized watermark on phones so scrolling never blocks
	   while the Who We Are artwork is first painted. The webp holds only the
	   watermark, so the three design gradients from the base rule must stay
	   in the stack. The class is repeated to outrank .mcdp-emblem-enhanced
	   (its gradient restore) when a desktop-width load shrinks to phone width
	   after the SVG layer has been inlined.
	   The phone webp is a square crop around the whole emblem (the desktop
	   1920x1080 crop, covered onto a tall phone section, showed only a sliver
	   of it), sized and placed behind the stats as on desktop. */
	.mcdp-label-Who-We-Are.mcdp-label-Who-We-Are.mcdp-label-Who-We-Are {
		background-image: url(../../../img/we-are-backdrop-mobile-emblem.webp),
			linear-gradient(90deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
			linear-gradient(180deg, rgba(12, 30, 44, 0.2) 0%, rgba(7, 19, 29, 0.2) 100%),
			linear-gradient(180deg, rgba(22, 36, 47, 0.8) 0%, rgb(42, 79, 91) 50%, rgb(21, 31, 42) 100%) !important;
		background-position: 62% 50%, center, center, center;
		background-size: 160% auto, cover, cover, cover;
		background-repeat: no-repeat;
	}
	/* An inlined We-Are SVG (desktop-width load later shrunk to phone width)
	   would otherwise keep its 10s animation loops and Gaussian-blur
	   rasterization running behind the pre-rasterized layer. */
	.mcdp-emblem-weare {
		display: none;
	}
}
@media (min-width: 600px) and (max-width: 767px) {
	/* Tablet widths are short enough that the phone size covered the heading
	   and copy; keep the emblem to the right, behind the stats, as on desktop. */
	.mcdp-label-Who-We-Are.mcdp-label-Who-We-Are.mcdp-label-Who-We-Are {
		background-position: 100% 60%, center, center, center;
		background-size: 75% auto, cover, cover, cover;
	}
}
/* the cover's background span is z-index:1 in WP core — sit the emblem above it,
   and lift the scrim pseudo to keep it above the emblem */
.mcdp-hero-home > .mcdp-emblem-layer,
.mcdp-hero-home::after {
	z-index: 1;
}
.mcdp-hero-home > .wp-block-cover__inner-container {
	position: relative;
	z-index: 2 !important;
}
/* once inlined, drop the static background watermarks */
.mcdp-hero-home.mcdp-emblem-enhanced::after {
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
		linear-gradient(180deg, rgba(12, 30, 44, 0.2) 0%, rgba(7, 19, 29, 0.2) 100%);
}
body:not(.home) .wp-block-post-content > .mcdp-section:first-child.mcdp-emblem-enhanced {
	background-image: linear-gradient(180deg, rgba(22, 36, 47, 0.95) 0%, #2a4f5b 52%, var(--wp--preset--color--navy, #151f2a) 100%) !important;
	background-position: center !important;
	background-size: cover !important;
	background-repeat: no-repeat !important;
	position: relative;
	overflow: hidden;
}
.mcdp-label-Who-We-Are.mcdp-emblem-enhanced {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
		linear-gradient(180deg, rgba(12, 30, 44, 0.2) 0%, rgba(7, 19, 29, 0.2) 100%),
		linear-gradient(180deg, rgba(22, 36, 47, 0.8) 0%, rgb(42, 79, 91) 50%, rgb(21, 31, 42) 100%) !important;
	position: relative;
}
/* keep section content painting above the emblem (grid sections only) */
body:not(.home) .wp-block-post-content > .mcdp-section:first-child.mcdp-emblem-enhanced > *:not(.mcdp-emblem-layer),
.mcdp-label-Who-We-Are.mcdp-emblem-enhanced > *:not(.mcdp-emblem-layer) {
	position: relative;
}
/* The hero layers render with the page (inc/assets.php), so emblem.js can
   no longer skip them for reduced motion: show the static hero instead, as
   before, including its dimmed phone treatment. */
@media (prefers-reduced-motion: reduce) {
	.mcdp-hero-home > .mcdp-emblem-ring,
	.mcdp-hero-home > .mcdp-emblem-vectors {
		display: none;
	}
	.mcdp-hero-home.mcdp-emblem-enhanced::after {
		background: linear-gradient(90deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
			linear-gradient(180deg, rgba(12, 30, 44, 0.35) 0%, rgba(7, 19, 29, 0.35) 100%),
			url(../../../img/hero-backdrop.svg) center/contain no-repeat;
	}
}
@media (prefers-reduced-motion: reduce) and (max-width: 767px) {
	.mcdp-hero-home.mcdp-emblem-enhanced::after {
		filter: brightness(.25);
	}
}