/* /salary: появление шкал грейдов и направлений при прокрутке — точка, от неё расходится вилка, затем значение;
   пунктир «ты» дорисовывается сверху вниз. Только CSS на существующих элементах.
   Класс sv-anim блоку ставит board.js (есть IntersectionObserver и нет prefers-reduced-motion),
   sv-in — когда блок доехал до экрана. Без JS всё видно сразу. График рисуется в jobs_chart.js */

.sv-anim .sv-row {
    --d: calc(var(--i, 0) * 70ms);
}

.sv-anim .sv-dot {
    animation: sv-pop 0.45s cubic-bezier(0.3, 1.5, 0.5, 1) var(--d) both paused;
}

.sv-anim .sv-range {
    transform-origin: var(--o, 0) 50%;
    animation: sv-grow 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--d) + 150ms) both paused;
}

.sv-anim .sv-row-val {
    animation: sv-fade 0.4s ease calc(var(--d) + 300ms) both paused;
}

.sv-anim .sv-me {
    animation: sv-draw 0.6s ease 700ms both paused;
}

.sv-anim .sv-me span {
    animation: sv-fade 0.3s ease 1200ms both paused;
}

.sv-anim.sv-in :is(.sv-dot, .sv-range, .sv-row-val, .sv-me, .sv-me span) {
    animation-play-state: running;
}

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

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

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

@keyframes sv-draw {
    from { background-size: 1px 0; }
}