/* ==========================================================
   Анимации.
   Главный момент — прорисовка маршрута сделки на первом экране.
   Второй — линия этапов, которая «тянется», когда блок появляется на экране.
   ========================================================== */

/* --- Первый экран: заголовок и текст плавно появляются --- */
.hero__content > * {
    animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.hero__content > :nth-child(2) { animation-delay: 0.08s; }
.hero__content > :nth-child(3) { animation-delay: 0.16s; }
.hero__content > :nth-child(4) { animation-delay: 0.24s; }
.hero__content > :nth-child(5) { animation-delay: 0.32s; }

/* --- Маршрут: линия прорисовывается сверху вниз, остановки загораются по очереди --- */
.route__list::before {
    animation: draw-y 1.8s cubic-bezier(0.65, 0, 0.35, 1) 0.4s both;
}

.route__stop {
    animation: stop-in 0.5s ease both;
    animation-delay: calc(0.45s + var(--i) * 0.28s);
}

.route__stop:last-child .route__dot {
    animation: pulse 2.4s ease-in-out 2.4s infinite;
}

/* --- Этапы: линия и номера (класс .js добавляет main.js) --- */
.js .steps::before {
    transform: scaleX(0);
    transition: transform 1.2s cubic-bezier(0.65, 0, 0.35, 1);
}

.js .steps--six::before {
    transform: scaleY(0);
}

.js .steps .steps__num {
    transform: scale(0.6);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.3, 1.5, 0.5, 1), opacity 0.3s ease;
}

.js .steps.is-visible::before {
    transform: none;
}

.js .steps.is-visible .steps__num {
    transform: none;
    opacity: 1;
}

.js .steps.is-visible .steps__item:nth-child(2) .steps__num { transition-delay: 0.2s; }
.js .steps.is-visible .steps__item:nth-child(3) .steps__num { transition-delay: 0.4s; }
.js .steps.is-visible .steps__item:nth-child(4) .steps__num { transition-delay: 0.6s; }
.js .steps.is-visible .steps__item:nth-child(5) .steps__num { transition-delay: 0.8s; }
.js .steps.is-visible .steps__item:nth-child(6) .steps__num { transition-delay: 1s; }

@media (max-width: 860px) {
    .js .steps::before {
        transform: scaleY(0);
    }
}

/* --- Ответ FAQ появляется мягко --- */
.faq__item[open] .faq__a {
    animation: rise 0.3s ease both;
}

/* --- Ключевые кадры --- */
@keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

@keyframes draw-y {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}

@keyframes stop-in {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: none; }
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 6px rgba(255, 197, 61, 0.2); }
    50%      { box-shadow: 0 0 0 12px rgba(255, 197, 61, 0.05); }
}

/* --- Уважение к настройке «уменьшить движение» --- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0s !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
    }
}