@layer animations {
	@media(prefers-reduced-motion: no-preference) {
		/* Animations */
		@keyframes click {
			0% {
				scale: 1;
			}
			50% {
				scale: 1.1;
			}
			100% {
				scale: 1;
			}
		}

		@keyframes flow-out {
			0% {
				transform: translateY(0);
				opacity: 1;
				scale: 1;
				z-index: 1;
			}
			50% {
				transform: translateY(-15%);
				scale: 0.9;
				z-index: 0;
			}
			100% {
				transform: translateY(-15%);
				opacity: 0.25;
				scale: 0.9;
				z-index: 0;
			}
		}

		.animate-flow-out {
			animation-name: flow-out;
			animation-duration: 700ms;
			animation-direction: normal;
			animation-timing-function: linear;
			animation-fill-mode: forwards;
		}

		@keyframes flow-in {
			0% {
				transform: translateY(10%);
				opacity: 0.25;
				scale: 0.9;
				z-index: 0;
			}
			50% {
				opacity: 1;
				scale: 1;
				z-index: 1;
			}
			100% {
				transform: translateY(0);
				opacity: 1;
				scale: 1;
				z-index: 1;
			}
		}

		.animate-flow-in {
			animation-name: flow-in;
			animation-delay: 150ms;
			animation-duration: 700ms;
			animation-direction: normal;
			animation-timing-function: linear;
			animation-fill-mode: forwards;
		}
	}
}