/* Simple animation: <div class="e-loading"><i></i></div> */
/* Alternate-Frame animation: <div class="e-loading"><i></i><i></i></div> */
/* Motion-Blurring animation: <div class="e-loading"><i></i><i></i><i></i><i></i><i></i><i></i></div> */

.e-loading {
	position: relative;
	--size: 10vw;
	--play-time: 3s;
}
.e-loading > * {

	width: var(--size);
	height: var(--size);
	aspect-ratio: 1 / 1;

	position: absolute;
	transform: translateX(-50%) translateY(-50%);
	overflow: visible;
	--fopacity: 1;
	--opacity-easing: ease-in-out;
	--mb-delay: 0.3s;

	background-image: url('./e-loading.webp?v=1699277978');
	background-position: calc(0 * 100% / 44) 0;
	background-size: cover;
	background-repeat: no-repeat;

	display: none;
}

/* main animation */
.e-loading > *:nth-child(1), .e-loading > *:nth-child(2) {
	display: block;
	filter: drop-shadow(2px 4px 6px rgba(148, 193, 30, 0.75));
}
.e-loading > *:only-child {
	animation: e-loading-frames-all var(--play-time) step-start infinite;
}
.e-loading > *:not(:only-child):nth-child(1) {
	animation: e-loading-fade-uneven calc(var(--play-time) / 23) var(--opacity-easing) infinite, e-loading-frames-uneven var(--play-time) step-start infinite;
}
.e-loading > *:nth-child(2) {
	animation: e-loading-fade-even calc(var(--play-time) / 23) var(--opacity-easing) infinite, e-loading-frames-even var(--play-time) step-start infinite;
}

/* delayed animation - "motion blurring" */
.e-loading > *:nth-child(3), .e-loading > *:nth-child(4) {
	display: block;
	--fopacity: 0.5;
}
.e-loading > *:nth-child(3) {
	animation: e-loading-fade-uneven calc(var(--play-time) / 23) var(--opacity-easing) calc(1 * var(--mb-delay)) infinite, e-loading-frames-uneven var(--play-time) step-start calc(1 * var(--mb-delay)) infinite;
}
.e-loading > *:nth-child(4) {
	animation: e-loading-fade-even calc(var(--play-time) / 23) var(--opacity-easing) calc(1 * var(--mb-delay)) infinite, e-loading-frames-even var(--play-time) step-start calc(1 * var(--mb-delay)) infinite;
}

/* delayed animation - "motion blurring" #2 */
.e-loading > *:nth-child(5), .e-loading > *:nth-child(6) {
	display: block;
	--fopacity: 0.25;
}
.e-loading > *:nth-child(5) {
	animation: e-loading-fade-uneven calc(var(--play-time) / 23) var(--opacity-easing) calc(2 * var(--mb-delay)) infinite, e-loading-frames-uneven var(--play-time) step-start calc(2 * var(--mb-delay)) infinite;
}
.e-loading > *:nth-child(6) {
	animation: e-loading-fade-even calc(var(--play-time) / 23) var(--opacity-easing) calc(2 * var(--mb-delay)) infinite, e-loading-frames-even var(--play-time) step-start calc(2 * var(--mb-delay)) infinite;
}

@keyframes e-loading-fade-uneven {
	  0% { opacity: 0; }
	 25% { opacity: var(--fopacity); }
	 50% { opacity: var(--fopacity); }
	 75% { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes e-loading-fade-even {
	  0% { opacity: var(--fopacity); }
	 25% { opacity: 0; }
	 50% { opacity: 0; }
	 75% { opacity: var(--fopacity); }
	100% { opacity: var(--fopacity); }
}

@keyframes e-loading-frames-all {
	0.00%, 100% { background-position: calc(-1 * 100% / 44) 0; }
	2.174% { background-position: calc(0 * 100% / 44) 0; }
	4.348% { background-position: calc(1 * 100% / 44) 0; }
	6.522% { background-position: calc(2 * 100% / 44) 0; }
	8.696% { background-position: calc(3 * 100% / 44) 0; }
	10.87% { background-position: calc(4 * 100% / 44) 0; }
	13.043% { background-position: calc(5 * 100% / 44) 0; }
	15.217% { background-position: calc(6 * 100% / 44) 0; }
	17.391% { background-position: calc(7 * 100% / 44) 0; }
	19.565% { background-position: calc(8 * 100% / 44) 0; }
	21.739% { background-position: calc(9 * 100% / 44) 0; }
	23.913% { background-position: calc(10 * 100% / 44) 0; }
	26.087% { background-position: calc(11 * 100% / 44) 0; }
	28.261% { background-position: calc(12 * 100% / 44) 0; }
	30.435% { background-position: calc(13 * 100% / 44) 0; }
	32.609% { background-position: calc(14 * 100% / 44) 0; }
	34.783% { background-position: calc(15 * 100% / 44) 0; }
	36.957% { background-position: calc(16 * 100% / 44) 0; }
	39.13% { background-position: calc(17 * 100% / 44) 0; }
	41.304% { background-position: calc(18 * 100% / 44) 0; }
	43.478% { background-position: calc(19 * 100% / 44) 0; }
	45.652% { background-position: calc(20 * 100% / 44) 0; }
	47.826% { background-position: calc(21 * 100% / 44) 0; }
	50% { background-position: calc(22 * 100% / 44) 0; }
	52.174% { background-position: calc(23 * 100% / 44) 0; }
	54.348% { background-position: calc(24 * 100% / 44) 0; }
	56.522% { background-position: calc(25 * 100% / 44) 0; }
	58.696% { background-position: calc(26 * 100% / 44) 0; }
	60.87% { background-position: calc(27 * 100% / 44) 0; }
	63.043% { background-position: calc(28 * 100% / 44) 0; }
	65.217% { background-position: calc(29 * 100% / 44) 0; }
	67.391% { background-position: calc(30 * 100% / 44) 0; }
	69.565% { background-position: calc(31 * 100% / 44) 0; }
	71.739% { background-position: calc(32 * 100% / 44) 0; }
	73.913% { background-position: calc(33 * 100% / 44) 0; }
	76.087% { background-position: calc(34 * 100% / 44) 0; }
	78.261% { background-position: calc(35 * 100% / 44) 0; }
	80.435% { background-position: calc(36 * 100% / 44) 0; }
	82.609% { background-position: calc(37 * 100% / 44) 0; }
	84.783% { background-position: calc(38 * 100% / 44) 0; }
	86.957% { background-position: calc(39 * 100% / 44) 0; }
	89.13% { background-position: calc(40 * 100% / 44) 0; }
	91.304% { background-position: calc(41 * 100% / 44) 0; }
	93.478% { background-position: calc(42 * 100% / 44) 0; }
	95.652% { background-position: calc(43 * 100% / 44) 0; }
	97.826% { background-position: calc(44 * 100% / 44) 0; }
}

@keyframes e-loading-frames-uneven {
	0.00%, 100% { background-position: calc(-1 * 100% / 44) 0; }
	2.174% { background-position: calc(1 * 100% / 44) 0; }
	4.348% { background-position: calc(1 * 100% / 44) 0; }
	6.522% { background-position: calc(3 * 100% / 44) 0; }
	8.696% { background-position: calc(3 * 100% / 44) 0; }
	10.87% { background-position: calc(5 * 100% / 44) 0; }
	13.043% { background-position: calc(5 * 100% / 44) 0; }
	15.217% { background-position: calc(7 * 100% / 44) 0; }
	17.391% { background-position: calc(7 * 100% / 44) 0; }
	19.565% { background-position: calc(9 * 100% / 44) 0; }
	21.739% { background-position: calc(9 * 100% / 44) 0; }
	23.913% { background-position: calc(11 * 100% / 44) 0; }
	26.087% { background-position: calc(11 * 100% / 44) 0; }
	28.261% { background-position: calc(13 * 100% / 44) 0; }
	30.435% { background-position: calc(13 * 100% / 44) 0; }
	32.609% { background-position: calc(15 * 100% / 44) 0; }
	34.783% { background-position: calc(15 * 100% / 44) 0; }
	36.957% { background-position: calc(17 * 100% / 44) 0; }
	39.13% { background-position: calc(17 * 100% / 44) 0; }
	41.304% { background-position: calc(19 * 100% / 44) 0; }
	43.478% { background-position: calc(19 * 100% / 44) 0; }
	45.652% { background-position: calc(21 * 100% / 44) 0; }
	47.826% { background-position: calc(21 * 100% / 44) 0; }
	50% { background-position: calc(23 * 100% / 44) 0; }
	52.174% { background-position: calc(23 * 100% / 44) 0; }
	54.348% { background-position: calc(25 * 100% / 44) 0; }
	56.522% { background-position: calc(25 * 100% / 44) 0; }
	58.696% { background-position: calc(27 * 100% / 44) 0; }
	60.87% { background-position: calc(27 * 100% / 44) 0; }
	63.043% { background-position: calc(29 * 100% / 44) 0; }
	65.217% { background-position: calc(29 * 100% / 44) 0; }
	67.391% { background-position: calc(31 * 100% / 44) 0; }
	69.565% { background-position: calc(31 * 100% / 44) 0; }
	71.739% { background-position: calc(33 * 100% / 44) 0; }
	73.913% { background-position: calc(33 * 100% / 44) 0; }
	76.087% { background-position: calc(35 * 100% / 44) 0; }
	78.261% { background-position: calc(35 * 100% / 44) 0; }
	80.435% { background-position: calc(37 * 100% / 44) 0; }
	82.609% { background-position: calc(37 * 100% / 44) 0; }
	84.783% { background-position: calc(39 * 100% / 44) 0; }
	86.957% { background-position: calc(39 * 100% / 44) 0; }
	89.13% { background-position: calc(41 * 100% / 44) 0; }
	91.304% { background-position: calc(41 * 100% / 44) 0; }
	93.478% { background-position: calc(43 * 100% / 44) 0; }
	95.652% { background-position: calc(43 * 100% / 44) 0; }
	97.826% { background-position: calc(-1 * 100% / 44) 0; }
}

@keyframes e-loading-frames-even {
	0.00%, 100% { background-position: calc(0 * 100% / 44) 0; }
	2.174% { background-position: calc(0 * 100% / 44) 0; }
	4.348% { background-position: calc(2 * 100% / 44) 0; }
	6.522% { background-position: calc(2 * 100% / 44) 0; }
	8.696% { background-position: calc(4 * 100% / 44) 0; }
	10.87% { background-position: calc(4 * 100% / 44) 0; }
	13.043% { background-position: calc(6 * 100% / 44) 0; }
	15.217% { background-position: calc(6 * 100% / 44) 0; }
	17.391% { background-position: calc(8 * 100% / 44) 0; }
	19.565% { background-position: calc(8 * 100% / 44) 0; }
	21.739% { background-position: calc(10 * 100% / 44) 0; }
	23.913% { background-position: calc(10 * 100% / 44) 0; }
	26.087% { background-position: calc(12 * 100% / 44) 0; }
	28.261% { background-position: calc(12 * 100% / 44) 0; }
	30.435% { background-position: calc(14 * 100% / 44) 0; }
	32.609% { background-position: calc(14 * 100% / 44) 0; }
	34.783% { background-position: calc(16 * 100% / 44) 0; }
	36.957% { background-position: calc(16 * 100% / 44) 0; }
	39.13% { background-position: calc(18 * 100% / 44) 0; }
	41.304% { background-position: calc(18 * 100% / 44) 0; }
	43.478% { background-position: calc(20 * 100% / 44) 0; }
	45.652% { background-position: calc(20 * 100% / 44) 0; }
	47.826% { background-position: calc(22 * 100% / 44) 0; }
	50% { background-position: calc(22 * 100% / 44) 0; }
	52.174% { background-position: calc(24 * 100% / 44) 0; }
	54.348% { background-position: calc(24 * 100% / 44) 0; }
	56.522% { background-position: calc(26 * 100% / 44) 0; }
	58.696% { background-position: calc(26 * 100% / 44) 0; }
	60.87% { background-position: calc(28 * 100% / 44) 0; }
	63.043% { background-position: calc(28 * 100% / 44) 0; }
	65.217% { background-position: calc(30 * 100% / 44) 0; }
	67.391% { background-position: calc(30 * 100% / 44) 0; }
	69.565% { background-position: calc(32 * 100% / 44) 0; }
	71.739% { background-position: calc(32 * 100% / 44) 0; }
	73.913% { background-position: calc(34 * 100% / 44) 0; }
	76.087% { background-position: calc(34 * 100% / 44) 0; }
	78.261% { background-position: calc(36 * 100% / 44) 0; }
	80.435% { background-position: calc(36 * 100% / 44) 0; }
	82.609% { background-position: calc(38 * 100% / 44) 0; }
	84.783% { background-position: calc(38 * 100% / 44) 0; }
	86.957% { background-position: calc(40 * 100% / 44) 0; }
	89.13% { background-position: calc(40 * 100% / 44) 0; }
	91.304% { background-position: calc(42 * 100% / 44) 0; }
	93.478% { background-position: calc(42 * 100% / 44) 0; }
	95.652% { background-position: calc(44 * 100% / 44) 0; }
	97.826% { background-position: calc(44 * 100% / 44) 0; }
}