/* Pixelz360 site loader — exact animation from four-loaders.html */

html.px-is-loading,
html.px-is-loading body {
	overflow: hidden;
}

#px-site-loader {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #FFFFFF;
	opacity: 1;
	visibility: visible;
	transition: opacity 0.45s ease, visibility 0.45s ease;
}

#px-site-loader.is-done {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* Tighter spacing: 48px cubes with 24px gaps. Total 264px wide. */
#px-site-loader .stage {
	display: flex;
	gap: 24px;
	padding: 2rem 1rem;
	isolation: isolate;
}

#px-site-loader .pod {
	animation: 3s ease-in-out infinite;
	position: relative;
}

/* Blue is last in the DOM (paints on top of everything) but displays first via flex order */
#px-site-loader .pod--blue   { animation-name: px-loader-pod1; order: -1; z-index: 4; }
#px-site-loader .pod--red    { animation-name: px-loader-pod2; z-index: 3; }
#px-site-loader .pod--green  { animation-name: px-loader-pod3; z-index: 2; }
#px-site-loader .pod--orange { animation-name: px-loader-pod4; z-index: 1; }

/* Base loader (from Uiverse.io by alexruix, retimed into a 4s choreography) */
#px-site-loader .loader {
	width: 48px;
	height: 48px;
	margin: auto;
	position: relative;
}

#px-site-loader .loader:after {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 4px;
	animation: 3s linear infinite;
}

/* Pixelz360 logo pixel colours */
#px-site-loader .loader--blue:after    { background: #1868DB;   animation-name: px-loader-jump1; }
#px-site-loader .loader--red:after     { background: #EF3B35;   animation-name: px-loader-jump2; }
#px-site-loader .loader--green:after   { background: #6CBE45;   animation-name: px-loader-jump3; }
#px-site-loader .loader--orange:after  { background: #F7941E;   animation-name: px-loader-jump4; }

/* ---- Phase 1 (0% to 50%): sequential bounces, one cube per 0.5s slice ---- */

@keyframes px-loader-jump1 {
	1.875%        { border-bottom-right-radius: 3px; }
	3.125%        { transform: translateY(9px) rotate(22.5deg); }
	6.25%         { transform: translateY(18px) scale(1, .9) rotate(45deg); border-bottom-right-radius: 40px; }
	9.375%        { transform: translateY(9px) rotate(67.5deg); }
	12.5%, 100%   { transform: translateY(0) rotate(90deg); border-bottom-right-radius: 4px; }
}

@keyframes px-loader-jump2 {
	0%, 12.5%     { transform: translateY(0) rotate(0); }
	14.375%       { border-bottom-right-radius: 3px; }
	15.625%       { transform: translateY(9px) rotate(22.5deg); }
	18.75%        { transform: translateY(18px) scale(1, .9) rotate(45deg); border-bottom-right-radius: 40px; }
	21.875%       { transform: translateY(9px) rotate(67.5deg); }
	25%, 100%     { transform: translateY(0) rotate(90deg); border-bottom-right-radius: 4px; }
}

@keyframes px-loader-jump3 {
	0%, 25%       { transform: translateY(0) rotate(0); }
	26.875%       { border-bottom-right-radius: 3px; }
	28.125%       { transform: translateY(9px) rotate(22.5deg); }
	31.25%        { transform: translateY(18px) scale(1, .9) rotate(45deg); border-bottom-right-radius: 40px; }
	34.375%       { transform: translateY(9px) rotate(67.5deg); }
	37.5%, 100%   { transform: translateY(0) rotate(90deg); border-bottom-right-radius: 4px; }
}

@keyframes px-loader-jump4 {
	0%, 37.5%     { transform: translateY(0) rotate(0); }
	39.375%       { border-bottom-right-radius: 3px; }
	40.625%       { transform: translateY(9px) rotate(22.5deg); }
	43.75%        { transform: translateY(18px) scale(1, .9) rotate(45deg); border-bottom-right-radius: 40px; }
	46.875%       { transform: translateY(9px) rotate(67.5deg); }
	50%, 100%     { transform: translateY(0) rotate(90deg); border-bottom-right-radius: 4px; }
}

/* ---- Phase 2 (50% to 95%): merge to centre, pulse, split back ---- */
/* Cube left edges at 0 / 72 / 144 / 216px, so offsets to the middle are ±108 and ±36 */

@keyframes px-loader-pod1 {
	0%, 55%   { transform: translateX(0) scale(1); }
	67.5%     { transform: translateX(108px) scale(1); }
	73%       { transform: translateX(108px) scale(1.25); }
	80%       { transform: translateX(108px) scale(1); }
	95%, 100% { transform: translateX(0) scale(1); }
}

@keyframes px-loader-pod2 {
	0%, 50%   { transform: translateX(0) scale(1); }
	62.5%     { transform: translateX(36px) scale(1); }
	70%, 80%  { transform: translateX(36px) scale(0); }
	95%, 100% { transform: translateX(0) scale(1); }
}

@keyframes px-loader-pod3 {
	0%, 50%   { transform: translateX(0) scale(1); }
	62.5%     { transform: translateX(-36px) scale(1); }
	70%, 80%  { transform: translateX(-36px) scale(0); }
	95%, 100% { transform: translateX(0) scale(1); }
}

@keyframes px-loader-pod4 {
	0%, 50%   { transform: translateX(0) scale(1); }
	62.5%     { transform: translateX(-108px) scale(1); }
	70%, 80%  { transform: translateX(-108px) scale(0); }
	95%, 100% { transform: translateX(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	#px-site-loader .pod,
	#px-site-loader .loader:after {
		animation: none !important;
	}
}