/**
 * assets/css/onboarding.css — Онбординг: анимации и точки прогресса.
 *
 * Выделено из общего styles.css при разборе стилей по модулям
 * (исходные строки 3324–3338, 3339–3379).
 */

/* ===== Анимации для онбординга ===== */
.is-swapping .modal__trophy {
    opacity: 0;
    transform: translateY(10px) scale(.985);
    filter: drop-shadow(var(--ui-art-shadow-card));
    transition: opacity var(--tam-t-modal) ease, transform var(--tam-t-modal) ease, filter var(--tam-t-modal) ease;
}

.is-swapping .modal__title,
.is-swapping .modal__sub {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--tam-t-panel) ease, transform var(--tam-t-panel) ease;
}

/* ===== Стили для точек прогресса ===== */










/* активная точка — золотая */
.stepper__dot.is-active {
    border-color: rgb(231 168 70);
    background: radial-gradient(70% 70% at 35% 30%, rgba(255,255,255,.26), rgba(0,0,0,0) 60%),
                radial-gradient(60% 55% at 50% 18%, color-mix(in srgb, var(--ui-gold-hi) 35%, transparent) 0%, color-mix(in srgb, var(--ui-gold-light) 20%, transparent) 35%, color-mix(in srgb, var(--ui-gold) 15%, transparent) 70%, rgba(0,0,0,0) 100%),
                color-mix(in srgb, var(--ui-bg-deep) 45%, transparent);
    box-shadow: var(--ui-shadow-lg),
                0 0 0 4px color-mix(in srgb, var(--ui-gold-light) 12%, transparent),
                inset 0 1px 0 rgba(255,255,255,.12);
}

/* done — тоже золотой, но спокойнее */
.stepper__dot.is-done {
    border-color: color-mix(in srgb, var(--ui-gold-light) 55%, transparent);
    box-shadow: var(--ui-shadow-lg),
                inset 0 1px 0 rgba(255,255,255,.10);
}





.stepper__line.is-done::before { 
    transform: translateX(0%); 
}