/* Motion Elements Page Transitions.
 * One veil element carries the visitor between pages. It rests
 * offstage, covers the page on a click (is-entering), stands as the
 * cover an arriving page loads behind (is-covering), then clears into
 * the new page (is-lifting). Tokens per device band come from
 * Settings > Motion Elements and are printed in the head; the ease is
 * the house entrance ease so the whole site moves on one curve.
 */

.pwf-veil {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--pwf-tr-color, #fff);
	opacity: 1;
	transform: translate3d(0, 100%, 0);
	pointer-events: none;
	will-change: transform, opacity;
	contain: strict;
}

.pwf-veil--fade {
	transform: none;
	opacity: 0;
}

.pwf-veil--wipe {
	transform: translate3d(-100%, 0, 0);
}

/* Standing cover: an arriving page loads behind it, no motion. */
.pwf-veil.is-covering {
	transform: none;
	opacity: 1;
	transition: none;
}

/* Leaving: the veil covers the page and takes the clicks with it. */
.pwf-veil.is-entering {
	transform: none;
	opacity: 1;
	pointer-events: auto;
	transition:
		transform var(--pwf-tr-leave, 480ms) var(--pwf-ent-ease, cubic-bezier(0.16, 1, 0.3, 1)),
		opacity var(--pwf-tr-leave, 480ms) ease;
}

/* Arriving: the veil clears and the page's entrances begin beneath it. */
.pwf-veil--rise.is-lifting {
	transform: translate3d(0, -100%, 0);
	transition: transform var(--pwf-tr-arrive, 650ms) var(--pwf-ent-ease, cubic-bezier(0.16, 1, 0.3, 1));
}

.pwf-veil--fade.is-lifting {
	transform: none;
	opacity: 0;
	transition: opacity var(--pwf-tr-arrive, 650ms) ease;
}

.pwf-veil--wipe.is-lifting {
	transform: translate3d(100%, 0, 0);
	transition: transform var(--pwf-tr-arrive, 650ms) var(--pwf-ent-ease, cubic-bezier(0.16, 1, 0.3, 1));
}

.pwf-veil__logo {
	display: block;
	width: var(--pwf-tr-logo, 160px);
	max-width: 60vw;
	height: auto;
	opacity: 0;
	transition: opacity 220ms ease;
}

.pwf-veil.is-entering .pwf-veil__logo {
	opacity: 1;
	transition-delay: calc(var(--pwf-tr-leave, 480ms) * 0.5);
}

.pwf-veil.is-covering .pwf-veil__logo {
	opacity: 1;
	transition: none;
}

.pwf-veil.is-lifting .pwf-veil__logo {
	opacity: 0;
	transition-duration: 160ms;
}

/* The page you are leaving steps back a touch as the veil comes. */
.pwf-veil-dim {
	position: fixed;
	inset: 0;
	z-index: 2147482999;
	background: #000;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--pwf-tr-leave, 480ms) ease;
}

html.pwf-tr-leaving .pwf-veil-dim {
	opacity: 0.1;
}

/* Once the veil element stands, the head cover steps aside. */
html.pwf-tr-covered.pwf-tr-arriving::before {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.pwf-veil,
	.pwf-veil-dim {
		display: none !important;
	}
}