:root {
    --refresh-loader-bg: linear-gradient(145deg, rgba(22, 36, 58, 0.24), rgba(38, 56, 80, 0.2));
    --refresh-loader-accent: #9bcbd8;
    --refresh-loader-accent-soft: rgba(155, 203, 216, 0.14);
    --refresh-loader-block-two: #bdd8c6;
    --refresh-loader-block-three: #ddd2b6;
}

body.blitz-loader-active {
    overflow: hidden;
}

.blitz-refresh-loader {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--refresh-loader-bg);
    backdrop-filter: none;
    opacity: 1;
    transition: opacity 260ms ease;
    pointer-events: none;
}

.blitz-refresh-loader.hide {
    opacity: 0;
}

.blitz-refresh-loader__core {
    position: relative;
    width: 88px;
    height: 48px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.blitz-refresh-loader__pulse {
    position: absolute;
    width: 120px;
    height: 10px;
    border-radius: 999px;
    background: rgba(245, 250, 255, 0.12);
    filter: blur(1px);
    transform: translateY(34px);
    animation: blitzLoaderShadow 700ms ease-in-out infinite;
}

.blitz-refresh-loader__core::before,
.blitz-refresh-loader__core::after {
    content: '';
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: var(--refresh-loader-accent);
    box-shadow: 0 5px 12px var(--refresh-loader-accent-soft);
    animation: blitzLoaderJump 820ms cubic-bezier(0.2, 0.75, 0.25, 1) infinite;
}

.blitz-refresh-loader__core::after {
    background: var(--refresh-loader-block-two);
    box-shadow: 0 5px 12px rgba(184, 216, 198, 0.18);
    animation-delay: 120ms;
}

.blitz-refresh-loader__core {
    --third-box-color: var(--refresh-loader-block-three);
}

.blitz-refresh-loader__core > i {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: var(--third-box-color);
    box-shadow: 0 5px 12px rgba(221, 210, 182, 0.18);
    animation: blitzLoaderJump 820ms cubic-bezier(0.2, 0.75, 0.25, 1) infinite;
    animation-delay: 240ms;
}

@keyframes blitzLoaderJump {
    0%,
    100% {
        transform: translateY(0) scaleY(1);
    }
    40% {
        transform: translateY(-13px) scaleY(1.01);
    }
    60% {
        transform: translateY(-4px) scaleY(0.98);
    }
}

@keyframes blitzLoaderShadow {
    0% {
        transform: translateY(34px) scaleX(0.92);
        opacity: 0.55;
    }
    40% {
        transform: translateY(34px) scaleX(0.75);
        opacity: 0.35;
    }
    100% {
        transform: translateY(34px) scaleX(0.92);
        opacity: 0.55;
    }
}

@media (prefers-reduced-motion: reduce) {
    .blitz-refresh-loader,
    .blitz-refresh-loader__core,
    .blitz-refresh-loader__pulse {
        animation: none !important;
        transition: none !important;
    }
}