/* CSS ANIMATION */

/* REVEAL BLOCKS */

@keyframes fadein {
	0% {
		opacity: 0;
	}
	30% {
		filter: blur(5px);
		opacity: 0.5;
	}
	100% {
	`	filter: blur(0);
		opacity: 1;
	}
}

@-webkit-keyframes fadein {
	0% {
		opacity: 0;
	}
	30% {
		filter: blur(5px);
		opacity: 0.5;
	}
	100% {
	`	filter: blur(0);
		opacity: 1;
	}
}

#background_container {
	animation: fadein 700ms ease both;
}

.block-special-2 { 
	animation: fadein 300ms ease 0.9s both;
}

.layout--block_text {
	animation: fadein 300ms ease 1.3s both;
}


/* BACKGROUND ANIMATION */

#background_container {
	position: relative;
	height: 150px;
	width: 550px;
	/* margin: 0 auto; */
	z-index: 1;
}

#background_container img {
	position: absolute;
	left: 0;
	bottom: -50px;
	-webkit-transition: opacity 1s ease-in-out;
	transition: opacity 1s ease-in-out;
}

@keyframes fadeout {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@-webkit-keyframes fadeout {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

#background_container img.top {
	animation-name: fadeout;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-duration: 4s;
	animation-direction: alternate;
	animation-delay: 1s;
}


/* TEXT ANIMATION */

.block-special-1 {
	display: grid;
	grid-template-columns: 1fr;
}

.block-special-1 span {
	grid-row-start: 1;
	grid-column-start: 1;
	font-size: 1.8rem;
	--part-height: calc(100% / var(--parts) - 1px);
	--inverse-index: calc(calc(var(--parts) - 1) - var(--index));
	--clip-top: calc(var(--part-height) * var(--index));
	--clip-bottom: calc(var(--part-height) * var(--inverse-index));
	clip-path: inset(var(--clip-top) 0 var(--clip-bottom) 0);
	animation: parted 600ms cubic-bezier(.46,.29,0,1.24) 1 backwards calc(var(--index) * 120ms), glitch 2s ease infinite 2s alternate-reverse;
}

.block-special-1 span:nth-child(odd) { --glitch-translate: 15px; }
.block-special-1 span:nth-child(even) { --glitch-translate: -15px; }

@-webkit-keyframes parted {
	0% {
		opacity: 0;
		transform: translateX(-50%);
		text-shadow: -2px 3px 0 red, 2px -3px 0 blue;
	}
	60% {
		opacity: 0.5;
		transform: translateX(50%);
	}
	80% {
		transform: none;
		opacity: 1;
		text-shadow: 2px -3px 0 red, -2px 3px 0 blue;
	}
	100% {
		text-shadow: none;
	}
}

@keyframes parted {
	0% {
		opacity: 0;
		transform: translateX(-50%);
		text-shadow: -2px 3px 0 red, 2px -3px 0 blue;
	}
	60% {
		opacity: 0.5;
		transform: translateX(50%);
	}
	80% {
		transform: none;
		opacity: 1;
		text-shadow: 2px -3px 0 red, -2px 3px 0 blue;
	}
	100% {
		text-shadow: none;
	}
}

@-webkit-keyframes glitch {
	0% {
		text-shadow: -2px 3px 0 red, 2px -3px 0 blue;
		transform: translate(var(--glitch-translate));
	}
	2% {
		text-shadow: 2px -3px 0 red, -2px 3px 0 blue;
	}
	4%, 100% {  text-shadow: none; transform: none; }
}

@keyframes glitch {
	0% {
		text-shadow: -2px 3px 0 red, 2px -3px 0 blue;
		transform: translate(var(--glitch-translate));
	}
	2% {
		text-shadow: 2px -3px 0 red, -2px 3px 0 blue;
	}
	4%, 100% {  text-shadow: none; transform: none; }
}


/* CHANGING TEXT ANIMATION */

.text_container {
	overflow: hidden;
	height: 24px;
}

.text_container_list {
	text-align: left;
	list-style: none;
	margin: 0;
	padding: 0;
	animation-name: text_change;
	animation-duration: 5s;
	animation-iteration-count: infinite;
	animation-delay: 3s;
}

.text_container_list_item {
	margin: 0;
	padding: 0;
}

@-webkit-keyframes text_change {
	0%, 20%, 100% {
		transform: translate3d(0, 0, 0);
	}
	35%, 90% {
		transform: translate3d(0, -50%, 0);
	}
}

@keyframes text_change {
	0%, 20%, 100% {
		transform: translate3d(0, 0, 0);
	}
	35%, 90% {
		transform: translate3d(0, -50%, 0);
	}
}


/* ICONS ANIMATION */

#messengers span:nth-child(1) { animation-delay: 0.6s; }
#messengers span:nth-child(2) { animation-delay: 0.4s; }
#messengers span:nth-child(3) { animation-delay: 0.2s; }

#messengers span { animation: icons-animation 3.5s infinite ease-in-out; }

@-webkit-keyframes icons-animation {
	0% { transform: scale(1); }
	90% { transform: scale(1); }
	95% { transform: scale(1.5); }
	100% { transform: scale(1); }
}

@keyframes icons-animation {
	0% { transform: scale(1); }
	90% { transform: scale(1); }
	95% { transform: scale(1.5); }
	100% { transform: scale(1); }
}


/* @MEDIA OPTIMISATION */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}