/* ==========================================================================
   Animated wordmark: WVD.  →  WOUTER VAN DUIN.
   Hover (or keyboard focus) expands it. On touch screens it stays WVD.
   ========================================================================== */

.wvd-wordmark {
	--wm-speed: .6s;
	position: relative;
	display: inline-block;
	padding-bottom: .24em;
	color: var(--fg);
	font-size: clamp(1.7rem, 2.3vw, 2.25rem);
	font-weight: 900;
	line-height: .8;
	letter-spacing: -.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* The gradient line under the logo, growing along with it. */
.wvd-wordmark::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: .13em;
	background: var(--grad);
	background-size: 300% 100%;
	animation: wvd-flow var(--grad-speed) linear infinite;
}

.wm { display: inline-flex; align-items: flex-end; }

/* The three letters that are always visible. */
.wm__k { display: inline-block; }

/* W and V touch at the top, like the logo. */
.wm__k--v { margin-left: -.1em; transition: margin-left var(--wm-speed) var(--ease); }

/* The hidden parts: 0 wide when closed, full width on hover. */
.wm__x {
	display: inline-grid;
	grid-template-columns: 0fr;
	transition: grid-template-columns var(--wm-speed) var(--ease);
}
.wm__xi {
	display: inline-flex;
	min-width: 0;
	overflow: hidden;
	/* Room so tall letters aren't clipped. */
	padding-block: .2em;
	margin-block: -.2em;
}

.wm__l {
	display: inline-block;
	opacity: 0;
	transform: translateY(.55em) rotate(8deg);
	transition: opacity .25s ease, transform .5s var(--ease);
	transition-delay: calc(var(--i) * 22ms);
}
.wm__sp { display: inline-block; width: .28em; }

.wm__dot { display: inline-block; transition: transform var(--wm-speed) var(--ease); }

/* ---------- Open state ---------- */
.wvd-wordmark:hover .wm__x,
.wvd-wordmark:focus-visible .wm__x,
.wvd-wordmark.is-open .wm__x { grid-template-columns: 1fr; }

.wvd-wordmark:hover .wm__k--v,
.wvd-wordmark:focus-visible .wm__k--v,
.wvd-wordmark.is-open .wm__k--v { margin-left: 0; }

.wvd-wordmark:hover .wm__l,
.wvd-wordmark:focus-visible .wm__l,
.wvd-wordmark.is-open .wm__l { opacity: 1; transform: none; }

.wvd-wordmark:hover .wm__dot,
.wvd-wordmark:focus-visible .wm__dot,
.wvd-wordmark.is-open .wm__dot { transform: scale(1.25); color: var(--a3); }

@media (max-width: 760px) {
	.wvd-wordmark { font-size: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
	.wm__l { transform: none; }
}