/**
 * /links/ liquid splash — "welcome to mona digital."
 *
 * Loaded only on /links/ via wp_enqueue_style + is_page('links') guard
 * in functions.php. Inline FOUC-prevention rules live in page-links.php
 * <style> so the overlay paints opaque before this file resolves over
 * the network.
 *
 * Reuses the page's existing tokens (defined inline in page-links.php):
 *   --bg, --bg-alt, --ink, --ink-2, --muted, --hairline, --accent,
 *   --accent-d, --font, --mono, --ease.
 *
 * Three acts (~1.6s total, capped at 2s in JS):
 *   Act 1 (0–700ms)   blob emerges, scaled 0.4 → 1, soft pulse
 *   Act 2 (500–1100)  brand mark + welcome caption fade in
 *   Act 3 (1100–1600) brand mark morphs to .bio-mark coords, overlay fades
 *
 * Reduced-motion / Save-Data → fast path (350ms fade, no goo, no morph).
 * Implementation: 2026-05-05.
 */

/* ─── Overlay shell (also inlined in page-links.php for FOUC) ─── */
.links-splash {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: var(--bg);
	display: grid;
	place-items: center;
	pointer-events: auto;
	opacity: 1;
	transition: opacity .45s var(--ease);
	overflow: hidden;
}
.links-splash[hidden] { display: none; }

/* Subtle vignette so the blob has somewhere to sit. */
.links-splash::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,.05) 100%);
	pointer-events: none;
	z-index: 0;
}
[data-theme="dark"] .links-splash::before {
	background: radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,.30) 100%);
}

/* SVG <defs> wrapper — filter only, no rendered shape. iOS Safari <17
 * culls filters whose host SVG is `visibility: hidden`, so we use
 * absolute positioning + 0×0 + overflow:hidden instead, keeping the
 * filter reachable from filter:url(#mona-goo). */
.links-splash__defs {
	position: absolute;
	width: 0; height: 0;
	overflow: hidden;
	pointer-events: none;
}

/* Stage groups blob + brand + caption so we can animate them as one
 * during the Act 3 handoff. The goo filter applies to the stage during
 * Act 1; we drop it for the morph so the brand mark renders crisp. */
.links-splash__stage {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.4rem;
	will-change: transform, opacity, filter;
	transform-origin: center center;
}

/* ─── Act 1 — liquid blob ───────────────────────────────────── */
.links-splash__blob-wrap {
	position: relative;
	width: 18vmin;
	height: 18vmin;
	display: grid;
	place-items: center;
	/* Goo filter only on the blob wrap so the rest of the stage stays sharp. */
	filter: url(#mona-goo);
}
.links-splash__blob {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: var(--accent);
	transform: scale(0.4);
	opacity: 0;
	animation:
		blob-emerge .7s var(--ease) forwards,
		blob-breathe 3.6s var(--ease) infinite .8s;
}
/* Two satellite shapes that the goo filter merges with the main blob,
 * giving organic edge wobble. They orbit slowly and re-merge. */
.links-splash__blob::before,
.links-splash__blob::after {
	content: '';
	position: absolute;
	width: 60%; height: 60%;
	border-radius: 50%;
	background: var(--accent);
	left: 20%; top: 20%;
	transform-origin: center center;
	opacity: .85;
}
.links-splash__blob::before { animation: blob-orbit-a 5s var(--ease) infinite .8s; }
.links-splash__blob::after  { animation: blob-orbit-b 6s var(--ease) infinite .8s; }

@keyframes blob-emerge {
	0%   { transform: scale(0.4); opacity: 0; }
	55%  { transform: scale(1.06); opacity: 1; }
	100% { transform: scale(1);    opacity: 1; }
}
@keyframes blob-breathe {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.045); }
}
@keyframes blob-orbit-a {
	0%   { transform: translate(0, 0); }
	50%  { transform: translate(18%, -10%) scale(.9); }
	100% { transform: translate(0, 0); }
}
@keyframes blob-orbit-b {
	0%   { transform: translate(0, 0); }
	50%  { transform: translate(-16%, 12%) scale(.85); }
	100% { transform: translate(0, 0); }
}

/* ─── Act 2 — brand mark + caption ──────────────────────────── */
.links-splash__brand {
	font-family: var(--font);
	font-weight: 900;
	font-size: clamp(2.4rem, 9vw, 4rem);
	letter-spacing: -.025em;
	line-height: 1;
	color: var(--ink);
	opacity: 0;
	transform: translateY(10px);
	animation: brand-in .7s var(--ease) .55s forwards;
}
.links-splash__brand-dot {
	color: var(--accent);
}

.links-splash__caption {
	font-family: var(--mono);
	font-size: .72rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--muted);
	opacity: 0;
	animation: brand-in .55s var(--ease) .85s forwards;
}

@keyframes brand-in {
	0%   { opacity: 0; transform: translateY(10px); }
	100% { opacity: 1; transform: translateY(0); }
}

/* ─── Act 3 — handoff ───────────────────────────────────────── */
.links-splash.is-handing-off .links-splash__stage {
	/* JS sets --tx/--ty/--ts as inline custom props on the stage based on
	 * the live .bio-mark bounding rect, so the morph self-corrects to
	 * whatever the page layout produces. */
	transform: translate(var(--tx, 0), var(--ty, 0)) scale(var(--ts, 1));
	transition: transform .6s var(--ease);
}
.links-splash.is-handing-off .links-splash__blob-wrap,
.links-splash.is-handing-off .links-splash__caption {
	opacity: 0;
	transition: opacity .35s var(--ease);
}
.links-splash.is-leaving {
	opacity: 0;
	pointer-events: none;
}

/* ─── Fast path — reduced motion + save-data ────────────────── */
@media (prefers-reduced-motion: reduce) {
	.links-splash__blob-wrap { filter: none; }
	.links-splash__blob,
	.links-splash__blob::before,
	.links-splash__blob::after,
	.links-splash__brand,
	.links-splash__caption {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}

/* JS adds .is-fast for Save-Data clients (matches reduced-motion behaviour
 * but cuts duration further). Same overrides as the media query above. */
.links-splash.is-fast .links-splash__blob-wrap { filter: none; }
.links-splash.is-fast .links-splash__blob,
.links-splash.is-fast .links-splash__blob::before,
.links-splash.is-fast .links-splash__blob::after,
.links-splash.is-fast .links-splash__brand,
.links-splash.is-fast .links-splash__caption {
	animation: none !important;
	opacity: 1 !important;
	transform: none !important;
}