/* ==========================================================================
   Аритин (aritin.ru) — фоновая анимация «летающие ИИ-иконки»
   Иконки по тематике ИИ (чип, мозг, робот, база данных, сеть, защита…)
   плавно проплывают по экрану по мере прокрутки и «дышат» на месте.

   Разметка — .icon-layer в partials/head.php, логика — assets/js/float-icons.js.
   Слой полностью декоративный: pointer-events: none, aria-hidden.
   ========================================================================== */

.icon-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Плитка-иконка. Позицию и поворот задаёт скрипт (transform), поэтому
   «дыхание» живёт на вложенном элементе — чтобы transform'ы не конфликтовали. */
.float-icon {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  border-radius: 24%;
  border: 1px solid rgba(5, 61, 81, .10);
  background: linear-gradient(145deg, rgba(5, 61, 81, .14), rgba(0, 162, 230, .08));
  box-shadow: 0 18px 40px rgba(5, 61, 81, .10);
  color: var(--accent-ink);
  will-change: transform, opacity;
}

.float-icon__inner {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  animation: fi-bob 9s ease-in-out infinite;
}

.float-icon i { display: block; line-height: 1; }

/* Оттенки: фирменные цвета + акцент */
.float-icon--accent { color: var(--accent-ink); }
.float-icon--teal   { color: #053d51; }
.float-icon--plum   { color: #260f1d; }

@keyframes fi-bob {
  0%, 100% { transform: translateY(-7%); }
  50%      { transform: translateY(7%); }
}

html[data-theme="dark"] .float-icon {
  border-color: rgba(255, 255, 255, .10);
  background: linear-gradient(145deg, rgba(255, 255, 255, .10), rgba(0, 162, 230, .10));
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
}

html[data-theme="dark"] .float-icon--teal,
html[data-theme="dark"] .float-icon--plum { color: #cfe6f2; }

/* На узких экранах фон не строим вовсе: там и без него тесно. */
@media (max-width: 640px) {
  .icon-layer { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .icon-layer { display: none; }
}