/* DRONE ANIMATION */

.drone_container {
	width: 250px;
	position: relative;
	bottom: 35px;
}

.st0 { fill: #fdd94f; }
.st1 { fill: #7e7e7e; }
.st2 { fill: #fd4e43; }
.st3 { fill: #fdd94f; }
.st4 { fill: #262223; }
.st5 { fill: #565950; }
.st6 { fill: #000; }
.st7 { fill: #a9a9a9; }
.st8 { fill: #000; }
.st10 { fill: #000; }

#drone-container {
	animation: drone_move 6s ease-in-out 0s forwards infinite;
}

#drone-container:hover {
	animation-play-state: paused;
}

#l-prop1, #r-prop2 {
	animation: left_blade3 0.09s ease-in 0s backwards infinite;
}

#l-prop2, #r-prop1 {
	animation: right_blade3 0.09s ease-in 0s backwards infinite;
}

#light1, #light2 {
	animation: lights_blink 1s ease-in-out 0s both infinite;
}

@keyframes drone_move {
	0% {
		transform: translate3d(100px, 0, 0);
	}
	35% {
		transform: translate3d(300px, -140px, 0);
	}
	75% {
		transform: translate3d(-60px, -110px, 0);
	}
	100% {
		transform: translate3d(100px, 0, 0);
	}
}

@keyframes left_blade2 {
	0% {
		transform: matrix(0, 0, 0, 0, 0, 0);
	}
	50% {
		transform: matrix(1, 0, 0, 1, 150, 0);
	}
	100% {
		transform: matrix(1, 0, 0, 1, 300, 0);
	}
}

@keyframes right_blade2 {
	0% {
		transform: matrix(0, 0, 0, 0, 0, 0);
	}
	50% {
		transform: matrix(1, 0, 0, 1, -150, 0);
	}
	100% {
		transform: matrix(1, 0, 0, 1, -300, 0);
	}
}

@keyframes left_blade3 {
	0% {
		transform: matrix(0, 0, 0, 0, 0, 0);
	}
	50% {
		transform: matrix(1, 0, 0, 1, 100, 0);
	}
	100% {
		transform: matrix(1, 0, 0, 1, -20, 0);
	}
}

@keyframes right_blade3 {
	0% {
		transform: matrix(0, 0, 0, 0, 0, 0);
	}
	50% {
		transform: matrix(1, 0, 0, 1, -100, 0);
	}
	100% {
		transform: matrix(1, 0, 0, 1, 20, 0);
	}
}

@keyframes lights_blink {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	50% {
		opacity: 0.1;
	}
	60% {
		opacity: 1;
	}
	70% {
		opacity: 0.1;
	}
	100% {
		opacity: 1;
	}
}


/* TEXT ANIMATION */

.cross-bar-reveal {
	position: relative;
}

.cross-bar-reveal .bars {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.cross-bar-reveal .bars .bar {
	width: 100%;
	flex: 1;
	background: currentColor;
	border-radius: 50px;
	animation: 0.6s cubic-bezier(0.4, 0.2, 0.175, 1) forwards;
}

.cross-bar-reveal .bars .bar:nth-child(odd) {
	transform: translateX(100%);
	animation-name: slide-left;
}

.cross-bar-reveal .bars .bar:nth-child(even) {
	transform: translateX(-100%);
	animation-name: slide-right;
}

.cross-bar-reveal .bars .bar:nth-child(1) {
	animation-delay: 0.3s;
}

.cross-bar-reveal .bars .bar:nth-child(2) {
	animation-delay: 0.2s;
}

.cross-bar-reveal .bars .bar:nth-child(3) {
	animation-delay: 0.5s;
}

.cross-bar-reveal .bars .bar:nth-child(4) {
	animation-delay: 0.3s;
}

.cross-bar-reveal .bars .bar:nth-child(5) {
	animation-delay: 0.4s;
}

.cross-bar-reveal .glitch {
	opacity: 0;
	animation: reveal forwards 0.3s;
	animation-delay: 0.6s;
}

.cross-bar-reveal .glitch span:not(:last-child) {
	--ratio: calc(100% / var(--slice-count));
	--top: calc(var(--ratio) * (var(--i) - 1));
	--bottom: calc(var(--ratio) * (var(--slice-count) - var(--i)));
	position: absolute;
	white-space: nowrap;
	clip-path: inset(var(--top) 0 var(--bottom) 0);
	animation-duration: 0.6s;
}

.cross-bar-reveal .glitch span:nth-child(odd) {
	animation-name: slide-from-left;
}

.cross-bar-reveal .glitch span:nth-child(even) {
	animation-name: slide-from-right;
}

.cross-bar-reveal .glitch span:last-child {
	opacity: 0;
	animation: reveal steps(1) forwards;
	animation-delay: 1.2s;
}

@keyframes slide-from-left {
	from {
		transform: translateX(-20%);
	}
	to {
		transform: translateX(0);
	}
}

@keyframes slide-from-right {
	from {
		transform: translateX(20%);
	}
	to {
		transform: translateX(0);
	}
}

@keyframes reveal {
	to {
		opacity: 1;
	}
}

@keyframes slide-left {
	to {
		transform: translateX(-100%);
	}
}

@keyframes slide-right {
	to {
		transform: translateX(100%);
	}
}


/* BLOCKS AND ICONS */

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

.reveal-item1 {
	animation: fadein_blur 500ms ease 1.4s backwards;
}

.reveal-item2 {
	animation: fadein_blur 500ms ease 1.6s backwards;
}