/* CSS ANIMATION */

/* TEXT ANIMATION */

.reveal-text,
.reveal-text::after {
	-webkit-animation-delay: var(--animation-delay, 2s);
	        animation-delay: var(--animation-delay, 2s);
	-webkit-animation-iteration-count: var(--iterations, 1);
	        animation-iteration-count: var(--iterations, 1);
	-webkit-animation-duration: var(--duration, 800ms);
	        animation-duration: var(--duration, 800ms);
	-webkit-animation-fill-mode: both;
	        animation-fill-mode: both;
	-webkit-animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
	        animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
}

.reveal-text {
	position: relative;
	-webkit-animation-name: clip-text;
	        animation-name: clip-text;
	white-space: nowrap;
	cursor: default
}

.reveal-block-1 { 
	--animation-delay: var(--delay, 2s);
	--animation-duration: var(--duration, 800ms);
	--animation-iterations: var(--iterations, 1);
}

.reveal-block-2 { 
	--animation-delay: var(--delay, 3s);
	--animation-duration: var(--duration, 800ms);
	--animation-iterations: var(--iterations, 1);
}

.reveal-block-3 { 
	--animation-delay: var(--delay, 4s);
	--animation-duration: var(--duration, 800ms);
	--animation-iterations: var(--iterations, 1);
}

.reveal-text::after {
		content: "";
		position: absolute;
		z-index: 999;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #d8a478;
		transform: scaleX(0);
		transform-origin: 0 50%;
		pointer-events: none;
		-webkit-animation-name: text-revealer;
			animation-name: text-revealer;
	}


@-webkit-keyframes clip-text {
	from {
		-webkit-clip-path: inset(0 100% 0 0);
			clip-path: inset(0 100% 0 0);
	}
	to {
		-webkit-clip-path: inset(0 0 0 0);
			clip-path: inset(0 0 0 0);
	}
}

@keyframes clip-text {
	from {
		-webkit-clip-path: inset(0 100% 0 0);
		        clip-path: inset(0 100% 0 0);
	}
	to {
		-webkit-clip-path: inset(0 0 0 0);
		        clip-path: inset(0 0 0 0);
	}
}

@-webkit-keyframes text-revealer {
	
	0%, 50% {
		transform-origin: 0 50%;
	}
	
	60%, 100% {
		transform-origin: 100% 50%;
	}

	
	60% {
		transform: scaleX(1);
	}
	
	100% {
		transform: scaleX(0);
	}
}

@keyframes text-revealer {
	
	0%, 50% {
		transform-origin: 0 50%;
	}
	
	60%, 100% {
		transform-origin: 100% 50%;
	}

	
	60% {
		transform: scaleX(1);
	}
	
	100% {
		transform: scaleX(0);
	}
}


/* BLOCK'S ANIMATION */

@keyframes reveal_animation1 {
  30% {
    transform: translateY(0);
    opacity: 1;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0);
    filter: blur(0);
  }

  20% {
    transform: translateY(5px);
    opacity: 0.5;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 15%);
    clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 5%);
    filter: blur(2px);
  }
  0% {
    transform: translateY(-50px);
    opacity: 0;
    -webkit-clip-path: polygon(100% 0, 100% 0%, 0 100%, 0 100%);
    clip-path: polygon(100% 0, 100% 0%, 0 100%, 0 100%);
    filter: blur(10px);
  }
}

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

.light_pillar_container { 
	position: absolute;
	left: 0;
	right: 0;
	width: 100%;
	max-width: 2560px;
	margin: 0 auto;
}

.light_pillar {
	position: absolute;
	width: 0;
	height: 100vh;
	opacity: .75;
	background-color: white;
	box-shadow: #e9f1f1 0px 0px 20px 2px;
	/* top: 100vh; */
	bottom: 0px;
	left: 0px;
	right: 0px;
	margin: auto;
}

.p1 {
	-webkit-animation: floatUp 4s infinite linear both;
	animation: floatUp 4s infinite linear both;
	--scale: 1.0;
}

.p2 {
	-webkit-animation: floatUp 7s infinite linear both;
	animation: floatUp 7s infinite linear both;
	--scale: 1.6;
	left: 15%;
}

.p3 {
	-webkit-animation: floatUp 2.5s infinite linear both;
	animation: floatUp 2.5s infinite linear both;
	--scale: .5;
	left: -15%;
}

.p4 {
	-webkit-animation: floatUp 4.5s infinite linear both;
	animation: floatUp 4.5s infinite linear both;
	--scale: 1.2;
	left: -34%;
}

.p5 {
	-webkit-animation: floatUp 8s infinite linear both;
	animation: floatUp 8s infinite linear both;
	--scale: 2.2;
	left: -57%;
}

.p6 {
	-webkit-animation: floatUp 3s infinite linear both;
	animation: floatUp 3s infinite linear both;
	--scale: .8;
	left: -81%;
}

.p7 {
	-webkit-animation: floatUp 5.3s infinite linear both;
	animation: floatUp 5.3s infinite linear both;
	--scale: 3.2;
	left: 37%;
}

.p8 {
	-webkit-animation: floatUp 4.7s infinite linear both;
	animation: floatUp 4.7s infinite linear both;
	--scale: 1.7;
	left: 62%;
}

.p9 {
	-webkit-animation: floatUp 4.1s infinite linear both;
	animation: floatUp 4.1s linear infinite both;
	--scale: 0.9;
	left: 85%;
}

@-webkit-keyframes floatUp {
	0% { transform: translateY(100vh) scale(var(--scale)); opacity: 0; }
	25% { opacity: 1; }
	50% { transform: translateY(0vh) scale(var(--scale)); opacity: .8; }
	75% { opacity: 1; }
	100% { transform: translateY(-100vh) scale(var(--scale)); opacity: 0; }
}
@keyframes floatUp {
	0% { transform: translateY(100vh) scale(var(--scale)); opacity: 0; }
	25% { opacity: 1; }
	50% { transform: translateY(0vh) scale(var(--scale)); opacity: .8; }
	75% { opacity: 1; }
	100% { transform: translateY(-100vh) scale(var(--scale)); opacity: 0; }
}


/* ANIMATION STAGES */

.layout--block_logo {
	transform-origin: 0 0;
	animation: reveal_animation2 2s ease 0.5s both;
}

.layout--block_picture_left {
	transform-origin: 0 0;
	animation: reveal_animation1 2s ease 1s both;
}

.layout--block_picture_right {
	transform-origin: 0 0;
	animation: reveal_animation1 2s ease 1.5s both;
}

body:hover .p1, 
body:hover .p2, 
body:hover .p3, 
body:hover .p4, 
body:hover .p5, 
body:hover .p6, 
body:hover .p7, 
body:hover .p8, 
body:hover .p9, 
.container:hover .layout--block_picture_left, 
.container:hover .layout--block_logo, 
.container:hover .layout--block_picture_right, 
.container:hover .reveal-text, .container:hover .reveal-text::after {
	animation-play-state: paused;
	-webkit-animation-play-state: paused;
}


/* OPTIMISATION */

.light_pillar {
	will-change: transform, opacity;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

/*
.layout--block_picture_left, 
.layout--block_logo, 
.layout--block_picture_right {
	will-change: transform, opacity, filter;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

.reveal-text, 
.reveal-text::after {
	will-change: contents;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}
*/


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