/**
 * Modula takeover editors — pre-React boot shell shared by the gallery editor
 * and the Albums editor (Pro). See Modula\V2\Admin\Takeover_Boot_Shell.
 *
 * `data-modula-se-appearance` on <html> is set from localStorage in admin_head,
 * so the mount paints light or dark before the editor bundle loads.
 *
 * Mount and title rules are scoped under `body` so they outrank the editors'
 * own single-class mount rules (`.modula-settings-editor-mount`) and the WP
 * admin heading styles, as the former per-editor selectors did.
 */

/* Fixed layer: only the editor is visible and interactive. */
body .modula-takeover__mount {
	--modula-se-boot-bg: #e9e9e5;
	--modula-se-boot-ink: #8b8b93;
	--modula-se-boot-ink-strong: #16161a;
	--modula-se-boot-ink-body: #56565e;
	--modula-se-boot-accent: #2e4fe8;
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	flex-direction: column;
	background: var(--modula-se-boot-bg);
	color: var(--modula-se-boot-ink);
	overflow: hidden;
	box-sizing: border-box;
}

html[data-modula-se-appearance="dark"] body .modula-takeover__mount,
body .modula-takeover__mount[data-appearance="dark"] {
	--modula-se-boot-bg: #101114;
	--modula-se-boot-ink: #74747e;
	--modula-se-boot-ink-strong: #ececef;
	--modula-se-boot-ink-body: #a2a2ac;
	--modula-se-boot-accent: #6b85ff;
	color-scheme: dark;
}

/* HTML/CSS boot — visible until React createRoot replaces mount children. */
.modula-takeover__boot {
	display: flex;
	flex: 1;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 0;
	padding: 24px;
	min-height: 0;
	font-family:
		-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans,
		Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 13px;
	line-height: 1.4;
	color: var(--modula-se-boot-ink, #8b8b93);
	box-sizing: border-box;
}

/*
 * The Modula mark as an aperture: each blade slides out along its own axis
 * and back in turn while the mark turns one blade (60°) per loop. Same
 * geometry and timing as admin-ui's BrandLoader (the React fallback);
 * apps/admin-ui/brand-loader/BrandLoader.test.js keeps them in step.
 */
.modula-takeover__boot-mark {
	display: block;
	flex: 0 0 auto;
	overflow: visible;
	fill: var(--modula-se-boot-ink-strong, #16161a);
}

/* The view box is centred on the mark, so `0 0` turns it about its middle. */
.modula-takeover__boot-blades {
	transform-origin: 0 0;
	animation: modula-se-boot-turn 2.8s linear infinite;
}

.modula-takeover__boot-blade {
	animation: modula-se-boot-breathe 1.4s ease-in-out infinite;
}

.modula-takeover__boot-blades > :nth-child(2) .modula-takeover__boot-blade {
	animation-delay: 0.1s;
}

.modula-takeover__boot-blades > :nth-child(3) .modula-takeover__boot-blade {
	animation-delay: 0.2s;
}

.modula-takeover__boot-blades > :nth-child(4) .modula-takeover__boot-blade {
	animation-delay: 0.3s;
}

.modula-takeover__boot-blades > :nth-child(5) .modula-takeover__boot-blade {
	animation-delay: 0.4s;
}

.modula-takeover__boot-blades > :nth-child(6) .modula-takeover__boot-blade {
	animation-delay: 0.5s;
}

/*
 * The "Modula" wordmark beside the mark, cut from modula-logo-black.webp
 * (mark + word; the word sits at x 101–288, y 20–60 of 288 × 80). The letters
 * are the faint ink; the full ink is a layer over it that grows from the left
 * in 1.6s, holds 0.4s and starts over. At rest (reduced motion) it covers
 * them all.
 */
.modula-takeover__boot-wordmark {
	display: block;
	flex: 0 0 auto;
	height: 20px;
	aspect-ratio: 187 / 41;
	background-color: color-mix(in srgb, var(--modula-se-boot-ink-strong, #16161a) 20%, transparent);
	background-image: linear-gradient(var(--modula-se-boot-ink-strong, #16161a), var(--modula-se-boot-ink-strong, #16161a));
	background-repeat: no-repeat;
	background-size: 100% 100%;
	-webkit-mask: url(../../images/modula-logo-black.webp) right 51.28% / 154.01% 195.12% no-repeat;
	mask: url(../../images/modula-logo-black.webp) right 51.28% / 154.01% 195.12% no-repeat;
	animation: modula-se-boot-sweep 2s ease-in-out infinite;
}

/* Announced by the status region, not shown. */
.modula-takeover__boot-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

@keyframes modula-se-boot-turn {

	to {
		transform: rotate(60deg);
	}
}

@keyframes modula-se-boot-breathe {

	50% {
		transform: translateY(-7px);
	}
}

@keyframes modula-se-boot-sweep {

	0% {
		background-size: 0% 100%;
	}

	80%,
	100% {
		background-size: 100% 100%;
	}
}

@media (prefers-reduced-motion: reduce) {

	.modula-takeover__boot-blades,
	.modula-takeover__boot-blade,
	.modula-takeover__boot-wordmark {
		animation: none;
	}
}

/*
 * Desktop-only gate: phones and tablets (max-width 1024px).
 * Hidden on desktop until React replaces the mount. Keep in sync with
 * apps/editor-shell/notice/desktopEditorViewport.js.
 */
.modula-takeover__desktop-only {
	display: none;
	flex: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 0;
	padding: 32px 20px;
	box-sizing: border-box;
	text-align: center;
	font-family:
		-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans,
		Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	color: var(--modula-se-boot-ink-body, #56565e);
}

.modula-takeover__desktop-only-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 320px;
}

.modula-takeover__desktop-only-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin: 0 0 16px;
	color: var(--modula-se-boot-ink, #8b8b93);
}

.modula-takeover__desktop-only-icon svg {
	display: block;
	width: 48px;
	height: 48px;
}

body .modula-takeover__mount .modula-takeover__desktop-only-title {
	margin: 0 0 8px;
	padding: 0;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--modula-se-boot-ink-strong, #16161a);
}

.modula-takeover__desktop-only-body {
	margin: 0 0 24px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--modula-se-boot-ink-body, #56565e);
}

a.modula-takeover__desktop-only-back {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 32px;
	height: 32px;
	padding: 0 12px;
	border: 1px solid var(--modula-se-boot-accent, #2e4fe8);
	border-radius: 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	color: #fff;
	background: var(--modula-se-boot-accent, #2e4fe8);
	text-decoration: none;
	cursor: pointer;
}

a.modula-takeover__desktop-only-back:hover,
a.modula-takeover__desktop-only-back:focus {
	color: #fff;
	filter: brightness(1.05);
}

a.modula-takeover__desktop-only-back:focus {
	outline: none;
}

a.modula-takeover__desktop-only-back:focus-visible {
	box-shadow: 0 0 0 3px rgba(46, 79, 232, 0.2);
}

@media (max-width: 1024px) {
	.modula-takeover__boot {
		display: none !important;
	}

	.modula-takeover__desktop-only {
		display: flex;
	}
}