.ui-loader {
    display: flex;
    justify-content: center;
    color: var(--text);
}

.ui-loader__svg {
    width: min(100%, 9rem);
    height: auto;
}

.ui-loader__hoof {
    opacity: 0;
    animation-duration: 2000ms;
    animation-timing-function: cubic-bezier(0.5, 0, 0.5, 1);
    animation-iteration-count: infinite;
    animation-fill-mode: both;
}

.ui-loader__hoof--1 { animation-name: ui-loader-hoof-1; }
.ui-loader__hoof--2 { animation-name: ui-loader-hoof-2; }
.ui-loader__hoof--3 { animation-name: ui-loader-hoof-3; }
.ui-loader__hoof--4 { animation-name: ui-loader-hoof-4; }
.ui-loader__hoof--5 { animation-name: ui-loader-hoof-5; }
.ui-loader__hoof--6 { animation-name: ui-loader-hoof-6; }
.ui-loader__hoof--7 { animation-name: ui-loader-hoof-7; }
.ui-loader__hoof--8 { animation-name: ui-loader-hoof-8; }
.ui-loader__hoof--9 { animation-name: ui-loader-hoof-9; }
.ui-loader__hoof--10 { animation-name: ui-loader-hoof-10; }
.ui-loader__hoof--11 { animation-name: ui-loader-hoof-11; }
.ui-loader__hoof--12 { animation-name: ui-loader-hoof-12; }
.ui-loader__hoof--13 { animation-name: ui-loader-hoof-13; }

@keyframes ui-loader-hoof-1 {
    0% { opacity: 0; }
    2.7% { opacity: 1; }
    100% { opacity: 1; }
}

@keyframes ui-loader-hoof-2 {
    0%, 2.7% { opacity: 0; }
    4.6% { opacity: 1; }
    100% { opacity: 1; }
}

@keyframes ui-loader-hoof-3 {
    0%, 4.6% { opacity: 0; }
    9.9% { opacity: 1; }
    100% { opacity: 1; }
}

@keyframes ui-loader-hoof-4 {
    0%, 9.9% { opacity: 0; }
    14.5% { opacity: 0.96; }
    100% { opacity: 0.96; }
}

@keyframes ui-loader-hoof-5 {
    0%, 14.45% { opacity: 0; }
    20.4% { opacity: 1; }
    100% { opacity: 1; }
}

@keyframes ui-loader-hoof-6 {
    0%, 20% { opacity: 0; }
    27.4% { opacity: 1; }
    100% { opacity: 1; }
}

@keyframes ui-loader-hoof-7 {
    0%, 27.6% { opacity: 0; }
    30.75% { opacity: 1; }
    100% { opacity: 1; }
}

@keyframes ui-loader-hoof-8 {
    0%, 32.85% { opacity: 0; }
    37% { opacity: 1; }
    100% { opacity: 1; }
}

@keyframes ui-loader-hoof-9 {
    0%, 37% { opacity: 0; }
    42.6% { opacity: 1; }
    100% { opacity: 1; }
}

@keyframes ui-loader-hoof-10 {
    0%, 42.6% { opacity: 0; }
    48.05% { opacity: 1; }
    100% { opacity: 1; }
}

@keyframes ui-loader-hoof-11 {
    0%, 48.05% { opacity: 0; }
    53.8% { opacity: 1; }
    100% { opacity: 1; }
}

@keyframes ui-loader-hoof-12 {
    0%, 53.8% { opacity: 0; }
    59.7% { opacity: 1; }
    100% { opacity: 1; }
}

@keyframes ui-loader-hoof-13 {
    0%, 59.7% { opacity: 0; }
    65.6% { opacity: 1; }
    100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .ui-loader__hoof {
        animation: none;
        opacity: 1;
    }
}