/**
 * Moto Pro — nuages de demande (v2.1.0-relief).
 *
 * Rendu « nuage ZONE » météo, jamais de tache ronde type pin :
 *  · hot      → STRATOCUMULUS or/ambre : étalé, MOUTONNÉ — lobes à
 *               densités différenciées qui débordent de l'emprise
 *               (silhouette bosselée, ventres et creux visibles).
 *  · unserved → NIMBOSTRATUS bordeaux : nappe dense et plus sombre,
 *               bande interne profonde (urgence lisible d'un regard).
 *
 * Perf : dégradés radiaux purs (pas de canvas, pas de filter blur),
 * respiration + dérive lente transform-only, coupées par
 * prefers-reduced-motion. Sous les marqueurs, jamais interactif.
 */

.moto-demand-cloud {
  position: absolute;
  pointer-events: none;
  transform: rotate(var(--cloud-rot, 0deg));
  animation: moto-cloud-breathe 5.6s ease-in-out infinite;
  will-change: transform;
}

.moto-demand-cloud__base,
.moto-demand-cloud__puff,
.moto-demand-cloud__veil {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

/* Nappe de fond : toute l'emprise, très légère — les lobes font le relief. */
.moto-demand-cloud__base {
  inset: 0;
}

/* Voile décalé : étirement du secteur, casse la symétrie. */
.moto-demand-cloud__veil {
  left: 16%;
  top: 20%;
  width: 76%;
  height: 64%;
}

/* Dérive très lente des lobes — un nuage vivant bouge insensiblement. */
.moto-demand-cloud__puff {
  animation: moto-cloud-drift 12s ease-in-out infinite;
}

.moto-demand-cloud__puff--2 {
  animation-duration: 15s;
  animation-delay: -4s;
}

.moto-demand-cloud__puff--3 {
  animation-duration: 13s;
  animation-delay: -8s;
}

.moto-demand-cloud__puff--4 {
  animation-duration: 16s;
  animation-delay: -2s;
}

/* ============================================================
   STRATOCUMULUS — demande concentrée (or/ambre charte Pro)
   Lobes débordants, pics d'opacité variés = moutonnement réel.
   ============================================================ */
.moto-demand-cloud--hot .moto-demand-cloud__base {
  background: radial-gradient(
    50% 50% at 48% 54%,
    rgba(255, 176, 10, 0.11) 0%,
    rgba(255, 184, 28, 0.06) 55%,
    rgba(255, 190, 11, 0) 78%
  );
}

/* Mouton ouest — déborde à gauche, dense. */
.moto-demand-cloud--hot .moto-demand-cloud__puff--1 {
  left: -7%;
  top: 28%;
  width: 46%;
  height: 58%;
  background: radial-gradient(
    circle,
    rgba(255, 163, 0, 0.3) 0%,
    rgba(255, 176, 10, 0.12) 44%,
    rgba(255, 190, 11, 0) 66%
  );
}

/* Mouton dominant — au sommet, le plus dense. */
.moto-demand-cloud--hot .moto-demand-cloud__puff--2 {
  left: 21%;
  top: 0%;
  width: 56%;
  height: 70%;
  background: radial-gradient(
    circle,
    rgba(255, 158, 0, 0.34) 0%,
    rgba(255, 176, 10, 0.14) 46%,
    rgba(255, 190, 11, 0) 68%
  );
}

/* Mouton est — déborde à droite, intermédiaire. */
.moto-demand-cloud--hot .moto-demand-cloud__puff--3 {
  left: 56%;
  top: 22%;
  width: 50%;
  height: 62%;
  background: radial-gradient(
    circle,
    rgba(255, 167, 0, 0.28) 0%,
    rgba(255, 176, 10, 0.11) 44%,
    rgba(255, 190, 11, 0) 66%
  );
}

/* Mouton bas — plus discret, creuse le relief. */
.moto-demand-cloud--hot .moto-demand-cloud__puff--4 {
  left: 27%;
  top: 44%;
  width: 44%;
  height: 52%;
  background: radial-gradient(
    circle,
    rgba(255, 176, 10, 0.2) 0%,
    rgba(255, 184, 28, 0.08) 44%,
    rgba(255, 190, 11, 0) 66%
  );
}

/* Reflet haut : lumière sur le sommet du nuage. */
.moto-demand-cloud--hot .moto-demand-cloud__veil {
  top: 8%;
  background: radial-gradient(
    50% 44% at 46% 38%,
    rgba(255, 214, 90, 0.14) 0%,
    rgba(255, 190, 11, 0) 70%
  );
}

/* ============================================================
   NIMBOSTRATUS — demande non servie (bordeaux, dense, sombre)
   Nappe uniforme avec bande interne profonde : de la matière,
   pas de moutons.
   ============================================================ */
.moto-demand-cloud--unserved .moto-demand-cloud__base {
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(136, 19, 55, 0.34) 0%,
    rgba(190, 24, 60, 0.22) 42%,
    rgba(232, 50, 122, 0.1) 66%,
    rgba(232, 50, 122, 0) 80%
  );
}

/* Bande basse sombre — l'assise chargée du nimbostratus. */
.moto-demand-cloud--unserved .moto-demand-cloud__puff--1 {
  left: -4%;
  top: 34%;
  width: 72%;
  height: 50%;
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(112, 16, 45, 0.22) 0%,
    rgba(136, 19, 55, 0.08) 52%,
    rgba(190, 24, 60, 0) 72%
  );
}

/* Épaisseur est — nappe étirée, déborde à droite. */
.moto-demand-cloud--unserved .moto-demand-cloud__puff--2 {
  left: 42%;
  top: 20%;
  width: 62%;
  height: 56%;
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(136, 19, 55, 0.18) 0%,
    rgba(190, 24, 60, 0.07) 50%,
    rgba(190, 24, 60, 0) 72%
  );
}

.moto-demand-cloud--unserved .moto-demand-cloud__puff--3,
.moto-demand-cloud--unserved .moto-demand-cloud__puff--4 {
  display: none;
}

.moto-demand-cloud--unserved .moto-demand-cloud__veil {
  background: radial-gradient(
    55% 50% at 50% 56%,
    rgba(112, 16, 45, 0.16) 0%,
    rgba(190, 24, 60, 0) 74%
  );
}

/* Intensité : cellules chargées un peu plus présentes. */
.moto-demand-cloud--w1 {
  opacity: 0.9;
}

.moto-demand-cloud--w2,
.moto-demand-cloud--w3 {
  opacity: 1;
}

/* Respiration très douce — vivante, jamais agitée. */
@keyframes moto-cloud-breathe {
  0%,
  100% {
    transform: rotate(var(--cloud-rot, 0deg)) scale(1);
  }
  50% {
    transform: rotate(var(--cloud-rot, 0deg)) scale(1.035);
  }
}

/* Dérive lobe : ±1.5 % de la largeur, imperceptible mais vivant. */
@keyframes moto-cloud-drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(1.5%, -2.5%, 0);
  }
}

/* Carte sombre : densités remontées pour rester lumineux et lisible. */
html[data-theme="dark"] .moto-demand-cloud--hot .moto-demand-cloud__base {
  background: radial-gradient(
    50% 50% at 48% 54%,
    rgba(255, 190, 11, 0.14) 0%,
    rgba(255, 190, 11, 0.07) 55%,
    rgba(255, 190, 11, 0) 78%
  );
}

html[data-theme="dark"] .moto-demand-cloud--hot .moto-demand-cloud__puff--1 {
  background: radial-gradient(
    circle,
    rgba(255, 178, 20, 0.34) 0%,
    rgba(255, 190, 11, 0.14) 44%,
    rgba(255, 190, 11, 0) 66%
  );
}

html[data-theme="dark"] .moto-demand-cloud--hot .moto-demand-cloud__puff--2 {
  background: radial-gradient(
    circle,
    rgba(255, 172, 12, 0.38) 0%,
    rgba(255, 190, 11, 0.16) 46%,
    rgba(255, 190, 11, 0) 68%
  );
}

html[data-theme="dark"] .moto-demand-cloud--hot .moto-demand-cloud__puff--3 {
  background: radial-gradient(
    circle,
    rgba(255, 178, 20, 0.31) 0%,
    rgba(255, 190, 11, 0.13) 44%,
    rgba(255, 190, 11, 0) 66%
  );
}

html[data-theme="dark"] .moto-demand-cloud--hot .moto-demand-cloud__puff--4 {
  background: radial-gradient(
    circle,
    rgba(255, 190, 40, 0.23) 0%,
    rgba(255, 190, 11, 0.09) 44%,
    rgba(255, 190, 11, 0) 66%
  );
}

html[data-theme="dark"] .moto-demand-cloud--unserved .moto-demand-cloud__base {
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(159, 18, 57, 0.38) 0%,
    rgba(225, 29, 72, 0.24) 42%,
    rgba(244, 63, 122, 0.1) 66%,
    rgba(244, 63, 122, 0) 80%
  );
}

html[data-theme="dark"] .moto-demand-cloud--unserved .moto-demand-cloud__puff--1 {
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(112, 16, 45, 0.28) 0%,
    rgba(159, 18, 57, 0.1) 52%,
    rgba(225, 29, 72, 0) 72%
  );
}

/* ===== Légende chauffeur (chip discret, coin haut gauche carte) ===== */
.moto-demand-legend {
  position: absolute;
  left: 10px;
  top: calc(var(--safe-top, 0px) + 64px);
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  padding: 0.42rem 0.6rem;
  border-radius: 12px;
  background: var(--moto-glass, rgba(255, 255, 255, 0.86));
  border: 1px solid var(--gray-border, rgba(16, 31, 69, 0.14));
  box-shadow: var(--moto-shadow-card, 0 2px 12px rgba(16, 31, 69, 0.12));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
}

.moto-demand-legend[hidden] {
  display: none;
}

.moto-demand-legend__item {
  display: flex;
  align-items: center;
  gap: 0.38rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink, #101f45);
  white-space: nowrap;
}

/* Pastilles légende : mini-nuages étalés (pas des points GPS). */
.moto-demand-legend__dot {
  width: 14px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}

.moto-demand-legend__dot--hot {
  background: radial-gradient(
    55% 60% at 50% 50%,
    #ffa000 10%,
    rgba(255, 176, 10, 0.42) 62%,
    rgba(255, 190, 11, 0.12) 100%
  );
}

.moto-demand-legend__dot--unserved {
  background: radial-gradient(
    55% 60% at 50% 50%,
    #9f1239 10%,
    rgba(159, 18, 57, 0.44) 62%,
    rgba(190, 24, 60, 0.12) 100%
  );
}

@media (prefers-reduced-motion: reduce) {
  .moto-demand-cloud,
  .moto-demand-cloud__puff {
    animation: none;
  }
}