/**
 * Component: Logo (dark-mode inversion + hover shimmer)
 * Usage: applies automatically to .site-branding__logo /
 * .custom-logo-link img and .site-branding__link (see header.php).
 * The shimmer's gradient sweep is masked to the logo PNG's alpha
 * channel, so it only plays across the hand-drawn letterforms
 * themselves, not the transparent space around them.
 */

/*
 * The logo is a flat black raster PNG — it can't respond to the
 * --color-ink custom property the way real text does, so without
 * this it stays black-on-dark-background in dark mode and becomes
 * nearly illegible. invert(1) on a pure black-on-transparent image
 * turns the ink white, matching how every other dark/light color
 * pair in this theme flips.
 */
@media (prefers-color-scheme: dark) {
	.site-branding__logo,
	.custom-logo-link img {
		filter: invert(1);
	}
}

.site-branding__link {
	position: relative;
	display: inline-block;
}

/*
 * mix-blend-mode: screen (not a plain opaque overlay) is what makes
 * this read as a light streak glinting off the dark ink rather than a
 * solid block of color painted over it — screen only ever lightens
 * what's underneath, and does nothing at all where the gradient is
 * transparent, so the letterforms show through untouched everywhere
 * except the brief moment the highlight passes over them.
 */
.site-branding__link::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	mix-blend-mode: screen;
	background-image: linear-gradient(
		110deg,
		transparent 40%,
		rgba(255, 255, 255, 0.25) 48%,
		rgba(255, 255, 255, 0.4) 50%,
		rgba(255, 255, 255, 0.25) 52%,
		transparent 60%
	);
	background-size: 250% 100%;
	background-position: 150% 0;
	background-repeat: no-repeat;
	-webkit-mask-image: url('../../images/logo.png');
	mask-image: url('../../images/logo.png');
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	/* Slow, gentle glint rather than a quick flash — 700ms read as an
	   abrupt blink; 1600ms gives the eye time to register it as light
	   moving across the ink instead of a state change. */
	transition: background-position 1600ms ease;
}

.site-branding__link:hover::after,
.site-branding__link:focus-visible::after {
	background-position: -150% 0;
}

@media (prefers-reduced-motion: reduce) {
	.site-branding__link::after {
		transition: none;
	}
}