/*!
 * Mythos Page Loader
 * Motion values follow MYTHOS Brand System v2, section 16 (Motion Reference):
 *   Iris Pulse    2s ease-out          Diamond Orbit  8s linear
 *   Appear        cubic-bezier(.22,1,.36,1), 300-500ms
 *
 * Colour/size/timing come from custom properties set by the plugin
 * (--mpl-bg, --mpl-iris, --mpl-ink, --mpl-size, --mpl-dur and their -rgb
 * twins). Fallbacks below are the brand defaults.
 *
 * Overlay states (class on .mpl):
 *   (none)        display:none, costs nothing
 *   is-covering   displayed, still at its closed position
 *   is-covered    fully covering the page
 *   is-revealing  transitioning away
 */

.mpl {
	position: fixed;
	inset: 0;
	z-index: var(--mpl-z, 999999);
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 28px;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	overflow: hidden;
	background: var(--mpl-bg, #05060a);
	color: rgb(var(--mpl-ink-rgb, 180, 200, 220));
	-webkit-tap-highlight-color: transparent;
}

.mpl--contained {
	position: absolute;
	z-index: 2;
}

.mpl.is-covering,
.mpl.is-covered,
.mpl.is-revealing,
html.mpl-on .mpl {
	display: flex;
}

/* Film grain from the brand kit (body::before, 3% fractal noise). */
.mpl::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}

.mpl__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ── Transition styles ─────────────────────────────────────────────── */

.mpl.is-covering,
.mpl.is-revealing {
	will-change: clip-path, opacity, transform;
	transition-duration: var(--mpl-dur, 450ms);
	transition-timing-function: cubic-bezier(.22, 1, .36, 1);
}

/* Iris: a circle opens from the centre to cover, closes back into it to reveal. */
.mpl[data-style="iris"] {
	clip-path: circle(0% at 50% 50%);
	transition-property: clip-path;
}
.mpl[data-style="iris"].is-covered {
	clip-path: circle(75% at 50% 50%);
}
.mpl[data-style="iris"].is-revealing {
	clip-path: circle(0% at 50% 50%);
}

/* Fade: brand "Transition" easing is ease-in-out. */
.mpl[data-style="fade"] {
	opacity: 0;
	transition-property: opacity;
}
.mpl[data-style="fade"].is-covering,
.mpl[data-style="fade"].is-revealing {
	transition-timing-function: ease-in-out;
}
.mpl[data-style="fade"].is-covered {
	opacity: 1;
}
.mpl[data-style="fade"].is-revealing {
	opacity: 0;
}

/* Curtain: rises from the bottom, exits through the top. */
.mpl[data-style="curtain"] {
	transform: translate3d(0, 100%, 0);
	transition-property: transform;
}
.mpl[data-style="curtain"].is-covered {
	transform: none;
}
.mpl[data-style="curtain"].is-revealing {
	transform: translate3d(0, -100%, 0);
}

/* Arrival: the page is born covered, before any script has run. */
html.mpl-on .mpl,
html.mpl-on .mpl[data-style] {
	opacity: 1;
	transform: none;
	clip-path: circle(75% at 50% 50%);
}

/* ── Stage (the animation itself) ──────────────────────────────────── */

.mpl__stage,
.mpl__cap {
	position: relative;
	z-index: 1;
	opacity: 0;
	transform: scale(.92);
	transition:
		opacity calc(var(--mpl-dur, 450ms) * .8) cubic-bezier(.22, 1, .36, 1) calc(var(--mpl-dur, 450ms) * .3),
		transform calc(var(--mpl-dur, 450ms) * 1.2) cubic-bezier(.22, 1, .36, 1) calc(var(--mpl-dur, 450ms) * .3);
}

.mpl__stage {
	flex: none;
	width: var(--mpl-size, 120px);
	height: var(--mpl-size, 120px);
}

.mpl.is-covered .mpl__stage,
.mpl.is-covered .mpl__cap,
html.mpl-on .mpl .mpl__stage,
html.mpl-on .mpl .mpl__cap {
	opacity: 1;
	transform: none;
}

.mpl.is-revealing .mpl__stage,
.mpl.is-revealing .mpl__cap {
	opacity: 0;
	transform: scale(1.08);
	transition:
		opacity calc(var(--mpl-dur, 450ms) * .45) ease-in-out,
		transform calc(var(--mpl-dur, 450ms) * .45) ease-in-out;
}

.mpl__cap {
	margin: 0;
	font: 400 10px/1.4 "Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(var(--mpl-ink-rgb, 180, 200, 220), .55);
	text-align: center;
}

/* Only one animation shows at a time. Front-end picks via <html data-mpl-anim>,
   the admin preview via the overlay's own data-anim. */
.mpl__iris {
	display: block;
	position: absolute;
	inset: 0;
}
.mpl__orbit {
	display: none;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}
html[data-mpl-anim="orbit"] .mpl__orbit,
.mpl[data-anim="orbit"] .mpl__orbit {
	display: block;
}
html[data-mpl-anim="orbit"] .mpl__iris,
.mpl[data-anim="orbit"] .mpl__iris {
	display: none;
}

/* ── Iris Pulse ────────────────────────────────────────────────────── */

.mpl__cv {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

.mpl__ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1px solid rgba(var(--mpl-iris-rgb, 232, 121, 160), .4);
	pointer-events: none;
	animation: mpl-pulse 2s ease-out infinite backwards;
}
.mpl__ring--2 {
	inset: -8%;
	border-color: rgba(var(--mpl-iris-rgb, 232, 121, 160), .2);
	animation-delay: .5s;
}

@keyframes mpl-pulse {
	0%   { transform: scale(1); opacity: .6; }
	100% { transform: scale(2); opacity: 0; }
}

/* ── Diamond Orbit ─────────────────────────────────────────────────── */

.mpl__o1,
.mpl__o2,
.mpl__o3,
.mpl__dia {
	fill: none;
}
.mpl__o1 { stroke: rgba(var(--mpl-ink-rgb, 180, 200, 220), .12); stroke-width: .6; stroke-dasharray: 3 4; }
.mpl__o2 { stroke: rgba(var(--mpl-ink-rgb, 180, 200, 220), .09); stroke-width: .5; }
.mpl__o3 { stroke: rgba(var(--mpl-ink-rgb, 180, 200, 220), .07); stroke-width: .5; }
.mpl__dia {
	stroke: rgba(var(--mpl-ink-rgb, 180, 200, 220), .18);
	stroke-width: .7;
	transform-origin: 60px 60px;
	animation: mpl-spin 8s linear infinite;
}
.mpl__eye-bg { fill: rgba(var(--mpl-bg-rgb, 5, 6, 10), .9); }
.mpl__eye    { fill: rgba(var(--mpl-ink-rgb, 180, 200, 220), .85); }

@keyframes mpl-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

/* ── Reduced motion: keep the mark, drop the movement ──────────────── */

@media (prefers-reduced-motion: reduce) {
	.mpl__ring {
		animation: none;
		opacity: .3;
	}
	.mpl__dia {
		animation: none;
	}
	.mpl__stage,
	.mpl__cap,
	.mpl.is-revealing .mpl__stage,
	.mpl.is-revealing .mpl__cap {
		transform: none;
		transition-duration: .01ms;
		transition-delay: 0s;
	}
}