/* ==========================================================================
   MWI — dancing couple mark under the logo
   --------------------------------------------------------------------------
   Six bride-and-groom silhouettes, cross-faded into one slow dance, sitting
   directly beneath the logo. Desktop only, by the client's decision.

   Where the frames come from
   The client uploaded one 2000x2000 sheet holding six poses on a white ground.
   Each pose was located by pixel projection rather than by cutting the sheet
   into equal thirds — the twirl in the top-right overhangs its cell and an
   even split would have clipped it. Every pose was then normalised to the same
   150px height on a 200x200 canvas with a COMMON BASELINE, which is what stops
   the couple bobbing up and down as the frames change.
   The white ground is gone by construction: the artwork is pure black on pure
   white, so luminance was copied straight into the alpha channel. No cut-out
   guesswork, and the anti-aliased edges survive intact.

   Why masks and not <img>
   Each frame is applied as a mask over a solid colour, so the couple's colour
   is a CSS value. Restyling it — gold, espresso, anything — never needs the
   PNGs regenerated. Same technique the logo sheen already uses on this site.

   Fitting it in
   The gap between the logo's bottom edge and the header's own bottom edge
   measures 23px, so the box is 23px and the silhouette fills 75% of it (the
   canvas keeps a baseline margin), landing about 1.5px clear of the gold rule.
   `.mwi-logo-wrap` is already position:relative with overflow:visible, so this
   mounts inside it without touching a single Elementor setting.

   Cost
   Only opacity and transform are animated — nothing here can trigger layout or
   paint. The whole mark is 23x23px.
   ========================================================================== */

.mwi-couple {
	display: none;
}

@media (min-width: 1025px) {

	.mwi-couple {
		display: block;
		position: absolute;
		/* Lifted 5px into the logo's own lower whitespace so the mark can be
		   bigger than the 23px gap without hanging past the gold rule. The ink
		   still starts level with the logo's baseline: the silhouette occupies
		   75% of the box (the canvas keeps a 7% floor margin), so 28px of box
		   puts 21px of couple between y=76 and y=97, and the rule sits at 98. */
		top: calc(100% - 5px);
		left: 50%;
		width: 28px;
		height: 28px;
		z-index: 2;
		pointer-events: none;
		transform-origin: 50% 100%;
		/* The sway restates translateX(-50%) because an animated transform
		   replaces the static one outright. */
		animation: mwiCoupleSway 12s ease-in-out infinite;
	}

	.mwi-couple i {
		position: absolute;
		inset: 0;
		opacity: 0;
		/* Charcoal, matching the nav labels — client 2026-08-17. Gold read too
		   faint at this size against the ivory band. */
		background-color: #242322;
		-webkit-mask-repeat: no-repeat;
		        mask-repeat: no-repeat;
		-webkit-mask-position: center bottom;
		        mask-position: center bottom;
		-webkit-mask-size: contain;
		        mask-size: contain;
		transform-origin: 50% 100%;
		animation: mwiCoupleStep 9s cubic-bezier(.45, 0, .55, 1) infinite;
		will-change: opacity, transform;
	}

	.mwi-couple i:nth-child(1) { -webkit-mask-image: url(/wp-content/mu-plugins/mwi-assets/couple/mwi-couple-1.png); mask-image: url(/wp-content/mu-plugins/mwi-assets/couple/mwi-couple-1.png); animation-delay: 0s; }
	.mwi-couple i:nth-child(2) { -webkit-mask-image: url(/wp-content/mu-plugins/mwi-assets/couple/mwi-couple-2.png); mask-image: url(/wp-content/mu-plugins/mwi-assets/couple/mwi-couple-2.png); animation-delay: -7.5s; }
	.mwi-couple i:nth-child(3) { -webkit-mask-image: url(/wp-content/mu-plugins/mwi-assets/couple/mwi-couple-3.png); mask-image: url(/wp-content/mu-plugins/mwi-assets/couple/mwi-couple-3.png); animation-delay: -6s; }
	.mwi-couple i:nth-child(4) { -webkit-mask-image: url(/wp-content/mu-plugins/mwi-assets/couple/mwi-couple-4.png); mask-image: url(/wp-content/mu-plugins/mwi-assets/couple/mwi-couple-4.png); animation-delay: -4.5s; }
	.mwi-couple i:nth-child(5) { -webkit-mask-image: url(/wp-content/mu-plugins/mwi-assets/couple/mwi-couple-5.png); mask-image: url(/wp-content/mu-plugins/mwi-assets/couple/mwi-couple-5.png); animation-delay: -3s; }
	.mwi-couple i:nth-child(6) { -webkit-mask-image: url(/wp-content/mu-plugins/mwi-assets/couple/mwi-couple-6.png); mask-image: url(/wp-content/mu-plugins/mwi-assets/couple/mwi-couple-6.png); animation-delay: -1.5s; }

	/* Nine seconds over six frames is 1.5s a pose. The visible window runs to
	   22%, i.e. 1.98s, so consecutive poses overlap by about half a second —
	   that overlap is what makes it read as one continuous movement rather than
	   six pictures taking turns. The small lift and scale on the way out give
	   the change a direction. */
	@keyframes mwiCoupleStep {
		0%   { opacity: 0; transform: translateY(1.5px) scale(.94); }
		5%   { opacity: 1; transform: translateY(0) scale(1); }
		14%  { opacity: 1; transform: translateY(0) scale(1); }
		22%  { opacity: 0; transform: translateY(-1.5px) scale(1.05); }
		100% { opacity: 0; transform: translateY(1.5px) scale(.94); }
	}

	/* A slow lean, pivoting on the floor rather than the middle, so the pair
	   look like they are turning rather than tipping over. */
	@keyframes mwiCoupleSway {
		0%, 100% { transform: translateX(-50%) rotate(-1.3deg); }
		50%      { transform: translateX(-50%) rotate(1.3deg); }
	}
}

/* Motion refused: keep the mark, drop the dance. The twirl is the frame that
   reads best standing still. */
@media (min-width: 1025px) and (prefers-reduced-motion: reduce) {

	.mwi-couple {
		animation: none !important;
		transform: translateX(-50%);
	}

	.mwi-couple i {
		animation: none !important;
		opacity: 0;
	}

	.mwi-couple i:nth-child(3) {
		opacity: 1;
	}
}