body {
	display: flex;
	align-items: center;
	height: 100vh;
}

$ptl1: 1s;
$ptl1-half: 0.2s; // 1.2s
$ptl2-delay: 1.4s;
$ptl3: 1.1s;
$ptl3-delay: 2.5s;
$ptl4-delay: 2.6s;
$ptl5-delay: 3.4s;

.snow-peng {
	width: 100%;
	animation: floatDown $ptl1 forwards;
	transform-origin: center bottom;
}

.peng {
	animation: sliding 5s $ptl5-delay infinite alternate ease-out;
	
	&-flip {
		animation: flipper 10s $ptl5-delay infinite;
	}
	
	&-boing {
		animation: boing $ptl1-half $ptl1 forwards;
	}
	
	&-slide {
		transform: translateX(350px);
		transform-origin: bottom center;
		animation: slidingLeft $ptl3 $ptl3-delay ease-out forwards;
	}
	
	&-scarf-under {
		animation: windy 0.3s $ptl4-delay infinite;
	}
	
	&-foot {
		animation: footMove 1s $ptl4-delay infinite;
	}
	
	&-arm {
		animation: armMove 2s $ptl4-delay infinite;
	}
	
	&-body {
		animation: toSlidePosBody 1s $ptl2-delay forwards;
	}

	&-head {
		animation: toSlidePosHead 1s $ptl2-delay forwards;
	}

	&-scarf {
		&-main {
			animation: toSlidePosScarfMain 1s $ptl2-delay forwards;
		}

		animation: toSlidePosScarf 1s $ptl2-delay forwards;
	}
}

.peng-1 { fill: #bde7ff; }
.peng-2 { fill: #fff; }
.peng-3 { fill: #db6a1f; }
.peng-4 { fill: #95dbf9; }
.peng-5 { fill: #ff8931; }
.peng-6 { fill: #ff5086; opacity: 0.3; }
.peng-7 { fill: #444; }
.peng-8 { fill: #db4242; }
.peng-9 { fill: #ff5252; }

@keyframes floatDown {
	0% { transform: translateY(-100%) }
	100% { transform: translateY(0) }
}

@keyframes boing {
	0% { transform: scaleY(0.8) }
	40% { transform: scaleY(1.05) }
	70% { transform: scaleY(0.95) }
	100% { transfrom: scaleY(1) }
}

@keyframes slidingLeft {
	0% { transform: translateX(350px) }
	99.9% { transform: translateX(-420px) }
	100% { transform: translateX(0) }
}

@keyframes toSlidePosBody {
	100% { transform: rotate(-80deg) }
}

@keyframes toSlidePosHead {
	100% { transform: rotate(-28deg) }
}

@keyframes toSlidePosScarfMain {
	100% { transform: scaleX(0.95) }
}

@keyframes toSlidePosScarf {
	100% { transform: rotate(-44deg) }
}

@keyframes sliding {
	0% { transform: translateX(-420px); }
	100% { transform: translateX(1420px); }
}

@supports (offset-path: path('M0,100')) {
	@keyframes sliding {
		0%, 100% { offset-path: path('M-520,210S-171.6634,10,141.4481,10,540.6654,158.7677,802.8963,158.7677,1200.1566,54.9183,1480,54.9183') }
		100% { offset-distance: 100%; }
	}
}

@keyframes flipper {
	0%, 49.9% { transform: rotateY(180deg) scale(0.6) }
	50%, 100% { transform: rotateY(0deg) translateY(100px) }
}

@keyframes windy {
	20% { transform: rotate(-10deg) }
	40% { transform: rotate(0deg) }
	60% { transform: rotate(5deg) }
	80% { transform: rotate(-5deg) }
	100% { transform: rotate(0deg) }
}

@keyframes footMove {
	33% { transform: translateY(-20px) rotate(-90deg) }
	66% { transform: translateY(-20px) rotate(-107deg) }
	0%, 100% { transform: translateY(-20px) rotate(-100deg) }
}

@keyframes armMove {
	0%, 100% { transform: translateY(50px) rotate(-70deg) }
	50% { transform: translateY(50px) rotate(-50deg) }
}