.auth-page { perspective: 1600px; }
.auth-stage { transform-style: preserve-3d; }
.auth-stage.is-leave,
.auth-stage.is-enter { pointer-events: none; }
.auth-stage.is-leave .panda-peek,
.auth-stage.is-enter .panda-peek { animation: none !important; }
.auth-modal-wrap { transform-style: preserve-3d; }
.auth-stage.is-leave-next .auth-modal-wrap {
	transform-origin: left center;
	animation: authCardOutNext 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.auth-stage.is-leave-back .auth-modal-wrap {
	transform-origin: right center;
	animation: authCardOutBack 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.auth-stage.is-enter-next .auth-modal-wrap {
	transform-origin: right center;
	animation: authCardInNext 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.auth-stage.is-enter-back .auth-modal-wrap {
	transform-origin: left center;
	animation: authCardInBack 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes authCardOutNext {
	0% { transform: rotateY(0) translateX(0); opacity: 1; filter: brightness(1); }
	100% { transform: rotateY(-78deg) translateX(-8%); opacity: 0; filter: brightness(0.7); }
}
@keyframes authCardOutBack {
	0% { transform: rotateY(0) translateX(0); opacity: 1; filter: brightness(1); }
	100% { transform: rotateY(78deg) translateX(8%); opacity: 0; filter: brightness(0.7); }
}
@keyframes authCardInNext {
	0% { transform: rotateY(78deg) translateX(8%); opacity: 0; filter: brightness(0.7); }
	100% { transform: rotateY(0) translateX(0); opacity: 1; filter: brightness(1); }
}
@keyframes authCardInBack {
	0% { transform: rotateY(-78deg) translateX(-8%); opacity: 0; filter: brightness(0.7); }
	100% { transform: rotateY(0) translateX(0); opacity: 1; filter: brightness(1); }
}
@media (prefers-reduced-motion: reduce) {
	.auth-stage.is-leave .auth-modal-wrap,
	.auth-stage.is-enter .auth-modal-wrap { animation: none !important; }
}