.vacancies-filter,
.vacancies-section {
    position: relative;
    --vacancies-preload-duration: 2.8s;
    --vacancies-preload-glow-duration: 2s;
    --vacancies-preload-radius: 8px;
    --vacancies-preload-base: rgb(224.6, 224.6, 224.6);
    --vacancies-preload-mid: rgb(236 236 236);
    --vacancies-preload-glow: rgb(234 232 232);
    --vacancies-preload-pulse: #f9fafb;
    --vacancies-preload-gradient: linear-gradient(
            105deg,
            var(--vacancies-preload-base) 0%,
            var(--vacancies-preload-base) 34%,
            var(--vacancies-preload-mid) 42%,
            var(--vacancies-preload-glow) 50%,
            var(--vacancies-preload-mid) 58%,
            var(--vacancies-preload-base) 66%,
            var(--vacancies-preload-base) 100%
    );
}

.vacancies-filter.is-preloading,
.vacancies-section.is-preloading {
    pointer-events: none;
    user-select: none;
}

.vacancies-filter.is-preloading::before,
.vacancies-section.is-preloading::before {
    /*content: "";*/
    /*position: absolute;*/
    /*inset: 0;*/
    /*z-index: 20;*/
    /*border-radius: 8px;*/
    /*background:*/
    /*    linear-gradient(*/
    /*        100deg,*/
    /*        rgba(248, 249, 250, 0.74) 0%,*/
    /*        rgba(233, 236, 239, 0.9) 18%,*/
    /*        rgba(255, 255, 255, 0.82) 36%,*/
    /*        rgba(233, 236, 239, 0.9) 54%,*/
    /*        rgba(248, 249, 250, 0.74) 100%*/
    /*    );*/
    /*background-size: 220% 100%;*/
    /*animation: worki-vacancies-preload-shimmer 1.35s ease-in-out infinite;*/
}

.vacancies-filter.is-preloading::after,
.vacancies-section.is-preloading::after {
    /*content: "";*/
    /*position: absolute;*/
    /*inset: 0;*/
    /*z-index: 21;*/
    /*border-radius: 8px;*/
    /*background-color: rgba(255, 255, 255, 0.44);*/
}


.vacancies-filter.is-preloading .ss-main, .vacancies-filter.is-preloading .filter-el {
    position: relative;
    overflow: hidden;
    border-radius: var(--vacancies-preload-radius);
}

.vacancies-filter.is-preloading .ss-main > *, .vacancies-filter.is-preloading .filter-el > * {
    opacity: 0;
}

.vacancies-filter.is-preloading .ss-main::before, .vacancies-filter.is-preloading .filter-el::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 20;
    border-radius: var(--vacancies-preload-radius);
    background-image: var(--vacancies-preload-gradient);
    background-size: 320% 100%;
    animation: worki-vacancies-preload-shimmer var(--vacancies-preload-duration) cubic-bezier(0.45, 0, 0.2, 1) infinite;
    will-change: background-position;
    overflow: hidden;

}

.vacancies-filter.is-preloading .ss-main::after, .vacancies-filter.is-preloading .filter-el::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 21;
    border-radius: var(--vacancies-preload-radius);
    background-color: var(--vacancies-preload-pulse);
    opacity: 0;
    animation: worki-vacancies-preload-glow var(--vacancies-preload-glow-duration) ease-in-out infinite;
    will-change: opacity;
    overflow: hidden;
}


.vacancies-section.is-preloading .vcard {
    overflow: hidden;
    border-radius: var(--vacancies-preload-radius);
}

.vacancies-section.is-preloading .vcard::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 20;
    border-radius: var(--vacancies-preload-radius);
    background-image: var(--vacancies-preload-gradient);
    background-size: 320% 100%;
    animation: worki-vacancies-preload-shimmer var(--vacancies-preload-duration) cubic-bezier(0.45, 0, 0.2, 1) infinite;
    will-change: background-position;
    overflow: hidden;
}

.vacancies-section.is-preloading .vcard::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 21;
    border-radius: var(--vacancies-preload-radius);
    background-color: var(--vacancies-preload-pulse);
    opacity: 0;
    animation: worki-vacancies-preload-glow var(--vacancies-preload-glow-duration) ease-in-out infinite;
    will-change: opacity;
    overflow: hidden;

}




@keyframes worki-vacancies-preload-shimmer {
    0% {
        background-position: 130% 0;
    }

    8% {
        background-position: 130% 0;
    }

    92% {
        background-position: -30% 0;
    }

    100% {
        background-position: -30% 0;
    }
}

@keyframes worki-vacancies-preload-glow {
    50% {
        opacity: 0.6;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vacancies-filter.is-preloading .ss-main::before,
    .vacancies-filter.is-preloading .filter-el::before,
    .vacancies-section.is-preloading .vcard::before {
        animation: none;
        background-position: 50% 0;
    }

    .vacancies-filter.is-preloading .ss-main::after,
    .vacancies-filter.is-preloading .filter-el::after,
    .vacancies-section.is-preloading .vcard::after {
        animation: none;
    }
}