/*
 * kl-commerce/assets/css/transition.css
 *
 * The page wipe.
 *
 * Blocks of uneven size grow out of nothing until the screen is covered, the
 * browser moves to the next page, and there the same blocks shrink away again.
 *
 * A grid sits underneath the irregular shapes on purpose: it guarantees they
 * tile the viewport exactly, with no seam for the old page to show through.
 * Scattering free rectangles would look identical right up until one of them
 * left a gap.
 */

.klc-wipe {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: none;
	pointer-events: none;
}

/*
 * The class is added by script, so a visitor with no JavaScript — or a broken
 * asset — never sees an overlay at all, let alone one stuck over the page.
 *
 * On arrival the container paints solid before its blocks exist, which is what
 * stops the incoming page flashing through in the frame between first paint
 * and the script running.
 */
.klc-wipe-ready .klc-wipe {
	display: grid;
	background-color: var(--klc-color-bg);
}

.klc-wipe.is-busy {
	pointer-events: all;
}

/* Once the blocks are in place they carry the colour, not the container. */
.klc-wipe.is-built {
	background-color: transparent;
}

.klc-wipe__block {
	background-color: var(--klc-color-bg);
	transform: scale(0);
	/* A hair of overlap, so neighbouring blocks never show a hairline. */
	outline: 1px solid var(--klc-color-bg);
	will-change: transform;
}

.klc-wipe.is-covering .klc-wipe__block {
	transform: scale(1);
	transition: transform var(--klc-wipe-duration, 380ms) var(--klc-wipe-ease);
	transition-delay: var(--in-delay, 0ms);
}

.klc-wipe.is-held .klc-wipe__block {
	transform: scale(1);
	transition: none;
}

.klc-wipe.is-revealing .klc-wipe__block {
	transform: scale(0);
	transition: transform var(--klc-wipe-duration, 380ms) var(--klc-wipe-ease);
	transition-delay: var(--out-delay, 0ms);
}

/*
 * Reduced motion removes it entirely rather than shortening it. Someone who
 * has asked for less movement does not want a faster full-screen wipe.
 */
@media (prefers-reduced-motion: reduce) {

	.klc-wipe,
	.klc-wipe-ready .klc-wipe {
		display: none;
	}
}