@keyframes introOpacity{
	0%{ opacity: 1; }
	7%{ opacity: 1; }
	100%{ opacity: 0; }
}

@keyframes introLogo{
	0%{ opacity: 1; }
	100%{ opacity: 0; }
}

@keyframes introMask{
	0%{ mask-size: 0 0; -webkit-mask-size: 0 0; }
	100%{ mask-size: 300vw 300vw; -webkit-mask-size: 300vw 300vw; }
}

@keyframes bgScale{
	0%{ transform: var(--before); }
	100%{ transform: scale(1); }
}

@keyframes textClip{
	0%{ transform: translateY(100%); clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); -webkit-clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }
	100%{ transform: translateY(0); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}

@keyframes scrollDown1{
	0%{ height: var(--height); animation-timing-function: ease-in; }
	30%{ height: calc(var(--height) - 8px); animation-timing-function: ease-out; }
	40%{ height: var(--height); }
	45%{ height: var(--height); animation-timing-function: ease-in; }
	60%{ height: calc(var(--height) - 5px); animation-timing-function: ease-out; }
	75%{ height: var(--height); }
	90%{ height: var(--height); animation-timing-function: ease-in; }
	100%{ height: var(--height); animation-timing-function:ease-out; }
}

@keyframes scrollDown2{
	/* up */
	0%{ top: -30%; transform: translateY(-100%); animation-timing-function: ease-in; }

	/* floor */
	30%{ top: 100%; transform: translateY(-100%); animation-timing-function: ease-out; }

	/* up */
	40%{ top: 43%; transform: translateY(-100%); }
	45%{ top: 40%; transform: translateY(-100%); animation-timing-function: ease-in; }

	/* floor */
	60%{ top: 100%; transform: translateY(-100%); animation-timing-function: ease-out; }

	/* up */
	75%{ top: 65%; transform: translateY(0); }
	90%{ top: 60%; transform: translateY(0); animation-timing-function: ease-in; }

	/* floor */
	100%{ top: 110%; transform: translateY(100%); animation-timing-function:ease-out; }
}

@keyframes topFirst{
	0%{ top: 50%; }
	40%{ top: -50%; }
	100%{ top: -50%; }
}

@keyframes topLast{
	0%{ top: 150%; }
	40%{ top: 50%; }
	100%{ top: 50%; }
}


@keyframes sustainabilityStart{
	0%{ left: -100%; transform: translateX(25%); }
	100%{ left: 0; transform: translateX(0); }
}

@keyframes letterSpacing{
	0%{ letter-spacing: var(--before); opacity: 0; }
	100%{ letter-spacing: var(--after); opacity: 1; }
}

@keyframes fadeIn{
	0%{ opacity: 0; }
	100%{ opacity: 1; }
}