html.ripple main {
	view-transition-name: main;
}
html.ripple::view-transition-old(main) {
	animation: 250ms ease ripple-out both;
}
html.ripple::view-transition-new(main) {
	animation: 250ms ease ripple-in both;
}
html.ripple.back::view-transition-old(main) {
	animation: 250ms ease ripple-out-reverse both;
}
html.ripple.back::view-transition-new(main) {
	animation: 250ms ease ripple-in-reverse both;
}
@keyframes ripple-out{
	0% {
		opacity: 1;
		transform: scale(1);
		filter: blur(0px);
	}
	100% {
		opacity: 0;
		transform: scale(1.5);
		filter: blur(3px);
	}
}
@keyframes ripple-in{
	0% {
		opacity: 0;
		transform: scale(.5);
		filter: blur(3px);
	}
	100% {
		opacity: 1;
		transform: scale(1);
		filter: blur(0px);
	}
}
@keyframes ripple-out-reverse{
	0% {
		opacity: 1;
		transform: scale(1);
		filter: blur(0px);
	}
	100% {
		opacity: 0;
		transform: scale(.5);
		filter: blur(3px);
	}
}
@keyframes ripple-in-reverse{
	0% {
		opacity: 0;
		transform: scale(1.5);
		filter: blur(3px);
	}
	100% {
		opacity: 1;
		transform: scale(1);
		filter: blur(0px);
	}
}