/*
 * Erma — motion layer
 *
 * A non-destructive animation layer. Nothing here changes layout, colour or
 * content: it only adds motion to markup the theme already renders.
 *
 * Motion language borrowed from kyrylldmytrenko.com:
 *   - corner tick marks that draw in on focus
 *   - 1.025 image scale under focus
 *   - grayscale + fade for everything that is not focused
 *   - frosted-glass overlay that lifts into place
 *   - a variable-font "magnetic weight" that follows the cursor
 *
 * Paired with assets/js/erma-motion.js, which supplies the `.is-active` and
 * `.erma-group` hooks the CSS reacts to. All effects degrade to the plain
 * `:hover` / `:focus-visible` rules below when JavaScript is unavailable.
 */

:root {
	/* Easing and timing lifted from the source site's --ease. */
	--erma-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--erma-tick-size: 12px;
	--erma-tick-inset: 12px;
	--erma-tick-color: #fff;
	--erma-scale: 1.025;
	--erma-dim-opacity: 0.5;
	--erma-dim-filter: grayscale(1);
}

/* -------------------------------------------------------------------------
 * 1. Glyph splitting primitives (built by erma-motion.js)
 * ------------------------------------------------------------------------- */

/* Screen-reader copy of the text that was split into per-character spans. */
.erma-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* A word is an unbreakable inline-block so it never reflows mid-word. */
.erma-w {
	display: inline-block;
	white-space: nowrap;
}

/*
 * A character is its own inline box so its weight can be driven
 * independently. Kerning and ligatures cannot survive that, so they are
 * switched off to keep the split text looking like the unsplit original.
 */
.erma-c {
	display: inline-block;
	font-kerning: none;
	font-variant-ligatures: none;
	font-feature-settings: normal;
	letter-spacing: inherit;
	/* Never let the glyph run wrap between characters. */
	white-space: pre;
}

/* -------------------------------------------------------------------------
 * 2. Focus frame — corner ticks
 * ------------------------------------------------------------------------- */

/*
 * The theme's post featured image is already a full-bleed link around an
 * image, which makes it the natural "frame". Ticks are drawn with gradients on
 * the link's own pseudo-elements, so no markup change is required.
 */
.erma-frame {
	position: relative;
	/* Gives mix-blend-mode a backdrop to blend against. */
	isolation: isolate;
}

.erma-frame::before,
.erma-frame::after {
	content: "";
	position: absolute;
	inset: var(--erma-tick-inset);
	pointer-events: none;
	opacity: 0;
	transform: scale(1.02);
	mix-blend-mode: difference;
	transition:
		opacity 0.35s ease,
		transform 0.6s var(--erma-ease);
	background-repeat: no-repeat;
	background-image:
		linear-gradient(var(--erma-tick-color), var(--erma-tick-color)),
		linear-gradient(var(--erma-tick-color), var(--erma-tick-color)),
		linear-gradient(var(--erma-tick-color), var(--erma-tick-color)),
		linear-gradient(var(--erma-tick-color), var(--erma-tick-color));
	background-size:
		var(--erma-tick-size) 1px,
		1px var(--erma-tick-size),
		var(--erma-tick-size) 1px,
		1px var(--erma-tick-size);
}

/* Top pair of corners. */
.erma-frame::before {
	background-position:
		top left,
		top left,
		top right,
		top right;
}

/* Bottom pair of corners. */
.erma-frame::after {
	background-position:
		bottom left,
		bottom left,
		bottom right,
		bottom right;
}

/* -------------------------------------------------------------------------
 * 3. Image focus — scale, and dim everything that is not focused
 * ------------------------------------------------------------------------- */

.erma-frame img {
	display: block;
	transition:
		transform 1.4s var(--erma-ease),
		filter 0.6s ease,
		opacity 0.6s ease;
}

.erma-frame.is-active img,
.erma-frame:focus-visible img,
.erma-frame:focus-within img {
	transform: scale(var(--erma-scale));
}

.erma-frame.is-active::before,
.erma-frame.is-active::after,
.erma-frame:focus-visible::before,
.erma-frame:focus-visible::after,
.erma-frame:focus-within::before,
.erma-frame:focus-within::after {
	opacity: 1;
	transform: none;
}

/*
 * Dimming is scoped to the group the script marked (a columns row, or a post
 * template) so a focus never bleeds across unrelated parts of the page.
 */
@media (hover: hover) and (pointer: fine) {
	.erma-frame:hover img {
		transform: scale(var(--erma-scale));
	}

	.erma-frame:hover::before,
	.erma-frame:hover::after {
		opacity: 1;
		transform: none;
	}

	.erma-group.has-active .erma-frame:not(.is-active) img {
		filter: var(--erma-dim-filter);
		opacity: var(--erma-dim-opacity);
	}
}

/* -------------------------------------------------------------------------
 * 4. Link colour — the source fades link colour rather than snapping it
 * ------------------------------------------------------------------------- */

.erma-fx a,
.erma-fx {
	transition: color 0.2s ease;
}

/* -------------------------------------------------------------------------
 * 5. Reduced motion
 *
 * State is still communicated, it simply arrives without interpolating.
 * erma-motion.js also refuses to drive the cursor effect in this mode.
 * ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.erma-frame img,
	.erma-frame::before,
	.erma-frame::after,
	.erma-fx a,
	.erma-fx {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
 * 6. Small screens
 * ------------------------------------------------------------------------- */

@media (max-width: 600px) {
	:root {
		--erma-tick-inset: 8px;
		--erma-tick-size: 10px;
	}
}