/* ---------- 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;
}
.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. */
	.mcdp-label-Who-We-Are.mcdp-label-Who-We-Are.mcdp-label-Who-We-Are {
		background-image: url(../../../img/we-are-backdrop-mobile.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: center;
		background-size: 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;
	}
}
/* 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;
}
