/* HERO — вариант с "живой картой" для кейса drivers-map */

.project-hero--dm {
  position: relative;
  overflow: hidden;
  padding-top: 72px;
  padding-bottom: 72px;

  /* стало: более светлый фон */
  background: radial-gradient(
    circle at top left,
    #dde8ff 0,
    #7096f8 85%,
    #5776ff 100%
  );
  color: #ffffff;
}

.project-hero--dm .project-hero__title,
.project-hero--dm .project-hero__subtitle,
.project-hero--dm .section-text,
.project-hero--dm .project-meta__label,
.project-hero--dm .project-meta__value {
  position: relative;
  z-index: 2;
}

/* Контейнер фона */

.project-hero__bg-dm {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Слой с картой */
/* .project-hero__bg-dm::before {
  content: "";
  position: absolute;
  inset: -10%;
  background: linear-gradient(
      to bottom,
      rgba(5, 8, 22, 0.1) 0%,
      rgba(5, 8, 22, 0.35) 45%,
      rgba(5, 8, 22, 0.65) 100%
    ),
    url("../img/drivers-map/hero-map-light.webp") center center / cover
      no-repeat;
  opacity: 0.95;
  transform: translate3d(0, 0, 0);
} */

/* "Сетка дорог" */

.dm-map-grid {
  position: absolute;
  inset: -30%;
  background-image: linear-gradient(
      120deg,
      rgba(87, 195, 255, 0.1) 0,
      rgba(87, 195, 255, 0.1) 1px,
      transparent 1px
    ),
    linear-gradient(
      -120deg,
      rgba(87, 195, 255, 0.06) 0,
      rgba(87, 195, 255, 0.06) 1px,
      transparent 1px
    );
  background-size: 80px 80px;
  opacity: 0.55; /* было 0.8 — теперь сетка мягче и не забивает карту */
  transform-origin: center;
  animation: dm-grid-move 38s linear infinite alternate;
  filter: drop-shadow(0 0 12px rgba(0, 255, 255, 0.25));
}

@keyframes dm-grid-move {
  0% {
    transform: translate3d(0, 0, 0) rotate(8deg) scale(1);
  }
  50% {
    transform: translate3d(-40px, -20px, 0) rotate(12deg) scale(1.05);
  }
  100% {
    transform: translate3d(20px, 40px, 0) rotate(6deg) scale(1.03);
  }
}

/* "Машины" на карте */

.dm-driver {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  box-shadow: 0 0 0 0 rgba(0, 255, 170, 0), 0 0 14px rgba(0, 255, 170, 0.65);
  transform: translate3d(0, 0, 0);
  opacity: 0.85;
}

/* Свободен / занят */

.dm-driver--free {
  background: #24f2a4;
}

.dm-driver--busy {
  background: #ff5a5a;
  box-shadow: 0 0 0 0 rgba(255, 90, 90, 0), 0 0 16px rgba(255, 90, 90, 0.75);
}

/* Индивидуальные траектории — 5 "машин" */

.dm-driver--1 {
  top: 20%;
  left: 10%;
  animation: dm-driver-path-1 26s linear infinite;
}

.dm-driver--2 {
  top: 35%;
  right: 8%;
  animation: dm-driver-path-2 22s linear infinite;
}

.dm-driver--3 {
  bottom: 18%;
  left: 25%;
  animation: dm-driver-path-3 28s linear infinite;
}

.dm-driver--4 {
  bottom: 26%;
  right: 22%;
  animation: dm-driver-path-4 24s linear infinite;
}

.dm-driver--5 {
  top: 12%;
  right: 40%;
  animation: dm-driver-path-5 30s linear infinite;
}

/* Плавные "маршруты" + лёгкий пульс */

@keyframes dm-driver-path-1 {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    box-shadow: 0 0 0 0 rgba(36, 242, 164, 0), 0 0 14px rgba(36, 242, 164, 0.7);
  }
  25% {
    transform: translate3d(80px, 40px, 0) scale(1.08);
    box-shadow: 0 0 8px 4px rgba(36, 242, 164, 0.25),
      0 0 18px rgba(36, 242, 164, 0.9);
  }
  50% {
    transform: translate3d(140px, 10px, 0) scale(0.96);
    box-shadow: 0 0 0 0 rgba(36, 242, 164, 0), 0 0 12px rgba(36, 242, 164, 0.65);
  }
  75% {
    transform: translate3d(60px, -20px, 0) scale(1.04);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes dm-driver-path-2 {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  20% {
    transform: translate3d(-60px, 20px, 0) scale(1.05);
  }
  45% {
    transform: translate3d(-120px, 60px, 0) scale(0.95);
  }
  70% {
    transform: translate3d(-80px, 10px, 0) scale(1.08);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes dm-driver-path-3 {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  30% {
    transform: translate3d(40px, -40px, 0) scale(1.03);
  }
  60% {
    transform: translate3d(110px, -10px, 0) scale(0.96);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes dm-driver-path-4 {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  25% {
    transform: translate3d(-40px, -35px, 0) scale(1.04);
  }
  55% {
    transform: translate3d(-90px, -5px, 0) scale(0.97);
  }
  85% {
    transform: translate3d(-40px, 25px, 0) scale(1.05);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes dm-driver-path-5 {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  40% {
    transform: translate3d(60px, 30px, 0) scale(1.06);
  }
  80% {
    transform: translate3d(-20px, 60px, 0) scale(0.94);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

/* Уважение к prefers-reduced-motion */

@media (prefers-reduced-motion: reduce) {
  .dm-map-grid,
  .dm-driver--1,
  .dm-driver--2,
  .dm-driver--3,
  .dm-driver--4,
  .dm-driver--5 {
    animation: none;
  }
}