/* /market: появление блоков при прокрутке и при смене направления. Только CSS на существующих элементах.
   Класс mk-anim блоку ставит market_page.js (есть IntersectionObserver и нет prefers-reduced-motion),
   mk-in — когда блок доехал до экрана. Без JS и при отключённой анимации всё видно сразу.
   --i — порядковый номер строки, от него задержка. */

.mk-anim {
    opacity: 0;
    translate: 0 20px;
    transition: opacity 0.6s ease, translate 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.mk-anim.mk-in {
    opacity: 1;
    translate: 0 0;
}

/* Полосы растут от своей опоры: вакансии и списки — слева направо, резюме на зеркальной шкале — от центра влево */
.mk-anim :is(.mk-bar i, .sv-item-bar i) {
    transform-origin: 0 50%;
    animation: mk-grow-x 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--i, 0) * 45ms + 150ms) both paused;
}

.mk-anim .mk-bar.mk-res i {
    transform-origin: 100% 50%;
}

.mk-anim .mk-col i {
    transform-origin: 50% 100%;
    animation: mk-grow-y 0.8s cubic-bezier(0.2, 0.9, 0.2, 1) calc(var(--i, 0) * 60ms + 150ms) both paused;
}

.mk-anim :is(.mk-col em, .mk-fly-idx, .mk-fly-val, .mk-fly-name, .mk-item b, .mk-item .sv-item-name, .mk-pole) {
    animation: mk-fade 0.45s ease calc(var(--i, 0) * 45ms + 300ms) both paused;
}

/* Пиктограмма: квадраты вакансий и кружки резюме выскакивают по одному */
.mk-anim .mk-picto-row i {
    animation: mk-pop 0.45s cubic-bezier(0.3, 1.5, 0.5, 1) calc(min(var(--i, 0), 34) * 32ms + 200ms) both paused;
}

.mk-anim.mk-in :is(.mk-bar i, .sv-item-bar i, .mk-col i, .mk-col em, .mk-fly-idx, .mk-fly-val, .mk-fly-name, .mk-item b, .mk-item .sv-item-name, .mk-pole, .mk-picto-row i) {
    animation-play-state: running;
}

@keyframes mk-grow-x {
    from { transform: scaleX(0); }
}

@keyframes mk-grow-y {
    from { transform: scaleY(0); }
}

@keyframes mk-fade {
    from { opacity: 0; }
}

@keyframes mk-pop {
    from { opacity: 0; transform: scale(0); }
}

@media (max-width: 1279px) {
    .mk-anim .mk-bar.mk-res i {
        transform-origin: 0 50%;
    }
}