.spinner-component {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 30px;
}

.spinner-conveyor {
	position: relative;
	width: 360px;
	height: 56px;
}

.spinner-track-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 56px;
	display: flex;
	align-items: center;
	mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
	-webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
	overflow: hidden;
}

.spinner-track {
	display: flex;
	align-items: center;
	gap: 8px;
	position: absolute;
	left: -996px;
	animation: conveyor-scroll 25s infinite;
}

.spinner-icon-slot {
	position: relative;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	transform: scale(0.7);
}

.spinner-icon-slot::before,
.spinner-icon-slot::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url('/static/images/spinner-atlas.webp');
	background-size: 800px 32px;
	background-repeat: no-repeat;
}

.spinner-icon-slot::after {
	filter: grayscale(100%);
	mask-image: linear-gradient(to bottom, transparent 0%, transparent 40%, white 60%, white 100%);
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 40%, white 60%, white 100%);
	mask-size: 100% 300%;
	-webkit-mask-size: 100% 300%;
	mask-position: 0 100%;
	-webkit-mask-position: 0 100%;
}

.spinner-icon-slot[data-icon="0"]::before, .spinner-icon-slot[data-icon="0"]::after { background-position: 0 0; }
.spinner-icon-slot[data-icon="1"]::before, .spinner-icon-slot[data-icon="1"]::after { background-position: -32px 0; }
.spinner-icon-slot[data-icon="2"]::before, .spinner-icon-slot[data-icon="2"]::after { background-position: -64px 0; }
.spinner-icon-slot[data-icon="3"]::before, .spinner-icon-slot[data-icon="3"]::after { background-position: -96px 0; }
.spinner-icon-slot[data-icon="4"]::before, .spinner-icon-slot[data-icon="4"]::after { background-position: -128px 0; }
.spinner-icon-slot[data-icon="5"]::before, .spinner-icon-slot[data-icon="5"]::after { background-position: -160px 0; }
.spinner-icon-slot[data-icon="6"]::before, .spinner-icon-slot[data-icon="6"]::after { background-position: -192px 0; }
.spinner-icon-slot[data-icon="7"]::before, .spinner-icon-slot[data-icon="7"]::after { background-position: -224px 0; }
.spinner-icon-slot[data-icon="8"]::before, .spinner-icon-slot[data-icon="8"]::after { background-position: -256px 0; }
.spinner-icon-slot[data-icon="9"]::before, .spinner-icon-slot[data-icon="9"]::after { background-position: -288px 0; }
.spinner-icon-slot[data-icon="10"]::before, .spinner-icon-slot[data-icon="10"]::after { background-position: -320px 0; }
.spinner-icon-slot[data-icon="11"]::before, .spinner-icon-slot[data-icon="11"]::after { background-position: -352px 0; }
.spinner-icon-slot[data-icon="12"]::before, .spinner-icon-slot[data-icon="12"]::after { background-position: -384px 0; }
.spinner-icon-slot[data-icon="13"]::before, .spinner-icon-slot[data-icon="13"]::after { background-position: -416px 0; }
.spinner-icon-slot[data-icon="14"]::before, .spinner-icon-slot[data-icon="14"]::after { background-position: -448px 0; }
.spinner-icon-slot[data-icon="15"]::before, .spinner-icon-slot[data-icon="15"]::after { background-position: -480px 0; }
.spinner-icon-slot[data-icon="16"]::before, .spinner-icon-slot[data-icon="16"]::after { background-position: -512px 0; }
.spinner-icon-slot[data-icon="17"]::before, .spinner-icon-slot[data-icon="17"]::after { background-position: -544px 0; }
.spinner-icon-slot[data-icon="18"]::before, .spinner-icon-slot[data-icon="18"]::after { background-position: -576px 0; }
.spinner-icon-slot[data-icon="19"]::before, .spinner-icon-slot[data-icon="19"]::after { background-position: -608px 0; }
.spinner-icon-slot[data-icon="20"]::before, .spinner-icon-slot[data-icon="20"]::after { background-position: -640px 0; }
.spinner-icon-slot[data-icon="21"]::before, .spinner-icon-slot[data-icon="21"]::after { background-position: -672px 0; }
.spinner-icon-slot[data-icon="22"]::before, .spinner-icon-slot[data-icon="22"]::after { background-position: -704px 0; }
.spinner-icon-slot[data-icon="23"]::before, .spinner-icon-slot[data-icon="23"]::after { background-position: -736px 0; }
.spinner-icon-slot[data-icon="24"]::before, .spinner-icon-slot[data-icon="24"]::after { background-position: -768px 0; }

.spinner-icon-slot.prepend::after {
	mask-position: 0 100%;
	-webkit-mask-position: 0 100%;
}

.spinner-icon-slot.append::after {
	mask-position: 0 0;
	-webkit-mask-position: 0 0;
}

.spinner-scan-box {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 46px;
	height: 46px;
	border: 1px solid white;
	pointer-events: none;
	box-sizing: content-box;
	overflow: hidden;
}

.spinner-scan-box .scanner-line {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: white;
	box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.8), 0 0 16px 4px rgba(255, 255, 255, 0.4);
	animation: scanner-sweep 1s infinite;
}

.spinner-icon-slot.scan {
	animation: icon-scale 25s infinite;
	animation-delay: var(--delay);
}

.spinner-icon-slot.scan::after {
	animation: var(--mask-anim) 25s infinite;
}

@keyframes conveyor-scroll {
	0%, 3% { transform: translateX(0); }       4%, 7% { transform: translateX(40px); }
	8%, 11% { transform: translateX(80px); }   12%, 15% { transform: translateX(120px); }
	16%, 19% { transform: translateX(160px); } 20%, 23% { transform: translateX(200px); }
	24%, 27% { transform: translateX(240px); } 28%, 31% { transform: translateX(280px); }
	32%, 35% { transform: translateX(320px); } 36%, 39% { transform: translateX(360px); }
	40%, 43% { transform: translateX(400px); } 44%, 47% { transform: translateX(440px); }
	48%, 51% { transform: translateX(480px); } 52%, 55% { transform: translateX(520px); }
	56%, 59% { transform: translateX(560px); } 60%, 63% { transform: translateX(600px); }
	64%, 67% { transform: translateX(640px); } 68%, 71% { transform: translateX(680px); }
	72%, 75% { transform: translateX(720px); } 76%, 79% { transform: translateX(760px); }
	80%, 83% { transform: translateX(800px); } 84%, 87% { transform: translateX(840px); }
	88%, 91% { transform: translateX(880px); } 92%, 95% { transform: translateX(920px); }
	96%, 99% { transform: translateX(960px); } 100% { transform: translateX(1000px); }
}

@keyframes scanner-sweep {
	0%, 20% { top: 0; opacity: 0; }
	21% { top: 0; opacity: 1; }
	55% { top: 100%; opacity: 1; }
	56%, 100% { top: 100%; opacity: 0; }
}

@keyframes icon-scale {
	0% { transform: scale(0.7); }
	0.6% { transform: scale(1.25); }
	2.4% { transform: scale(1.25); }
	3%, 100% { transform: scale(0.7); }
}

@keyframes m0 { 0%,0.8% { mask-position: 0 100%; -webkit-mask-position: 0 100%; } 2.2%,99.9% { mask-position: 0 0; -webkit-mask-position: 0 0; } 100% { mask-position: 0 100%; -webkit-mask-position: 0 100%; } }
@keyframes m1 { 0%,4.8% { mask-position: 0 100%; -webkit-mask-position: 0 100%; } 6.2%,100% { mask-position: 0 0; -webkit-mask-position: 0 0; } }
@keyframes m2 { 0%,8.8% { mask-position: 0 100%; -webkit-mask-position: 0 100%; } 10.2%,100% { mask-position: 0 0; -webkit-mask-position: 0 0; } }
@keyframes m3 { 0%,12.8% { mask-position: 0 100%; -webkit-mask-position: 0 100%; } 14.2%,100% { mask-position: 0 0; -webkit-mask-position: 0 0; } }
@keyframes m4 { 0%,16.8% { mask-position: 0 100%; -webkit-mask-position: 0 100%; } 18.2%,100% { mask-position: 0 0; -webkit-mask-position: 0 0; } }
@keyframes m5 { 0%,20.8% { mask-position: 0 100%; -webkit-mask-position: 0 100%; } 22.2%,100% { mask-position: 0 0; -webkit-mask-position: 0 0; } }
@keyframes m6 { 0%,24.8% { mask-position: 0 100%; -webkit-mask-position: 0 100%; } 26.2%,100% { mask-position: 0 0; -webkit-mask-position: 0 0; } }
@keyframes m7 { 0%,28.8% { mask-position: 0 100%; -webkit-mask-position: 0 100%; } 30.2%,100% { mask-position: 0 0; -webkit-mask-position: 0 0; } }
@keyframes m8 { 0%,32.8% { mask-position: 0 100%; -webkit-mask-position: 0 100%; } 34.2%,100% { mask-position: 0 0; -webkit-mask-position: 0 0; } }
@keyframes m9 { 0%,36.8% { mask-position: 0 100%; -webkit-mask-position: 0 100%; } 38.2%,100% { mask-position: 0 0; -webkit-mask-position: 0 0; } }
@keyframes m10 { 0%,40.8% { mask-position: 0 100%; -webkit-mask-position: 0 100%; } 42.2%,100% { mask-position: 0 0; -webkit-mask-position: 0 0; } }
@keyframes m11 { 0%,44.8% { mask-position: 0 100%; -webkit-mask-position: 0 100%; } 46.2%,100% { mask-position: 0 0; -webkit-mask-position: 0 0; } }
@keyframes m12 { 0%,48.8% { mask-position: 0 100%; -webkit-mask-position: 0 100%; } 50.2%,100% { mask-position: 0 0; -webkit-mask-position: 0 0; } }
@keyframes m13 { 0%,52.8% { mask-position: 0 100%; -webkit-mask-position: 0 100%; } 54.2%,100% { mask-position: 0 0; -webkit-mask-position: 0 0; } }
@keyframes m14 { 0%,56.8% { mask-position: 0 100%; -webkit-mask-position: 0 100%; } 58.2%,100% { mask-position: 0 0; -webkit-mask-position: 0 0; } }
@keyframes m15 { 0%,60.8% { mask-position: 0 100%; -webkit-mask-position: 0 100%; } 62.2%,100% { mask-position: 0 0; -webkit-mask-position: 0 0; } }
@keyframes m16 { 0%,64.8% { mask-position: 0 100%; -webkit-mask-position: 0 100%; } 66.2%,100% { mask-position: 0 0; -webkit-mask-position: 0 0; } }
@keyframes m17 { 0%,68.8% { mask-position: 0 100%; -webkit-mask-position: 0 100%; } 70.2%,100% { mask-position: 0 0; -webkit-mask-position: 0 0; } }
@keyframes m18 { 0%,72.8% { mask-position: 0 100%; -webkit-mask-position: 0 100%; } 74.2%,100% { mask-position: 0 0; -webkit-mask-position: 0 0; } }
@keyframes m19 { 0%,76.8% { mask-position: 0 100%; -webkit-mask-position: 0 100%; } 78.2%,100% { mask-position: 0 0; -webkit-mask-position: 0 0; } }
@keyframes m20 { 0%,80.8% { mask-position: 0 100%; -webkit-mask-position: 0 100%; } 82.2%,100% { mask-position: 0 0; -webkit-mask-position: 0 0; } }
@keyframes m21 { 0%,84.8% { mask-position: 0 100%; -webkit-mask-position: 0 100%; } 86.2%,100% { mask-position: 0 0; -webkit-mask-position: 0 0; } }
@keyframes m22 { 0%,88.8% { mask-position: 0 100%; -webkit-mask-position: 0 100%; } 90.2%,100% { mask-position: 0 0; -webkit-mask-position: 0 0; } }
@keyframes m23 { 0%,92.8% { mask-position: 0 100%; -webkit-mask-position: 0 100%; } 94.2%,100% { mask-position: 0 0; -webkit-mask-position: 0 0; } }
@keyframes m24 { 0%,96.8% { mask-position: 0 100%; -webkit-mask-position: 0 100%; } 98.2%,100% { mask-position: 0 0; -webkit-mask-position: 0 0; } }