.clusters {
  position: relative;
  min-height: calc(551.1 * var(--u));
  margin-top: calc(42.2 * var(--u));
  overflow: clip;
}

.clusters__intro {
  position: relative;
  z-index: 2;
  width: max-content;
  padding: calc(101.3 * var(--u)) 0 0 var(--gutter);
}

.clusters__eyebrow {
  font-size: calc(16.7 * var(--u));
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--c-teal);
}

.clusters__title {
  margin-top: calc(19.1 * var(--u));
  font-size: calc(36.3 * var(--u));
  line-height: calc(44.5 * var(--u));
  letter-spacing: 0;
}

.clusters__text {
  margin-top: calc(33.4 * var(--u));
  font-size: calc(16.3 * var(--u));
  font-weight: 600;
  line-height: calc(25.85 * var(--u));
  white-space: nowrap;
}

.clusters__btn {
  margin-top: calc(66.35 * var(--u));
  margin-left: calc(1.4 * var(--u));
}

.clusters__stage {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(1440 * var(--u));
  height: calc(551.1 * var(--u));
  pointer-events: none;
}

.clusters__map {
  position: absolute;
  top: calc(30 * var(--u));
  left: calc(430 * var(--u));
  width: calc(650 * var(--u));
  height: calc(440 * var(--u));
  overflow: visible;
}

.clusters__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.clusters__spot {
  position: absolute;
  left: calc((var(--px) - 13) * var(--u));
  top: calc((var(--py) - 13) * var(--u));
  z-index: 2;
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  border-radius: 50%;
  pointer-events: auto;
  cursor: pointer;
}

.clusters__spot--nurabad    { --px: 798.3;  --py: 299.75; }
.clusters__spot--akhangaran { --px: 924.85; --py: 251.2; }
.clusters__spot--chirchik   { --px: 903.4;  --py: 236.5; }

.clusters__pin {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.25s ease;
}

.clusters__ring,
.clusters__pulse {
  fill: none;
  stroke: var(--c-blue);
  stroke-width: 1.49;
}

.clusters__dot {
  fill: var(--c-blue);
}

.clusters__pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: cluster-pulse 2.4s ease-out infinite;
}

.clusters__pin--akhangaran .clusters__pulse {
  animation-delay: 0.8s;
}

.clusters__pin--chirchik .clusters__pulse {
  animation-delay: 1.6s;
}

@keyframes cluster-pulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }

  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}

.cluster-card {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  z-index: 1;
  display: block;
  color: var(--c-text);
  pointer-events: auto;
}

.cluster-card:hover {
  color: var(--c-text);
}

.cluster-card--chirchik   { --x: 858.41; --y: 77.51;  --bx: 161.09; --by: 4.49; }
.cluster-card--akhangaran { --x: 888.26; --y: 295.91; --bx: 144.44; --by: 16.59; }
.cluster-card--nurabad    { --x: 462.81; --y: 382.71; --bx: 144.29; --by: 5.59; }

.cluster-card__thumb {
  width: calc(121.88 * var(--u));
  height: calc(121.88 * var(--u));
  border: calc(3.98 * var(--u)) solid var(--c-blue);
  border-radius: 50%;
  object-fit: cover;
  transition: transform var(--transition);
}

.cluster-card:hover .cluster-card__thumb {
  transform: scale(1.04);
}

.cluster-card__body {
  position: absolute;
  left: calc(var(--bx) * var(--u));
  top: calc(var(--by) * var(--u));
  display: block;
  white-space: nowrap;
}

.cluster-card__region {
  display: block;
  font-size: calc(15.1 * var(--u));
  font-weight: 600;
  line-height: 1;
  color: var(--c-blue);
}

.cluster-card__region--green {
  color: var(--c-green);
}

.cluster-card__name {
  display: block;
  margin-top: calc(3.05 * var(--u));
  font-size: calc(28.6 * var(--u));
  font-weight: 600;
  line-height: calc(35.1 * var(--u));
}

.cluster-card__meta {
  display: grid;
  grid-template-columns: calc(114 * var(--u)) auto;
  margin-top: calc(6.85 * var(--u));
  font-size: calc(15.1 * var(--u));
  font-weight: 600;
  line-height: 1;
  color: var(--c-muted);
}

@media (hover: hover) and (min-width: 901px) {
  .cluster-card {
    opacity: 0;
    visibility: hidden;
    transform: translateY(calc(12 * var(--u)));
    transition: opacity 0.3s ease 0.3s, transform 0.3s ease 0.3s, visibility 0s linear 0.6s;
  }

  .clusters__link {
    opacity: 0;
    transition: opacity 0.3s ease 0.3s;
  }

  .clusters__stage:has(.clusters__spot--chirchik:hover, .clusters__spot--chirchik:focus-visible, .cluster-card--chirchik:hover) :is(.cluster-card--chirchik, .clusters__link--chirchik),
  .clusters__stage:has(.clusters__spot--akhangaran:hover, .clusters__spot--akhangaran:focus-visible, .cluster-card--akhangaran:hover) :is(.cluster-card--akhangaran, .clusters__link--akhangaran),
  .clusters__stage:has(.clusters__spot--nurabad:hover, .clusters__spot--nurabad:focus-visible, .cluster-card--nurabad:hover) :is(.cluster-card--nurabad, .clusters__link--nurabad) {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s;
  }

  .clusters__stage:has(.clusters__spot--chirchik:hover, .clusters__spot--chirchik:focus-visible, .cluster-card--chirchik:hover) .clusters__pin--chirchik,
  .clusters__stage:has(.clusters__spot--akhangaran:hover, .clusters__spot--akhangaran:focus-visible, .cluster-card--akhangaran:hover) .clusters__pin--akhangaran,
  .clusters__stage:has(.clusters__spot--nurabad:hover, .clusters__spot--nurabad:focus-visible, .cluster-card--nurabad:hover) .clusters__pin--nurabad {
    transform: scale(1.3);
  }
}

@media (max-width: 900px) {
  .clusters {
    min-height: 0;
    margin-top: var(--sp-8);
    padding: 0 var(--gutter);
  }

  .clusters__intro {
    width: auto;
    padding: 0;
  }

  .clusters__eyebrow {
    font-size: 15px;
  }

  .clusters__title {
    margin-top: var(--sp-4);
    font-size: 28px;
    line-height: 1.25;
  }

  .clusters__text {
    margin-top: var(--sp-4);
    font-size: 15px;
    line-height: 1.6;
    white-space: normal;
  }

  .clusters__btn {
    margin: var(--sp-6) 0 0;
  }

  .clusters__stage {
    position: static;
    display: grid;
    gap: var(--sp-5);
    width: auto;
    height: auto;
    margin-top: var(--sp-6);
  }

  .clusters__map {
    position: static;
    width: 100%;
    height: auto;
  }

  .clusters__lines {
    display: none;
  }

  .clusters__spot {
    display: none;
  }

  .cluster-card {
    position: static;
    display: flex;
    align-items: center;
    gap: var(--sp-4);
  }

  .cluster-card__thumb {
    flex: 0 0 auto;
    width: 84px;
    height: 84px;
    border-width: 3px;
  }

  .cluster-card__body {
    position: static;
    white-space: normal;
  }

  .cluster-card__region {
    font-size: 13px;
  }

  .cluster-card__name {
    margin-top: 4px;
    font-size: 20px;
    line-height: 1.25;
  }

  .cluster-card__meta {
    grid-template-columns: auto auto;
    justify-content: start;
    gap: var(--sp-4);
    margin-top: 6px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .clusters__pulse {
    animation: none;
    opacity: 0;
  }

  .cluster-card,
  .clusters__link {
    transition: none;
  }
}