@view-transition {
	navigation: auto;
}

::view-transition-old(root) {
	animation: 350ms cubic-bezier(0.4, 0.0, 0.2, 1) both android-slide-out-left;
	z-index: 1;
}

::view-transition-new(root) {
	animation: 350ms cubic-bezier(0.4, 0.0, 0.2, 1) both android-slide-in-right;
	z-index: 2;
}

@keyframes android-slide-out-left {
	to { transform: translateX(-30%); filter: brightness(0.75); }
}

@keyframes android-slide-in-right {
	from { transform: translateX(100%); }
}

.back-transition::view-transition-old(root) {
	animation: 350ms cubic-bezier(0.4, 0.0, 0.2, 1) both android-slide-out-right;
	z-index: 2;
}

.back-transition::view-transition-new(root) {
	animation: 350ms cubic-bezier(0.4, 0.0, 0.2, 1) both android-slide-in-left;
	z-index: 1;
}

@keyframes android-slide-out-right {
	to { transform: translateX(100%); }
}

@keyframes android-slide-in-left {
	from { transform: translateX(-30%); filter: brightness(0.75); }
	to { transform: translateX(0); filter: brightness(1); }
}