.load::after {
	animation-name: load;
	animation-duration: 2s;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}

.active::before {
	animation-name: bubble;

	animation-delay: 0s;

	animation-duration: 0.26s;

	animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);

	animation-iteration-count: 1;

	animation-fill-mode: none;
}


.active {
	animation-name: shimmer, charge;

	background: linear-gradient(-45deg, rgba(220, 5, 44, 1) 40%, #fafafa 50%, rgba(220, 5, 44, 1) 60%);
	color: transparent;
	background-clip: text;
	background-size: 300%;
	background-position-x: 113%;

	animation-delay: 0s, 0.26s;

	animation-duration: 1s, 0.52s;

	animation-timing-function: linear, cubic-bezier(0.34, 1.56, 0.64, 1);

	animation-iteration-count: infinite, 1;

	animation-fill-mode: none, forwards;

	font-size: 0px;
}

.hover_menu {
	animation-name: shimmer;

	background: linear-gradient(-45deg, rgba(220, 5, 44, 1) 40%, #fafafa 50%, rgba(220, 5, 44, 1) 60%);
	color: transparent;
	background-clip: text;
	background-size: 300%;
	background-position-x: 113%;

	animation-delay: 0s;

	animation-duration: 1s;

	animation-timing-function: linear;

	animation-iteration-count: infinite;

	animation-fill-mode: forwards;
}

.entry:hover::before {
	animation-name: entry_fill;

	animation-delay: 0s;

	animation-duration: 0.52s;

	/* easeOutCirc */
	animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1);

	animation-iteration-count: 1;

	animation-fill-mode: forwards;
}

.connection:hover::before {
	animation-name: connection_fill;

	animation-delay: 0s;

	animation-duration: 0.26s;

	/* easeOutQuint */
	animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);

	animation-iteration-count: 1;

	animation-fill-mode: forwards;
}

@keyframes connection_fill {
	0% {
		width: 0%;
		height: 0%;
	}

	100% {
		width: 100%;
		height: 100%;
	}
}

@keyframes entry_fill {
	0% {
		width: 0%;
		height: 0%;
	}

	100% {
		width: 105%;
		height: 105%;
	}
}

@keyframes bubble {
	0% {
		width: 0rem;
		height: 0rem;
		border-width: 0rem;
	}

	50% {
		width: 0rem;
		height: 0rem;
		border-width: 5.5vmin;

		animation-timing-function: linear;
	}

	100% {
		width: 10vmin;
		height: 10vmin;
		border-width: 0.5vmin;
	}
}

@keyframes charge {
	0% {
		font-size: 0rem;
	}

	100% {
		font-size: 5vmin;
	}
}

@keyframes shimmer {
	to {
		background-position-x: -13%;
	}
}

@keyframes sway {
	0% {
		transform: translateX(var(--start_x)) translateY(var(--start_y));
	}

	100% {
		transform: translateX(var(--end_x)) translateY(var(--end_y));
	}
}

@keyframes flicker {
	0% {
		opacity: 1;
	}

	50% {
		opacity: 0.13;
	}

	100% {
		opacity: 1;
	}
}

@keyframes load {
	0% {
		backdrop-filter: blur(5px);
	}

	100% {
		backdrop-filter: blur(0px);
	}
}

@keyframes fade_in {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes fade_out {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

/* goofy border shadow BS 

h-offset, v-offset, blur, spread, color

*/

@keyframes fade_in_bs {
	0% {
		box-shadow: 0px 5px 26px 0px rgba(0, 0, 0, 0),
					0px -5px 26px 0px rgba(0, 0, 0, 0),
					5px 0px 26px 0px rgba(0, 0, 0, 0),
					-5px 0px 26px 0px rgba(0, 0, 0, 0);
	}

	100% {
		box-shadow: 0px 5px 26px 0px rgba(0, 0, 0, 0.13),
					0px -5px 26px 0px rgba(0, 0, 0, 0.13),
					5px 0px 26px 0px rgba(0, 0, 0, 0.13),
					-5px 0px 26px 0px rgba(0, 0, 0, 0.13);
	}
}

@keyframes fade_out_bs {
	0% {
		box-shadow: 0px 5px 26px 0px rgba(0, 0, 0, 0.13),
					0px -5px 26px 0px rgba(0, 0, 0, 0.13),
					5px 0px 26px 0px rgba(0, 0, 0, 0.13),
					-5px 0px 26px 0px rgba(0, 0, 0, 0.13);
	}

	100% {
		box-shadow: 0px 5px 26px 0px rgba(0, 0, 0, 0),
					0px -5px 26px 0px rgba(0, 0, 0, 0),
					5px 0px 26px 0px rgba(0, 0, 0, 0),
					-5px 0px 26px 0px rgba(0, 0, 0, 0);
	}
}

@keyframes close_curtain {
	100% {
		width: 0rem;
		height: 0rem;
	}
}

@keyframes open_curtain {
	100% {
		width: max(200vw, 200vh);
		height: max(200vw, 200vh);
	}
}