/* Анимации интерфейса. Только то, что не грузит браузер постоянно: сработало и затихло. */

.fx-progress { position: fixed; left: 0; top: 0; z-index: 400; width: 100%; height: 2px; pointer-events: none; transform-origin: left; transform: scaleX(0); opacity: 0; background: #8fc0dc; }
.fx-progress.run { opacity: 1; transform: scaleX(.88); transition: transform 5s cubic-bezier(.08, .8, .2, 1); }

.sidebar-logo, .login-logo { -webkit-user-select: none; user-select: none; }

/* Ссылки и кнопки */
.btn:active { transform: translateY(1px) scale(.98); }
.btn.fx-copied { position: relative; color: transparent !important; border-color: rgba(124, 196, 154, .6); background: rgba(124, 196, 154, .13); }
.btn.fx-copied::before { content: ''; position: absolute; left: 50%; top: 50%; width: 15px; height: 9px; margin: -7px 0 0 -7px; border-left: 2px solid #7cc49a; border-bottom: 2px solid #7cc49a; transform: rotate(-45deg); }
.ui-toast.ok::before { content: '✓'; margin-right: 7px; color: #7cc49a; font-weight: 700; }

/* Одометр, только на компьютере */
.odo-col { display: inline-block; height: 1.15em; line-height: 1.15em; overflow: hidden; vertical-align: bottom; }
.odo-strip { display: block; transition: transform 1.1s cubic-bezier(.16, .9, .2, 1); }
.odo-strip span { display: block; height: 1.15em; }
.globe-hero-value:has(.odo-col) { text-shadow: none; }

/* Вход */
.fx-sky { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.login-card.fx-shake { animation: fx-shake .5s ease-in-out; }
@keyframes fx-shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

/* Страницы списка ключей */
.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0; }
.pager-pos { font-size: 13px; color: var(--text-muted); }
.pager-per { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.pager-per a { padding: 4px 9px; font-size: 13px; color: var(--text-muted); border: 1px solid var(--border); border-radius: 7px; }
.pager-per a.active { color: var(--text); background: rgba(122, 162, 201, .16); border-color: rgba(122, 162, 201, .4); }

/* Спарклайны */
.sparkline polygon { fill: rgba(122, 162, 201, .13); stroke: none; }

@media (min-width: 769px) and (hover: hover) {
  .nav-item { position: relative; transition: background-color .15s ease, color .15s ease; }
  .sidebar-nav { position: relative; }
  .fx-nav-ind { position: absolute; left: 0; top: 0; width: 3px; height: 36px; opacity: 0; border-radius: 0 3px 3px 0; background: #9fc4e2; pointer-events: none; transition: transform .3s cubic-bezier(.3, 1.2, .5, 1), height .2s ease, opacity .2s ease; }
  [data-theme=light] .fx-nav-ind { background: #4c7396; }

  .fx-reveal { opacity: 0; transform: translateY(16px); }
  .fx-in { transition: opacity .45s ease, transform .5s ease; transition-delay: var(--fx-delay, 0ms); opacity: 1; transform: none; }
  .fx-wave { animation: fx-row .35s ease-out backwards; animation-delay: var(--fx-delay, 0ms); }
  @keyframes fx-row { from { opacity: 0; transform: translateY(8px); } }

  .card, .metric-card, .chart-wrap:not(#globe-box), .form-section { position: relative; }
  .card::after, .metric-card::after, .chart-wrap:not(#globe-box)::after, .form-section::after {
    content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .2s ease;
    background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(150, 195, 230, .1), transparent 65%);
    box-shadow: inset 0 0 0 1px rgba(150, 195, 230, .14);
  }
  .fx-lit::after { opacity: 1 !important; }
  .card, .metric-card { transition: border-color .15s ease, transform .15s ease-out; }
}

/* Телефон: постоянных анимаций нет */
@media (max-width: 768px) {
  .card, .metric-card, .chart-wrap, .form-section, .operator-card, .server-card, .greeting { animation: none !important; }
  .keys-table tr.key-row { content-visibility: auto; contain-intrinsic-size: auto 170px; box-shadow: none !important; }
  .bottom-nav > a, .bottom-nav > button { position: relative; z-index: 1; }
  .fx-pill { position: absolute; left: 0; top: 6px; bottom: calc(6px + env(safe-area-inset-bottom)); transition: transform .3s ease; pointer-events: none; }
  .fx-pill::before { content: ''; position: absolute; inset: 0 5px; border-radius: 12px; background: rgba(122, 162, 201, .18); }
}

@media (prefers-reduced-motion: reduce) {
  .fx-reveal { opacity: 1; transform: none; }
  .fx-wave, .fx-in, .fx-nav-ind, .fx-pill, .fx-progress { animation: none !important; transition: none !important; }
}