/* Motion Kit: Page Loader (Customizer). All sizes/colours come from CSS variables printed on #mkpl. */
.mkpl {
	--mkpl-bg: #0b1b33; --mkpl-mark: #fff; --mkpl-accent: #bc2026;
	--mkpl-d: 248px; --mkpl-dt: 200px; --mkpl-dm: 150px;
	--mkpl-dur: .7s;
	--mkpl-size: var(--mkpl-d);
	--mkpl-mk: var(--mkpl-ls); /* logo width, % of dial; unset = animation default */
	--p: 0;
	position: fixed; inset: 0; z-index: 2147483000;
	display: none; align-items: center; justify-content: center;
	background: var(--mkpl-bg);
	transition: opacity var(--mkpl-dur) ease, transform var(--mkpl-dur) cubic-bezier(.77, 0, .18, 1), visibility var(--mkpl-dur);
	-webkit-tap-highlight-color: transparent;
}
html.mkpl-on .mkpl, html.mkpl-out .mkpl { display: flex; }
html.mkpl-on { overflow: hidden; }

@media (max-width: 1024px) { .mkpl { --mkpl-size: var(--mkpl-dt); --mkpl-mk: var(--mkpl-lst); } }
@media (max-width: 767px)  { .mkpl { --mkpl-size: var(--mkpl-dm); --mkpl-mk: var(--mkpl-lsm); } }

/* exits */
.mkpl.is-done { pointer-events: none; opacity: 0; visibility: hidden; }
.mkpl[data-exit="slide"].is-done { opacity: 1; transform: translateY(-100%); }
.mkpl[data-exit="zoom"].is-done  { transform: scale(1.12); }

.mkpl__stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--mkpl-size) * .12); max-width: 100%; padding: 0 16px; box-sizing: border-box; }
.mkpl__dial { position: relative; width: min(var(--mkpl-size), 70vw, 70vh); aspect-ratio: 1; display: grid; place-items: center; }
.mkpl__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mkpl__track { fill: none; stroke: rgba(255, 255, 255, .13); stroke: color-mix(in srgb, var(--mkpl-mark) 16%, transparent); stroke-width: .5; }
.mkpl__prog { fill: none; stroke: var(--mkpl-accent); stroke-width: .8; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transform: rotate(-90deg); transform-origin: 50% 50%; }

.mkpl__mark { position: relative; width: var(--mkpl-mk, 46%); aspect-ratio: 1; opacity: 0; animation: mkpl-in .7s ease .05s forwards; }
.mkpl[data-anim="pulse"] .mkpl__mark, .mkpl[data-anim="wipe"] .mkpl__mark, .mkpl[data-anim="bar"] .mkpl__mark { width: var(--mkpl-mk, 70%); }
.mkpl__ghost, .mkpl__fill { position: absolute; inset: 0; background: var(--mkpl-mark); }
.mkpl[data-recolor="1"] .mkpl__ghost, .mkpl[data-recolor="1"] .mkpl__fill { -webkit-mask: var(--mkpl-logo) center / contain no-repeat; mask: var(--mkpl-logo) center / contain no-repeat; }
.mkpl[data-recolor="0"] .mkpl__ghost, .mkpl[data-recolor="0"] .mkpl__fill { background: var(--mkpl-logo) center / contain no-repeat; }
.mkpl__ghost { opacity: .22; }
.mkpl__fill { clip-path: inset(100% 0 0 0); } /* JS drives this per animation */

/* pulse */
.mkpl[data-anim="pulse"] .mkpl__ghost { display: none; }
.mkpl[data-anim="pulse"] .mkpl__fill { clip-path: none; animation: mkpl-pulse 1.6s ease-in-out infinite; }
.mkpl[data-anim="pulse"] .mkpl__mark { filter: drop-shadow(0 0 calc(var(--mkpl-size) * .08) var(--mkpl-accent)); }
/* spinner */
.mkpl[data-anim="spinner"] .mkpl__ghost { display: none; }
.mkpl[data-anim="spinner"] .mkpl__fill { clip-path: none; }
.mkpl[data-anim="spinner"] .mkpl__ring { animation: mkpl-spin 1.1s linear infinite; }
.mkpl[data-anim="spinner"] .mkpl__prog { stroke-dasharray: 26 74; stroke-dashoffset: 0; stroke-width: 1.2; }
/* bar */
.mkpl[data-anim="bar"] .mkpl__ghost { display: none; }
.mkpl[data-anim="bar"] .mkpl__fill { clip-path: none; }
.mkpl__bar { width: min(calc(var(--mkpl-size) * 1.1), 70vw); height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .15); background: color-mix(in srgb, var(--mkpl-mark) 16%, transparent); overflow: hidden; }
.mkpl__barfill { display: block; height: 100%; width: 100%; background: var(--mkpl-accent); transform-origin: 0 50%; transform: scaleX(var(--p)); border-radius: 4px; }
/* wipe: JS sets clip-path */

@keyframes mkpl-in { to { opacity: 1; } }
@keyframes mkpl-spin { to { transform: rotate(360deg); } }
@keyframes mkpl-pulse { 0%, 100% { transform: scale(.94); opacity: .75; } 50% { transform: scale(1.04); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
	.mkpl, .mkpl__mark { transition-duration: .01s; }
	.mkpl[data-anim="pulse"] .mkpl__fill, .mkpl[data-anim="spinner"] .mkpl__ring { animation: none; }
	.mkpl__mark { animation: mkpl-in .3s ease forwards; }
}
@media (max-width: 767px) and (max-height: 420px) { .mkpl__dial { width: min(var(--mkpl-size), 60vh); } }