/**
 * Layered header logo.
 *
 * Three layers on one 1400x200 canvas, bottom to top:
 *
 *   z-index 1   logo-strip.webp    artwork scrolling behind, clipped by logo-mask.webp
 *                                  to the DESIGNS letterforms
 *   z-index 2   logo-designs.webp  the bevelled edge of those letterforms, over the
 *                                  artwork — mostly transparent, so it is an edge
 *                                  treatment rather than a plate
 *   z-index 3   wordmark.svg       AETHYRDANCER, inline SVG text, baked by
 *                                  scripts/build_wordmark.py
 *
 * `logo.webp` is the original Photoshop mark and is NOT rendered anywhere. It survives as
 * the reference the live wordmark was dialled in against — the lettering lab can ghost it
 * over the composer at `cRef` — and nothing else.
 *
 * ALIGNMENT is by construction, not by nudging. Every layer was exported at the same
 * canvas size with no auto-crop, and every layer is stretched to the same box here — so
 * they cannot drift, and a re-export cannot break the registration. Verified in the DOM:
 * the stack, the wordmark, the DESIGNS layer and the animation window all measure the
 * same rectangle to the pixel.
 *
 * THE SEAMLESS LOOP is the fiddly part. Translating an element that carries a repeating
 * background only loops cleanly if the distance travelled is exactly one tile width;
 * translating by a percentage of the element gives a visible jump on every restart.
 * Instead the strip is sized to the artwork's own aspect ratio and a duplicate of it sits
 * immediately to the right via ::after, so travelling exactly -100% lands the copy where
 * the original began. Nothing to keep in sync with the rendered height.
 */

.aethyrdancer-logo-stack {
	position: relative;
	/* inline-block so the stack is exactly as wide as the mark; a block-level span
	   stretches to the anchor and drags the masked layer out of register with it. */
	display: inline-block;
	line-height: 0;
	isolation: isolate; /* keep the stack's z-indexes out of the header's context */
}

/*
 * The #masthead prefix is load-bearing: Astra sizes header images with a rule that
 * outranks a lone class selector, and without it the mark rendered at 74px tall stretched
 * to the container width instead of the 56px asked for here.
 */
/*
 * The DESIGNS layer.
 *
 * REGISTRATION IS BY CONSTRUCTION, exactly as the note at the top of this file describes
 * for the other two — same 2800x400 export, no auto-crop, stretched to the same box. A
 * first attempt trimmed it to its bounding box and positioned it against the masthead in
 * pixels, which threw away the one property that makes this lockup impossible to
 * misalign, and it could not scale on mobile because the header does not scale in pixels.
 *
 * It sits between the animation and the mark: over the artwork, under the wordmark.
 */
.aethyrdancer-logo-stack__designs {
	position: absolute;
	inset: 0;
	z-index: 2;
	background-image: url('../images/logo-designs.webp');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	pointer-events: none;
}

#masthead .aethyrdancer-logo-stack__top,
.aethyrdancer-logo-stack__top {
	position: relative;
	z-index: 3;
	display: block;
	height: 75px;
	width: auto;
	max-width: 100%;
}

/* The wordmark is inline SVG on the 1400x200 canvas; height drives the width. */
.aethyrdancer-logo-stack__top .aethyrdancer-wordmark {
	display: block;
	height: 100%;
	width: auto;
	overflow: visible;
}

/*
 * NEITHER FACE HAS A BOLD, SO THE BROWSER WAS DRAWING ONE.
 *
 * Astra sets `font-weight: 600` on `.site-title`, and the header lockup is nested inside
 * it, so every glyph in it inherited 600. Almendra Display and Voidthorn each ship a
 * single 400 weight — so the browser synthesised the bold, which for a display face built
 * out of thorns means smearing the outlines until the internal filigree closes up. The
 * mark came out fatter and flatter than it was ever dialled in as, and nothing in the SVG
 * said so, because the SVG is correct: the weight arrives by inheritance from a parent
 * three levels up that has nothing to do with the wordmark.
 *
 * Measured against the lettering lab with both renders frozen at the same gradient phase:
 * 13.8% of pixels differed by more than 60 with the synthetic bold, 0.1% without.
 *
 * `font-synthesis: none` is the part that keeps it fixed. Setting the weight back to 400
 * only cures today's cause; `font-synthesis` tells the browser never to invent a weight or
 * a slant for these elements whatever the cascade does, which is the honest instruction —
 * there is no bold cut, so there is no bold.
 */
.aethyrdancer-logo-stack,
.aethyrdancer-wordmark,
.aethyrdancer-wordmark text {
	font-weight: 400;
	font-synthesis: none;
}

/*
 * ONE FAMILY NAME, WHATEVER THE FACE.
 *
 * scripts/build_wordmark.py subsets whichever typeface the lab export names and always
 * writes it here under this name, so changing the wordmark's face is a re-export and a
 * re-run — never an edit to this file. It was previously declared as 'Voidthorn' from
 * 'Voidthorn-wordmark.woff2', which quietly made the face part of the stylesheet.
 */
@font-face {
	font-family: 'AethyrdancerWordmark';
	src: url('../fonts/wordmark-face.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: block; /* the mark is the brand: swapping in a fallback looks broken */
}

.aethyrdancer-logo-stack__anim {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;

	/* The animation-area alpha is what confines the movement to part of the mark. */
	-webkit-mask-image: url('../images/logo-mask.webp');
	mask-image: url('../images/logo-mask.webp');
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.aethyrdancer-logo-stack__strip,
.aethyrdancer-logo-stack__strip::before,
.aethyrdancer-logo-stack__strip::after {
	background-image: url('../images/logo-strip.webp');
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

.aethyrdancer-logo-stack__strip {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: auto;
	aspect-ratio: 5340 / 160; /* the strip's own proportions — see build_logo_assets.py */
	animation: aethyrdancer-logo-strip 40s linear infinite;
	will-change: transform;
}

/*
 * A copy on BOTH sides. One copy only works for one direction of travel — reversing it
 * opens a gap on the side that has no neighbour. With both, direction is just a matter of
 * which way the keyframes run.
 */
.aethyrdancer-logo-stack__strip::before,
.aethyrdancer-logo-stack__strip::after {
	content: '';
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
}

.aethyrdancer-logo-stack__strip::before {
	left: -100%;
}

.aethyrdancer-logo-stack__strip::after {
	left: 100%;
}

/* Travels right; the ::before copy is what fills in behind it. */
@keyframes aethyrdancer-logo-strip {
	from { transform: translateX(0); }
	to   { transform: translateX(100%); }
}

/*
 * Narrow viewports size the mark by WIDTH, not height.
 *
 * The canvas is 7:1, so a height-driven mark is seven times as wide — 54px tall is 378px
 * wide, which overflows a 375px phone and puts the whole document into horizontal scroll.
 * Below the breakpoint the width leads and the height follows.
 *
 * THE CAP IS ON THE STACK, NOT ON THE MARK.
 *
 * The first pass capped `__top` at 320px and made the stack `display: block` — the exact
 * arrangement the note at the top of this file warns against. `__anim` and `__designs` are
 * `inset: 0` on the STACK, so a block-level stack stretches to Astra's site-title anchor while
 * the wordmark stops at 320: the artwork window and the bevelled DESIGNS layer, which carry
 * the mark's colour and its edge, both rendered off register with the letterforms.
 *
 * The mobile mark never lost the treatment; the treatment stopped lining up with it.
 * Registration here is by construction, so the box has to be one box: the stack takes the cap
 * and stays `inline-block`, `__top` fills it, and all three layers scale down together.
 */
@media screen and (max-width: 768px) {
	.aethyrdancer-logo-stack {
		display: inline-block;
		width: 100%;
		max-width: 320px;
	}

	#masthead .aethyrdancer-logo-stack__top,
	.aethyrdancer-logo-stack__top {
		height: auto;
		width: 100%;
		max-width: 100%;
	}

	.aethyrdancer-logo-stack__top .aethyrdancer-wordmark {
		height: auto;
		width: 100%;
	}
}

/* Compact header state shrinks the whole stack, both layers together. */
#masthead.site-header.is-scrolled .aethyrdancer-logo-stack__top {
	height: 59px;
	transition: height 160ms ease;
}

/*
 * ...but not on a phone, where the mark is sized by width and 59px is not its height.
 *
 * The rule above outranks the mobile block on specificity, so on scroll it gave `__top` a 59px
 * box holding a ~46px mark, dropping the artwork and the bevel out of register vertically. The
 * compact state is a desktop affordance for a header with room to lose.
 */
@media screen and (max-width: 768px) {
	#masthead.site-header.is-scrolled .aethyrdancer-logo-stack__top {
		height: auto;
	}
}

/*
 * Motion is decoration here; the mark reads perfectly well standing still. Stopping the
 * animation leaves the first frame of the artwork showing through the window.
 */
@media (prefers-reduced-motion: reduce) {
	.aethyrdancer-logo-stack__strip {
		animation: none;
	}

	#masthead.site-header.is-scrolled .aethyrdancer-logo-stack__top {
		transition: none;
	}
}