:root{
	--size-width-wrapper: 100%;
	--size-height-wrapper: 430px;
	--top-horizon: 280px;

	--size-mountain: 430px;
}

.wrapper_logo_animation{ position: relative; width: var(--size-width-wrapper); height: var(--size-height-wrapper); overflow: hidden; }
.wrapper_logo_animation::before{ content: ""; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: #00ad57; z-index: 50; animation: 6s init_an_lgan; }

@keyframes init_an_lgan {
	0%{ opacity: 1; }
	4%{ opacity: 0; }
	94%{ opacity: 0; }
	100%{ opacity: 1; }
}

/*
* STREET
*/
.lgan_street{ display: flex; background: #033f2f; width: 200%; height: 25px; position: absolute; left: 0px; top: var(--top-horizon); animation: 1s linear street infinite; }
.lgan_street span{ display: block; width: 20%; height: 2px; margin: 0 25px; perspective: 10px; margin-top: 6px; }
.lgan_street span::before{ content: ""; display: block; width: 100%; height: 100%; background: #00ad57; transform-style: preserve-3d; transform: rotateX(45deg); }
@keyframes street {
	0%{ left: 0px; }
	100%{ left: -100%; }
}

/*
* TREES
*/
.lgan_trees{ position: absolute; left: 0px; top: calc(var(--top-horizon) + 2px); width: 100%; }
.lgan_trees > div{ position: absolute; bottom: 0px; }
.lgan_trees > div svg{ display: block; width: 100%; height: auto; }
.tree1{ width: 50px; height: auto; left: 100%; animation: 3.5s linear a_tree infinite }
.tree2{ width: 60px; height: auto; left: 100%; animation: 2.5s linear a_tree infinite; }
.tree3{ width: 70px; height: auto; left: 100%; animation: 2s linear a_tree infinite; }
@keyframes a_tree {
	0%{ left: 100%; }
	100%{ left: -100%; }
}

/*
* MOUNTAINS
*/
.lgan_mountains{ position: absolute; left: 0px; top: var(--top-horizon); width: 100%; }

.mountain{ position: absolute; bottom: 0px; height: calc(calc(var(--size-mountain)) * sin(30deg)); width: calc(var(--size-mountain)); transform-origin: right bottom; }
.mountain_clip{ display: flex; align-items: center; width: 100%; height: 100%; background: #033f2f; clip-path: polygon(60% 0%, 0% 100%, 100% 100%); opacity: .1; }

.mountain1{ transform: scale(0.8); right: -10%; animation: 10s linear mountain1; }
.mountain2{ transform: scale(0.6); right: 40%; animation: 20s linear mountain2; }

@keyframes mountain1 {
	0%{ right: -10%; }
	100%{ right: 10%; }
}

@keyframes mountain2 {
	0%{ right: 40%; }
	100%{ right: 80%; }
}


/*
* SKY
*/
.lgan_sky{ position: absolute; left: 0px; top: 0px; width: 100%; height: var(--top-horizon); }
.sun{ position: absolute; right: 10%; top: 10%; width: 50px; aspect-ratio: 1 / 1; animation: 10s sun linear; }
.sun svg{ display: block; width: 100%; height: 100%; }
@keyframes sun{
	0%{ transform: rotate(0deg); }
	100%{ transform: rotate(80deg); }
}

/*
* ICON
*/
.lgan_icon{ position: absolute; left: 200%; top: 28%; width: 214px; margin-left: -107px;
	animation:
	0.5s tremer 0.4s infinite,
	walk1 0.5s,
	5s walk2 0.5s,
	0.5s walk3 5.5s;
}
.lgan_icon svg{ display: block; width: 100%; height: auto; }

@keyframes walk1 {
	0%{ left: -100%; }
	100%{ left: 50%; }
}

@keyframes walk2 {
	0%{ left: 50%; }
	100%{ left: 50%; }
}

@keyframes walk3 {
	0%{ left: 50%; }
	100%{ left: 200%; }
}

@keyframes tremer {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

/*
* TEXTS
*/
.lgan_texts > *{ font-family: "Bakbak One", sans-serif; }
.lgan_texts{ position: absolute; left: 0px; top: calc(var(--top-horizon) + 20px); width: 100%; }

.lgan_text1{ position: absolute; left: 150%; top: 40px; width: 350px; margin-left: -175px; font-size: 32px; color: #033f2f; text-align: center; letter-spacing: -1px;
	animation:
	0.3s text1_1 0.5s,
	2s text1_2 0.8s linear,
	0.3s text1_3 2.8s;
}

@keyframes text1_1 {
	0%{ left: 150%; }
	100%{ left: 55%; }
}
@keyframes text1_2 {
	0%{ left: 55%; }
	100%{ left: 45%; }
}
@keyframes text1_3 {
	0%{ left: 45%; }
	100%{ left: -150%; }
}

.lgan_text2{ position: absolute; left: 150%; top: 40px; width: 234px; margin-left: -117px; font-size: 32px; color: #c7f843; text-align: center; letter-spacing: -1px;
	animation:
	0.3s text2_1 2.8s,
	2s text2_2 3.1s linear,
	0.3s text2_3 5.1s;
}

@keyframes text2_1 {
	0%{ left: 150%; }
	100%{ left: 55%; }
}
@keyframes text2_2 {
	0%{ left: 55%; }
	100%{ left: 45%; }
}
@keyframes text2_3 {
	0%{ left: 45%; }
	100%{ left: -150%; }
}