/*
 * Header logo (template-parts/header/brand.php).
 * Icon and wordmark share one height and baseline; their widths come from the images' own
 * proportions (744×858 icon canvas, 1518×858 wordmark), so nothing is stretched.
 * Sizes are reserved up front (width/height attributes + height here) → no layout shift.
 *
 * The size (--mx-brand-h) is owned by header.css, which loads after this file.
 */
.mx-brand {
	display: inline-flex;
	align-items: center;
	gap: calc(var(--mx-brand-h) * 0.22);
	height: var(--mx-brand-h);
	line-height: 0;
	text-decoration: none;
}

.mx-brand__icon {
	position: relative;
	display: block;
	height: var(--mx-brand-h);
	aspect-ratio: 744 / 858;
	flex: none;
}
.mx-brand__icon img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
}
.mx-brand__word {
	display: block;
	height: var(--mx-brand-h);
	width: auto;
	aspect-ratio: 1518 / 858;
	max-width: none;
	flex: none;
}

/* Calm (no JS, Elementor editor, reduced motion): the full icon only */
.mx-brand__layer { visibility: hidden; }

/* Live: brand.js takes over and assembles the layers once */
.mx-brand.is-live .mx-brand__full { visibility: hidden; }
.mx-brand.is-live .mx-brand__layer { visibility: visible; }

/* While the motion layer is expected (html.mx-motion is set in <head> only on the live site
 * without reduced motion) hide the icon until brand.js starts, so the full icon doesn't flash
 * before the pieces fly in. Failsafe: if brand.js never takes over, the full icon appears
 * after 2.5s anyway. */
.mx-motion .mx-brand:not(.is-live) .mx-brand__full {
	visibility: hidden;
	animation: mx-brand-failsafe 0s linear 2.5s forwards;
}
@keyframes mx-brand-failsafe { to { visibility: visible; } }

/* One-time gold sheen on the drop, masked by the drop image (added by brand.js) */
.mx-brand__sheen {
	position: absolute;
	inset: 0;
	pointer-events: none;
	-webkit-mask-image: var(--mask);
	mask-image: var(--mask);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	background: linear-gradient(105deg, transparent 38%, rgba(255, 240, 200, 0.9) 50%, transparent 62%) no-repeat;
	background-size: 260% 100%;
	background-position: calc(100% - var(--sheen, 0) * 100%) 0;
	mix-blend-mode: screen;
	opacity: 0;
}