/* "Pixel sweep" page transition (from the 4SPixel page-transition handoff).
 * Loaded on every front-end page with assets/js/pixel-transition.js; the anti-flash
 * snippet is printed in <head> by inc/transition.php. */

.px-transition {
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	visibility: hidden;
}
.px-transition.is-active { visibility: visible; pointer-events: all; }

/* Tile grid */
.px-transition__grid {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: repeat(var(--px-cols, 16), 1fr);
	grid-template-rows: repeat(var(--px-rows, 9), 1fr);
}
.px-tile {
	background: #5B2BD9;
	transform: scale(0) rotate(-20deg);
	border-radius: 50%;
	will-change: transform;
}
.px-tile.is-light  { background: #6538E0; }
.px-tile.is-dark   { background: #5226CE; }
.px-tile.is-coral  { background: #EE5A3A; }

/* Phase 1: cover. Each tile has --d (stagger delay, ms) set by JS. */
.px-transition.is-covering .px-tile {
	animation: pxCover 260ms cubic-bezier(.65, 0, .35, 1) calc(var(--d) * 1ms) both;
}
/* Covered (instant, used on the new page before revealing) */
.px-transition.is-covered .px-tile { transform: scale(1.12); border-radius: 6%; }
/* Phase 3: reveal */
.px-transition.is-revealing .px-tile {
	animation: pxReveal 330ms cubic-bezier(.65, 0, .35, 1) calc(var(--d) * 1ms) both;
}
@keyframes pxCover  { from { transform: scale(0) rotate(-20deg); border-radius: 50%; } to { transform: scale(1.12) rotate(0); border-radius: 6%; } }
@keyframes pxReveal { from { transform: scale(1.12) rotate(0); border-radius: 6%; } to { transform: scale(0) rotate(20deg); border-radius: 50%; } }

/* Centre: glow, logo, destination label, progress line */
.px-transition__center {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 26px;
	opacity: 0;
}
.px-transition__glow {
	position: absolute;
	width: 720px; height: 720px;
	max-width: 120vw; max-height: 120vw;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(23,17,46,.42), rgba(23,17,46,0) 65%);
}
.px-transition__logo { position: relative; width: 132px; height: 132px; overflow: visible; filter: drop-shadow(0 24px 40px rgba(23,17,46,.35)); }
.px-transition__logo rect { transform-box: fill-box; transform-origin: center; }
.px-transition__label {
	position: relative;
	font: 500 14px/1 'IBM Plex Mono', ui-monospace, monospace;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: #FFFFFF;
}
.px-transition__bar { position: relative; width: 180px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.2); overflow: hidden; }
.px-transition__bar span { display: block; height: 100%; background: #FFFFFF; transform-origin: left; transform: scaleX(0); }

/* Phase 2: logo builds (starts as the cover finishes) */
.px-transition.is-covering .px-transition__center { opacity: 1; transition: opacity 160ms ease 340ms; }
.px-transition.is-covered .px-transition__center { opacity: 1; transition: none; }
.px-transition.is-covering .px-sq   { animation: pxSq 420ms cubic-bezier(.2, .9, .25, 1.2) both; }
.px-transition.is-covering .px-sq-1 { --dx: -70px; --dy: -50px; animation-delay: 360ms; }
.px-transition.is-covering .px-sq-2 { --dx:  70px; --dy: -60px; animation-delay: 400ms; }
.px-transition.is-covering .px-sq-3 { --dx: -60px; --dy:  70px; animation-delay: 440ms; }
.px-transition.is-covering .px-sq-o { animation: pxCoral 460ms cubic-bezier(.3, 1.5, .5, 1) 420ms both; }
.px-transition.is-covering .px-transition__label { animation: pxLabel 360ms cubic-bezier(.2, .8, .2, 1) 520ms both; }
.px-transition.is-covering .px-transition__bar span { animation: pxBar 700ms cubic-bezier(.2, .7, .2, 1) 380ms both; }
.px-transition.is-covered .px-transition__bar span,
.px-transition.is-revealing .px-transition__bar span { transform: scaleX(1); transition: transform 300ms ease; }
.px-transition.is-covered .px-sq-o { transform: rotate(14deg); }
.px-transition.is-revealing .px-transition__center { opacity: 0; transform: scale(.86); transition: opacity 180ms ease, transform 220ms ease; }

@keyframes pxSq    { from { transform: translate(var(--dx), var(--dy)) rotate(-60deg) scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pxCoral { 0% { transform: translate(60px, 60px) rotate(-200deg) scale(.2); opacity: 0; } 60% { transform: rotate(30deg) scale(1.12); opacity: 1; } 100% { transform: rotate(14deg) scale(1); opacity: 1; } }
@keyframes pxLabel { from { opacity: 0; transform: translateY(10px); letter-spacing: .5em; } to { opacity: 1; transform: none; letter-spacing: .24em; } }
@keyframes pxBar   { from { transform: scaleX(0); } to { transform: scaleX(.92); } }

/* Mobile: bigger, squarer tiles; smaller logo */
@media (max-width: 960px) {
	.px-transition__logo { width: 96px; height: 96px; }
	.px-transition__label { font-size: 12px; }
	.px-transition__bar { width: 120px; }
	.px-transition__center { gap: 18px; }
}

/* Reduced motion: no tiles or logo animation, just a short fade */
@media (prefers-reduced-motion: reduce) {
	.px-transition { background: #5B2BD9; opacity: 0; transition: opacity 150ms ease; }
	.px-transition.is-active.is-covering,
	.px-transition.is-active.is-covered { opacity: 1; }
	.px-transition__grid, .px-transition__bar { display: none; }
	.px-transition * { animation: none !important; }
	.px-transition .px-sq-o { transform: rotate(14deg); }
}