/* ============================================================
   PrintCRM — Motion (motion.css)
   Все keyframes, классы анимаций, переходы канбана/модалок,
   скелетоны и prefers-reduced-motion.
   Длительности — только через --dur-* и --ease-out (tokens.css).
   ============================================================ */

/* ---------- Keyframes ---------- */
/* Появление тостов/уведомлений: справа + лёгкий подъём */
@keyframes toastIn {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Появление блока: снизу вверх (страницы, секции) */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Карточка канбана во время перетаскивания / вставки */
@keyframes kanbanDropIn {
    from { opacity: 0.4; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}

/* Скелетон загрузки (shimmer) */
@keyframes skeletonShimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* Вспышка строки/элемента после обновления */
@keyframes rowFlash {
    0%   { background-color: var(--c-primary-soft); }
    100% { background-color: transparent; }
}

/* Пульс индикатора (например, счётчик непрочитанного) */
@keyframes softPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.12); }
}

/* ---------- Классы-применения ---------- */
/* Плавное появление страницы */
.page-content { animation: fadeUp var(--dur-slow) var(--ease-out); }

/* Каскадное появление карточек-сеток: добавьте .anim-stagger контейнеру */
.anim-stagger > * { opacity: 0; animation: fadeUp var(--dur-slow) var(--ease-out) forwards; }
.anim-stagger > *:nth-child(1) { animation-delay: 0.03s; }
.anim-stagger > *:nth-child(2) { animation-delay: 0.06s; }
.anim-stagger > *:nth-child(3) { animation-delay: 0.09s; }
.anim-stagger > *:nth-child(4) { animation-delay: 0.12s; }
.anim-stagger > *:nth-child(5) { animation-delay: 0.15s; }
.anim-stagger > *:nth-child(6) { animation-delay: 0.18s; }
.anim-stagger > *:nth-child(n+7) { animation-delay: 0.21s; }

/* Скелетон: placeholder-блок .skeleton */
.skeleton {
    background: linear-gradient(90deg, var(--c-surface-2) 25%, var(--c-border) 37%, var(--c-surface-2) 63%);
    background-size: 400% 100%;
    animation: skeletonShimmer 1.4s ease infinite;
    border-radius: var(--radius-sm);
    min-height: 1rem;
}

/* Вспышка после обновления (JS добавляет класс, снимает через 600 мс) */
.flash-row-update { animation: rowFlash 0.6s var(--ease-out); }

/* Пульс бейджа непрочитанного */
.pulse-dot { animation: softPulse 2s ease-in-out infinite; }

/* ---------- Модалки: подъём вместо «падения» Bootstrap ---------- */
.modal.fade .modal-dialog {
    transform: translateY(16px) scale(0.98);
    transition: transform var(--dur-slow) var(--ease-out);
}
.modal.show .modal-dialog { transform: none; }

/* ---------- Канбан: drag & drop ---------- */
.kanban-card {
    transition: transform var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out),
                opacity var(--dur-base) var(--ease-out);
}
.kanban-card.kanban-dragging {
    opacity: 0.55;
    transform: rotate(2deg) scale(1.02);
    box-shadow: var(--shadow-lg);
}
.kanban-card.kanban-dropped { animation: kanbanDropIn var(--dur-slow) var(--ease-out); }
.kanban-body.kanban-drop-target {
    background: var(--c-primary-soft);
    outline: 2px dashed var(--c-primary);
    outline-offset: -2px;
    border-radius: var(--radius-sm);
}

/* ---------- Доступность: выключить движение по запросу ОС ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .anim-stagger > * { opacity: 1; animation: none; }
}