/* Плавность интерфейса: переходы между страницами, появление блоков, наведение, фокус.
   Подключается через UNFOLD["STYLES"]. Всё отключается при prefers-reduced-motion. */

:root {
  --motion-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --motion-fast: 0.15s;
  --motion-base: 0.3s;
}

html { scroll-behavior: smooth; }

/* 1. Без вспышек: пока Unfold (Alpine) не применил тему, страница скрыта (x-cloak), и браузер
   показывал белый холст. Скрипт motion.js сразу ставит html.motion-dark, а здесь холст красим
   в цвет тёмной темы и не даём странице «исчезать» целиком. */
html.motion-dark { background-color: #101828; color-scheme: dark; }
html.motion-dark[x-cloak] { display: block !important; visibility: hidden; }

/* 2. Появление контента */
@keyframes motion-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes motion-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes motion-slide-in {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: none; }
}

#content { animation: motion-rise 0.35s var(--motion-ease) backwards; }

/* карточки и строки появляются каскадом: класс .motion-stagger на контейнере */
.motion-stagger > * { animation: motion-rise 0.45s var(--motion-ease) backwards; }
.motion-stagger > *:nth-child(1) { animation-delay: 0.02s; }
.motion-stagger > *:nth-child(2) { animation-delay: 0.07s; }
.motion-stagger > *:nth-child(3) { animation-delay: 0.12s; }
.motion-stagger > *:nth-child(4) { animation-delay: 0.17s; }
.motion-stagger > *:nth-child(5) { animation-delay: 0.22s; }
.motion-stagger > *:nth-child(6) { animation-delay: 0.27s; }
.motion-stagger > *:nth-child(n+7) { animation-delay: 0.32s; }

/* строки таблиц списков — лёгкое появление */
#result_list tbody tr { animation: motion-fade 0.4s var(--motion-ease) backwards; }
#result_list tbody tr:nth-child(-n+12) { animation-delay: calc(var(--row, 0) * 20ms); }

/* уведомления (messages) выезжают */
#content > ul.flex.flex-col > li,
#content ul.flex.flex-col.gap-3 > li { animation: motion-slide-in 0.4s var(--motion-ease) backwards; }

/* 3. Наведение и фокус */
#nav-sidebar-inner a,
#nav-sidebar-inner button {
  transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease,
              transform var(--motion-fast) var(--motion-ease);
}
#nav-sidebar-inner a:hover { transform: translateX(2px); }
#nav-sidebar-inner a .material-symbols-outlined { transition: transform var(--motion-fast) var(--motion-ease); }
#nav-sidebar-inner a:hover .material-symbols-outlined { transform: scale(1.12); }

button, [type="submit"], [type="button"], a[class*="bg-primary"], a[class*="bg-green"], a[class*="bg-red"] {
  transition: transform 0.12s var(--motion-ease), box-shadow var(--motion-fast) ease,
              background-color var(--motion-fast) ease, filter var(--motion-fast) ease, opacity var(--motion-fast) ease;
}
button:not(:disabled):active, [type="submit"]:not(:disabled):active { transform: scale(0.97); }
button[class*="bg-"]:not(:disabled):hover { filter: brightness(1.06); }

input, select, textarea {
  transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease,
              background-color var(--motion-fast) ease;
}

tbody tr { transition: background-color var(--motion-fast) ease; }

.motion-card {
  transition: transform 0.2s var(--motion-ease), box-shadow 0.2s ease, border-color 0.2s ease;
}
.motion-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(21, 186, 237, 0.14);
}
a.motion-card:hover { border-color: rgb(21 186 237 / 0.6); }

/* 4. Загрузка: плавный прогресс-индикатор для долгих переходов (ставится скриптом) */
#motion-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 9999;
  background: linear-gradient(90deg, #15baed, #7fe0ff);
  box-shadow: 0 0 8px rgba(21, 186, 237, 0.7);
  transition: width 0.4s var(--motion-ease), opacity 0.3s ease;
  opacity: 0; pointer-events: none;
}
#motion-progress.is-active { opacity: 1; }

/* Пользователи с «уменьшить движение» получают интерфейс без анимации */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0s !important;
    transition-duration: 0.001ms !important;
  }
}