/* === YREC wordmark ============================================
   The custom 2015 wordmark, recoloured per-letter via CSS mask-image.
   Source masks live in ../images/logo/logo-mask-{y,r,e,c}.png.
   Enqueued standalone (yrec-hub-wordmark) before theme.css; wp-login
   builds its own self-contained mono mask in login.css.
   ============================================================ */

.yh-wordmark {
	--wm-y: var(--yh-navy);
	--wm-r: var(--yh-navy);
	--wm-e: var(--yh-orange);
	--wm-c: var(--yh-navy);
	--wm-sub: var(--yh-navy);
	--wm-width: 96px;
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	text-decoration: none;
	color: inherit;
	line-height: 1;
}

.yh-wordmark__mark {
	position: relative;
	display: block;
	width: var(--wm-width);
	aspect-ratio: 617 / 217;
}

.yh-wordmark__letter {
	position: absolute;
	inset: 0;
	display: block;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}

.yh-wordmark__letter--y {
	background-color: var(--wm-y);
	-webkit-mask-image: url(../images/logo/logo-mask-y.png);
	mask-image: url(../images/logo/logo-mask-y.png);
}
.yh-wordmark__letter--r {
	background-color: var(--wm-r);
	-webkit-mask-image: url(../images/logo/logo-mask-r.png);
	mask-image: url(../images/logo/logo-mask-r.png);
}
.yh-wordmark__letter--e {
	background-color: var(--wm-e);
	-webkit-mask-image: url(../images/logo/logo-mask-e.png);
	mask-image: url(../images/logo/logo-mask-e.png);
}
.yh-wordmark__letter--c {
	background-color: var(--wm-c);
	-webkit-mask-image: url(../images/logo/logo-mask-c.png);
	mask-image: url(../images/logo/logo-mask-c.png);
}

.yh-wordmark__subtitle {
	font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
	font-weight: 400;
	font-size: calc(var(--wm-width) * 0.097);
	letter-spacing: 0.01em;
	color: var(--wm-sub);
	line-height: 1;
	white-space: nowrap;
	padding-left: calc(var(--wm-width) * 0.066);
	transform: scaleX(0.70);
	transform-origin: left top;
	display: block;
}

/* Variants */
.yh-wordmark--v1 {
	--wm-y: var(--yh-navy);
	--wm-r: var(--yh-navy);
	--wm-e: var(--yh-navy);
	--wm-c: var(--yh-navy);
	--wm-sub: var(--yh-navy);
}
.yh-wordmark--v2 {
	--wm-y: var(--yh-cream);
	--wm-r: var(--yh-cream);
	--wm-e: var(--yh-cream);
	--wm-c: var(--yh-cream);
	--wm-sub: rgba(246, 241, 232, 0.7);
}
.yh-wordmark--v3 {
	--wm-y: var(--yh-navy);
	--wm-r: var(--yh-navy);
	--wm-e: var(--yh-orange);
	--wm-c: var(--yh-navy);
	--wm-sub: var(--yh-navy);
}
.yh-wordmark--v4 {
	--wm-y: var(--yh-navy);
	--wm-r: var(--yh-orange);
	--wm-e: var(--yh-ink);
	--wm-c: var(--yh-navy);
	--wm-sub: var(--yh-ink);
}

/* Sizes */
.yh-wordmark--nav { --wm-width: 96px; }
.yh-wordmark--md  { --wm-width: 240px; }
.yh-wordmark--lg  { --wm-width: 480px; }

/* === Heritage intro =========================================
   One-time, once-per-session colour crossfade: the nav logo
   appears in the original 2015 brand colours (sampled from
   logo-original.png) then eases to the V3 navy + orange "e".

   The resting state is the FINAL logo, so JS-off / reduced-motion
   / CDN failure all render correct (no FOUC). Only background-color
   animates → zero layout shift.

   Two JS-driven phases:
     1. .is-intro-arming  — snap INSTANTLY to brand colours
                            (transition disabled so the snap is not animated)
     2. arming removed     — letters ease back to the resting final
                            colours via the armed transition.
   The brand colours are gated behind .is-intro-arming, so without JS
   the logo simply renders final. */
.yh-wordmark--intro {
	--wm-y-intro: #00AEEF; /* cyan  */
	--wm-r-intro: #9CCB3B; /* green */
	--wm-e-intro: #EE2D2F; /* red   */
	--wm-c-intro: #0067AC; /* blue  */
	--wm-intro-duration: 900ms;
	--wm-intro-ease: cubic-bezier(.4, 0, .2, 1);
}

/* Resting/return transition (animates brand → final when arming is removed). */
.yh-wordmark--intro .yh-wordmark__letter {
	transition: background-color var(--wm-intro-duration) var(--wm-intro-ease);
}

/* Phase 1: instant snap to brand colours (no animation on the way in). */
.yh-wordmark--intro.is-intro-arming .yh-wordmark__letter {
	transition: none;
}
.yh-wordmark--intro.is-intro-arming .yh-wordmark__letter--y { background-color: var(--wm-y-intro); }
.yh-wordmark--intro.is-intro-arming .yh-wordmark__letter--r { background-color: var(--wm-r-intro); }
.yh-wordmark--intro.is-intro-arming .yh-wordmark__letter--e { background-color: var(--wm-e-intro); }
.yh-wordmark--intro.is-intro-arming .yh-wordmark__letter--c { background-color: var(--wm-c-intro); }

@media (prefers-reduced-motion: reduce) {
	.yh-wordmark--intro .yh-wordmark__letter { transition: none; }
}