@keyframes landing-logo {
    from {
        opacity: 0;
    }
    to {
        opacity: 100;
    }
}

@keyframes sweep-bottom{
    from {
        bottom: -20%;
    }

    to{
        bottom: 10%;
    }
}

.landing-animation-logo{
    animation-name: landing-logo;
    animation-duration: 2.5s;
    animation-fill-mode: forwards;
}

.landing-animation-arrow{
    animation-name: sweep-bottom;
    animation-duration: 1s;
    animation-delay: 1.5s;
    animation-fill-mode: forwards;
}

:root {
	--delay: 0;
	--duration: 2s;
	--iterations: 1;
}

.fade-in{
	opacity: 0;
	transition: all 0.5s ease;
}

.fade-in-active{
	opacity: 1;
}

.sweep-in{
    position: relative;
    transform: translateY(80px);
    opacity: 0;
    transition: all 1.5s ease;
}
  
.sweep-in-active{
    transform: translateY(0px);
    opacity: 1;
}

.sweep-left{
	position: relative;
	transform: translateX(80px);
	opacity: 0;
	transition: all 1.5s ease;
}

.sweep-left-active{
	transform: translateX(0px);
	opacity: 1;
}

.sweep-right{
	position: relative;
	transform: translateX(-80px);
	opacity: 0;
	transition: all 1.5s ease;
}

.sweep-right-active{
	transform: translateX(0px);
	opacity: 1;
}

.reveal-menu{
	position: relative;
	transform: translateX(30vw);
	transition: all 0.5s ease;
}

.reveal-menu-active{
	transform: translateX(0);
}

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

.reveal-text {
	--animation-delay: var(--delay, 0);
	--animation-duration: var(--duration, 800ms);
	--animation-iterations: var(--iterations, 1);
	position: relative;
	font-size: 10vw;
	animation-name: clip-text;
	color: #fff;
	white-space: nowrap;
	cursor: default;
	
	&::after {
		content: "";
		position: absolute;
		z-index: 999;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #fff;
		transform: scaleX(0);
		transform-origin: 0 50%;
		pointer-events: none;
		animation-name: text-revealer;
	}
	
}


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


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

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