/* ==========================================================================
   Page transition: 6 gradient bars.
   In:  each bar grows from the left, top bar first, until the screen is covered.
   Out: each bar shrinks towards the right, top bar first.
   Tweak the timing with the three variables below.
   ========================================================================== */

:root {
	--pt-in: .42s;      /* how long one bar takes to come in */
	--pt-out: .5s;      /* how long one bar takes to go out */
	--pt-stagger: 45ms; /* delay between bars */
	--pt-ease: cubic-bezier(.65, 0, .35, 1);
}

.pt {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	pointer-events: none;
	visibility: hidden;
}

.pt__bar {
	flex: 1 1 0;
	margin-bottom: -1px; /* no hairline gaps between bars */
	background: linear-gradient(90deg, var(--a1) 0%, var(--a3) 16%, var(--a2) 56%, var(--a1) 100%);
	transform: scaleX(0);
	transform-origin: left center;
	will-change: transform;
}

/* Leaving the page: bars come in. */
.wvd-leaving .pt { visibility: visible; pointer-events: auto; }
.wvd-leaving .pt__bar {
	animation: wvd-pt-in var(--pt-in) var(--pt-ease) both;
	animation-delay: calc(var(--i) * var(--pt-stagger));
}

/* Arriving on the new page: start covered, bars go out to the right. */
.wvd-arriving .pt { visibility: visible; }
.wvd-arriving .pt__bar {
	transform-origin: right center;
	animation: wvd-pt-out var(--pt-out) var(--pt-ease) both;
	animation-delay: calc(80ms + var(--i) * var(--pt-stagger));
}

@keyframes wvd-pt-in  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes wvd-pt-out { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* While covered, don't let the scroll-reveal fire behind the bars too early. */
.wvd-arriving .reveal { transition-delay: .35s; }

@media (prefers-reduced-motion: reduce) {
	.pt { display: none; }
}