main {
	scroll-snap-type: y mandatory;

	> section {
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}
}


@media (prefers-reduced-motion) {
	[data-animation] {
		animation: none;
	}
}

.animation-group {

	@media screen and (max-width: 420px) {
		display: grid;
		gap: 10px;
		grid-template-columns: repeat(2, auto);
	}

	[data-animation] {

		opacity: 0;
		&.animate {
			opacity: 1;
		}

		&:nth-child(1) {
			animation-delay: 100ms;
		}
		&:nth-child(2) {
			animation-delay: 500ms;
		}
		&:nth-child(3) {
			animation-delay: 900ms;
		}
		&:nth-child(4) {
			animation-delay: 1300ms;
		}
		&:nth-child(5) {
			animation-delay: 1300ms;
		}
		&:nth-child(6) {
			animation-delay: 1700ms;
		}
		&:nth-child(7) {
			animation-delay: 2100ms;
		}
		&:nth-child(8) {
			animation-delay: 2500ms;
		}
	}
}

/* Animations */
:root {
	--animate-duration: 1.5s;
	--animate-delay: 1s;
	--animate-repeat: 1;
}

.animated {
	animation-duration: 1s;
	animation-duration: var(--animate-duration);
	animation-fill-mode: both;
}

@keyframes swing {
	20% {
		-webkit-transform: rotate(15deg);
		transform: rotate(15deg);
	}

	40% {
		-webkit-transform: rotate(-10deg);
		transform: rotate(-10deg);
	}

	60% {
		-webkit-transform: rotate(5deg);
		transform: rotate(5deg);
	}

	80% {
		-webkit-transform: rotate(-5deg);
		transform: rotate(-5deg);
	}

	to {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
}

.swing {
	-webkit-animation-name: swing;
	animation-name: swing;
	-webkit-transform-origin: top center;
	transform-origin: top center;
}

@keyframes tada {
	0% {
		-webkit-transform: scaleX(1);
		transform: scaleX(1);
	}

	10%,
	20% {
		-webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
		transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg);
	}

	30%,
	50%,
	70%,
	90% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
		transform: scale3d(1.1, 1.1, 1.1) rotate(3deg);
	}

	40%,
	60%,
	80% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
		transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg);
	}

	to {
		-webkit-transform: scaleX(1);
		transform: scaleX(1);
	}
}

.tada {
	-webkit-animation-name: tada;
	animation-name: tada;
}

@keyframes pulse {
	0% {
		-webkit-transform: scaleX(1);
		transform: scaleX(1);
	}

	50% {
		-webkit-transform: scale3d(1.05, 1.05, 1.05);
		transform: scale3d(1.05, 1.05, 1.05);
	}

	to {
		-webkit-transform: scaleX(1);
		transform: scaleX(1);
	}
}

.pulse {
	-webkit-animation-name: pulse;
	animation-name: pulse;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
}

@keyframes bounce {
	0%,
	20%,
	53%,
	to {
		-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
	}

	40%,
	43% {
		-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
		animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
		-webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
		transform: translate3d(0, -30px, 0) scaleY(1.1);
	}

	70% {
		-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
		animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
		-webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
		transform: translate3d(0, -15px, 0) scaleY(1.05);
	}

	80% {
		-webkit-transform: translateZ(0) scaleY(0.95);
		transform: translateZ(0) scaleY(0.95);
		-webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}

	90% {
		-webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
		transform: translate3d(0, -4px, 0) scaleY(1.02);
	}
}

.bounce {
	-webkit-animation-name: bounce;
	animation-name: bounce;
	-webkit-transform-origin: center bottom;
	transform-origin: center bottom;
}

@keyframes heartBeat {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}

	14% {
		-webkit-transform: scale(1.3);
		transform: scale(1.3);
	}

	28% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}

	42% {
		-webkit-transform: scale(1.3);
		transform: scale(1.3);
	}

	70% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}

.heartBeat {
	-webkit-animation-duration: 1.3s;
	animation-duration: 1.3s;
	-webkit-animation-duration: calc(var(--animate-duration) * 1.3);
	animation-duration: calc(var(--animate-duration) * 1.3);
	-webkit-animation-name: heartBeat;
	animation-name: heartBeat;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
}

@keyframes fadeInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(-20%, 0, 0);
		transform: translate3d(-20%, 0, 0);
	}

	to {
		opacity: 1;
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
	}
}

.fadeInLeft {
	-webkit-animation-name: fadeInLeft;
	animation-name: fadeInLeft;
}


@keyframes fadeInRight {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(20%, 0, 0);
		transform: translate3d(20%, 0, 0);
	}

	to {
		opacity: 1;
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
	}
}

.fadeInRight {
	-webkit-animation-name: fadeInRight;
	animation-name: fadeInRight;
}

@keyframes fadeInUp {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0);
	}

	to {
		opacity: 1;
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
	}
}

.fadeInUp {
	-webkit-animation-name: fadeInUp;
	animation-name: fadeInUp;
}

@keyframes fadeInBottom {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
	}

	to {
		opacity: 1;
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
	}
}

.fadeInBottom {
	-webkit-animation-name: fadeInBottom;
	animation-name: fadeInBottom;
}




@keyframes rotateOnY {
	0% {
		-webkit-transform: rotateY(0);
		transform: rotateY(0);
	}

	100% {
		-webkit-transform: rotateY(360deg);
		transform: rotateY(360deg);
	}
}

.rotateOnY {
	animation-name: rotateOnY;
  	animation-duration: 20s;
}