/* ==========================================================================
   Нейтральные токены движения · design-kb v1.0 · 07.11.2026
   Каркас поведения без стиля: ни цветов, ни шрифтов. Источник каждого числа —
   02-ДВИЖЕНИЕ-ТОКЕНЫ.json (те же имена). Подключать первым, до стилей проекта.
   Проект может переопределить значения в своём :root, но не имена.
   ========================================================================== */
:root {
  /* --- Длительности --------------------------------------------------- */
  --dur-instant: 0ms;        /* частые действия: клик по строке, меню, вкладки рабочего кабинета */
  --dur-row: 100ms;          /* подсветка строки мышью (linear) */
  --dur-hover: 120ms;        /* наведение: фон, цвет, рамка */
  --dur-tooltip: 125ms;      /* подсказка, только прозрачность */
  --dur-fade: 150ms;         /* простое проявление, смена страницы */
  --dur-press: 160ms;        /* нажатие → --scale-press */
  --dur-toast-out: 180ms;
  --dur-menu: 200ms;         /* меню; затемнение фона */
  --dur-tabs: 200ms;         /* линия вкладок */
  --dur-list: 200ms;         /* новая строка; данные вместо скелетона */
  --dur-toast-in: 240ms;
  --dur-accordion: 240ms;
  --dur-modal: 250ms;        /* вход окна */
  --dur-modal-out: 200ms;    /* уход окна */
  --dur-scrim: 200ms;        /* затемнение отдельно от окна */
  --dur-banner: 300ms;
  --dur-screen: 320ms;       /* переход вглубь/назад во всю ширину (как приложение) */
  --dur-screen-web: 300ms;   /* сдвиг 24px + проявление (сайт) */
  --dur-sheet: 320ms;        /* шторка, боковая панель — вход */
  --dur-sheet-out: 250ms;
  --dur-photo-open: 250ms;
  --dur-photo-close: 200ms;
  --dur-reveal: 480ms;       /* лендинг: проявление при прокрутке */
  --dur-light: 800ms;        /* лендинг: «зажигание» раздела */
  --dur-wash: 1200ms;        /* смыв подсветки новой строки */
  --dur-skeleton: 1600ms;    /* цикл мерцания скелетона */
  --dur-reduced: 120ms;      /* всё, что остаётся при reduce */

  /* --- Паузы и таймеры (это время, а не движение: при reduce не меняются) */
  --loading-delay: 400ms;    /* признак загрузки не раньше */
  --pending-delay: 1000ms;   /* значок «отправляется» не раньше */
  --toast-hold: 4000ms;
  --toast-hold-action: 5000ms;
  --hover-intent: 65ms;      /* предзагрузка по задержке указателя */
  --row-highlight-delay: 80ms;

  /* --- Кривые --------------------------------------------------------- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);        /* основная: вход, выход, отклик */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);    /* перемещение по экрану */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);     /* шторки и панели */
  --ease-system: cubic-bezier(0.38, 0.7, 0.125, 1);  /* «системная» iOS */
  --ease-slide-web: cubic-bezier(0.25, 1, 0.5, 1);   /* переходы экранов в вебе */
  --ease-reveal: cubic-bezier(0.2, 0, 0, 1);         /* тихое проявление на лендинге */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);     /* смена состояний */

  /* --- Пружины (рассчитаны из параметров Telegram; длительность рядом) - */
  --spring-screen: linear(0, 0.047, 0.148, 0.269, 0.391, 0.502, 0.599, 0.681, 0.749, 0.804, 0.848, 0.883, 0.91, 0.931, 0.947, 0.96, 0.97, 0.977, 0.983, 0.987, 1);   /* 320ms, без перелёта */
  --spring-release: linear(0, 0.048, 0.156, 0.289, 0.425, 0.55, 0.659, 0.75, 0.822, 0.878, 0.92, 0.95, 0.971, 0.986, 0.995, 1.001, 1.004, 1.005, 1.006, 1.005, 1); /* 320ms, после свайпа */
  --spring-menu: linear(0, 0.035, 0.12, 0.231, 0.352, 0.471, 0.582, 0.681, 0.764, 0.834, 0.889, 0.932, 0.964, 0.987, 1.002, 1.012, 1.018, 1.02, 1.021, 1.019, 1);      /* 420ms, перелёт 2% */
  --spring-pop: linear(0, 0.049, 0.167, 0.318, 0.477, 0.626, 0.756, 0.862, 0.942, 0.999, 1.036, 1.056, 1.064, 1.063, 1.057, 1.048, 1.038, 1.028, 1.019, 1.011, 1);   /* 500ms, перелёт 6% */
  --dur-spring-menu: 420ms;
  --dur-spring-pop: 500ms;

  /* --- Расстояния ----------------------------------------------------- */
  --shift-page: 12px;
  --shift-page-web: 24px;
  --shift-reveal: 8px;
  --shift-list: 4px;
  --shift-modal: 16px;
  --shift-toast: 12px;
  --shift-notice: -16px;
  --shift-under-screen: -30%;  /* параллакс нижнего экрана */
  --popover-gap: 6px;

  /* --- Масштабы ------------------------------------------------------- */
  --scale-press: 0.97;
  --scale-modal-in: 0.96;
  --scale-popover-in: 0.95;
  --scale-alert-in: 0.8;
  --scale-long-press-min: 0.7;
  --scale-toast-out: 0.96;

  /* --- Затемнение и размытие (непрозрачность чёрного) ------------------ */
  --scrim-modal: 0.6;
  --scrim-sheet: 0.4;
  --scrim-light: 0.25;
  --dim-under-screen: 0.1;
  --blur-overlay: 10px;   /* только если стиль проекта разрешает размытие */
  --blur-toast: 8px;

  /* --- Каскад --------------------------------------------------------- */
  --stagger-step: 30ms;
  --stagger-section: 60ms;
  --stagger-signature: 80ms;
  --stagger-digit: 40ms;
  --stagger-max: 6;

  /* --- Слои ----------------------------------------------------------- */
  --z-base: 0;
  --z-sticky: 10;
  --z-header: 20;
  --z-popover: 30;
  --z-panel: 40;
  --z-overlay: 50;
  --z-overlay-menu: 55;
  --z-toast: 70;
  --z-system: 90;

  /* --- Пороги жестов (числа без единиц читаются из JS: getComputedStyle) */
  --g-axis-lock: 10;            /* px */
  --g-tap-slop: 10;             /* px */
  --g-edge-back-zone: 20;       /* px */
  --g-back-commit: 80;          /* px */
  --g-back-velocity: 0.5;       /* px/ms */
  --g-sheet-close-share: 0.25;
  --g-sheet-close-velocity: 0.6;/* px/ms */
  --g-sheet-up-resistance: 6;
  --g-long-press-delay: 120;    /* ms */
  --g-long-press-progress: 200; /* ms */
  --g-double-tap: 160;          /* ms */
  --g-rubber-k: 0.55;
  --g-rubber-range: 120;        /* px, предлагаю, проверить */
  --g-pull-threshold: 64;       /* px */
  --g-pull-max: 96;             /* px */
  --g-row-action: 72;           /* px */
  --g-row-open-share: 0.4;
  --g-photo-close-share: 0.25;
  --g-photo-close-velocity: 1;  /* px/ms */

  /* --- Готовые переходы ---------------------------------------------- */
  --t-press: transform var(--dur-press) var(--ease-out);
  --t-hover: background-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out);
  --t-row: background-color var(--dur-row) linear;
}

/* --- Ключевые кадры (имена нейтральные: kb-*) -------------------------- */
@keyframes kb-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes kb-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes kb-modal-in { from { opacity: 0; transform: scale(var(--scale-modal-in)); } to { opacity: 1; transform: none; } }
@keyframes kb-modal-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(var(--shift-modal)); } }
@keyframes kb-popover-in { from { opacity: 0; transform: scale(var(--scale-popover-in)); } to { opacity: 1; transform: none; } }
@keyframes kb-sheet-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes kb-sheet-out { from { transform: none; } to { transform: translateY(100%); } }
@keyframes kb-toast-in { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: none; } }
@keyframes kb-toast-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(100%); } }
@keyframes kb-reveal { from { opacity: 0; transform: translateY(var(--shift-reveal)); } to { opacity: 1; transform: none; } }
@keyframes kb-list-in { from { opacity: 0; transform: translateY(var(--shift-list)); } to { opacity: 1; transform: none; } }
@keyframes kb-skeleton { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* --- Нажатие: одно на всё нажимаемое ----------------------------------- */
.kb-pressable { transition: var(--t-press), var(--t-hover); -webkit-tap-highlight-color: transparent; }
.kb-pressable:active:not(:disabled):not([aria-disabled="true"]) { transform: scale(var(--scale-press)); }
@media (hover: none) { .kb-pressable:hover { background-color: inherit; } } /* наведение только с мышью */

/* --- Уменьшить движение ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --scale-press: 1; --scale-modal-in: 1; --scale-popover-in: 1; --scale-alert-in: 1; --scale-toast-out: 1;
    --shift-page: 0px; --shift-page-web: 0px; --shift-reveal: 0px; --shift-list: 0px; --shift-modal: 0px;
    --shift-toast: 0px; --shift-notice: 0px; --shift-under-screen: 0%;
    --dur-modal: var(--dur-reduced); --dur-modal-out: var(--dur-reduced); --dur-menu: var(--dur-reduced);
    --dur-sheet: var(--dur-reduced); --dur-sheet-out: var(--dur-reduced); --dur-toast-in: var(--dur-reduced);
    --dur-toast-out: var(--dur-reduced); --dur-screen: var(--dur-reduced); --dur-screen-web: var(--dur-reduced);
    --dur-reveal: var(--dur-reduced); --dur-light: 0ms; --dur-photo-open: var(--dur-reduced); --dur-photo-close: var(--dur-reduced);
    --stagger-step: 0ms; --stagger-section: 0ms; --stagger-signature: 0ms; --stagger-digit: 0ms;
  }
  /* шторка и уведомление без сдвига — только проявление */
  @keyframes kb-sheet-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes kb-sheet-out { from { opacity: 1; } to { opacity: 0; } }
  @keyframes kb-toast-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes kb-toast-out { from { opacity: 1; } to { opacity: 0; } }
  @keyframes kb-skeleton { 0%, 100% { opacity: 1; } }
  html { scroll-behavior: auto; }
}
/* Рубильник для показа на холсте: <html data-motion="reduce"> — то же без настроек системы */
html[data-motion="reduce"] {
  --scale-press: 1; --scale-modal-in: 1; --scale-popover-in: 1; --scale-alert-in: 1; --scale-toast-out: 1;
  --shift-page: 0px; --shift-page-web: 0px; --shift-reveal: 0px; --shift-list: 0px; --shift-modal: 0px;
  --shift-toast: 0px; --shift-notice: 0px; --shift-under-screen: 0%;
  --dur-modal: var(--dur-reduced); --dur-modal-out: var(--dur-reduced); --dur-menu: var(--dur-reduced);
  --dur-sheet: var(--dur-reduced); --dur-sheet-out: var(--dur-reduced); --dur-toast-in: var(--dur-reduced);
  --dur-toast-out: var(--dur-reduced); --dur-screen: var(--dur-reduced); --dur-screen-web: var(--dur-reduced);
  --dur-reveal: var(--dur-reduced); --dur-light: 0ms; --dur-photo-open: var(--dur-reduced); --dur-photo-close: var(--dur-reduced);
  --stagger-step: 0ms; --stagger-section: 0ms; --stagger-signature: 0ms; --stagger-digit: 0ms;
  scroll-behavior: auto;
}