/* 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;
}

.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(90deg);
}

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

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