/* Живая карта первого экрана. Цвета: точки суши — как в референсе, рейс — синий бренда,
   загрузка — зелёный действия, выгрузка — синий. */
.hero-map { pointer-events: none; }
.hero-map .rc-map { display: block; width: 100%; height: auto; overflow: visible; }
.rc-dot { fill: #a3b3c4; opacity: .62; }
.rc-outline { fill: none; stroke: #c3cfdc; stroke-width: .8; opacity: .5; }

.rc-city-halo { fill: #0755f7; opacity: 0; transition: opacity .4s, r .4s; }
.rc-city-dot { fill: #22384a; stroke: #fff; stroke-width: 2; transition: fill .3s; }
.rc-city-name { font-family: var(--font); font-size: 21px; font-weight: 500; fill: #4f6373; letter-spacing: -.01em; paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.rc-city.is-load .rc-city-dot { fill: #247568; }
.rc-city.is-unload .rc-city-dot { fill: #0755f7; }
.rc-city.is-load .rc-city-halo { fill: #247568; opacity: .18; animation: rc-pulse 1.4s ease-out infinite; }
.rc-city.is-unload .rc-city-halo { fill: #0755f7; opacity: .18; animation: rc-pulse 1.4s ease-out infinite; }
@keyframes rc-pulse { 0% { r: 6; opacity: .35; } 100% { r: 22; opacity: 0; } }

.rc-trip { opacity: 1; transition: opacity .6s; }
.rc-trip.is-off { opacity: 0; }
.rc-route-shadow { fill: none; stroke: #0755f7; stroke-width: 1; stroke-dasharray: 2 6; opacity: .25; }
.rc-route { fill: none; stroke: #0755f7; stroke-width: 2.6; stroke-linecap: round; }
.rc-trip.is-done .rc-route { stroke: #6f93e6; }
.rc-truck-halo { fill: #0755f7; opacity: .28; }
.rc-truck-dot { fill: #0755f7; stroke: #fff; stroke-width: 2.5; }
.rc-trip.is-done .rc-truck { opacity: 0; transition: opacity .4s; }

.rc-label { opacity: 0; transition: opacity .35s; }
.rc-label.is-on { opacity: 1; }
.rc-label.is-off { opacity: 0; }
.rc-label rect { fill: #fff; stroke: #dfe7ef; stroke-width: 1; filter: drop-shadow(0 6px 14px rgb(16 43 55 / 12%)); }
.rc-label text { font-family: var(--font); font-size: 20px; fill: #22384a; }
.rc-label-city { font-weight: 600; }
.rc-label-action { font-weight: 500; }
.rc-label-load .rc-label-action { fill: #247568; }
.rc-label-unload .rc-label-action { fill: #0755f7; }
.rc-label-load rect { stroke: #b9d9d2; }
.rc-label-unload rect { stroke: #bfd3fb; }

@media (max-width: 1023px) {
  .rc-city-name { font-size: 24px; }
  .rc-label text { font-size: 23px; }
}
@media (max-width: 767px) {
  .hero-map { height: auto; overflow: visible; margin: 18px 0 0; }
  .rc-city-name { font-size: 26px; }
  .rc-label text { font-size: 25px; }
  .rc-route { stroke-width: 4; }
  .rc-city-dot { r: 6; }
}