/* ================================================================
   UNIVAS AUTO CONNECT - GLOBAL PRELOADER
   Inspired by the KouponZetu and Rift Valley Hope loading effects.
   ================================================================ */

html.ua-is-loading,
html.ua-is-loading body {
    overflow: hidden;
}

.ua-preloader {
    --ua-preloader-navy: #07111f;
    --ua-preloader-navy-2: #0b1b30;
    --ua-preloader-blue: #2563ff;
    --ua-preloader-red: #ff2d2d;
    --ua-preloader-orange: #ff7a00;
    --ua-preloader-white: #ffffff;

    position: fixed;
    inset: 0;
    z-index: 99999;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
    padding: 24px;

    background:
        radial-gradient(circle at 18% 18%, rgba(37, 99, 255, .20), transparent 32%),
        radial-gradient(circle at 82% 78%, rgba(255, 45, 45, .14), transparent 32%),
        linear-gradient(145deg, #050c16 0%, var(--ua-preloader-navy) 48%, var(--ua-preloader-navy-2) 100%);

    opacity: 1;
    visibility: visible;

    transition:
        opacity .46s ease,
        visibility .46s ease;
}

.ua-preloader::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background-image:
        linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
    background-size: 48px 48px;

    opacity: .38;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.68), transparent 86%);
}

.ua-preloader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.ua-preloader.is-hidden .ua-preloader__content {
    transform: translateY(-5px) scale(.985);
    opacity: 0;
}

.ua-preloader__glow {
    position: absolute;
    display: block;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(3px);
}

.ua-preloader__glow--blue {
    width: 250px;
    height: 250px;
    top: -120px;
    left: -90px;
    background: rgba(37, 99, 255, .10);
    animation: uaPreloaderGlowBlue 6s ease-in-out infinite;
}

.ua-preloader__glow--red {
    width: 280px;
    height: 280px;
    right: -120px;
    bottom: -145px;
    background: rgba(255, 45, 45, .08);
    animation: uaPreloaderGlowRed 7s ease-in-out infinite;
}

.ua-preloader__content {
    position: relative;
    z-index: 2;

    width: min(100%, 390px);

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;

    transition:
        transform .42s ease,
        opacity .34s ease;
}

.ua-preloader__spinner {
    position: relative;

    width: 78px;
    height: 78px;

    display: grid;
    place-items: center;

    margin-bottom: 22px;
}

.ua-preloader__ring {
    position: absolute;
    border-radius: 50%;
}

.ua-preloader__ring--outer {
    inset: 0;

    border: 4px solid rgba(255,255,255,.07);
    border-top-color: var(--ua-preloader-red);
    border-right-color: var(--ua-preloader-blue);
    border-bottom-color: var(--ua-preloader-orange);

    box-shadow: 0 0 24px rgba(37, 99, 255, .08);

    animation: uaPreloaderSpin 1.08s linear infinite;
}

.ua-preloader__ring--inner {
    inset: 10px;

    border: 2px solid rgba(255,255,255,.10);
    border-bottom-color: rgba(255, 45, 45, .85);
    border-left-color: rgba(37, 99, 255, .85);

    animation: uaPreloaderSpinReverse 1.45s linear infinite;
}

.ua-preloader__core {
    position: relative;
    z-index: 2;

    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    color: #fff;
    background: linear-gradient(135deg, var(--ua-preloader-blue), var(--ua-preloader-red) 58%, var(--ua-preloader-orange));

    box-shadow:
        0 8px 22px rgba(37, 99, 255, .14),
        0 6px 18px rgba(255, 45, 45, .12);

    font-size: 15px;
    font-weight: 900;
    line-height: 1;

    animation: uaPreloaderPulse 1.6s ease-in-out infinite;
}

.ua-preloader__brand {
    display: flex;
    align-items: baseline;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0 6px;

    color: #fff;

    font-size: clamp(1.3rem, 3vw, 1.65rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.035em;
}

.ua-preloader__brand span,
.ua-preloader__brand strong,
.ua-preloader__brand em {
    font: inherit;
    font-style: normal;
}

.ua-preloader__brand strong {
    color: #ff5149;
}

.ua-preloader__brand em {
    color: #ff9b3d;
    font-size: .56em;
    letter-spacing: .12em;
}

.ua-preloader__message {
    margin-top: 9px !important;

    color: rgba(226, 232, 240, .68);

    font-size: .74rem;
    font-weight: 650;
    line-height: 1.45;
    letter-spacing: .035em;
}

.ua-preloader__progress {
    position: relative;

    width: 180px;
    height: 3px;

    margin-top: 19px;
    overflow: hidden;

    border-radius: 999px;
    background: rgba(255,255,255,.10);
}

.ua-preloader__progress span {
    position: absolute;
    inset: 0 auto 0 -42%;

    width: 42%;

    border-radius: inherit;

    background: linear-gradient(90deg, var(--ua-preloader-blue), #fff, var(--ua-preloader-red), var(--ua-preloader-orange));
    box-shadow: 0 0 13px rgba(255,255,255,.22);

    animation: uaPreloaderProgress 1.45s ease-in-out infinite;
}

@keyframes uaPreloaderSpin {
    to { transform: rotate(360deg); }
}

@keyframes uaPreloaderSpinReverse {
    to { transform: rotate(-360deg); }
}

@keyframes uaPreloaderPulse {
    0%, 100% { transform: scale(.96); }
    50% { transform: scale(1.06); }
}

@keyframes uaPreloaderProgress {
    from { left: -42%; }
    to { left: 105%; }
}

@keyframes uaPreloaderGlowBlue {
    0%, 100% { transform: translate3d(0,0,0); }
    50% { transform: translate3d(18px,18px,0); }
}

@keyframes uaPreloaderGlowRed {
    0%, 100% { transform: translate3d(0,0,0) scale(1); }
    50% { transform: translate3d(-18px,-12px,0) scale(1.07); }
}

@media (max-width: 575.98px) {
    .ua-preloader {
        padding: 20px;
    }

    .ua-preloader__spinner {
        width: 68px;
        height: 68px;
        margin-bottom: 19px;
    }

    .ua-preloader__ring--inner {
        inset: 9px;
    }

    .ua-preloader__core {
        width: 34px;
        height: 34px;
        border-radius: 11px;
        font-size: 14px;
    }

    .ua-preloader__brand {
        font-size: 1.27rem;
    }

    .ua-preloader__brand em {
        flex-basis: 100%;
        margin-top: 5px;
        font-size: .58em;
    }

    .ua-preloader__progress {
        width: 165px;
        margin-top: 17px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ua-preloader__ring,
    .ua-preloader__core,
    .ua-preloader__progress span,
    .ua-preloader__glow {
        animation: none !important;
    }
}