/* /salary/<профессия>: появление графиков при скролле.
   Начальное состояние — только под html.sp-animate: его ставит инлайн-скрипт в <head> salary_profession.html,
   если есть IntersectionObserver и нет prefers-reduced-motion. Блок получает .is-visible от salary_profession.js,
   когда попадает в экран. Без JS всё видно сразу. */

.sp-animate {
    --sp-ease: cubic-bezier(0.2, 0, 0, 1);
}

/* ---------- Hero: столбики растут снизу, стрелка прорисовывается от хвоста, галочка «выпрыгивает» ---------- */

.sp-animate .sp-median-art i {
    clip-path: inset(100% 0 0 0);
    transition: clip-path 0.7s var(--sp-ease);
}

.sp-animate .sp-median-art i:nth-child(2) { transition-delay: 0.08s; }
.sp-animate .sp-median-art i:nth-child(3) { transition-delay: 0.16s; }
.sp-animate .sp-median-art i:nth-child(4) { transition-delay: 0.24s; }

.sp-animate .sp-median-art img {
    clip-path: inset(0 0 0 100%);
    transition: clip-path 0.8s var(--sp-ease) 0.45s;
}

.sp-animate .sp-sample-head img {
    opacity: 0;
    transform: scale(0.4) rotate(-45deg);
    transition: opacity 0.2s ease 0.9s, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.9s;
}

/* Конечный clip без скругления — углы даёт border-radius столбика (12px на десктопе, 6px на мобилке) */
.sp-animate .is-visible .sp-median-art i,
.sp-animate .is-visible .sp-median-art img {
    clip-path: inset(0);
}

.sp-animate .is-visible .sp-sample-head img {
    opacity: 1;
    transform: none;
}

/* ---------- Грейды: полосы вытягиваются слева направо ---------- */

.sp-animate .sp-grade-bar {
    clip-path: inset(0 100% 0 0 round 8px);
    transition: clip-path 0.9s var(--sp-ease);
}

.sp-animate .sp-grade:nth-child(2) .sp-grade-bar { transition-delay: 0.08s; }
.sp-animate .sp-grade:nth-child(3) .sp-grade-bar { transition-delay: 0.16s; }
.sp-animate .sp-grade:nth-child(4) .sp-grade-bar { transition-delay: 0.24s; }
.sp-animate .sp-grade:nth-child(n+5) .sp-grade-bar { transition-delay: 0.32s; }

/* ---------- Формат: ступеньки поднимаются по очереди ---------- */

.sp-animate .sp-format {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.5s ease, transform 0.7s var(--sp-ease);
    transition-delay: calc(var(--sp-step, 0) * 0.08s);
}

/* ---------- Города: столбики растут снизу ---------- */

.sp-animate .sp-city-bar {
    clip-path: inset(100% 0 0 0 round 8px);
    transition: clip-path 0.8s var(--sp-ease);
}

.sp-animate .sp-city:nth-child(2) .sp-city-bar { transition-delay: 0.1s; }
.sp-animate .sp-city:nth-child(3) .sp-city-bar { transition-delay: 0.2s; }

.sp-animate .is-visible .sp-grade-bar,
.sp-animate .is-visible .sp-city-bar {
    clip-path: inset(0 round 8px);
}

.sp-animate .is-visible .sp-format {
    opacity: 1;
    transform: none;
}