/* custom animations */

/* utilities */
.delay-1 {
	transition-delay: 1s !important;
}

.delay-2 {
	transition-delay: 1.5s !important;
}

.delay-3 {
	transition-delay: 2s !important;
}

.delay-4 {
	transition-delay: 2s !important;
}

.delay-5 {
	transition-delay: 2.5s !important;
}

.default-animation {
	opacity: 0;
	transition:
		opacity 1s ease-out,
		filter 1s ease-out,
		margin-top 0.6s ease-out;
	margin-top: 50px; /* translate y */
	filter: blur(10px);
}

/* Apply animation when in viewport */
.in-viewport .default-animation,
#editor .default-animation {
	opacity: 1;
	filter: blur(0);
	margin-top: 0;
}

/* fade-out */
.fade-out {
	opacity: 1;
	transition: opacity 1s ease-out;
}

.in-viewport .fade-out {
	opacity: 0;
}

/* fade-in */
.fade-in {
	opacity: 0;
	transition: opacity 1s ease-out;
	#editor & {
		opacity: 1 !important;
	}
}

.in-viewport .fade-in {
	opacity: 1;
}

/* TODO */
.fade-from-black .parallax-hero--inner {
	background-color: green;
	transition: background-color 1s ease-out;
}

.in-viewport.fade-from-black .parallax-hero--inner {
	background-color: unset;
}

.file-denkmal-mit-drehung-1 {
	transform-origin: center center;
	display: flex;
	justify-content: center;
	align-items: center;
	transform: translate(
		-50%,
		-50%
	); /* Shifts it back by half its own width/height */
}

.file-denkmal-mit-drehung-1 img {
	transform: translate(191px, 0px) rotate(0deg); /* translate by half of the width of the image */
	transform-origin: left center;
	opacity: 0;
	transition:
		opacity 1s ease-out,
		filter 1s ease-out,
		margin-top 0.6s ease-out,
		transform 5s ease-out;
}

.in-viewport .file-denkmal-mit-drehung-1 img {
	opacity: 1;
	transform: translate(191px, 0px) rotate(80deg);
}

/* add a pulse animation */
.pulse {
	animation: pulse-opacity 1s infinite;
}

@keyframes pulse-opacity {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
}