@keyframes node-drift {
	0% {
		top: 0px;
		left: 8px;
		transform: translate(-50%,3px);
	}
	7% {
		top: -2px;
		left: 5px;
	}
	13% {
		top: 6px;
	}
	17% {
		transform: translate(-52%x,7px);
	}
	20% {
		top: 1px;
		left: -2px;
	}
	23% {
		transform: translate(-49%,-1px);
	}
	25% {
		top: -4px;
		left: -5px;
	}
	29% {
		top: -10px;
	}
	32% {
		transform: translate(-45%,-5px);
	}
	37% {
		left: 8px;
	}
	40% {
		top: 10px;
	}
	43% {
		transform: translate(-48%,-1px);
	}
	50% {
		top: 0px;
		left: -8px;
		transform: translate(-50%,-3px);
	}
	56% {
		top: 2px;
		left: -5px;
	}
	62% {
		top: -6px;
	}
	65% {
		transform: translate(-47%,-7px);
	}
	70% {
		top: -1px;
		left: 2px;
	}
	72% {
		transform: translate(-51%,1px);
	}
	76% {
		top: 4px;
		left: 5px;
	}
	78% {
		top: 10px;
	}
	83% {
		transform: translate(-55%,5px);
	}
	86% {
		left: -8px;
	}
	92% {
		top: -10px;
	}
	96% {
		transform: translate(-51%,1px);
	}
	100% {
		top: 0px;
		left: 8px;
		transform: translate(-50%,3px);
	}
}

@keyframes line-in {
	from {
		opacity: 0;
    	stroke-dashoffset: 100;
  	}
  	to {
  		opacity: 1;
    	stroke-dashoffset: 0;
  	}
}

@keyframes line-out {
	from {
		opacity: 0.1;
    	stroke-dashoffset: 0;
  	}
  	to {
  		opacity: 0.1;
    	stroke-dashoffset: -100;
  	}
}

@keyframes fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes fade-out {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

@keyframes line-fade9 {
	from {
		opacity: 1;
	}
	to {
		opacity: 0.9;
	}
}

@keyframes line-fade8 {
	from {
		opacity: 0.9;
	}
	to {
		opacity: 0.8;
	}
}

@keyframes line-fade7 {
	from {
		opacity: 0.8;
	}
	to {
		opacity: 0.7;
	}
}

@keyframes line-fade6 {
	from {
		opacity: 0.7;
	}
	to {
		opacity: 0.6;
	}
}

@keyframes line-fade5 {
	from {
		opacity: 0.6;
	}
	to {
		opacity: 0.5;
	}
}

@keyframes line-fade4 {
	from {
		opacity: 0.5;
	}
	to {
		opacity: 0.4;
	}
}

@keyframes line-fade3 {
	from {
		opacity: 0.4;
	}
	to {
		opacity: 0.3;
	}
}

@keyframes line-fade2 {
	from {
		opacity: 0.3;
	}
	to {
		opacity: 0.2;
	}
}

@keyframes line-fade1 {
	from {
		opacity: 0.2;
	}
	to {
		opacity: 0.1;
	}
}

@keyframes line-fade0 {
	from {
		opacity: 0.1;
	}
	to {
		opacity: 0;
	}
}

@keyframes storyspace-zoom-out {
	0% {
		transform: scale(100%);
		opacity: 1;
	}
	50%, 100% {
		transform: scale(75%);
		opacity: 0;
	}
}

@keyframes storyspace-zoom-in {
	0%,	50% {
		transform: scale(75%);
		opacity: 0;
	}
	100% {
		transform: scale(100%);
		opacity: 1;
	}
}

@keyframes reflections-zoom-out {
	0% {
		transform: scale(100%);
		opacity: 1;
	}
	50%, 100% {
		transform: scale(125%);
		opacity: 0;
	}
}

@keyframes reflections-zoom-in {
	0%, 50% {
		transform: scale(125%);
		opacity: 0;
	}
	100% {
		transform: scale(100%);
		opacity: 1;
	}
}

@keyframes window-enter-storyspace {
	0% {
		opacity: 1;
		left: 0%;
	}
	50% {
		opacity: 0;
		left: -5%;
	}
	51% {
		opacity: 0;
		left: 5%;
	}
	100% {
		opacity: 1;
		left: 0%;
	}
}

@keyframes window-exit-storyspace {
	0% {
		opacity: 1;
		left: 0%;
	}
	50% {
		opacity: 0;
		left: 5%;
	}
	51% {
		opacity: 0;
		left: -5%;
	}
	100% {
		opacity: 1;
		left: 0%;
	}
}

@keyframes transition-in {
	from {
		background-position: 0% 50%;
	}
	to {
		background-position: 100% 50%;
	}
}

@keyframes transition-out {
	from {
		background-position: 100% 50%;
	}
	to {
		background-position: 0% 50%;
	}
}

@keyframes title-in {
	from {
		right: -2vw;
		opacity: 0;
	}
	to {
		right: 1.5vw;
		opacity: var(--title-opacity);
	}
}

@keyframes title-out {
	from {
		right: 1.5vw;
		opacity: var(--title-opacity);
	}
	to {
		right: -2vw;
		opacity: 0;
	}
}