/* ============================================================================
   animations.css — анимации интерфейса gidstroy.pro (макет «iOS-стиль», 14.10.2026).
   Правило: анимация помогает понять состояние — раздел появился, карточки пришли,
   столбец вырос, линия нарисовалась — а не украшает. Длительности и easing — из
   tokens.css (--ease, --spring). При prefers-reduced-motion всё отключается.
   Keyframes cardIn / grow / pulse живут в components.css (нужны компонентам).
   ============================================================================ */

/* 1. Появление раздела: app.js show() снимает и заново ставит .is-shown — анимация перезапускается */
@keyframes viewIn { from { opacity: 0; transform: translateY(14px) scale(.992); } to { opacity: 1; transform: none; } }
.section.is-shown { animation: viewIn .45s var(--ease) both; }

/* 2. Каскад карточек: дети .stagger появляются с шагом 50 мс. Класс .is-shown на разделе живёт
   ~2,5 с после переключения, поэтому каскад идёт только при показе раздела, а не при каждой
   перерисовке списка (опрос сервера, перетаскивание). Сетки разделов перечислены селекторами —
   разметка и скрипты разделов не меняются. */
.section.is-shown .stagger > *,
.section.is-shown .tstats > *,
.section.is-shown #crmStats > *,
.section.is-shown .tk-col > .stack > *,
.section.is-shown .crmd-col > .crm-card,
.section.is-shown .fin-top > *,
.section.is-shown #finRoot > div > .card,
.section.is-shown .tk-board > .tk-col,
.section.is-shown .crmd-board > .crmd-col { animation: cardIn .55s var(--ease) both; }
.section.is-shown .stagger > :nth-child(1), .section.is-shown .tstats > :nth-child(1), .section.is-shown #crmStats > :nth-child(1), .section.is-shown .tk-col > .stack > :nth-child(1), .section.is-shown .crmd-col > .crm-card:nth-child(1), .section.is-shown .fin-top > :nth-child(1), .section.is-shown #finRoot > div > .card:nth-child(1), .section.is-shown .tk-board > .tk-col:nth-child(1), .section.is-shown .crmd-board > .crmd-col:nth-child(1) { animation-delay: .03s; }
.section.is-shown .stagger > :nth-child(2), .section.is-shown .tstats > :nth-child(2), .section.is-shown #crmStats > :nth-child(2), .section.is-shown .tk-col > .stack > :nth-child(2), .section.is-shown .crmd-col > .crm-card:nth-child(2), .section.is-shown .fin-top > :nth-child(2), .section.is-shown #finRoot > div > .card:nth-child(2), .section.is-shown .tk-board > .tk-col:nth-child(2), .section.is-shown .crmd-board > .crmd-col:nth-child(2) { animation-delay: .08s; }
.section.is-shown .stagger > :nth-child(3), .section.is-shown .tstats > :nth-child(3), .section.is-shown #crmStats > :nth-child(3), .section.is-shown .tk-col > .stack > :nth-child(3), .section.is-shown .crmd-col > .crm-card:nth-child(3), .section.is-shown .fin-top > :nth-child(3), .section.is-shown #finRoot > div > .card:nth-child(3), .section.is-shown .tk-board > .tk-col:nth-child(3), .section.is-shown .crmd-board > .crmd-col:nth-child(3) { animation-delay: .13s; }
.section.is-shown .stagger > :nth-child(4), .section.is-shown .tstats > :nth-child(4), .section.is-shown #crmStats > :nth-child(4), .section.is-shown .tk-col > .stack > :nth-child(4), .section.is-shown .crmd-col > .crm-card:nth-child(4), .section.is-shown .fin-top > :nth-child(4), .section.is-shown #finRoot > div > .card:nth-child(4), .section.is-shown .tk-board > .tk-col:nth-child(4), .section.is-shown .crmd-board > .crmd-col:nth-child(4) { animation-delay: .18s; }
.section.is-shown .stagger > :nth-child(5), .section.is-shown .tstats > :nth-child(5), .section.is-shown #crmStats > :nth-child(5), .section.is-shown .tk-col > .stack > :nth-child(5), .section.is-shown .crmd-col > .crm-card:nth-child(5), .section.is-shown .fin-top > :nth-child(5), .section.is-shown #finRoot > div > .card:nth-child(5), .section.is-shown .crmd-board > .crmd-col:nth-child(5) { animation-delay: .23s; }
.section.is-shown .stagger > :nth-child(6), .section.is-shown .tstats > :nth-child(6), .section.is-shown #crmStats > :nth-child(6), .section.is-shown .tk-col > .stack > :nth-child(6), .section.is-shown .crmd-col > .crm-card:nth-child(6), .section.is-shown #finRoot > div > .card:nth-child(6) { animation-delay: .28s; }
.section.is-shown .stagger > :nth-child(n+7), .section.is-shown .tk-col > .stack > :nth-child(n+7), .section.is-shown .crmd-col > .crm-card:nth-child(n+7), .section.is-shown #finRoot > div > .card:nth-child(n+7) { animation-delay: .33s; }

/* 3. Графики (finance.js, canon/charts.js): столбцы растут от основания, линии рисуются, сегменты кольца — по очереди */
.bar-anim { transform-box: fill-box; transform-origin: center bottom; animation: barUp .9s var(--ease) both; }
.bar-anim.down { transform-origin: center top; }
@keyframes barUp { from { transform: scaleY(0); } }
.line-anim { stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: draw 1.6s var(--ease) .2s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.donut-seg { transition: opacity .2s, transform .3s var(--spring); transform-origin: center; transform-box: fill-box; cursor: pointer; }

/* 4. Страницы объекта и тендера (этап 6): «push» справа и возврат «pop» */
@keyframes pushIn { from { opacity: 0; transform: translateX(48px); } to { opacity: 1; transform: none; } }
@keyframes popIn { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: none; } }
.view.push { animation: pushIn .5s var(--ease) both; }
.view.pop { animation: popIn .45s var(--ease) both; }

/* 5. Служебные: fade, slide, overlay, drawer, shimmer, spinner — используются компонентами и разделами */
@keyframes ez-fade-in { from { opacity: 0; } to { opacity: 1; } }
.a-fade-in { animation: ez-fade-in .3s var(--ease) both; }
@keyframes ez-slide-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.a-slide-up { animation: ez-slide-up .36s var(--ease) both; }
.a-lift { transition: transform var(--t-base), box-shadow var(--t-base); }
.a-lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
@keyframes ez-spin { to { transform: rotate(360deg); } }
@keyframes ez-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes ez-marquee { 0% { background-position: 0 0; } 100% { background-position: 40px 0; } }
@keyframes ez-marquee-line { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes ez-lock-shackle { 0% { transform: translateY(-3px); } 60% { transform: translateY(.5px); } 100% { transform: translateY(0); } }
@keyframes ez-lock-pop { 0% { transform: scale(1); } 50% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes ez-pulse-ring { 0% { box-shadow: 0 0 0 0 var(--accent-glow); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes ez-progress-fill { from { width: 0; } }
@keyframes ez-badge-appear { 0% { opacity: 0; transform: scale(.6); } 70% { transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } }
.a-badge-appear { animation: ez-badge-appear .32s var(--spring) both; }
@keyframes ez-toast-enter { from { opacity: 0; transform: translateY(20px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.a-toast-enter { animation: ez-toast-enter .4s var(--spring) both; }
@keyframes ez-drawer-slide { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes ez-overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ez-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes ez-bounce { 0%,100% { transform: translateY(0); } 30% { transform: translateY(-3px); } 60% { transform: translateY(-1px); } }
@keyframes ez-pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
@keyframes ez-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* 6. Уважение к настройке «уменьшить движение»: всё мгновенно, линии графиков сразу нарисованы */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .line-anim { stroke-dashoffset: 0; }
}