/* CSS ANIMATION */


/* TEXT ANIMATION */

.reveal-text {
	position: relative;
	overflow: hidden;
	padding: 0 10px;
}

.reveal-text:after{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: #98866e;
	animation: a-ltr-after 1s ease-in-out forwards;
	transform: translateX(-101%);
}

.reveal-text:before{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: transparent;
	animation: a-ltr-before 1s ease-in-out forwards;
	transform: translateX(0);
}

.reveal-block-1 {
	-webkit-text-fill-color: transparent;
	animation: a-text-color 1s ease-in-out forwards;
	animation-delay: 0s;
}

.reveal-block-2 {
	-webkit-text-fill-color: transparent;
	animation: a-text-color 1s ease-in-out forwards;
	animation-delay: 0.2s;
}

.reveal-block-3 {
	-webkit-text-fill-color: transparent;
	animation: a-text-color 1s ease-in-out forwards;
	animation-delay: 0.4s;
}

.reveal-block-4 {
	opacity: 0;
	animation: show_fadein 0.3s linear forwards;
	animation-delay: 0.8s;
}

.reveal-block-6 {
	-webkit-text-fill-color: transparent;
	animation: a-text-color 1s ease-in-out forwards;
	animation-delay: 1.5s;
}

.reveal-block-7 {
	-webkit-text-fill-color: transparent;
	animation: a-text-color 1s ease-in-out forwards;
	animation-delay: 1.7s;
}

.reveal-block-1:before, .reveal-block-1:after {
	animation-delay: 0s;
}

.reveal-block-2:before, .reveal-block-2:after {
	animation-delay: 0.2s;
}

.reveal-block-3:before, .reveal-block-3:after {
	animation-delay: 0.4s;
}

.reveal-block-6:before, .reveal-block-6:after {
	animation-delay: 1.5s;
}

.reveal-block-7:before, .reveal-block-7:after {
	animation-delay: 1.7s;
}

@keyframes a-ltr-after {
	0% { transform: translateX(-100%) }
	100% { transform: translateX(101%) }
}

@keyframes a-ltr-before {
	0% { transform: translateX(0) }
	100% { transform: translateX(200%) }
}

@keyframes a-text-color {
	100% { -webkit-text-fill-color: initial; }
}

@keyframes show_fadein {
	100% {
		opacity: 1;
	}
}


/* BLOCK ANIMATION */

@keyframes reveal_animation {
	100% {
		transform: translateY(0);
		opacity: 1;
		clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0);
	}
	60% {
		transform: translateY(0);
		opacity: 1;
		clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
		filter: blur(0);
	}
	30% {
		transform: translateY(0);
		opacity: 1;
		clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 40%);
		filter: blur(2px);
	}
	0% {
		transform: translateY(50px);
		opacity: 0;
		clip-path: polygon(100% 0, 100% 0%, 0 100%, 0 100%);
		filter: blur(10px);
	}
}

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

.layout--block_logo {
	transform-origin: 0 0;
	animation: reveal_animation 1.5s ease-out 0s both;
}

.layout--block_promo-repute {
	transform-origin: 0 0;
	animation: show_fadein_blured 0.7s ease-out 0s both;
}

#background_container {
	transform-origin: 0 0;
	animation: show_fadein_blured 0.5s ease-out 0.7s both;
}


/* ICON ANIMATION */

.reveal-block-5 {
	opacity: 0;
	animation: show_fadein 0.3s linear forwards 0.8s, icon-bell 4s linear 10 forwards 2.5s;
	transform-origin: 50% 0;
}

@keyframes icon-bell {
	0% {
		transform: rotateZ(-15deg);
	}
	2.5% {
		transform: rotateZ(15deg);
	}
	5% {
		transform: rotateZ(-18deg);
	}
	7.5% {
		transform: rotateZ(18deg);
	}
	10% {
		transform: rotateZ(-22deg);
	}
	12.5% {
		transform: rotateZ(22deg);
	}
	15% {
		transform: rotateZ(-18deg);
	}
	17.5% {
		transform: rotateZ(18deg);
	}
	20% {
		transform: rotateZ(-12deg);
	}
	22.5% {
		transform: rotateZ(12deg);
	}
	25% {
		transform: rotateZ(0deg);
	}
}


/* PROMO TEXT ANIMATION */

.cubed-text-container {
	transform-style: preserve-3d;
	position: absolute;
	top: 0;
	left: 0;
}

.cubed-text {
	position: relative;
	perspective: 550px;
	height: 30px;
}

.cubed-text-out {
	animation: text-out 1s ease;
}

.cubed-text-in {
	animation: text-in 1s ease;
}

@keyframes text-out {
	to {
		transform: rotateX(90deg);
		opacity: 0;
	}
}

@keyframes text-in {
	from {
		opacity: 0;
		transform: rotateX(-90deg);
	}
	to {
		transform: rotateX(0deg);
		opacity: 1;
	}
}