/* Слой движения: появление блоков, отклик на действия, плавные переходы.
   Все анимации отключаются при системной настройке уменьшенного движения. */

@keyframes vxRise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

@keyframes vxSlideIn {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: none; }
}

@keyframes vxPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.18); }
}

@keyframes vxCountIn {
    from { opacity: 0; transform: scale(.6); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes vxGrow {
    from { width: 0; }
}

@keyframes vxOut {
    to { opacity: 0; transform: translateY(-8px); }
}

/* Шапка и контент появляются при загрузке страницы */
.vx-topbar { animation: vxRise .3s ease-out both; }

.vx-page-head,
.vx-hero { animation: vxRise .34s ease-out both; }

.vx-main > .vx-card,
.vx-main > .vx-kpi,
.vx-main > .vx-accounts,
.vx-main > .vx-grid-main,
.vx-main > .vx-grid-exchange,
.vx-main > .vx-stack,
.vx-main > .vx-table,
.vx-main > .vx-filters,
.vx-main > .vx-confirm {
    animation: vxRise .38s ease-out both;
    animation-delay: .05s;
}

/* Карточки внутри сеток выезжают по очереди */
.vx-accounts > *,
.vx-kpi > * {
    animation: vxRise .4s ease-out both;
}

.vx-accounts > *:nth-child(1), .vx-kpi > *:nth-child(1) { animation-delay: .06s; }
.vx-accounts > *:nth-child(2), .vx-kpi > *:nth-child(2) { animation-delay: .12s; }
.vx-accounts > *:nth-child(3), .vx-kpi > *:nth-child(3) { animation-delay: .18s; }
.vx-accounts > *:nth-child(4), .vx-kpi > *:nth-child(4) { animation-delay: .24s; }

/* Строки списков и таблиц проявляются каскадом */
.vx-oplist .vx-op,
.vx-table__row,
.vx-rate-row,
.vx-requisite,
.vx-stack > .vx-card {
    animation: vxSlideIn .32s ease-out both;
}

.vx-oplist .vx-op:nth-child(1), .vx-table__row:nth-child(2), .vx-stack > .vx-card:nth-child(1) { animation-delay: .05s; }
.vx-oplist .vx-op:nth-child(2), .vx-table__row:nth-child(3), .vx-stack > .vx-card:nth-child(2) { animation-delay: .09s; }
.vx-oplist .vx-op:nth-child(3), .vx-table__row:nth-child(4), .vx-stack > .vx-card:nth-child(3) { animation-delay: .13s; }
.vx-oplist .vx-op:nth-child(4), .vx-table__row:nth-child(5), .vx-stack > .vx-card:nth-child(4) { animation-delay: .17s; }
.vx-oplist .vx-op:nth-child(5), .vx-table__row:nth-child(6), .vx-stack > .vx-card:nth-child(5) { animation-delay: .21s; }
.vx-oplist .vx-op:nth-child(n+6), .vx-table__row:nth-child(n+7) { animation-delay: .25s; }

/* Значок непрочитанных заметен, но не мельтешит */
.vx-count { animation: vxCountIn .3s cubic-bezier(.2, 1.4, .4, 1) both; }
.vx-count--dot { animation: vxCountIn .3s cubic-bezier(.2, 1.4, .4, 1) both, vxPulse 2.4s ease-in-out 1.2s 2; }

/* Полоса прогресса набирается плавно */
.vx-progress span { animation: vxGrow .7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: .2s; }
.vx-onb__bars span.is-done { animation: vxGrow .5s ease-out both; }

/* Отклик на нажатие и наведение */
.vx-btn:active { transform: translateY(1px) scale(.985); }
.vx-currency-pick:active,
.vx-table__row:active { transform: scale(.995); }

.vx-topbar__link::after {
    content: "";
    display: block;
    height: 2px;
    margin-top: 12px;
    margin-bottom: -14px;
    background: var(--vx-red-bright);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .2s ease-out;
}
.vx-topbar__link:hover::after { transform: scaleX(1); }
.vx-topbar__link.is-active::after { display: none; }

.vx-op:hover { background: var(--vx-bg); }
.vx-op__icon { transition: transform .18s ease-out; }
.vx-op:hover .vx-op__icon { transform: scale(1.08); }

.vx-thread { transition: transform .15s ease-out, background .15s; }
.vx-thread:hover { transform: translateX(3px); }

.vx-badge { transition: transform .15s ease-out; }
.vx-task:hover .vx-badge,
.vx-review:hover .vx-badge { transform: translateY(-1px); }

/* Плавное исчезание уведомления */
.vx-toast.is-hiding { animation: vxOut .3s ease-in both; }

/* Поля откликаются на фокус мягко */
.vx-field { transition: border-color .15s, box-shadow .2s, background .15s; }
.vx-field:hover:not(:focus) { border-color: #B9C0D4; }

/* Модалка закрывается с затуханием */
.vx-overlay.is-closing { animation: vxOut .2s ease-in both; }
.vx-overlay.is-closing .vx-modal { transition: transform .2s ease-in, opacity .2s; transform: translateY(10px) scale(.98); opacity: 0; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* Мобильные формы: шторка снизу вместо окна по центру */
@media (max-width: 620px) {
    .vx-overlay { align-items: end; padding: 0; }

    .vx-modal {
        width: 100%;
        max-width: 100%;
        max-height: 92vh;
        border-radius: 20px 20px 0 0;
        padding: 10px 20px calc(24px + env(safe-area-inset-bottom));
        animation: vxSheet .34s cubic-bezier(.2, .9, .25, 1);
        touch-action: pan-y;
    }

    /* Полоска захвата подсказывает, что шторку можно смахнуть */
    .vx-modal::before {
        content: "";
        display: block;
        width: 40px;
        height: 4px;
        margin: 0 auto 16px;
        border-radius: 99px;
        background: var(--vx-line);
    }

    .vx-overlay.is-closing .vx-modal {
        transform: translateY(100%);
        opacity: 1;
        transition: transform .26s cubic-bezier(.4, 0, 1, 1);
    }

    .vx-modal__head { margin-bottom: 4px; }
    .vx-modal__title { font-size: 18px; }
    .vx-modal .vx-btn--block { padding: 15px; font-size: 15px; }

    .vx-bill-wrap { width: 100%; }
    .vx-bill { border-radius: 16px 16px 0 0; max-height: 92vh; }
}

/* Шторка следует за пальцем при смахивании */
.vx-modal.is-dragging { transition: none; animation: none; }

/* Переключение валюты откликается без перезагрузки */
.vx-currency-row { transition: background .3s; }
.vx-currency-row.is-updating { opacity: .6; }
.vx-currency-row.is-changed { background: var(--vx-tint); }
.vx-currency-row [data-currency-status] { transition: background .2s, color .2s; }