/* SVG остаётся на месте; двигаются только его детали. Это также сохраняет
   позиционирование иконок внутри поиска и элементов карты. */
.ui-icon[data-icon] {
  overflow: visible;
  --icon-fill: .10;
}
.ui-icon .icon-panel { fill: currentColor; fill-opacity: var(--icon-fill); transition: fill-opacity .35s ease; }
.ui-icon .icon-solid { fill: var(--sidebar-bg); transition: fill .35s ease; }
.ui-icon .icon-detail, .ui-icon .icon-body {
  transform-box: view-box;
  transform-origin: 12px 12px;
  transition: transform .7s cubic-bezier(.2, 1.35, .35, 1);
}
.ui-icon .icon-detail { transform: var(--icon-transform, none); }
.ui-icon .icon-body { transform: var(--icon-body-transform, none); }
.ui-icon .icon-arrival { transform-box: view-box; transform-origin: 12px 12px; }
.ui-icon--dashboard { --icon-hover-transform: translateY(-.5px) rotate(-18deg); --icon-hover-body: scale(1.18); }
.ui-icon--dashboard .icon-detail { transform-origin: 17.5px 17.5px; }
.ui-icon--objects { --icon-hover-transform: translateY(-.5px); --icon-hover-body: translateY(-1.5px) rotate(-5deg) scale(1.16); }
.ui-icon--realization { --icon-hover-transform: translate(2.5px, -2.5px); --icon-hover-body: rotate(5deg) scale(1.16); }
.ui-icon--map { --icon-hover-transform: translateY(-2.5px); --icon-hover-body: rotate(-4deg) scale(1.16); }
.ui-icon--assistant { --icon-hover-transform: rotate(35deg) scale(1.1); }
.ui-icon--spravki { --icon-hover-transform: translateX(.8px); --icon-hover-body: rotate(-7deg) scale(1.16); }
.ui-icon--feed { --icon-hover-transform: translateX(3px); }
.ui-icon--profile { --icon-hover-transform: translateY(-.5px); --icon-hover-body: translateY(-1.5px) scale(1.18); }
.ui-icon--settings { --icon-hover-transform: rotate(90deg); }
.ui-icon--logout { --icon-hover-transform: translateX(3px); }
.ui-icon--bell { --icon-hover-transform: rotate(-22deg); }
.ui-icon--bell .icon-detail { transform-origin: 12px 3px; }
.ui-icon--theme { --icon-hover-transform: rotate(90deg); }
.ui-icon--search { --icon-hover-transform: translate(-.5px, -.5px) scale(1.04); }
.ui-icon--more { --icon-hover-transform: translateY(-3px); }
.ui-icon--close { --icon-hover-transform: rotate(90deg); }
.ui-icon--district { --icon-hover-transform: translateY(-2.5px); --icon-hover-body: rotate(-5deg) scale(1.12); }
.ui-icon--region { --icon-hover-transform: translateY(-2px) rotate(6deg); --icon-hover-body: scale(1.12); }
.ui-icon--region .icon-detail { transform-origin: 12px 18px; }
.ui-icon--settlement { --icon-hover-transform: translateY(-1px) rotate(-4deg); --icon-hover-body: scale(1.12); }
.ui-icon--settlement .icon-detail { transform-origin: 12.5px 21px; }
.ui-icon--document { --icon-hover-transform: translateX(.8px); --icon-hover-body: rotate(-7deg) scale(1.12); }
.ui-icon--report { --icon-hover-transform: scaleY(1.2); --icon-hover-body: rotate(-5deg) scale(1.12); }
.ui-icon--report .icon-detail { transform-origin: 12px 17.5px; }
.ui-icon--download { --icon-hover-transform: translateY(2px); --icon-hover-body: scale(1.1); }
.ui-icon--chevron { --icon-hover-transform: translateX(2px); --icon-hover-body: none; }

:where(.nav-item, .bn-item, .mobile-menu-item).active .ui-icon[data-icon] { --icon-fill: .24; }
:where(.nav-item, .bn-item, .mobile-menu-item).active .icon-arrival { animation: icon-arrive .5s cubic-bezier(.22, 1, .36, 1); }
:where(.nav-item, .bn-item, .mobile-menu-item, .icon-btn, .topbar-search, .notif-item, .hierarchy-card, .btn):is(:focus-visible, [aria-expanded="true"]) .ui-icon[data-icon],
.doc-row:focus-within .ui-icon[data-icon] {
  --icon-transform: var(--icon-hover-transform);
  --icon-body-transform: var(--icon-hover-body, scale(1.18));
  --icon-fill: .30;
}
@media (hover: hover) and (pointer: fine) {
  :where(.nav-item, .bn-item, .mobile-menu-item, .icon-btn, .topbar-search, .notif-item, .hierarchy-card, .btn, .doc-row):hover .ui-icon[data-icon] {
    --icon-transform: var(--icon-hover-transform);
    --icon-body-transform: var(--icon-hover-body, scale(1.18));
    --icon-fill: .30;
  }
}
:where(.nav-item, .bn-item, .mobile-menu-item, .icon-btn, .topbar-search, .hierarchy-card, .btn):active .icon-arrival { transform: scale(.94); }
.ui-icon .icon-arrival { transition: transform .2s ease; }
@keyframes icon-arrive {
  from { opacity: .65; transform: translateY(3px) scale(.86); }
  60% { opacity: 1; transform: translateY(-1px) scale(1.1); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Меню мобильных разделов находится вне .app-shell, поэтому настройка
   уменьшения движения применяется ко всему набору независимо от контейнера. */
@media (prefers-reduced-motion: reduce) {
  .ui-icon .icon-detail, .ui-icon .icon-body, .ui-icon .icon-arrival, .ui-icon .icon-panel, .ui-icon .icon-solid {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}
