:root {
	--zfpl-bg: #050507;
	--zfpl-accent: #d31924;
	--zfpl-text: #eff3f6;
	--zfpl-muted: #8f949a;
	--zfpl-logo-width: 360px;
	--zfpl-exit: 850ms;
	--zfpl-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

html.zfpl-boot,
html.zfpl-boot body {
	overflow: hidden !important;
}

.zfpl-loader,
.zfpl-loader * {
	box-sizing: border-box;
}

.zfpl-loader {
	color: var(--zfpl-text);
	font-family: Arial, Helvetica, sans-serif;
	inset: 0;
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
	position: fixed;
	transition: visibility 0s linear var(--zfpl-exit), opacity 180ms ease var(--zfpl-exit);
	visibility: hidden;
	z-index: 2147483000;
}

html.zfpl-boot .zfpl-loader {
	opacity: 1;
	pointer-events: auto;
	transition: none;
	visibility: visible;
}

.zfpl-shutter {
	background: var(--zfpl-bg);
	background:
		radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--zfpl-accent) 15%, transparent), transparent 33%),
		linear-gradient(132deg, var(--zfpl-bg), color-mix(in srgb, var(--zfpl-bg) 90%, var(--zfpl-accent)));
	bottom: 0;
	position: absolute;
	top: 0;
	transition: transform var(--zfpl-exit) var(--zfpl-ease);
	width: 51%;
	z-index: 0;
}

.zfpl-shutter--left { left: 0; }
.zfpl-shutter--right { right: 0; }

.zfpl-grid-field {
	background-image:
		linear-gradient(color-mix(in srgb, var(--zfpl-text) 6%, transparent) 1px, transparent 1px),
		linear-gradient(90deg, color-mix(in srgb, var(--zfpl-text) 6%, transparent) 1px, transparent 1px);
	background-position: center;
	background-size: 72px 72px;
	inset: 0;
	mask-image: radial-gradient(circle at 50% 50%, #000 0 27%, transparent 72%);
	opacity: 0.46;
	position: absolute;
	z-index: 1;
}

.zfpl-loader--no-grid .zfpl-grid-field { display: none; }

.zfpl-grid-field::before,
.zfpl-grid-field::after {
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--zfpl-accent) 55%, transparent), transparent);
	content: "";
	height: 1px;
	left: 0;
	position: absolute;
	right: 0;
}

.zfpl-grid-field::before { top: 28%; }
.zfpl-grid-field::after { bottom: 24%; }

.zfpl-scan-field {
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--zfpl-accent) 15%, transparent) 20%, var(--zfpl-accent) 50%, color-mix(in srgb, var(--zfpl-accent) 15%, transparent) 80%, transparent);
	box-shadow: 0 0 24px color-mix(in srgb, var(--zfpl-accent) 45%, transparent);
	height: 1px;
	left: 0;
	opacity: 0.85;
	position: absolute;
	right: 0;
	top: 0;
	transform: translateY(-30px);
	z-index: 4;
}

html.zfpl-boot .zfpl-scan-field {
	animation: zfpl-scan-field 2.6s cubic-bezier(0.5, 0, 0.2, 1) infinite;
}

.zfpl-frame {
	display: grid;
	grid-template-rows: auto minmax(320px, 1fr) auto auto;
	inset: clamp(18px, 3.4vw, 54px);
	padding: clamp(20px, 2.8vw, 44px);
	position: absolute;
	transition: opacity 320ms ease, transform 620ms var(--zfpl-ease);
	z-index: 5;
}

.zfpl-frame::before,
.zfpl-frame::after {
	background: linear-gradient(90deg, var(--zfpl-accent), transparent 40%);
	content: "";
	height: 1px;
	left: 0;
	position: absolute;
	width: 22%;
}

.zfpl-frame::before { top: 0; }
.zfpl-frame::after { bottom: 0; transform: rotate(180deg); }

.zfpl-corner {
	height: 26px;
	position: absolute;
	width: 26px;
}

.zfpl-corner--tl { border-left: 1px solid var(--zfpl-accent); border-top: 1px solid var(--zfpl-accent); left: 0; top: 0; }
.zfpl-corner--tr { border-right: 1px solid color-mix(in srgb, var(--zfpl-text) 26%, transparent); border-top: 1px solid color-mix(in srgb, var(--zfpl-text) 26%, transparent); right: 0; top: 0; }
.zfpl-corner--bl { border-bottom: 1px solid color-mix(in srgb, var(--zfpl-text) 26%, transparent); border-left: 1px solid color-mix(in srgb, var(--zfpl-text) 26%, transparent); bottom: 0; left: 0; }
.zfpl-corner--br { border-bottom: 1px solid var(--zfpl-accent); border-right: 1px solid var(--zfpl-accent); bottom: 0; right: 0; }

.zfpl-telemetry {
	align-items: center;
	display: flex;
	justify-content: space-between;
}

.zfpl-telemetry span {
	align-items: center;
	color: var(--zfpl-muted);
	display: flex;
	font-size: 8px;
	font-weight: 700;
	gap: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.zfpl-telemetry span i {
	background: var(--zfpl-accent);
	border-radius: 50%;
	box-shadow: 0 0 0 5px color-mix(in srgb, var(--zfpl-accent) 12%, transparent), 0 0 18px var(--zfpl-accent);
	height: 5px;
	width: 5px;
}

.zfpl-telemetry b {
	color: var(--zfpl-text);
	font-size: clamp(13px, 1.2vw, 18px);
	font-variant-numeric: tabular-nums;
	font-weight: 500;
	letter-spacing: 0.18em;
}

.zfpl-loader--no-counter .zfpl-telemetry b { visibility: hidden; }

.zfpl-stage {
	align-items: center;
	display: flex;
	justify-content: center;
	min-height: 0;
	position: relative;
}

.zfpl-zero {
	color: color-mix(in srgb, var(--zfpl-text) 3.5%, transparent);
	font-size: min(56vw, 740px);
	font-style: italic;
	font-weight: 900;
	letter-spacing: -0.14em;
	line-height: 0.7;
	position: absolute;
	transform: translateX(-4%);
	user-select: none;
}

.zfpl-orbit {
	border: 1px solid color-mix(in srgb, var(--zfpl-text) 12%, transparent);
	border-radius: 50%;
	height: clamp(280px, 42vw, 520px);
	position: absolute;
	width: clamp(280px, 42vw, 520px);
}

.zfpl-orbit::before,
.zfpl-orbit::after {
	border-radius: 50%;
	content: "";
	position: absolute;
}

.zfpl-orbit::before {
	background: conic-gradient(from 18deg, transparent 0 7%, var(--zfpl-accent) 7% 9%, transparent 9% 18%, color-mix(in srgb, var(--zfpl-text) 28%, transparent) 18% 18.4%, transparent 18.4% 44%, var(--zfpl-accent) 44% 45.4%, transparent 45.4% 72%, color-mix(in srgb, var(--zfpl-text) 24%, transparent) 72% 72.4%, transparent 72.4% 92%, var(--zfpl-accent) 92% 93%, transparent 93%);
	inset: -9px;
	mask: radial-gradient(circle, transparent 66%, #000 67% 70%, transparent 71%);
}

.zfpl-orbit::after {
	border: 1px dashed color-mix(in srgb, var(--zfpl-text) 15%, transparent);
	inset: 10%;
}

.zfpl-orbit > i {
	border: 1px solid color-mix(in srgb, var(--zfpl-text) 9%, transparent);
	border-radius: 50%;
	inset: 22%;
	position: absolute;
}

.zfpl-orbit > i:nth-child(2) { inset: 32%; }
.zfpl-orbit > i:nth-child(3) { border-color: color-mix(in srgb, var(--zfpl-accent) 26%, transparent); inset: 41%; }

.zfpl-orbit > b {
	background: var(--zfpl-accent);
	border-radius: 50%;
	box-shadow: 0 0 22px var(--zfpl-accent);
	height: 7px;
	left: 50%;
	position: absolute;
	top: -4px;
	transform: translateX(-50%);
	width: 7px;
}

html.zfpl-boot .zfpl-orbit::before { animation: zfpl-orbit 7s linear infinite; }
html.zfpl-boot .zfpl-orbit::after { animation: zfpl-orbit-reverse 13s linear infinite; }
html.zfpl-boot .zfpl-orbit > b { animation: zfpl-orbit-dot 4.8s linear infinite; transform-origin: 50% calc(clamp(280px, 42vw, 520px) / 2 + 4px); }

.zfpl-reticle {
	height: clamp(210px, 31vw, 380px);
	position: absolute;
	width: clamp(210px, 31vw, 380px);
}

.zfpl-reticle i {
	background: var(--zfpl-accent);
	position: absolute;
}

.zfpl-reticle i:nth-child(1),
.zfpl-reticle i:nth-child(2) { height: 1px; top: 50%; width: 18%; }
.zfpl-reticle i:nth-child(1) { left: 0; }
.zfpl-reticle i:nth-child(2) { right: 0; }
.zfpl-reticle i:nth-child(3),
.zfpl-reticle i:nth-child(4) { height: 18%; left: 50%; width: 1px; }
.zfpl-reticle i:nth-child(3) { top: 0; }
.zfpl-reticle i:nth-child(4) { bottom: 0; }

.zfpl-logo-shell {
	align-items: center;
	display: flex;
	justify-content: center;
	max-width: min(var(--zfpl-logo-width), 64vw);
	min-height: 130px;
	overflow: hidden;
	position: relative;
	width: 100%;
	z-index: 3;
}

.zfpl-logo-shell img {
	display: block;
	filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.42));
	height: auto;
	max-height: 190px;
	object-fit: contain;
	width: 100%;
}

.zfpl-logo-shell span {
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--zfpl-accent) 74%, #fff), transparent);
	filter: blur(1px);
	height: 1px;
	left: -30%;
	opacity: 0;
	position: absolute;
	top: 50%;
	width: 36%;
}

html.zfpl-boot .zfpl-logo-shell img { animation: zfpl-logo-breathe 2.2s ease-in-out infinite; }
html.zfpl-boot .zfpl-logo-shell span { animation: zfpl-logo-read 1.75s var(--zfpl-ease) infinite; }

.zfpl-copy {
	align-items: flex-end;
	display: flex;
	justify-content: space-between;
	margin-bottom: clamp(24px, 4vh, 42px);
}

.zfpl-copy strong {
	font-size: clamp(17px, 2vw, 30px);
	font-style: italic;
	font-weight: 800;
	letter-spacing: -0.03em;
	text-transform: uppercase;
}

.zfpl-copy span {
	color: var(--zfpl-muted);
	font-size: 8px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.zfpl-progress {
	display: grid;
	gap: 12px;
}

.zfpl-progress > div {
	background: color-mix(in srgb, var(--zfpl-text) 10%, transparent);
	height: 2px;
	overflow: visible;
	position: relative;
}

.zfpl-progress > div > i {
	background: linear-gradient(90deg, color-mix(in srgb, var(--zfpl-accent) 36%, transparent), var(--zfpl-accent));
	box-shadow: 0 0 15px color-mix(in srgb, var(--zfpl-accent) 55%, transparent);
	display: block;
	height: 100%;
	transform: scaleX(0.03);
	transform-origin: left;
	transition: transform 170ms linear;
	width: 100%;
}

.zfpl-progress > div > b {
	background: var(--zfpl-accent);
	box-shadow: 0 0 14px var(--zfpl-accent);
	height: 6px;
	left: calc(var(--zfpl-progress, 3%) - 3px);
	position: absolute;
	top: -2px;
	transition: left 170ms linear;
	width: 6px;
}

.zfpl-progress > span {
	color: var(--zfpl-muted);
	font-size: 7px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.zfpl-loader--no-progress .zfpl-progress { visibility: hidden; }

.zfpl-loader.is-ready .zfpl-telemetry span i { background: #48d597; box-shadow: 0 0 0 5px rgba(72, 213, 151, 0.12), 0 0 18px #48d597; }
.zfpl-loader.is-ready .zfpl-progress > div > i { background: linear-gradient(90deg, var(--zfpl-accent), #48d597); }

.zfpl-loader.is-leaving .zfpl-frame { opacity: 0; transform: scale(1.035); }
.zfpl-loader.is-leaving .zfpl-grid-field,
.zfpl-loader.is-leaving .zfpl-scan-field { opacity: 0; transition: opacity 260ms ease; }
.zfpl-loader.is-leaving .zfpl-shutter--left { transform: translateX(-101%); }
.zfpl-loader.is-leaving .zfpl-shutter--right { transform: translateX(101%); }

/* Mechanical aperture: tighter rings and stepped movement. */
.zfpl-loader--aperture .zfpl-orbit::before { background: repeating-conic-gradient(from 0deg, var(--zfpl-accent) 0 2deg, transparent 2deg 22.5deg); mask: radial-gradient(circle, transparent 61%, #000 62% 67%, transparent 68%); }
.zfpl-loader--aperture .zfpl-orbit::after { border-style: solid; clip-path: polygon(0 0, 42% 0, 50% 18%, 58% 0, 100% 0, 100% 42%, 82% 50%, 100% 58%, 100% 100%, 58% 100%, 50% 82%, 42% 100%, 0 100%, 0 58%, 18% 50%, 0 42%); }
.zfpl-loader--aperture .zfpl-logo-shell img { animation-timing-function: steps(5, end); }

/* Diagnostic signal: a wider active sweep and horizontal pulse. */
.zfpl-loader--signal .zfpl-orbit::before { background: conic-gradient(from 270deg, transparent 0 70%, color-mix(in srgb, var(--zfpl-accent) 12%, transparent) 78%, var(--zfpl-accent) 98%, transparent); mask: radial-gradient(circle, transparent 64%, #000 65% 68%, transparent 69%); }
.zfpl-loader--signal .zfpl-logo-shell::before { border-bottom: 1px solid color-mix(in srgb, var(--zfpl-accent) 36%, transparent); border-top: 1px solid color-mix(in srgb, var(--zfpl-accent) 36%, transparent); content: ""; inset: 34% -22%; position: absolute; }

.zfpl-loader.is-reduced *,
.zfpl-loader.is-reduced *::before,
.zfpl-loader.is-reduced *::after {
	animation: none !important;
}

@keyframes zfpl-scan-field {
	0% { opacity: 0; transform: translateY(-20px); }
	12% { opacity: 0.8; }
	70% { opacity: 0.5; }
	100% { opacity: 0; transform: translateY(105vh); }
}

@keyframes zfpl-orbit { to { transform: rotate(1turn); } }
@keyframes zfpl-orbit-reverse { to { transform: rotate(-1turn); } }
@keyframes zfpl-orbit-dot { to { transform: translateX(-50%) rotate(1turn); } }

@keyframes zfpl-logo-breathe {
	0%, 100% { opacity: 0.78; transform: scale(0.985); }
	50% { opacity: 1; transform: scale(1); }
}

@keyframes zfpl-logo-read {
	0% { left: -35%; opacity: 0; }
	16% { opacity: 1; }
	78% { opacity: 0.75; }
	100% { left: 100%; opacity: 0; }
}

@media (max-width: 700px) {
	.zfpl-frame { grid-template-rows: auto minmax(280px, 1fr) auto auto; inset: 14px; padding: 22px 18px; }
	.zfpl-grid-field { background-size: 48px 48px; }
	.zfpl-stage { min-height: 330px; }
	.zfpl-orbit { height: min(82vw, 340px); width: min(82vw, 340px); }
	html.zfpl-boot .zfpl-orbit > b { transform-origin: 50% calc(min(82vw, 340px) / 2 + 4px); }
	.zfpl-reticle { height: min(62vw, 250px); width: min(62vw, 250px); }
	.zfpl-logo-shell { max-width: min(var(--zfpl-logo-width), 78vw); min-height: 96px; }
	.zfpl-logo-shell img { max-height: 128px; }
	.zfpl-copy { align-items: flex-start; flex-direction: column; gap: 9px; margin-bottom: 26px; }
	.zfpl-copy strong { font-size: 17px; }
	.zfpl-copy span { font-size: 6px; }
	.zfpl-telemetry span { font-size: 6px; letter-spacing: 0.16em; }
	.zfpl-telemetry b { font-size: 11px; }
	.zfpl-zero { font-size: min(94vw, 390px); }
}

@media (prefers-reduced-motion: reduce) {
	.zfpl-loader[data-reduced-motion="1"] *,
	.zfpl-loader[data-reduced-motion="1"] *::before,
	.zfpl-loader[data-reduced-motion="1"] *::after { animation: none !important; }
	.zfpl-loader[data-reduced-motion="1"] .zfpl-shutter { transition-duration: 260ms; }
}