/* ==========================================================================
   MingBirXizmat · OLOVLI TALAB QATLAMI USLUBLARI (fire-layer.css)
   Fayl: platform/platform-core/public/fire-layer.css
   fire-layer.js bilan birga ishlatiladi:
     <link rel="stylesheet" href="/fire-layer.css">
     <script src="/fire-layer.js"></script>

   Bo'limlar:
     1. Pane (qatlam qobig'i) — marshrut qatlamidan PASTDA
     2. Zona (issiqlik dog'i) — 4 daraja: och sariq -> to'q qizil
     3. Olov belgisi (gradient tomchi + tebranish)
     4. Holatlar: fade-in/out, xira (ishonchsiz), statik, "lite" (FPS)
     5. Animatsiya kalitlari
     6. Foydalanuvchi sozlamalari (reduced-motion, kuchaytirilgan kontrast)

   MUHIM: animatsiya FAQAT transform/opacity da (GPU) — layout siljimaydi.
   `will-change` ataylab ishlatilmagan: 400 tagacha olov belgisi uchun har
   biriga kompozitor qatlami ajratish xotirani ko'paytiradi.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PANE — Leaflet qatlami (z-index 350 < overlayPane 400 = marshrut ustun)
   -------------------------------------------------------------------------- */

.mbf-pane {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none; /* xarita bosilishi (onPick) ishlashda davom etadi */
  opacity: 1;
  transition: opacity 0.45s ease;
}

.mbf-pane.is-hidden {
  opacity: 0;
}

/* --------------------------------------------------------------------------
   2. ZONA — yumshoq radial gradient (chegarasi keskin emas)
   -------------------------------------------------------------------------- */

.mbf-zone {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.mbf-zone.is-in {
  opacity: 1;
}

.mbf-zone.is-out {
  opacity: 0;
}

/* Ishonchsiz ma'lumot (data-confidence past) — xira ko'rsatiladi */
.mbf-zone.is-in.is-weak {
  opacity: 0.45;
}

.mbf-zone__glow {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(var(--mbf-rgb, 255, 178, 60), var(--mbf-a1, 0.62)) 0%,
    rgba(var(--mbf-rgb, 255, 178, 60), var(--mbf-a2, 0.38)) 36%,
    rgba(var(--mbf-rgb, 255, 178, 60), var(--mbf-a3, 0.14)) 62%,
    rgba(var(--mbf-rgb, 255, 178, 60), 0) 78%
  );
}

/* 2.1 — DARAJALAR (ega suratidagi ranglar) */

/* 1: juda och sariq */
.mbf-zone--1 {
  --mbf-rgb: 255, 232, 140;
  --mbf-a1: 0.5;
  --mbf-a2: 0.3;
  --mbf-a3: 0.11;
}

/* 2: to'q sariq */
.mbf-zone--2 {
  --mbf-rgb: 255, 178, 60;
  --mbf-a1: 0.6;
  --mbf-a2: 0.37;
  --mbf-a3: 0.14;
}

/* 3: qizil */
.mbf-zone--3 {
  --mbf-rgb: 255, 110, 45;
  --mbf-a1: 0.68;
  --mbf-a2: 0.42;
  --mbf-a3: 0.16;
}

/* 4: to'q qizil */
.mbf-zone--4 {
  --mbf-rgb: 214, 45, 35;
  --mbf-a1: 0.76;
  --mbf-a2: 0.48;
  --mbf-a3: 0.19;
}

/* 3-4 daraja: zona "nafas oladi" (faqat opacity/transform) */
.mbf-zone--3 .mbf-zone__glow,
.mbf-zone--4 .mbf-zone__glow {
  animation: mbf-breathe 3.4s ease-in-out infinite;
}

.mbf-zone--4 .mbf-zone__glow {
  animation-duration: 2.4s;
}

/* --------------------------------------------------------------------------
   3. OLOV BELGISI — sariq -> to'q sariq -> qizil gradient tomchi
   -------------------------------------------------------------------------- */

.mbf-fire {
  --mbf-size: 12px;
  --mbf-max: 1;
  position: absolute;
  width: var(--mbf-size);
  height: calc(var(--mbf-size) * 1.35);
  /* Uchi yuqoriga: belgi pastki o'rta nuqtasiga bog'lanadi */
  transform: translate(-50%, -100%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.mbf-fire.is-in {
  opacity: var(--mbf-max);
}

.mbf-fire.is-out {
  opacity: 0;
}

.mbf-fire.is-culled {
  display: none;
}

/* Daraja bo'yicha yorqinlik */
.mbf-zone--1 .mbf-fire {
  --mbf-max: 0.7;
}

.mbf-zone--2 .mbf-fire {
  --mbf-max: 0.84;
}

.mbf-zone--3 .mbf-fire {
  --mbf-max: 0.94;
}

.mbf-zone--4 .mbf-fire {
  --mbf-max: 1;
}

/* Atrofidagi issiqlik shu'lasi */
.mbf-fire__glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 210%;
  height: 210%;
  margin: -105% 0 0 -105%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 186, 60, 0.55) 0%,
    rgba(255, 122, 0, 0.26) 46%,
    rgba(255, 90, 0, 0) 72%
  );
  animation: mbf-glow var(--mbf-glow-dur, 2.1s) ease-in-out infinite;
  animation-delay: var(--mbf-delay, 0s);
}

/* Olov tanasi: pastda qizil, yuqorida sariq-oq */
.mbf-fire__core {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border-radius: 50% 50% 44% 44% / 64% 64% 36% 36%;
  background: linear-gradient(
    to top,
    #c81e0a 0%,
    #ff6a00 32%,
    #ffb300 62%,
    #ffe57a 86%,
    #fffbe0 100%
  );
  box-shadow: 0 0 8px rgba(255, 138, 0, 0.5);
  transform-origin: 50% 100%;
  animation: mbf-flicker var(--mbf-dur, 1.4s) ease-in-out infinite alternate;
  animation-delay: var(--mbf-delay, 0s);
}

/* Katta darajadagi olovlar biroz yorqinroq */
.mbf-zone--3 .mbf-fire__core,
.mbf-zone--4 .mbf-fire__core {
  box-shadow: 0 0 12px rgba(255, 120, 0, 0.62);
}

/* --------------------------------------------------------------------------
   4. ANIMATSIYA KALITLARI (faqat transform/opacity)
   -------------------------------------------------------------------------- */

@keyframes mbf-flicker {
  0% {
    transform: translate3d(0, 0, 0) scale(1, 1);
  }
  30% {
    transform: translate3d(var(--mbf-dx, 1px), -1px, 0) scale(0.93, 1.09);
  }
  60% {
    transform: translate3d(calc(var(--mbf-dx, 1px) * -0.7), 0, 0) scale(1.05, 0.95);
  }
  100% {
    transform: translate3d(0, -2px, 0) scale(0.97, 1.05);
  }
}

@keyframes mbf-glow {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(0.9);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.08);
  }
}

@keyframes mbf-breathe {
  0%,
  100% {
    opacity: 0.78;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}

/* --------------------------------------------------------------------------
   5. HOLATLAR: statik (reduced-motion), "lite" (FPS tushdi)
   -------------------------------------------------------------------------- */

.mbf-pane.is-static .mbf-zone {
  transition: none;
}

.mbf-pane.is-static .mbf-zone__glow,
.mbf-pane.is-static .mbf-fire__glow,
.mbf-pane.is-static .mbf-fire__core {
  animation: none !important;
}

.mbf-pane.is-static .mbf-zone__glow {
  opacity: 0.92;
  transform: none;
}

.mbf-pane.is-static .mbf-fire {
  opacity: var(--mbf-max, 1);
  transition: none;
}

/* FPS tushganda: pulsatsiya o'chadi, olov sekin turadi */
.mbf-pane.is-lite .mbf-zone__glow,
.mbf-pane.is-lite .mbf-fire__glow {
  animation: none;
}

.mbf-pane.is-lite .mbf-fire__core {
  animation-duration: 2.6s;
}

/* --------------------------------------------------------------------------
   6. FOYDALANUVCHI SOZLAMALARI
   -------------------------------------------------------------------------- */

/* Tizim "harakatni kamaytirish" ni so'rasa — JS ishlamasa ham statik bo'ladi */
@media (prefers-reduced-motion: reduce) {
  .mbf-zone,
  .mbf-fire,
  .mbf-pane {
    transition: none;
  }

  .mbf-zone__glow,
  .mbf-fire__glow,
  .mbf-fire__core {
    animation: none !important;
  }

  .mbf-fire {
    opacity: var(--mbf-max, 1);
  }
}

/* Kuchaytirilgan kontrast: zonalar aniqroq ko'rinadi */
@media (prefers-contrast: more) {
  .mbf-zone--1 {
    --mbf-a1: 0.62;
  }

  .mbf-zone--2 {
    --mbf-a1: 0.72;
  }

  .mbf-zone--3 {
    --mbf-a1: 0.8;
  }

  .mbf-zone--4 {
    --mbf-a1: 0.88;
  }
}