html.cards main {
	view-transition-name: main;
}
html.cards.back::view-transition-new(main){
	animation: 400ms ease scale-up both;
	z-index: 1;
}
html.cards.back::view-transition-old(main){
	animation: 400ms cubic-bezier(0.2, 0, 0.2, 1) slide-down both;
	box-shadow: 0 -10px 40px rgba(0,0,0,0.5);
	z-index: 2;
}
html.cards::view-transition-new(main){
	animation: 400ms cubic-bezier(0.2, 0, 0.2, 1) slide-up both;
	box-shadow: 0 -10px 40px rgba(0,0,0,0.5);
	mix-blend-mode: normal;
	z-index: 2;
}
html.cards::view-transition-old(main){
	animation: 400ms ease scale-down both;
	mix-blend-mode: normal;
	z-index: 1;
}
@keyframes scale-down {
	0% {
		filter: brightness(1);
		opacity: 1;
		transform: scale(1);
	}
	100% {
		filter: brightness(0.7);
		opacity: 0;
		transform: scale(0.95);
	}
}
@keyframes scale-up {
	0% {
		filter: brightness(0.7);
		opacity: 0;
		transform: scale(0.95);
	}
	100% {
		filter: brightness(1);
		opacity: 1;
		transform: scale(1);
	}
}
@keyframes slide-down {
	0% {
		opacity: 1;
		transform: translateY(0);
	}
	100% {
		opacity: 0;
		transform: translateY(100%);
	}
}
@keyframes slide-up {
	0% {
		transform: translateY(100%);
	}
	100% {
		transform: translateY(0);
	}
}