/* Движение интерфейса. Анимируются только transform и opacity; всё — внутри no-preference,
   поэтому при prefers-reduced-motion: reduce интерфейс статичен. */
:root { --ease-out: cubic-bezier(.2, .8, .2, 1); --ease-spring: cubic-bezier(.34, 1.4, .64, 1); }

/* скелетоны (видны и без анимации) */
.sk-wrap { display: flex; flex-direction: column; gap: 14px; }
.sk-row { display: flex; gap: 12px; align-items: center; }
.sk-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.sk { background: var(--surface3); border-radius: var(--radius); }
.sk-title { height: 28px; width: 160px; border-radius: 8px; }
.sk-btn { height: 38px; width: 96px; margin-left: auto; border-radius: 10px; }
.sk-hero { height: 150px; border-radius: 18px; }
.sk-card { height: 96px; }
.sk-block { height: 220px; }
.sk-chart { height: 260px; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes m-rise { from { opacity: 0; transform: translateY(10px); } }
  @keyframes m-fade { from { opacity: 0; } }
  @keyframes m-fade-out { to { opacity: 0; } }
  @keyframes m-sink { to { opacity: 0; transform: translateY(10px) scale(.98); } }
  @keyframes m-drop { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
  @keyframes m-toast { from { opacity: 0; transform: translateY(12px) scale(.96); } }
  @keyframes m-pulse { 50% { opacity: .55; } }
  @keyframes m-pop { from { opacity: 0; transform: scale(.6); } }

  /* экран: блоки появляются по очереди */
  #view > div > * { animation: m-rise .42s var(--ease-out) backwards; }
  #view > div > :nth-child(2) { animation-delay: .05s; }
  #view > div > :nth-child(3) { animation-delay: .1s; }
  #view > div > :nth-child(4) { animation-delay: .15s; }
  #view > div > :nth-child(5) { animation-delay: .2s; }
  #view > div > :nth-child(n+6) { animation-delay: .25s; }
  #view > div > .sk-wrap { animation: m-fade .2s .1s backwards; }

  /* плитки касс и карточки в сетках — лесенкой */
  .tiles > *, .grid > * { animation: m-rise .45s var(--ease-out) backwards; }
  .tiles > :nth-child(2), .grid > :nth-child(2) { animation-delay: .06s; }
  .tiles > :nth-child(3), .grid > :nth-child(3) { animation-delay: .12s; }
  .tiles > :nth-child(4), .grid > :nth-child(4) { animation-delay: .18s; }
  .tiles > :nth-child(5), .grid > :nth-child(5) { animation-delay: .24s; }
  .tiles > :nth-child(n+6), .grid > :nth-child(n+6) { animation-delay: .3s; }
  .hero-cur .chip { animation: m-rise .4s .15s var(--ease-out) backwards; }
  .hero-cur .chip + .chip { animation-delay: .22s; }
  .hero::after { animation: m-fade 1.2s ease-out backwards; }

  /* скелетон «дышит» */
  .sk { animation: m-pulse 1.4s ease-in-out infinite; }

  /* кнопки, плитки, навигация */
  .btn { transition: background-color .15s, border-color .15s, filter .15s, transform .12s var(--ease-out), box-shadow .15s; }
  .btn:active:not([disabled]) { transform: scale(.97); }
  .btn.primary:hover:not([disabled]) { box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 28%, transparent); }
  .tile { transition: border-color .2s, transform .25s var(--ease-out), box-shadow .25s; }
  .tile:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(15, 20, 35, .09); }
  .tile:active { transform: translateY(-1px) scale(.99); }
  .tile .tile-ic { transition: transform .3s var(--ease-spring); }
  .tile:hover .tile-ic { transform: scale(1.08) rotate(-4deg); }
  .navlink { transition: background-color .15s, color .15s; }
  .navlink .ico { transition: transform .2s var(--ease-out), color .15s; }
  .navlink:hover .ico { transform: translateX(2px); }
  .bottom .bi, .bottom .plus { transition: color .15s, transform .12s var(--ease-out); }
  .bottom .bi:active, .bottom .plus:active { transform: scale(.92); }
  .bottom .bi.active .ico { animation: m-pop .3s var(--ease-spring); }
  .tbl tbody tr.click, .erow { transition: background-color .15s; }
  .notice-link { transition: filter .15s, transform .15s var(--ease-out); }
  .notice-link:hover .go { transform: translateX(3px); }
  .notice-link .go { display: inline-block; transition: transform .2s var(--ease-out); }
  .count { animation: m-pop .35s var(--ease-spring); }

  /* вкладки-переключатели: подсветка переезжает мягко */
  .seg label { transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s, transform .12s; }
  .seg label:active { transform: scale(.96); }

  /* поля */
  input, select, textarea { transition: border-color .15s, box-shadow .2s; }

  /* окна и выпадашки */
  .overlay { animation: m-fade .18s ease-out; }
  .modal { animation: m-rise .24s var(--ease-out); }
  .overlay.out { animation: m-fade-out .16s ease-in forwards; pointer-events: none; }
  .overlay.out .modal { animation: m-sink .16s ease-in forwards; }
  .gs-panel:not(.gs-full) { animation: m-drop .16s var(--ease-out); transform-origin: top center; }
  .gs-panel.gs-full { animation: m-fade .18s ease-out; }
  .toast { animation: m-toast .3s var(--ease-spring); }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 899px) {
  .modal { animation: sheet .26s var(--ease-out); }
  @keyframes m-sheet-out { to { transform: translateY(40px); opacity: 0; } }
  .overlay.out .modal { animation: m-sheet-out .18s ease-in forwards; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}