/* ============================================================
   Art CRM — Анимации (centralized)
   Все keyframes + utility-классы. Подключается из index.html
   после остальных css. Применяется через class-based triggers
   или JS (addClass → анимация → removeClass).
   ============================================================ */

/* =========================================================
   Базовые keyframes
   ========================================================= */

/* Появления */
@keyframes anim-fade-in       { from { opacity: 0; } to { opacity: 1; } }
@keyframes anim-fade-out      { from { opacity: 1; } to { opacity: 0; } }
@keyframes anim-fade-up       { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes anim-fade-down     { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes anim-fade-left     { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } }
@keyframes anim-fade-right    { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }
@keyframes anim-slide-up      { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes anim-slide-down    { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes anim-slide-in-right{ from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes anim-slide-out-right{from { transform: translateX(0); opacity: 1; } to { transform: translateX(120%); opacity: 0; } }
@keyframes anim-scale-in {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes anim-scale-out {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(0.92); }
}
/* «Pop» — лёгкий бунс */
@keyframes anim-pop {
    0%   { transform: scale(0.3); opacity: 0; }
    60%  { transform: scale(1.06); opacity: 1; }
    100% { transform: scale(1); }
}

/* Pulse / Highlight */
@keyframes anim-pulse-bg-green {
    0%   { background-color: transparent; }
    35%  { background-color: rgba(79,157,122,0.22); }
    100% { background-color: transparent; }
}
@keyframes anim-pulse-bg-coral {
    0%   { background-color: transparent; }
    35%  { background-color: rgba(224,130,99,0.22); }
    100% { background-color: transparent; }
}
@keyframes anim-pulse-bg-brand {
    0%   { background-color: transparent; }
    35%  { background-color: rgba(61,58,142,0.18); }
    100% { background-color: transparent; }
}
@keyframes anim-pulse-once {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}
@keyframes anim-pulse-breath {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.02); }
}

/* Shake (ошибка) */
@keyframes anim-shake {
    0%   { transform: translateX(0); }
    15%  { transform: translateX(-7px); }
    30%  { transform: translateX(6px); }
    45%  { transform: translateX(-4px); }
    60%  { transform: translateX(3px); }
    75%  { transform: translateX(-2px); }
    100% { transform: translateX(0); }
}

/* Спиннер */
@keyframes anim-spin { to { transform: rotate(360deg); } }

/* =========================================================
   Utility-классы (применять по месту)
   ========================================================= */
.an-fade-in    { animation: anim-fade-in    0.18s ease-out both; }
.an-fade-out   { animation: anim-fade-out   0.16s ease-in both; }
.an-fade-up    { animation: anim-fade-up    0.22s cubic-bezier(0.22,1,0.36,1) both; }
.an-fade-down  { animation: anim-fade-down  0.22s cubic-bezier(0.22,1,0.36,1) both; }
.an-fade-left  { animation: anim-fade-left  0.22s cubic-bezier(0.22,1,0.36,1) both; }
.an-fade-right { animation: anim-fade-right 0.22s cubic-bezier(0.22,1,0.36,1) both; }
.an-scale-in   { animation: anim-scale-in   0.22s cubic-bezier(0.22,1,0.36,1) both; }
.an-scale-out  { animation: anim-scale-out  0.18s ease-in both; }
.an-pop        { animation: anim-pop        0.45s cubic-bezier(0.34,1.56,0.64,1) both; }
.an-shake      { animation: anim-shake      0.55s ease-in-out; }

/* Pulse-варианты — для подсветки фона при действии */
.an-pulse-green { animation: anim-pulse-bg-green 0.6s ease-out; }
.an-pulse-coral { animation: anim-pulse-bg-coral 0.6s ease-out; }
.an-pulse-brand { animation: anim-pulse-bg-brand 0.6s ease-out; }
.an-pulse-once  { animation: anim-pulse-once 0.5s ease-in-out; }
.an-pulse-breath { animation: anim-pulse-breath 4s ease-in-out infinite; }

/* Stagger fade-in для списков — задержки по N-му ребёнку */
.an-stagger > * {
    opacity: 0;
    animation: anim-fade-up 0.32s cubic-bezier(0.22,1,0.36,1) both;
}
.an-stagger > *:nth-child(1)  { animation-delay:   0ms; }
.an-stagger > *:nth-child(2)  { animation-delay:  35ms; }
.an-stagger > *:nth-child(3)  { animation-delay:  70ms; }
.an-stagger > *:nth-child(4)  { animation-delay: 105ms; }
.an-stagger > *:nth-child(5)  { animation-delay: 140ms; }
.an-stagger > *:nth-child(6)  { animation-delay: 175ms; }
.an-stagger > *:nth-child(7)  { animation-delay: 210ms; }
.an-stagger > *:nth-child(8)  { animation-delay: 245ms; }
.an-stagger > *:nth-child(n+9){ animation-delay: 280ms; }

/* Spinner-кружок */
.an-spinner {
    display: inline-block;
    width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: anim-spin 0.7s linear infinite;
    vertical-align: -3px;
}
.an-spinner.is-dark {
    border-color: rgba(61,58,142,0.2);
    border-top-color: var(--brand);
}

/* =========================================================
   ПРИКЛАДНЫЕ — применяются автоматически к существующим
   элементам (адаптируем существующий код, без массивных правок).
   ========================================================= */

/* === A.1, A.2 — события в календаре: появление/удаление === */
.cal-ev.is-entering { animation: anim-scale-in 0.28s cubic-bezier(0.22,1,0.36,1) both; }
.cal-ev.is-leaving  { animation: anim-scale-out 0.22s ease-in forwards; }

/* A.4 — Hover на занятие: лёгкий lift (уже частично есть, дополняем) */
.cal-ev {
    transition: transform 0.15s, box-shadow 0.15s, filter 0.12s;
}
.cal-ev:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(60,50,40,0.10), 0 1px 3px rgba(60,50,40,0.06);
    z-index: 3;
}

/* A.5 — Pulse фона при смене статуса (накладывается через .is-paying / .is-unpaying) */
.cal-ev.is-paying   { animation: anim-pulse-bg-green 0.6s ease-out; }
.cal-ev.is-unpaying { animation: anim-pulse-bg-coral 0.6s ease-out; }

/* A.6 — Подсветка дня «сегодня» после скролла */
@keyframes anim-today-flash {
    0%   { background: var(--brand-soft); }
    100% { background: transparent; }
}
.cal-day-col.is-today-flash::before,
.cal-hdr.is-today-flash,
.dp-lessons-group-head.is-pulse { animation: anim-today-flash 0.8s ease-out; }

/* A.7, A.8 — Переключение Неделя/Месяц и Prev/Next — fade swap */
/* Сильнее, чем дефолтные fade-left/right — для заметной навигации недели */
@keyframes anim-cal-slide-from-right {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes anim-cal-slide-from-left {
    from { opacity: 0; transform: translateX(-40px); }
    to   { opacity: 1; transform: translateX(0); }
}
.cal-grid.an-slide-left,
.cal-grid.cal-slide-left  { animation: anim-cal-slide-from-right 0.3s cubic-bezier(0.22,1,0.36,1); }
.cal-grid.an-slide-right,
.cal-grid.cal-slide-right { animation: anim-cal-slide-from-left  0.3s cubic-bezier(0.22,1,0.36,1); }
.cal-grid.an-view-fade    { animation: anim-fade-in    0.25s ease-out; }

/* A.9 — Мини-календарь смена месяца */
.mini-cal-grid.an-month-swap { animation: anim-fade-in 0.2s ease-out; }

/* === B — Сайдбар === */
/* B.10/11 — Slide overlay (уже есть transition на .t-sidebar.open) — усиливаем easing */
.t-sidebar { transition: transform 0.25s cubic-bezier(0.22,1,0.36,1) !important; }
.nav-overlay { transition: opacity 0.18s ease-out !important; }

/* B.12 — Hover nav-пункта (уже есть transition на color, дополняем фон) */
.t-nav-item { transition: background 0.15s, color 0.15s; }

/* B.13 — Клик на активный пункт — pulse */
.t-nav-item.is-clicked { animation: anim-pulse-bg-brand 0.45s ease-out; }

/* B.14 — Появление бейджа/пипа */
.t-nav-count:not([hidden]),
.t-nav-pip:not([hidden]) { animation: anim-pop 0.35s cubic-bezier(0.34,1.56,0.64,1) both; }

/* === C — Шапка === */
/* C.15 — Поиск фокус glow (уже есть transition в auth, тут .t-search-input) */
.t-search-input { transition: border-color 0.15s, background 0.15s, box-shadow 0.2s; }

/* C.16 — Dropdown поиска */
.t-search-dropdown:not([hidden]) { animation: anim-fade-down 0.18s cubic-bezier(0.22,1,0.36,1); }

/* C.17 — Bell popup */
.t-bell-popup.open { animation: anim-fade-down 0.18s cubic-bezier(0.22,1,0.36,1); }

/* C.18 — Появление коралловой точки на bell — pop-once при появлении */
.t-bell-btn .t-bell-badge { animation: anim-pop 0.35s cubic-bezier(0.34,1.56,0.64,1) both; }

/* C.19 — Профиль popup */
.t-profile-popup.open { animation: anim-fade-down 0.2s cubic-bezier(0.22,1,0.36,1); }

/* === D — Настройки === */
/* D.20/21 — Save-bar */
.set-savebar { transition: opacity 0.25s, transform 0.25s cubic-bezier(0.22,1,0.36,1); transform: translateY(8px); opacity: 0; }
.set-savebar.is-dirty { transform: translateY(0); opacity: 1; }
/* D.22 — Toggle уже плавно ездит из набора .set-toggle-slider — добавляем easing */
.set-toggle-slider, .set-toggle-slider::before {
    transition: background 0.15s cubic-bezier(0.22,1,0.36,1), transform 0.18s cubic-bezier(0.34,1.56,0.64,1);
}
/* D.24 — Поле в ошибке */
.set-field.is-err .set-input,
.auth-field.is-err .auth-input {
    border-color: var(--red) !important;
    box-shadow: 0 0 0 3px var(--red-bg) !important;
    animation: anim-shake 0.55s ease-in-out;
}

/* === E — Заметки === */
/* E.25 — Свернуть/развернуть — fade (выставляем on JS toggle) */
.cal-notes-panel.is-anim-collapse { animation: anim-fade-out 0.15s ease-in both; }
.cal-notes-panel.is-anim-expand   { animation: anim-fade-in 0.2s ease-out both; }
/* E.26 — Новая карточка */
.cal-note-card.is-entering { animation: anim-fade-up 0.28s cubic-bezier(0.22,1,0.36,1) both; }
/* E.27 — Удаление карточки */
.cal-note-card.is-leaving  { animation: anim-scale-out 0.22s ease-in forwards; }

/* E.28 — Пин-анимация */
@keyframes anim-pin-engage {
    0%   { transform: rotate(0) scale(1); }
    40%  { transform: rotate(-28deg) scale(1.25); }
    100% { transform: rotate(-12deg) scale(1.08); }
}
.cal-note-pin-btn.is-pinning {
    color: var(--coral-ink) !important;
}
.cal-note-pin-btn.is-pinning svg {
    animation: anim-pin-engage 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    fill: var(--coral) !important;
    stroke: var(--coral) !important;
}
/* Сама карточка во время "пиннинга" слегка приподнимается */
@keyframes anim-card-pin-lift {
    0%   { transform: translateY(0); box-shadow: 0 1px 2px rgba(60,50,40,0.04); }
    40%  { transform: translateY(-3px) scale(1.01); box-shadow: 0 10px 24px rgba(60,50,40,0.18), 0 2px 6px rgba(224,130,99,0.25); }
    100% { transform: translateY(0); box-shadow: 0 1px 2px rgba(60,50,40,0.04); }
}
.cal-note-card.is-pinning {
    animation: anim-card-pin-lift 0.45s ease-out;
    z-index: 2;
}
/* Перемещённая на верх карточка — выделяющий fade-up на новом месте */
.cal-note-card.is-just-pinned {
    animation: anim-fade-up 0.35s cubic-bezier(0.22,1,0.36,1) both;
}

/* === F — Долги и оплаты === */
/* F.29 — pulse при смене статуса (уже есть .is-fading в dp-payments.css). Усиливаем easing. */
.dp-lesson.is-fading { animation: anim-pulse-bg-green 0.6s ease-out; }
/* F.31 — stagger fade-in для рендера балансов/занятий */
.dp-bal-list.an-stagger > *,
.dp-lessons-list.an-stagger > * {
    animation-duration: 0.28s;
}

/* === G — Финансы / KPI === */
/* G.32 — Count-up — JS-driven, тут только style */
.kpi-pop { animation: anim-pulse-once 0.45s ease-out; }
/* G.34 — Cross-fade при смене периода */
.fin-tab-pane.an-fade { animation: anim-fade-in 0.22s ease-out; }
/* Переключение Долги ↔ Аналитика — fade-out → swap → fade-in */
.fin-tab-pane.is-fading-out { animation: anim-fade-out 0.12s ease-in forwards; }
.fin-tab-pane.is-fading-in  { animation: anim-fade-up  0.25s cubic-bezier(0.22,1,0.36,1); }
/* Также сами таб-кнопки */
.fin-tab { transition: background 0.18s, color 0.18s, box-shadow 0.18s; }
.fin-tab.active { animation: anim-pulse-once 0.35s ease-out; }

/* === H — Список занятий === */
.lessons-list.an-stagger > * { animation-duration: 0.26s; }

/* === I — Модалки === */
/* I.37/38 — open/close для общих модалок */
.lm-overlay:not([hidden]),
.mv-overlay:not([hidden]),
.del-overlay:not([hidden]),
.sf2-overlay:not([hidden]) {
    animation: anim-fade-in 0.18s ease-out;
}
.lm-card, .mv-card, .del-card, .sf2-card {
    animation: anim-scale-in 0.22s cubic-bezier(0.22,1,0.36,1);
    transform-origin: center;
}
/* Закрытие — добавляется .is-closing к overlay/card на 180ms перед удалением */
.lm-overlay.is-closing,
.mv-overlay.is-closing,
.del-overlay.is-closing { animation: anim-fade-out 0.16s ease-in forwards; }
.lm-overlay.is-closing .lm-card,
.mv-overlay.is-closing .mv-card,
.del-overlay.is-closing .del-card { animation: anim-scale-out 0.16s ease-in forwards; }

/* === J — Логин/Регистрация (V3) — уже есть aurora/floating, добавляем breathing === */
.auth-page .v3-float { animation: anim-pulse-breath 5s ease-in-out infinite; }
.auth-page .v3-float-1 { animation-delay: -0.5s; }
.auth-page .v3-float-2 { animation-delay: -1.7s; }
.auth-page .v3-float-3 { animation-delay: -3.2s; }

/* J.41 — shake на ошибку логина (есть в auth-v3.css, дополнительно ничего не надо) */

/* J.40 — Submit success state у кнопки логина */
.auth-btn.is-loading { color: transparent !important; pointer-events: none; position: relative; }
.auth-btn.is-loading::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    margin: -8px 0 0 -8px;
    width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: anim-spin 0.7s linear infinite;
}
.auth-btn.is-success {
    background: var(--green) !important;
    color: #fff !important;
}

/* === K — Welcome-overlay (после регистрации) — есть конфетти, pop. Полировка: === */
.v3-welcome-card { animation: anim-pop 0.55s cubic-bezier(0.34,1.56,0.64,1) both; }
.v3-welcome-overlay:not(.is-closed) { animation: anim-fade-in 0.25s ease-out; }
.v3-welcome-overlay.is-closed { animation: anim-fade-out 0.3s ease-in forwards; }

/* === L — Общие === */
/* L.47 — Тосты (используется в .toast у проекта) */
.toast {
    transition: transform 0.35s cubic-bezier(0.34,1.36,0.64,1), opacity 0.35s;
}
/* L.48 — Loading state на кнопках (через .is-loading) */
.btn-ds.is-loading,
.btn-add.is-loading {
    color: transparent !important;
    pointer-events: none;
    position: relative;
}
.btn-ds.is-loading::after,
.btn-add.is-loading::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    margin: -8px 0 0 -8px;
    width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: anim-spin 0.7s linear infinite;
}

/* L.49 — Skeleton */
@keyframes anim-skeleton {
    0%   { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
}
.an-skeleton {
    display: inline-block;
    background: linear-gradient(90deg, var(--bg-soft) 0%, var(--bg-card) 50%, var(--bg-soft) 100%);
    background-size: 200px 100%;
    background-repeat: no-repeat;
    border-radius: 6px;
    animation: anim-skeleton 1.2s ease-in-out infinite;
    color: transparent;
    user-select: none;
}

/* L.50 — Переход между секциями приложения */
.t-section.active { animation: anim-fade-in 0.18s ease-out; }

/* =========================================================
   Reduce motion — уважение к accessibility
   ========================================================= */
@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;
    }
}