.upf-preloader {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    aspect-ratio: 123.6 / 99.9;
    user-select: none;
}

.upf-loader-svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

.upf-up-outline {
    fill: color-mix(in srgb, var(--upf-primary) 10%, transparent);
    stroke: var(--upf-primary);
    stroke-width: 0.6;
    paint-order: stroke fill;
}

.upf-fill-main {
    fill: color-mix(in srgb, var(--upf-primary) 82%, white 18%);
}

.upf-wave {
    will-change: transform;
}

.upf-wave-a {
    fill: var(--upf-primary);
    opacity: 0.95;
}

.upf-wave-b {
    fill: color-mix(in srgb, var(--upf-primary) 68%, white 32%);
    opacity: 0.55;
}

.upf-text {
    fill: var(--upf-dark);
}

[data-bs-theme="dark"] .upf-up-outline {
    fill: color-mix(in srgb, var(--upf-primary) 14%, transparent);
    stroke: var(--upf-primary);
}

[data-bs-theme="dark"] .upf-fill-main {
    fill: color-mix(in srgb, var(--upf-primary) 78%, white 22%);
}

[data-bs-theme="dark"] .upf-wave-b {
    fill: color-mix(in srgb, var(--upf-primary) 62%, white 38%);
}

[data-bs-theme="dark"] .upf-text {
    fill: var(--upf-text-primary);
}

.upf-fill-rise {
    transform-box: fill-box;
    transform-origin: center bottom;
    animation: upfRise 2.8s ease-in-out infinite;
}

.upf-wave-a {
    animation: upfWaveA 2.2s linear infinite;
}

.upf-wave-b {
    animation: upfWaveB 3s linear infinite;
}

@keyframes upfRise {
    0% {
        transform: translateY(42px);
    }

    18% {
        transform: translateY(32px);
    }

    42% {
        transform: translateY(18px);
    }

    65% {
        transform: translateY(8px);
    }

    82% {
        transform: translateY(4px);
    }

    100% {
        transform: translateY(42px);
    }
}

@keyframes upfWaveA {
    0% {
        transform: translateX(-8px);
    }

    50% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-8px);
    }
}

@keyframes upfWaveB {
    0% {
        transform: translateX(6px);
    }

    50% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(6px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .upf-fill-rise,
    .upf-wave-a,
    .upf-wave-b {
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
    }
}