@charset "UTF-8";

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

	100% {
		opacity: 1;
	}
}

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

	100% {
		opacity: 1;
	}
}

@keyframes node-movement {
	0% {
		left: var(--graph-node-from-left);
		top: var(--graph-node-from-top);
	}

	100% {
		left: var(--graph-node-to-left);
		top: var(--graph-node-to-top);
	}
}

section.graph:not(.appearance) {
	opacity: 0;
}

section.graph.appearance:not(.animated) {
	opacity: 1;
}

section.graph.appearance.animated {
	animation-name: appearance;
	animation-fill-mode: forwards;
	animation-duration: 0.2s;
	animation-timing-function: ease-in;
}

section.graph.dissapearance:not(.appearance.animated),
section.graph:not(.dissapearance).appearance.animated + div.loading {
	animation-name: appearance;
	animation-fill-mode: forwards;
	animation-duration: 0.2s;
	animation-timing-function: ease-in;
	animation-direction: reverse;
}

section.graph .node.movement {
	animation-name: node-movement;
	animation-fill-mode: forwards;
	animation-duration: 0.6s;
	animation-timing-function: cubic-bezier(0, 1, 1, 1);
}

section.graph+div.loading {
	z-index: 60;
	position: absolute;
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	pointer-events: none;
	background-color: #00000040;
}

section.graph+div.loading>i.icon.loading {
	position: absolute;
	left: var(--left, -100vw);
	top: var(--top, -100vh);
}
