/* ===== ОБЩИЙ FPV-ДРОН ДЛЯ КАТЕГОРИЙ =====
   Один дрон перелетает к выбранной категории в сайдбаре.
   Файл называется drone-anim.css — подключи его в index.html
   ПОСЛЕ index-styles.css (см. прилагаемый index.html). */

/* Контейнер-позиционирование для дрона внутри списка фильтров */
#filterList {
  position: relative; /* важно: дрон позиционируем относительно списка */
}

/* Кнопки фильтров — чтобы дрон (z-index 40) был поверх, а попадание
   мыши на дрон не блокировало клики по кнопкам. */
#filterList .side-filter-btn {
  position: relative;
  z-index: 1;
}

/* Сам дрон — один общий элемент. Абсолютно поверх кнопок. */
.drone-hud {
  position: absolute;
  left: 0;
  top: 0;
  width: 14px;
  height: 14px;
  pointer-events: none;  /* прозрачен для кликов */
  z-index: 40;
  filter: drop-shadow(0 0 6px rgba(255, 122, 0, 0.9));
  transition: none;
  /* начальное состояние — скрыт */
  opacity: 0;
  transform: translate(-40px, -40px) scale(0.6);
}

.drone-hud svg {
  width: 100%;
  height: 100%;
  display: block;
  color: #FF7A00;
}

/* ===== Готов к посадке на точке ===== */
.drone-hud.armed {
  opacity: 1;
  transform: translate(0, 0) scale(0.9);
}

/* ===== ФАЗА ВЗЛЁТА: подпрыгивает вверх ===== */
.drone-hud.takeoff {
  animation: droneTakeoff 0.25s ease-out;
  opacity: 1;
}
@keyframes droneTakeoff {
  0%   { transform: translate(0, 0) scale(0.9); opacity: 1; }
  100% { transform: translate(0, -18px) scale(1.1); opacity: 1; }
}

/* ===== ФАЗА ПОЛЁТА: едет к цели, дуга задаётся анимацией ===== */
.drone-hud.flying {
  opacity: 1;
  animation: droneFlyArc 0.8s ease-in-out;
}
@keyframes droneFlyArc {
  0%   { transform: translate(0, -18px) scale(1.1); opacity: 1; }
  30%  { transform: translate(0, -34px) scale(1.15); opacity: 1; }
  70%  { transform: translate(0, -12px) scale(1.05); opacity: 1; }
  100% { transform: translate(0, 0) scale(0.9); opacity: 1; }
}

/* ===== ФАЗА ВЗРЫВА: дрон растворяется в NERV-вспышке ===== */
.drone-hud.explode {
  animation: droneExplode 0.45s ease-out;
  opacity: 0;
}
@keyframes droneExplode {
  0%   { transform: translate(0, 0) scale(0.9); opacity: 1; }
  30%  { transform: translate(0, 0) scale(1.6); opacity: 0.9; }
  100% { transform: translate(0, 0) scale(2.2); opacity: 0; }
}

/* Вспышка-кольцо вокруг дрона при взрыве */
.drone-hud::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid #FF7A00;
  opacity: 0;
  transform: scale(0.2);
}
.drone-hud.explode::after {
  animation: ringBurst 0.45s ease-out;
}
@keyframes ringBurst {
  0%   { opacity: 1; transform: scale(0.2); }
  100% { opacity: 0; transform: scale(2.6); }
}

/* ===== ФАЗА ПОЯВЛЕНИЯ: дрон целым материализуется на категории ===== */
.drone-hud.landed {
  animation: droneLand 0.18s ease-out;
  opacity: 1;
  transform: translate(0, 0) scale(0.9);
}
@keyframes droneLand {
  0%   { transform: translate(0, 0) scale(3); opacity: 0; }
  100% { transform: translate(0, 0) scale(0.9); opacity: 1; }
}

/* ===== Вибрация пропеллеров во время полёта/посадки ===== */
.drone-hud.flying svg,
.drone-hud.takeoff svg,
.drone-hud.landed svg {
  animation: propSpin 0.12s linear infinite;
}
@keyframes propSpin {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(8deg); }
}