Blur image card

---
/**
 * BlurImageCard — a card whose colour field is its own image, blurred past
 * recognition, and which turns over on a horizontal 3D flip to show its
 * details on the back.
 *
 * One self-contained file. No imports, no global stylesheet, no npm packages,
 * no webfonts, no bundled images and no network requests of its own: drop it
 * into any Astro project and render it. The only image it ever loads is the
 * one you pass in `src`.
 *
 * The decisions that carry the weight, and why they are shaped this way:
 *
 *   - **JavaScript is the only source of truth for the flip.** There is no
 *     `:hover` rule that turns the card over. A CSS hover rule and an
 *     `aria-expanded` attribute are two state machines that agree right up
 *     until they do not, and the version this was built from could show the
 *     back face while still reporting `aria-expanded="false"`. Pointer entry
 *     is an *input* here, handled in script, exactly like a click or a key.
 *
 *   - **Real controls, not a focusable card.** The front carries a real
 *     `<button>` — the action prompt itself — and the back carries a real
 *     return control, labelled and placed to mirror it, so the same spot on
 *     the card takes you in and back out again. Anything you put in a slot is
 *     ordinary markup beside those buttons, never nested inside one.
 *
 *   - **Only the face you can see is reachable.** The hidden face is
 *     `aria-hidden`, `inert`, and — after the flip settles — `visibility:
 *     hidden`, which is what removes it from the tab order in every browser
 *     and, crucially, with no script running at all. Whatever you put in the
 *     slots is covered by the same three, because they are applied to the
 *     face rather than to the elements this file happens to know about.
 *
 *   - **The blurred field is an `<img>`, not a `url()`.** A caller-supplied
 *     string never reaches a CSS custom property, so there is nothing to
 *     escape and nothing to break out of. The element is decorative, oversized
 *     past the face edges so the blur has real pixels to sample at the rim,
 *     and blurred, desaturated and scaled to the same recipe as the original.
 *
 * Progressive enhancement, stated plainly: the back-face reveal needs script.
 * Without it the front face renders and reads normally, and neither the open
 * control nor the close control is shown, because a control that cannot work
 * is worse than no control.
 *
 * Several instances can share a page: every query is scoped to the instance
 * root, ids are minted per instance, and all state lives in the controller's
 * closure.
 */
import type { ImageMetadata } from "astro";

export interface BlurImageCardProps {
	/**
	 * Optional image, blurred behind the glass on both faces.
	 *
	 * When present, it becomes the enlarged, unrecognisable colour source for
	 * the frosted material. Omit `src` entirely and the CSS colour field supplies
	 * the same effect without rendering or fetching an image.
	 */
	src?: string | ImageMetadata;
	/** Main heading on the front face. */
	title: string;
	/** Small number or eyebrow shown at the top of the front face. */
	number?: string;
	/** Front-face prompt. This is the visible label of the opening button. */
	actionLabel?: string;
	/** Copy shown on the back face. */
	description?: string;
	/** Back-face prompt. This is the visible label of the returning button. */
	returnLabel?: string;
	/** Accessible name for the card as a whole. Defaults to the title. */
	ariaLabel?: string;
	/**
	 * Accessible name for the opening button. Defaults to the action label
	 * followed by the title, so several cards on one page are told apart.
	 */
	openLabel?: string;
	/**
	 * Accessible name for the returning button. Defaults to the return label
	 * followed by the title, on the same reasoning as `openLabel` — and it
	 * keeps the visible word inside the accessible name, which is what voice
	 * control needs to act on what it can see.
	 */
	closeLabel?: string;
	/**
	 * Blur radius of the image behind the glass, in pixels. Clamped to 0–120;
	 * a bad value falls back to 30. This is the image blur, not the glass
	 * blur — that one is `--bic-glass-blur`, because it is a property of the
	 * surface rather than of the picture.
	 */
	blur?: number;
	/** Flip duration in milliseconds. Clamped to 0–5000; a bad value falls back to 850. */
	duration?: number;
	/** Optional extra class for project-specific layout. */
	class?: string;
	/** Element id. Also seeds the internal ids instead of a random value. */
	id?: string;
}

interface Props extends BlurImageCardProps {}

const {
	src,
	title,
	number = "01",
	actionLabel = "View details",
	description = "Add the supporting details for this card.",
	returnLabel = "Return",
	ariaLabel,
	openLabel,
	closeLabel,
	blur = 30,
	duration = 850,
	class: className,
	id,
}: Props = Astro.props;

/*
 * Numeric props are normalised rather than trusted. They are written into an
 * inline `style` as CSS custom properties, so a NaN, an Infinity or a negative
 * would either produce an invalid declaration or a genuinely unpleasant render
 * — a negative blur radius is invalid CSS, and a 40-second flip is a card that
 * appears broken. Both are clamped into a range that is always renderable.
 */
function clampNumber(value: unknown, fallback: number, min: number, max: number): number {
	const parsed = typeof value === "number" ? value : Number(value);
	if (!Number.isFinite(parsed)) return fallback;
	return Math.min(max, Math.max(min, parsed));
}

const safeBlur = clampNumber(blur, 30, 0, 120);
const safeDuration = clampNumber(duration, 850, 0, 5000);

/*
 * Image data is treated as untrusted: it typically arrives from a CMS or a
 * content collection and becomes an attribute on every render.
 */

/** Control characters are stripped first: "java\tscript:" is a scheme too. */
function stripControls(value: string): string {
	return [...value]
		.filter((character) => {
			const code = character.codePointAt(0) ?? 0;
			return code > 31 && code !== 127;
		})
		.join("");
}

/**
 * Only the schemes that can execute are refused.
 *
 * `data:` is allowed, because an inline SVG is a legitimate image.
 */
function safeSrc(value: unknown): string | undefined {
	if (typeof value !== "string") return undefined;
	const raw = value.trim();
	if (raw === "") return undefined;
	const bare = stripControls(raw).trim();
	if (bare === "") return undefined;
	if (/^(javascript|vbscript):/i.test(bare)) return undefined;
	return bare;
}

/* Both string paths and an imported Astro asset. An asset also carries its
   intrinsic size, which lets the browser reserve the right box. */
const metadata = src && typeof src === "object" ? (src as ImageMetadata) : undefined;
const imageSrc = safeSrc(metadata ? metadata.src : src);
const imageWidth = Number.isFinite(metadata?.width) ? metadata!.width : undefined;
const imageHeight = Number.isFinite(metadata?.height) ? metadata!.height : undefined;

const cardLabel = ariaLabel ?? title;
const openAriaLabel = openLabel ?? `${actionLabel}: ${title}`;
const closeAriaLabel = closeLabel ?? `${returnLabel}: ${title}`;

/*
 * Random rather than sequential: a module-level counter is shared by every
 * render in the same server process, which is fine for one page and wrong the
 * moment two pages are built in parallel and compared.
 */
const uid = id ?? `bic-${Math.random().toString(36).slice(2, 9)}`;
const backId = `${uid}-back`;
---

<article
	class:list={["blur-image-card", className]}
	id={id}
	data-blur-image-card
	aria-label={cardLabel}
	style={`--bic-blur: ${safeBlur}px; --bic-duration: ${safeDuration}ms;`}
>
	<div class="bic-inner" data-bic-inner>
		{/*
		    Faces are plain divs rather than sections: the <article> is the one
		    named container this card needs, and two extra named regions inside
		    it would be two more things to page past in a screen reader for no
		    gain.
		*/}
		<div class="bic-face bic-face--front" data-bic-face="front" aria-hidden="false">
			{imageSrc && (
				<img
					class="bic-image"
					src={imageSrc}
					alt=""
					aria-hidden="true"
					draggable="false"
					decoding="async"
					width={imageWidth}
					height={imageHeight}
				/>
			)}
			<span class="bic-tint" aria-hidden="true"></span>
			<span class="bic-color-ease" aria-hidden="true"></span>

			<div class="bic-content bic-content--front">
				<slot name="front">
					<span class="bic-number">{number}</span>
					<h3 class="bic-title">{title}</h3>
				</slot>
			</div>

			{/*
			    Hidden until the controller reveals it. Without script the flip
			    cannot happen, and an action prompt that does nothing is a lie
			    told in the user's own interface.
			*/}
			<button
				class="bic-action"
				type="button"
				data-bic-open
				hidden
				aria-expanded="false"
				aria-controls={backId}
				aria-label={openAriaLabel}
			>
				<span class="bic-action-text">{actionLabel}</span>
				{/* An arrow, not a circular one: this opens the card, it does not
				    reload anything, and the old refresh glyph said the wrong word. */}
				<svg class="bic-icon" aria-hidden="true" viewBox="0 0 24 24" width="18" height="18">
					<path d="M4 12h14M12.5 6.5 18 12l-5.5 5.5" />
				</svg>
			</button>
		</div>

		<div
			class="bic-face bic-face--back"
			id={backId}
			data-bic-face="back"
			aria-hidden="true"
			inert
		>
			{imageSrc && (
				<img
					class="bic-image"
					src={imageSrc}
					alt=""
					aria-hidden="true"
					draggable="false"
					decoding="async"
					width={imageWidth}
					height={imageHeight}
				/>
			)}
			<span class="bic-tint" aria-hidden="true"></span>
			<span class="bic-color-ease" aria-hidden="true"></span>

			{/*
			    Its own scroll container. A long description on a short card has
			    to go somewhere, and "out through the rounded corner" is not an
			    option on a face that is also a 3D transform target.
			*/}
			<div class="bic-content bic-content--back">
				<slot name="back">
					<p class="bic-description">{description}</p>
				</slot>
			</div>

			{/*
			    The way back, in the same place the way in was. Hidden until the
			    controller reveals it, for the same reason the action prompt is:
			    without script there is no flip to undo.
			*/}
			<button
				class="bic-close"
				type="button"
				data-bic-close
				hidden
				aria-label={closeAriaLabel}
			>
				{/* A counter-clockwise circular arrow: the card turns back the way
				    it came. The front's straight arrow goes forward, this one
				    retraces it, and neither is the refresh glyph. */}
				<svg class="bic-icon" aria-hidden="true" viewBox="0 0 24 24" width="18" height="18">
					<path d="M2 4v6h6" />
					<path d="M3.51 15a9 9 0 1 0 2.13-9.36L2 10" />
				</svg>
				<span class="bic-close-text">{returnLabel}</span>
			</button>
		</div>
	</div>
</article>

<script>
	/**
	 * BlurImageCard controller.
	 *
	 * One closure per instance. Every query is scoped to that instance's root,
	 * every listener carries an AbortController signal, and the whole thing is
	 * torn down before a client-side navigation swaps the document.
	 *
	 * This is the only thing that decides whether a card is open. The
	 * stylesheet has no `:hover` rule that turns the card over — pointer entry
	 * is an input handled here, alongside clicks and keys, so the visual state,
	 * `aria-expanded`, `aria-hidden` and `inert` cannot disagree.
	 */
	interface Instance {
		destroy(): void;
	}

	function initBlurImageCard(root: HTMLElement): Instance | undefined {
		/* Idempotent: booting twice is a no-op, not a second set of listeners. */
		if (root.dataset.bicReady === "") return undefined;

		const frontQuery = root.querySelector<HTMLElement>('[data-bic-face="front"]');
		const backQuery = root.querySelector<HTMLElement>('[data-bic-face="back"]');
		const openQuery = root.querySelector<HTMLButtonElement>("[data-bic-open]");
		const closeQuery = root.querySelector<HTMLButtonElement>("[data-bic-close]");
		if (!frontQuery || !backQuery || !openQuery || !closeQuery) return undefined;

		/* Re-bound as non-nullable consts. The guard above narrows the four
		   queries, but TypeScript does not carry a narrowing into a hoisted
		   function declaration, and every handler below is inside one. */
		const front = frontQuery;
		const back = backQuery;
		const openControl = openQuery;
		const closeControl = closeQuery;

		root.dataset.bicReady = "";

		const controller = new AbortController();
		const { signal } = controller;

		/*
		 * The interaction state model, in full.
		 *
		 *   open            what the card is showing right now
		 *   pinned          the visitor asked for it, so a pointer leaving
		 *                   does not undo it
		 *   pointerInside   a fine pointer is currently within the card's box
		 *   hoverSuppressed a deliberate close happened with the pointer still
		 *                   inside, so hover must not re-open until the pointer
		 *                   has actually left and come back
		 *
		 * `hoverSuppressed` is the one that is easy to leave out and impossible
		 * to live without. Close a card with the mouse still over it and hover
		 * immediately re-opens it, so the close button appears not to work; move
		 * the mouse a little and it flips again. The flag is cleared by
		 * `pointerleave` and by nothing else, which is what makes "closed" mean
		 * closed until the visitor genuinely leaves.
		 */
		let open = false;
		let pinned = false;
		let pointerInside = false;
		let hoverSuppressed = false;

		/*
		 * Hover intent. Opening waits longer than closing: crossing a card on
		 * the way somewhere else should not flip it, but a card you have left
		 * should settle back promptly.
		 */
		const OPEN_DELAY = 150;
		const CLOSE_DELAY = 100;
		let openTimer: number | undefined;
		let closeTimer: number | undefined;

		function cancelTimers() {
			if (openTimer !== undefined) window.clearTimeout(openTimer);
			if (closeTimer !== undefined) window.clearTimeout(closeTimer);
			openTimer = undefined;
			closeTimer = undefined;
		}

		/*
		 * Evaluated per event rather than once at boot: a laptop with a
		 * touchscreen and a trackpad can change its answer, and a card that
		 * decided at load time would be wrong for the rest of the page's life.
		 */
		const finePointer = () =>
			window.matchMedia("(hover: hover) and (pointer: fine)").matches;

		/**
		 * Expose exactly one face.
		 *
		 * Applied to the face, never to the individual controls: whatever a
		 * caller puts in the `front` and `back` slots is then covered by the
		 * same rule, with no list of element types to keep up to date.
		 */
		function expose(face: HTMLElement, visible: boolean) {
			face.setAttribute("aria-hidden", visible ? "false" : "true");
			if (visible) face.removeAttribute("inert");
			else face.setAttribute("inert", "");
		}

		function focusControl(target: HTMLButtonElement) {
			target.focus({ preventScroll: true });
		}

		/**
		 * Whether someone is reading this card with the keyboard.
		 *
		 * `:focus-visible` rather than plain focus, and the distinction is the
		 * whole point. Closing the card returns focus to the front control,
		 * because the control that had focus is about to become inert — so after
		 * a mouse user closes a card, focus is sitting inside it. Treating that
		 * as "someone is reading this" would wedge the card open for the rest of
		 * the session: every later hover would open it and no pointer exit would
		 * ever close it again.
		 */
		function keyboardFocusInside(): boolean {
			const active = document.activeElement;
			if (!active || !root.contains(active)) return false;
			try {
				return active.matches(":focus-visible");
			} catch {
				/* No :focus-visible support: keep the safe answer, which is to
				   leave the card alone rather than close it under someone. */
				return true;
			}
		}

		/**
		 * The single state transition.
		 *
		 * `moveFocus` is for deliberate activations — a click, a key, Escape.
		 * Focus also moves when it was inside the face about to be made inert,
		 * because inerting an ancestor of the focused element drops focus to
		 * the body, and losing your place is not an acceptable outcome of
		 * moving a mouse.
		 */
		function setOpen(next: boolean, moveFocus: boolean) {
			if (next === open) {
				if (moveFocus) focusControl(next ? closeControl : openControl);
				return;
			}
			open = next;

			const showing = open ? back : front;
			const hiding = open ? front : back;
			const heldFocus = hiding.contains(document.activeElement);

			root.classList.toggle("is-open", open);
			openControl.setAttribute("aria-expanded", open ? "true" : "false");
			expose(showing, true);
			expose(hiding, false);

			if (moveFocus || heldFocus) focusControl(open ? closeControl : openControl);
		}

		/*
		 * Reversing mid-flip is the browser's job, and it already does it well.
		 *
		 * CSS transitions carry a reversing shortening factor: interrupt a
		 * rotation and the return trip is scaled to the progress actually made,
		 * so a card caught 22 degrees in comes back in about 127ms rather than
		 * replaying the whole 850. Measured, not assumed.
		 *
		 * An earlier version of this file set an inline `transition-duration`
		 * to do that scaling by hand. It was worse than doing nothing: changing
		 * the duration on a running transition discards the shortening factor,
		 * and the same 22 degree reversal collapsed in 24ms — a snap. The fix
		 * was to delete it. There is nothing here for that reason.
		 */

		/* Only revealed once there is a controller behind them. */
		openControl.hidden = false;
		closeControl.hidden = false;

		/* Sync to the served markup, in case the two ever disagree. */
		expose(front, true);
		expose(back, false);
		openControl.setAttribute("aria-expanded", "false");
		root.classList.remove("is-open");

		openControl.addEventListener(
			"click",
			() => {
				cancelTimers();
				pinned = true;
				hoverSuppressed = false;
				setOpen(true, true);
			},
			{ signal },
		);

		/**
		 * Closing is deliberate, and it has to stick.
		 *
		 * Unpinning alone is not enough: the pointer is almost always still
		 * over the card when the close button is clicked, and hover would take
		 * it straight back open. Suppressing hover until the pointer has left
		 * is what makes the button do what it says.
		 */
		function closeDeliberately() {
			cancelTimers();
			pinned = false;
			if (pointerInside) hoverSuppressed = true;
			setOpen(false, true);
		}

		closeControl.addEventListener("click", closeDeliberately, { signal });

		/*
		 * Hover is a mouse affordance and nothing else. `pointerenter` fires
		 * for a touch tap too, so the pointer type is checked as well as the
		 * media query — otherwise a tap would open the card through this path
		 * and the button's own click would immediately look like a no-op.
		 */
		root.addEventListener(
			"pointerenter",
			(event) => {
				if (event.pointerType !== "mouse" || !finePointer()) return;
				pointerInside = true;
				/* Changed direction: whatever was pending is no longer wanted. */
				if (closeTimer !== undefined) window.clearTimeout(closeTimer);
				closeTimer = undefined;
				if (hoverSuppressed || open || openTimer !== undefined) return;
				openTimer = window.setTimeout(() => {
					openTimer = undefined;
					if (hoverSuppressed) return;
					setOpen(true, false);
				}, OPEN_DELAY);
			},
			{ signal },
		);

		root.addEventListener(
			"pointerleave",
			(event) => {
				if (event.pointerType !== "mouse" || !finePointer()) return;
				pointerInside = false;
				/*
				 * The pointer has genuinely left, so a deliberate close has run
				 * its course and hover is allowed to work again. This is the
				 * only place the suppression is lifted.
				 */
				hoverSuppressed = false;
				if (openTimer !== undefined) window.clearTimeout(openTimer);
				openTimer = undefined;
				/* A deliberate opening outlives the pointer, and so does a
				   card someone is currently reading with the keyboard. */
				if (pinned || keyboardFocusInside() || !open) return;
				if (closeTimer !== undefined) return;
				closeTimer = window.setTimeout(() => {
					closeTimer = undefined;
					if (pinned || pointerInside || keyboardFocusInside()) return;
					setOpen(false, false);
				}, CLOSE_DELAY);
			},
			{ signal },
		);

		/*
		 * Pinning with a mouse.
		 *
		 * On a fine-pointer device the pointer reaches the card before the click
		 * does: the card is already turning, and the front control is no longer
		 * under the cursor by the time the button goes down. Without this,
		 * `pinned` would be reachable by touch and by keyboard only, and a mouse
		 * user could never keep a card open after moving away from it.
		 *
		 * It only ever pins a card that is already open. It cannot open, close or
		 * toggle anything, so the <article> stays a container rather than
		 * becoming a simulated button — there is no role, no tab stop and no
		 * keyboard surface added here.
		 */
		root.addEventListener(
			"click",
			(event) => {
				if (!open || pinned) return;
				const target = event.target as Element | null;
				/* The card's own controls, and any link a slot put on the face,
				   own their own clicks. */
				if (target?.closest("a, [data-bic-open], [data-bic-close]")) return;
				cancelTimers();
				pinned = true;
			},
			{ signal },
		);

		root.addEventListener(
			"keydown",
			(event) => {
				if (event.key !== "Escape" || !open) return;
				event.stopPropagation();
				closeDeliberately();
			},
			{ signal },
		);

		function destroy() {
			/* Back to exactly the state the markup was served in, so a re-used
			   element cannot inherit an open card from the previous route.
			   The ready flag goes first, which also returns the back face to
			   `visibility: hidden` — the served state for a page with no
			   controller running on it. */
			delete root.dataset.bicReady;
			cancelTimers();
			root.classList.remove("is-open");
			expose(front, true);
			expose(back, false);
			openControl.setAttribute("aria-expanded", "false");
			openControl.hidden = true;
			closeControl.hidden = true;
			open = false;
			pinned = false;
			pointerInside = false;
			hoverSuppressed = false;
			controller.abort();
		}

		/*
		 * Astro replaces the document on a client-side navigation. Detach every
		 * listener, return the card to its served state, and clear the ready
		 * flag so a re-used element can boot again.
		 */
		document.addEventListener("astro:before-swap", destroy, { once: true, signal });

		return { destroy };
	}

	const boot = () =>
		document
			.querySelectorAll<HTMLElement>("[data-blur-image-card]")
			.forEach(initBlurImageCard);

	/* Astro's own <script> is a deferred module, so the DOM is already parsed
	   by the time this runs. The readyState check is for the case where this
	   file is copied into a project that inlines it some other way. */
	if (document.readyState === "loading") {
		document.addEventListener("DOMContentLoaded", boot, { once: true });
	} else {
		boot();
	}

	/* Fires on every view transition in a project using <ClientRouter />, and
	   never at all in one that does not. Registered once per module, so it
	   cannot accumulate. */
	document.addEventListener("astro:page-load", boot);
</script>

<style>
	.blur-image-card {
		/* ---- overridable tokens -------------------------------------------
		   Set any of these on the element, from a class, an id or a wrapper
		   rule, to retune the component without touching this file.

		   `--bic-blur` and `--bic-duration` are also written inline from the
		   `blur` and `duration` props, and an inline value wins, so override
		   them in CSS only on cards that do not set the matching prop. Both
		   have a derived twin below that IS overridable from CSS. */
		--bic-blur: 30px;
		--bic-duration: 850ms;
		/*
		 * Symmetric by construction: (x2, y2) is (1 - x1, 1 - y1), so the curve
		 * is its own 180-degree rotation about (0.5, 0.5) and opening and
		 * closing are the same motion in reverse.
		 *
		 * The non-zero y1 is the important part, and it is there for a
		 * perceptual reason rather than a stylistic one. Chromium re-samples a
		 * backdrop-filtered layer as soon as the rotation is non-zero, so the
		 * surface responds on the very first transformed frame. With a curve
		 * that starts at zero velocity (0.45, 0, 0.55, 1) that frame is only
		 * 0.21 degrees, which moves the card's edges by 0.19px — invisible. The
		 * result is a surface that changes while the card still looks
		 * stationary, and it reads as a colour flash before the flip.
		 *
		 * Measured over 60Hz frames, averaged across three runs:
		 *
		 *   (0.45, 0, 0.55, 1)        frame 1: 0.21 deg / 0.19px   frame 2: 0.65 deg / 0.58px
		 *   (0.42, 0.05, 0.58, 0.95)  frame 1: 0.79 deg / 0.71px   frame 2: 1.65 deg / 1.50px
		 *   (0.40, 0.08, 0.60, 0.92)  frame 1: 1.14 deg / 1.03px   frame 2: 2.27 deg / 2.06px
		 *   (0.38, 0.10, 0.62, 0.90)  frame 1: 1.48 deg / 1.34px   frame 2: 2.87 deg / 2.61px
		 *
		 * This is the gentlest of them that already moves the card by a whole
		 * pixel on the same frame the surface first responds, so the two are
		 * perceived together. The duration is unchanged.
		 */
		--bic-ease: cubic-bezier(0.4, 0.08, 0.6, 0.92);
		/*
		 * The card is a card, not a section. Left to `width: 100%` it grows to
		 * whatever it is dropped into, and a square ratio then turns a wide
		 * page into one enormous tile. This is the standalone maximum; inside
		 * a grid column narrower than it, `min()` hands the column back.
		 */
		--bic-max-width: 22rem;
		--bic-radius: clamp(1.25rem, 8cqi, 2rem);
		--bic-mobile-ratio: 4 / 3;
		--bic-wide-ratio: 1 / 1;
		--bic-wide-from: 48rem;
		--bic-pad: clamp(1rem, 7cqi, 1.75rem);
		--bic-ink: #fff;

		/* ---- blurred-media frosted glass ---------------------------------
		 * A dark translucent pane over an internal blurred colour field. The
		 * colour source is a child of each face, so it rotates with the card and
		 * never asks Chromium to re-sample the page backdrop mid-flip.
		 */
		--bic-glass: linear-gradient(
			145deg,
			rgb(18 27 48 / 0.7) 0%,
			rgb(9 16 31 / 0.82) 100%
		);
		/*
		 * An optional supplied image is enlarged, darkened and blurred until only
		 * broad colour remains. The CSS colour field provides a fallback when no
		 * image is supplied.
		 */
		--bic-image-opacity: 0.72;
		--bic-border-opacity: 0.24;
		--bic-border: rgb(130 155 190 / var(--bic-border-opacity));
		/*
		 * Directional, because real glass is not lit equally on four sides.
		 * The light is up and to the left, so the top and left edges catch it
		 * and the right and bottom fall into shadow. One offset inset does both
		 * halves of each pair, which is why there are two lines rather than
		 * four.
		 */
		--bic-shadow:
			inset 0 1px 0 rgb(190 210 235 / 0.07),
			inset 1px 1px 0 rgb(150 180 215 / 0.09),
			inset -1px -1px 0 rgb(3 10 24 / 0.2),
			0 24px 60px rgb(2 7 18 / 0.22);
		/*
		 * Environmental light, not a painted-on cloud.
		 *
		 * A tight circle near the corner reads as a white blob stuck to the
		 * card. A wide, shallow ellipse anchored off the top edge reads as a
		 * window reflected in the surface: it spreads along part of the top,
		 * falls away early, and is gone well before the middle.
		 */
		--bic-reflection-opacity: 0.035;
		--bic-reflection: radial-gradient(
			120% 48% at 16% -12%,
			rgb(205 220 240 / var(--bic-reflection-opacity)),
			rgb(205 220 240 / 0.008) 46%,
			transparent 70%
		);

		/*
		 * A wash, not a coat. The surface has to stay see-through, so the tint
		 * only steadies the contrast under the text: a little light on the
		 * front, a little more shade on the back, where the description is
		 * long enough to need it.
		 */
		/*
		 * ONE tint, used by both faces.
		 *
		 * The front and back used to carry different washes — white on the
		 * front, dark purple on the back — and that was the whole of the
		 * colour change people saw at the flip's midpoint: the card swapped
		 * material, not just content, exactly at the handoff. Measured over a
		 * flat ground, the back rendered up to 18 levels darker than the front
		 * at the same screen position; equalising this token took that
		 * difference to zero at every sampled point.
		 *
		 * If you retune it, retune it here. There is deliberately no per-face
		 * override: the two faces are the same pane of glass seen from either
		 * side, and only their content is allowed to differ.
		 */
		--bic-face-tint-opacity: 0;
		--bic-face-tint: linear-gradient(
			145deg,
			rgb(255 255 255 / var(--bic-face-tint-opacity)),
			rgb(255 255 255 / calc(var(--bic-face-tint-opacity) * 0.35))
		);
		--bic-ring: currentColor;
		--bic-control-size: 44px;
		--bic-perspective: 75rem;

		/*
		 * The duration the motion actually uses. Separate from the public
		 * token on purpose: the token is written inline from the prop, and an
		 * inline declaration cannot be overridden from a stylesheet — so a
		 * reduced-motion rule that reassigned `--bic-duration` would silently
		 * do nothing on every card that passed the prop.
		 */
		--bic-motion-duration: var(--bic-duration);
		/* The same arrangement for the blur: `--bic-blur` carries the prop and
		   cannot be reached from a stylesheet, so this is the hook a consumer
		   actually overrides. */
		--bic-image-blur: var(--bic-blur);
		/* How far the image is pushed past each face edge before it is blurred. */
		--bic-bleed: calc(var(--bic-image-blur) * 1.4);

		box-sizing: border-box;
		container-type: inline-size;
		position: relative;
		display: block;
		/*
		 * `min()` rather than a plain max-width so the two cases are one rule:
		 * standing alone it stops at --bic-max-width, and in a column narrower
		 * than that it simply fills the column. `margin-inline: auto` centres
		 * it either way, including inside a grid cell.
		 */
		width: min(100%, var(--bic-max-width));
		margin-inline: auto;
		aspect-ratio: var(--bic-mobile-ratio);
		color: var(--bic-ink);
		perspective: var(--bic-perspective);
		-webkit-tap-highlight-color: transparent;
	}

	/* `:where` keeps specificity at zero, so a destination project's own rules
	   still win where it means them to. */
	.blur-image-card :where(*, *::before, *::after) {
		box-sizing: border-box;
	}

	.bic-inner {
		position: absolute;
		inset: 0;
		transform-style: preserve-3d;
		transition: transform var(--bic-motion-duration) var(--bic-ease);
		will-change: transform;
	}

	.blur-image-card.is-open .bic-inner {
		transform: rotateY(180deg);
	}

	/*
	 * The glass.
	 *
	 * The fixed neutral gradient does not sample the page behind the card, so
	 * its colour remains attached to the rotating face for the complete flip.
	 * Reflection, directional edges and inset shadows provide the glass cues.
	 */
	.bic-face {
		isolation: isolate;
		position: absolute;
		inset: 0;
		padding: var(--bic-pad);
		border: 1px solid var(--bic-border);
		border-radius: var(--bic-radius);

		/*
		 * `clip-path` as well as `overflow`, and this is a bug fix rather than
		 * belt and braces.
		 *
		 * A rounded `overflow` clip is applied to the face's own painting, but
		 * the backdrop-filtered layer is composited separately and, once the
		 * face is rotated in 3D, Chromium clips that layer to the border-box
		 * *rectangle* instead of to its rounded corners. The filtered backdrop
		 * then paints into the square corner while the border still traces the
		 * curve, which is the wedge that showed at the lower-right through the
		 * middle of every flip.
		 *
		 * Isolated and confirmed: with every other layer disabled, the border,
		 * the glass gradient, the image, the tint, the reflection and both
		 * shadows all stayed inside the rounded corner at 60 degrees, and only
		 * the backdrop-filtered region escaped it. Adding this one declaration
		 * put it back inside, exactly on the border.
		 *
		 * `clip` rather than `hidden`: the face never scrolls, and `clip` does
		 * not create a scroll container. The back face's own copy still
		 * scrolls, because that is a separate element with its own overflow.
		 */
		overflow: clip;
		clip-path: inset(0 round var(--bic-radius));
		background: var(--bic-glass);
		box-shadow: var(--bic-shadow);
		backface-visibility: hidden;
		-webkit-backface-visibility: hidden;

		/*
		 * No transition of any kind on a face. Only `.bic-inner` animates, and
		 * only its transform: a face that transitioned its own background,
		 * filter, tint or shadow would change material mid-rotation, which is
		 * exactly the class of defect this component has already been bitten
		 * by once.
		 */
		transition: none;
	}

	.bic-face--front {
		display: grid;
		grid-template-rows: 1fr auto 1fr;
	}

	/*
	 * The mirror of the front: copy in the flexible row, control in the fixed
	 * one at the bottom. The two faces then put their control on the same line
	 * of the card, so the flip turns the card over rather than moving the
	 * thing you are about to press.
	 */
	.bic-face--back {
		display: grid;
		grid-template-rows: minmax(0, 1fr) auto;
		transform: rotateY(180deg);

		/*
		 * Hidden until the controller boots, and then never touched again.
		 *
		 * With no script the card cannot flip, so the back face is never
		 * wanted — and `visibility: hidden` keeps it out of the tab order in
		 * every browser, including ones that do not support `inert`. Once the
		 * controller is running it owns reachability through `inert` and
		 * `aria-hidden`, and `backface-visibility` owns what is painted, so
		 * visibility has no further job and is simply released.
		 *
		 * This used to be a delayed `visibility` transition per face. That
		 * worked, but it animated a property on the rotating faces and had to
		 * be carefully armed after first paint to avoid exposing the back face
		 * for a whole flip duration on load. Handing the job to `inert` removes
		 * the transition, the arming, and the bug it was guarding against.
		 */
		visibility: hidden;
	}

	.blur-image-card[data-bic-ready] .bic-face--back {
		visibility: visible;
	}

	/*
	 * The colour field.
	 *
	 * A decorative <img> rather than a `background-image`, so no caller-supplied
	 * string is ever interpolated into a CSS `url()`. Oversized past every face
	 * edge by the blur radius and a bit, because a blur samples outside the box
	 * it is given and would otherwise fade to transparent at the rim.
	 */
	.bic-image {
		position: absolute;
		/*
		 * Negative z-index, so it paints above the face's own glass and below
		 * everything else in the face. It is colour *through* the glass rather
		 * than the face's background — at this opacity the section behind the
		 * card still comes through both.
		 */
		z-index: -3;
		top: calc(var(--bic-bleed) * -1);
		left: calc(var(--bic-bleed) * -1);
		width: calc(100% + var(--bic-bleed) * 2);
		height: calc(100% + var(--bic-bleed) * 2);
		max-width: none;
		object-fit: cover;
		object-position: center;
		opacity: var(--bic-image-opacity);
		filter:
			blur(var(--bic-image-blur))
			saturate(0.9)
			brightness(0.52)
			contrast(1.05);
		transform: scale(1.18);
		pointer-events: none;
		user-select: none;
	}

	.bic-tint {
		position: absolute;
		z-index: -2;
		inset: 0;
		background: var(--bic-face-tint);
		pointer-events: none;
	}

	/*
	 * Fallback blurred colour source for cards without an image. Oversized and
	 * clipped by the face so the Gaussian blur never exposes a hard edge. It is
	 * identical on both faces and has no transition of its own.
	 */
	.bic-color-ease {
		position: absolute;
		z-index: -1;
		inset: -18%;
		border-radius: inherit;
		background:
			radial-gradient(
				62% 72% at 14% 18%,
				rgb(91 52 224 / 0.88),
				transparent 70%
			),
			radial-gradient(
				58% 74% at 92% 78%,
				rgb(34 84 189 / 0.68),
				transparent 72%
			),
			linear-gradient(
				125deg,
				rgb(36 19 72 / 0.9),
				rgb(10 16 35 / 0.96)
			);
		filter: blur(30px) saturate(0.9);
		transform: scale(1.15);
		opacity: 0.72;
		pointer-events: none;
		transition: none;
	}

	/*
	 * The reflection. A single soft spot near the upper-left corner, which is
	 * where the lit edge already is, so the two read as one light source.
	 * Above the tint and below the content, and on both faces, so the card
	 * looks like the same object all the way through the rotation.
	 */
	.bic-face::after {
		content: "";
		position: absolute;
		z-index: -1;
		inset: 0;
		border-radius: inherit;
		background: var(--bic-reflection);
		pointer-events: none;
	}

	/* ---- front face ---------------------------------------------------- */

	/*
	 * Spans the first two rows of the face, and splits them again, so the
	 * number sits at the top and the title lands on the face's vertical
	 * centre — the geometry of the original, with the action prompt now a
	 * real button in the third row rather than a third grid child.
	 */
	.bic-content--front {
		grid-row: 1 / 3;
		display: grid;
		grid-template-rows: 1fr auto;
		min-height: 0;
	}

	.bic-number {
		align-self: start;
		color: rgb(255 255 255 / 0.88);
		font: 700 clamp(0.75rem, 4cqi, 0.9rem) / 1 system-ui, sans-serif;
		letter-spacing: 0.02em;
	}

	.bic-title {
		align-self: center;
		margin: 0;
		text-align: center;
		text-wrap: balance;
		overflow-wrap: anywhere;
		text-shadow: 0 1px 10px rgb(10 6 26 / 0.45);
		font: 500 clamp(1.4rem, 9cqi, 2.2rem) / 1.08 Georgia, serif;
		letter-spacing: -0.04em;
	}

	.bic-action {
		grid-row: 3;
		align-self: end;
		justify-self: center;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.6rem;
		min-height: var(--bic-control-size);
		min-width: var(--bic-control-size);
		max-width: 100%;
		margin: 0;
		padding: 0.5rem 0.75rem;
		border: 0;
		border-radius: 999px;
		background: none;
		color: inherit;
		font: 700 clamp(0.75rem, 4cqi, 0.9rem) / 1.2 system-ui, sans-serif;
		text-align: center;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	.bic-action-text {
		overflow-wrap: anywhere;
	}

	/* ---- back face ----------------------------------------------------- */

	/*
	 * Deliberately the same rule set as `.bic-action`, down to the type scale
	 * and the padding. It used to be a bordered icon circle in the top-right
	 * corner, which made the way out of the card a different kind of object
	 * from the way in, and put it as far from the prompt you had just pressed
	 * as the card allows.
	 */
	.bic-close {
		grid-row: 2;
		align-self: end;
		justify-self: center;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.6rem;
		min-height: var(--bic-control-size);
		min-width: var(--bic-control-size);
		max-width: 100%;
		margin: 0;
		padding: 0.5rem 0.75rem;
		border: 0;
		border-radius: 999px;
		background: none;
		color: inherit;
		font: 700 clamp(0.75rem, 4cqi, 0.9rem) / 1.2 system-ui, sans-serif;
		text-align: center;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	.bic-close-text {
		overflow-wrap: anywhere;
	}

	.bic-content--back {
		grid-row: 1;
		display: grid;
		grid-template-rows: auto;
		/*
		 * Centred in the space the return control leaves, which is the whole
		 * face above it. The old rule centred the copy and then pulled it up by
		 * a percentage of the card, to hold it clear of a close button in the
		 * opposite corner; with the control at the foot there is nothing to
		 * dodge, and the copy sits where the front face's title sits.
		 */
		align-content: center;
		gap: 1.35rem;
		min-height: 0;
		/* Long copy scrolls inside the face rather than escaping a card whose
		   height is fixed by an aspect ratio. */
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.bic-description {
		max-width: 34ch;
		margin: 0;
		text-wrap: pretty;
		overflow-wrap: anywhere;
		text-shadow: 0 1px 8px rgb(10 6 26 / 0.4);
		font: 400 clamp(0.9rem, 4.8cqi, 1.1rem) / 1.5 Georgia, serif;
	}

	.bic-icon {
		flex: none;
		fill: none;
		stroke: currentColor;
		stroke-linecap: round;
		stroke-linejoin: round;
		stroke-width: 2;
	}

	/* ---- controls ------------------------------------------------------ */

	/*
	 * Beats the `display` rules above, which would otherwise keep a `hidden`
	 * button on screen. Both controls are served hidden and revealed by the
	 * controller, so a page with no script shows no dead affordance.
	 */
	.bic-action[hidden],
	.bic-close[hidden] {
		display: none;
	}

	.bic-action:focus-visible,
	.bic-close:focus-visible {
		outline: 3px solid var(--bic-ring);
		/* Inside the face, so the ring is never clipped by `overflow: hidden`. */
		outline-offset: -1px;
		border-radius: 999px;
	}

	/* ---- responsive ---------------------------------------------------- */

	/* Tablet and desktop are square. Mobile stays 4:3. */
	@media (min-width: 48rem) {
		.blur-image-card {
			aspect-ratio: var(--bic-wide-ratio);
		}
	}

	/*
	 * Reduced motion changes the state instantly instead of rotating, and
	 * overrides whatever `duration` was configured — including the delay that
	 * keeps the outgoing face visible mid-flip, because there is no mid-flip
	 * left to cover.
	 */
	@media (prefers-reduced-motion: reduce) {
		.blur-image-card {
			--bic-motion-duration: 1ms;
		}

		.bic-inner {
			will-change: auto;
		}
	}
</style>