/* OnFoot homepage preloader */
html.onfoot-loading,
html.onfoot-loading body {
    overflow: hidden;
}

.onfoot-preloader {
    background: linear-gradient(145deg, #ffffff 0%, #fff5f5 45%, #ffffff 100%);
    cursor: default;
}

.onfoot-preloader__inner {
    text-align: center;
    padding: 24px;
    max-width: 320px;
}

.onfoot-preloader__logo {
    width: min(220px, 72vw);
    height: auto;
    display: block;
    margin: 0 auto 28px;
    animation: onfootPreloaderLogo 1.2s ease-out both;
}

.onfoot-preloader__bar {
    width: 200px;
    max-width: 70vw;
    height: 4px;
    margin: 0 auto 18px;
    background: rgba(232, 19, 42, 0.15);
    border-radius: 999px;
    overflow: hidden;
}

.onfoot-preloader__bar span {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #E8132A, #ff4d5e);
    border-radius: 999px;
    animation: onfootPreloaderBar 2s ease-in-out forwards;
}

.onfoot-preloader__tagline {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #888;
    animation: onfootPreloaderFade 0.8s ease 0.3s both;
}

.onfoot-preloader.loaded {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.55s ease, visibility 0.55s ease;
}

@keyframes onfootPreloaderLogo {
    from {
        opacity: 0;
        transform: scale(0.92) translateY(8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes onfootPreloaderBar {
    to {
        width: 100%;
    }
}

@keyframes onfootPreloaderFade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}