/* ============================================================================
   Нейро-OS Motion System — дизайн-система переходов и анимаций
   Эталоны: Linear, Stripe Dashboard, Vercel, Apple iCloud, Things 3.

   Принципы:
   1. Spring-easing вместо linear/ease-out — UI «дышит» как физический объект.
   2. Короткие durations (120-220ms) — отзывчивость > эффектность.
   3. View Transitions API для page navigation — нативные браузерные «hero animations».
   4. Compositor-only (transform + opacity) — 60fps на mid-range устройствах.
   5. prefers-reduced-motion → instant — уважаем пользовательский выбор.
   ========================================================================= */

:root {
  /* === DURATION TOKENS === */
  --motion-instant: 80ms;
  --motion-fast:    120ms;
  --motion-base:    180ms;
  --motion-medium:  280ms;
  --motion-slow:    420ms;

  /* === EASING TOKENS === */
  /* Sharp — для появления (быстрый старт, мягкая остановка) */
  --ease-sharp:  cubic-bezier(0.32, 0.72, 0, 1);
  /* Standard — Material Design 3 emphasized */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  /* Spring — iOS-like bounce (использовать спарингли) */
  --ease-spring: linear(
    0, 0.009, 0.035 2.1%, 0.085, 0.16 5.7%, 0.262 7.6%, 0.39 9.7%,
    0.539 12%, 0.706 14.4%, 0.876 17.1%, 0.962, 1.041 21%, 1.105 23.2%,
    1.155 25.7%, 1.187 28.4%, 1.198, 1.205 32.1%, 1.205, 1.196 36.7%,
    1.117 41.7%, 1.04 46.6%, 0.984, 0.957 56.4%, 0.965 59.4%,
    0.985 63.6%, 1.022, 1.039, 1.046, 1.043 78.5%, 1.025 87.5%, 1.0 100%
  );
  /* Decelerate — для входа на сцену */
  --ease-decel: cubic-bezier(0, 0, 0.2, 1);
  /* Accelerate — для исчезновения */
  --ease-accel: cubic-bezier(0.4, 0, 1, 1);

  /* === ELEVATION TOKENS (через тени) === */
  --shadow-1: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 1px rgba(15, 23, 42, .02);
  --shadow-2: 0 4px 12px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04);
  --shadow-3: 0 12px 28px rgba(15, 23, 42, .10), 0 4px 8px rgba(15, 23, 42, .04);
  --shadow-4: 0 24px 48px rgba(15, 23, 42, .14), 0 8px 16px rgba(15, 23, 42, .06);

  /* === RING (focus) === */
  --ring-color: color-mix(in srgb, var(--brand, #2563eb) 35%, transparent);
  --ring-shadow: 0 0 0 3px var(--ring-color);
}

/* ============================================================================
   View Transitions API — нативные плавные переходы между страницами.
   Поддержка: Chrome 111+, Edge 111+, Safari 18+ (~85% юзеров).
   Фоллбэк: моментальная навигация без эффектов (всё работает).
   ========================================================================= */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: vt-out var(--motion-base) var(--ease-accel) both;
}
::view-transition-new(root) {
  animation: vt-in var(--motion-medium) var(--ease-decel) both;
}
@keyframes vt-out {
  to { opacity: 0; transform: translateY(-4px); }
}
@keyframes vt-in {
  from { opacity: 0; transform: translateY(8px); }
}

/* ============================================================================
   Кнопки — tactile feedback через transform + shadow
   ========================================================================= */
.btn,
button.btn,
a.btn,
.tier-cta,
.cta-button {
  transition:
    transform var(--motion-fast) var(--ease-sharp),
    box-shadow var(--motion-base) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    opacity var(--motion-fast) var(--ease-standard);
  will-change: transform;
}
.btn:hover,
button.btn:hover,
a.btn:hover,
.tier-cta:hover,
.cta-button:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
}
.btn:active,
button.btn:active,
a.btn:active,
.tier-cta:active,
.cta-button:active {
  transform: translateY(0) scale(.98);
  transition-duration: var(--motion-instant);
}
.btn:disabled,
button.btn:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none !important;
}

/* ============================================================================
   Карточки — lift on hover (Linear-стиль)
   ========================================================================= */
.card,
.tier-card,
.kp-card,
.client-card,
.lesson-card,
.cc-card,
.module-card,
.dash-card,
.pl-card {
  transition:
    transform var(--motion-base) var(--ease-sharp),
    box-shadow var(--motion-medium) var(--ease-standard),
    border-color var(--motion-base) var(--ease-standard);
  will-change: transform;
}
.card:hover,
.tier-card:hover,
.kp-card:hover,
.client-card:hover,
.lesson-card:hover,
.cc-card:hover,
.module-card:hover,
.pl-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-3);
  border-color: color-mix(in srgb, var(--brand, #2563eb) 30%, var(--border, #e2e8f0));
}

/* ============================================================================
   Sidebar nav — плавный underline-индикатор
   ========================================================================= */
.sidebar-nav .nav-item,
.sidebar-nav a {
  position: relative;
  transition:
    color var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard);
}
.sidebar-nav .nav-item::before,
.sidebar-nav a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 0;
  background: var(--brand, #2563eb);
  border-radius: 0 3px 3px 0;
  transform: translateY(-50%);
  transition: height var(--motion-base) var(--ease-sharp);
}
.sidebar-nav .nav-item.active::before,
.sidebar-nav a.active::before,
.sidebar-nav .nav-item[aria-current="page"]::before {
  height: 60%;
}

/* ============================================================================
   Inputs — focus-ring без раздражающего outline
   ========================================================================= */
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
  transition:
    border-color var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard);
}
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--brand, #2563eb);
  box-shadow: var(--ring-shadow);
}

/* ============================================================================
   Появление контента — staggered fade-in для списков
   Использовать: <ul class="motion-list"> или <div data-stagger>
   ========================================================================= */
.motion-list > *,
[data-stagger] > * {
  animation: stagger-in var(--motion-medium) var(--ease-decel) both;
}
.motion-list > *:nth-child(1),  [data-stagger] > *:nth-child(1)  { animation-delay: 0ms; }
.motion-list > *:nth-child(2),  [data-stagger] > *:nth-child(2)  { animation-delay: 40ms; }
.motion-list > *:nth-child(3),  [data-stagger] > *:nth-child(3)  { animation-delay: 80ms; }
.motion-list > *:nth-child(4),  [data-stagger] > *:nth-child(4)  { animation-delay: 120ms; }
.motion-list > *:nth-child(5),  [data-stagger] > *:nth-child(5)  { animation-delay: 160ms; }
.motion-list > *:nth-child(6),  [data-stagger] > *:nth-child(6)  { animation-delay: 200ms; }
.motion-list > *:nth-child(7),  [data-stagger] > *:nth-child(7)  { animation-delay: 240ms; }
.motion-list > *:nth-child(8),  [data-stagger] > *:nth-child(8)  { animation-delay: 280ms; }
.motion-list > *:nth-child(n+9),[data-stagger] > *:nth-child(n+9){ animation-delay: 320ms; }

@keyframes stagger-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* @starting-style — нативный «появись плавно при mount» (Chrome 117+) */
@supports (transition-behavior: allow-discrete) {
  .motion-appear {
    opacity: 1;
    transform: translateY(0);
    transition:
      opacity var(--motion-medium) var(--ease-decel),
      transform var(--motion-medium) var(--ease-decel);
  }
  @starting-style {
    .motion-appear {
      opacity: 0;
      transform: translateY(12px);
    }
  }
}

/* ============================================================================
   Skeleton loaders — shimmer-эффект для загрузки
   Использовать: <div class="skeleton" style="height:20px;width:60%"></div>
   ========================================================================= */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg3, #f1f5f9) 0%,
    color-mix(in srgb, var(--bg3, #f1f5f9) 60%, white) 50%,
    var(--bg3, #f1f5f9) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s linear infinite;
  border-radius: 6px;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================================
   Spinner — вращающийся индикатор для кнопок submit
   ========================================================================= */
.spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spinner-rotate .7s linear infinite;
  vertical-align: -2px;
}
@keyframes spinner-rotate {
  to { transform: rotate(360deg); }
}

/* ============================================================================
   Pulse — для важных индикаторов (новое уведомление, live-сессия)
   ========================================================================= */
.pulse-dot {
  position: relative;
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--brand, #2563eb);
}
.pulse-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: pulse-ring 1.6s var(--ease-decel) infinite;
}
@keyframes pulse-ring {
  0%   { transform: scale(1);   opacity: .55; }
  80%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* ============================================================================
   Toast — всплывающие уведомления (snackbar)
   Использовать: <div class="toast">Скопировано</div> + JS .toast.show
   ========================================================================= */
.toast {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--text, #0f172a);
  color: white;
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-3);
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition:
    transform var(--motion-medium) var(--ease-spring),
    opacity var(--motion-base) var(--ease-standard);
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* ============================================================================
   Modal/dropdown — fade+scale (Apple-style)
   ========================================================================= */
.modal-backdrop,
.dropdown-menu {
  transition:
    opacity var(--motion-base) var(--ease-standard),
    transform var(--motion-base) var(--ease-sharp);
}
.modal-backdrop {
  opacity: 0;
  background: rgba(15, 23, 42, .35);
  backdrop-filter: blur(4px);
}
.modal-backdrop.show { opacity: 1; }

.modal-content {
  transform: scale(.96) translateY(8px);
  opacity: 0;
  transition:
    transform var(--motion-medium) var(--ease-spring),
    opacity var(--motion-base) var(--ease-decel);
}
.modal-backdrop.show .modal-content {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* ============================================================================
   Smooth scroll + scroll-snap для горизонтальных списков
   ========================================================================= */
html { scroll-behavior: smooth; }

.snap-x {
  scroll-snap-type: x mandatory;
  scroll-padding: 16px;
  -webkit-overflow-scrolling: touch;
}
.snap-x > * { scroll-snap-align: start; }

/* ============================================================================
   IMAGES — мягкое появление после загрузки
   ========================================================================= */
img {
  transition: opacity var(--motion-medium) var(--ease-decel);
}
img[data-loading="true"] { opacity: 0; }

/* ============================================================================
   Links — underline plays in/out
   ========================================================================= */
a.link-anim,
.prose a {
  position: relative;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition: background-size var(--motion-base) var(--ease-sharp);
}
a.link-anim:hover,
.prose a:hover {
  background-size: 100% 1px;
}

/* ============================================================================
   Tabs — sliding indicator (Linear-стиль)
   ========================================================================= */
.tabs {
  position: relative;
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border, #e2e8f0);
}
.tabs > .tab {
  padding: 10px 14px;
  color: var(--muted, #64748b);
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  border: none;
  background: transparent;
  position: relative;
  transition: color var(--motion-fast) var(--ease-standard);
}
.tabs > .tab:hover {
  color: var(--text, #0f172a);
}
.tabs > .tab.active {
  color: var(--brand, #2563eb);
}
.tabs > .tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 8px; right: 8px;
  height: 2px;
  background: var(--brand, #2563eb);
  border-radius: 2px 2px 0 0;
  animation: tab-underline var(--motion-base) var(--ease-spring) both;
}
@keyframes tab-underline {
  from { transform: scaleX(.4); opacity: 0; }
  to   { transform: scaleX(1);  opacity: 1; }
}

/* ============================================================================
   Checkbox/radio — плавный flip
   ========================================================================= */
input[type="checkbox"],
input[type="radio"] {
  transition: background-color var(--motion-fast) var(--ease-sharp);
}

/* ============================================================================
   Number-counter — для KPI цифр (использовать data-counter в JS)
   ========================================================================= */
.kpi-num {
  font-variant-numeric: tabular-nums;
  transition: color var(--motion-base) var(--ease-standard);
}

/* ============================================================================
   prefers-reduced-motion — выключаем всю motion для пользователей
   с motion sickness / эпилепсией
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}

/* ============================================================================
   Voice Recorder UI — единый паттерн «микрофон внутри textarea»
   v2 2026-05-22: voice-recorder.js НЕ трогает innerHTML — состояния через
   data-state="recording|uploading|idle" + data-secs. CSS рисует таймер
   через ::after content: attr(data-secs).

   HTML:
     <div class="textarea-mic-wrap">
       <textarea>...</textarea>
       <button class="mic-floating" id="micBtn">
         <svg>...</svg>
       </button>
     </div>
   JS:
     VoiceRecorder.attach(document.getElementById('micBtn'), textarea);
   ========================================================================= */
.textarea-mic-wrap { position: relative; }
.textarea-mic-wrap textarea { padding-right: 60px !important; padding-bottom: 56px !important; }

.mic-floating {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--bg2, #f8fafc);
  color: var(--brand-1, #7c3aed);
  border: 1.5px solid color-mix(in srgb, var(--brand-1, #7c3aed) 30%, transparent);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .15s ease;
  padding: 0; font-family: inherit; flex-shrink: 0;
}
.textarea-mic-wrap .mic-floating {
  position: absolute; bottom: 14px; right: 14px; z-index: 2;
}
.mic-floating:hover {
  background: color-mix(in srgb, var(--brand-1, #7c3aed) 8%, white);
  border-color: var(--brand-1, #7c3aed);
  transform: translateY(-1px);
}
.mic-floating svg { width: 18px; height: 18px; pointer-events: none; }

/* === Recording: красная капсула с таймером === */
.mic-floating[data-state="recording"] {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #fff; border-color: transparent;
  width: auto; min-width: 90px; padding: 0 14px;
  border-radius: 999px;
  animation: voicePulse 1.4s infinite;
  height: 38px;
}
.mic-floating[data-state="recording"]::after {
  content: attr(data-secs) "с · стоп";
  font-size: 12px; font-weight: 700; line-height: 1;
  margin-left: 8px; white-space: nowrap;
}
@keyframes voicePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.55); }
  50%      { box-shadow: 0 0 0 10px rgba(239,68,68,0); }
}

/* === Uploading: спиннер вместо иконки === */
.mic-floating[data-state="uploading"] {
  background: var(--bg2, #f8fafc);
  color: var(--brand-1, #7c3aed);
  border-color: var(--brand-1, #7c3aed);
  cursor: wait;
}
.mic-floating[data-state="uploading"] svg { display: none; }
.mic-floating[data-state="uploading"]::after {
  content: '';
  width: 16px; height: 16px;
  border: 2.5px solid color-mix(in srgb, var(--brand-1, #7c3aed) 25%, transparent);
  border-top-color: var(--brand-1, #7c3aed);
  border-radius: 50%;
  animation: voiceSpin .8s linear infinite;
}
@keyframes voiceSpin { to { transform: rotate(360deg); } }

/* prefers-reduced-motion: без пульса/спина */
@media (prefers-reduced-motion: reduce) {
  .mic-floating[data-state="recording"] { animation: none; }
  .mic-floating[data-state="uploading"]::after { animation: none; }
}