/* ============================================================
   СЛАЙДЕР ПОСАД — «бойові амігос шукають …»
   Кадр 1440 × 602 (мобилка 375 × 632), край-в-край, всё внутри
   абсолютное: в макете это слои поверх фото, а не поток.

   Пять состояний переключаются точками. Разметку слов, снимков
   и точек строит initSlider() в /js/main.js — здесь только вид.
   ============================================================ */

.amigos {
  touch-action: pan-y;                      /* вертикальная прокрутка остаётся экрану, горизонталь берёт свайп */
  user-select: none;
  --slide-dur: .62s;                        /* столько же ждёт таймер в JS */
  --slide-ease: cubic-bezier(.65, 0, .35, 1);
  --shift: calc(780 * var(--u));            /* ход слова: см. комментарий у .amigos__rotator */
  --blur: 50;                               /* размытие фото в момент подмены */
  --dot: 13;                                /* сторона квадратика-индикатора */
  --dot-hit: 23;                            /* шаг точек = ширина зоны клика */
  background: var(--bg);
}

/* Клип по рамке макета: снимок уходит вправо за 1440, декор — вниз
   за 602. На экранах шире 1440 полосы по краям остаются чёрными. */
.amigos .band__inner {
  height: calc(602 * var(--u));
  overflow: hidden;
}

/* ---------- фото ------------------------------------------- */

.amigos__photo {
  position: absolute;
  z-index: 1;
  inset: 0;
}

/* Кадрирование у каждой должности своё — линейной зависимости нет,
   поэтому бокс каждого снимка прошит таблицей. */
.amigos__img {
  -webkit-user-drag: none;
  position: absolute;
  max-width: none;                          /* на мобилке снимок вдвое шире экрана */
  opacity: 0;
  object-fit: cover;
  transition: opacity var(--slide-dur) var(--slide-ease);
}

.amigos__img.is-active { opacity: 1; }

.amigos__img:nth-child(1) { left: calc(422 * var(--u)); top: calc(-30 * var(--u)); width: calc(1082 * var(--u)); height: calc(721 * var(--u)); }
.amigos__img:nth-child(2) { left: calc(510 * var(--u)); top: calc(-13 * var(--u)); width: calc(1026 * var(--u)); height: calc(683 * var(--u)); }
.amigos__img:nth-child(3) { left: calc(467 * var(--u)); top: calc(-83 * var(--u)); width: calc(1132 * var(--u)); height: calc(754 * var(--u)); }
.amigos__img:nth-child(4) { left: calc(530 * var(--u)); top: calc(-35 * var(--u)); width: calc(1026 * var(--u)); height: calc(683 * var(--u)); }
.amigos__img:nth-child(5) { left: calc(460 * var(--u)); top: calc(-53 * var(--u)); width: calc(1086 * var(--u)); height: calc(724 * var(--u)); }

/* В момент переключения оба снимка размыты — так нарисован кадр
   перехода. Пик размытия посередине, поэтому это анимация, а не
   переход: с transition размытие пришлось бы на конец. */
.amigos.is-shifting .amigos__img {
  animation: amigos-blur var(--slide-dur) var(--slide-ease) both;
  will-change: filter;
}

@keyframes amigos-blur {
  0%, 100% { filter: blur(0px); }
  50%      { filter: blur(calc(var(--blur) * var(--u))); }
}

/* ---------- затемнение низа --------------------------------- */

.amigos__fade {
  position: absolute;
  z-index: 2;
  left: 0;
  top: calc(410 * var(--u));
  width: 100%;
  height: calc(192 * var(--u));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%);
  pointer-events: none;
}

/* ---------- заголовок --------------------------------------- */

.amigos__title {
  position: absolute;
  z-index: 3;
  inset: 0;
  font-family: var(--font-display-cond);
  font-weight: 700;
  font-size: calc(134.523 * var(--u));
  line-height: .9;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--white);
  pointer-events: none;                     /* заголовок лежит поверх всего кадра */
}

.amigos__static,
.amigos__rotator { pointer-events: auto; }

/* Верх строки в макете меряется по прописным, браузер добавляет
   сверху половину интерлиньяжа — отсюда сдвиг относительно 133. */
.amigos__static {
  position: absolute;
  left: calc(144 * var(--u));
  top: calc(119.5 * var(--u));
}

/* Окно с мягкой маской. В макете оно 107…806, но самые длинные
   должности («водіїв-механіків») кончаются на 846 и в покое были бы
   подрезаны — правый край отодвинут за них. Соответственно вырос и
   ход слова: оно обязано стартовать за границей окна. */
.amigos__rotator {
  position: absolute;
  left: calc(82 * var(--u));
  top: calc(361.7 * var(--u));
  width: calc(824 * var(--u));
  height: calc(150 * var(--u));
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 calc(50 * var(--u)), #000 calc(774 * var(--u)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 calc(50 * var(--u)), #000 calc(774 * var(--u)), transparent 100%);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* Покой = слово спрятано справа за окном и без перехода: класс с него
   снимают сразу после анимации, и оно не должно ползти обратно. */
.amigos__word {
  position: absolute;
  left: calc(62 * var(--u));
  top: 0;
  white-space: nowrap;
  transform: translateX(var(--shift));
  visibility: hidden;
  transition: none;
}

/* Обратный ход (клик по точке слева) — зеркало: приходит слева. */
.amigos__word.is-back { transform: translateX(calc(-1 * var(--shift))); }

.amigos__word.is-entering,
.amigos__word.is-leaving { visibility: visible; }

.amigos__word.is-leaving { transform: translateX(calc(-1 * var(--shift))); }
.amigos__word.is-leaving.is-back { transform: translateX(var(--shift)); }

/* Правило стоит после .is-back: у входящего слова оба класса сразу. */
.amigos__word.is-active {
  visibility: visible;
  transform: translateX(0);
}

/* Уходящее слово стартует с нуля и едет сразу. Входящему сначала надо
   без перехода встать на старт — JS делает reflow и только потом
   вешает .is-active; будь переход включён раньше, слово поехало бы
   от старой точки покоя и в обратную сторону. */
.amigos__word.is-leaving,
.amigos__word.is-entering.is-active {
  transition: transform var(--slide-dur) var(--slide-ease);
}

/* ---------- точки-индикаторы -------------------------------- */

.amigos__dots {
  position: absolute;
  z-index: 4;
  left: calc(658 * var(--u));
  top: calc(521 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  padding: calc(10 * var(--u));
}

.amigos__dot {
  position: relative;
  display: block;
  padding: 0;                               /* иначе браузерные 6px не дают квадрату сжаться */
  width: calc(var(--dot) * var(--u));
  height: calc(var(--dot) * var(--u));
  background: var(--white-30);
  transition: background-color var(--slide-dur) var(--ease);
}

/* Квадрат 13 × 13 — мимо любого минимума для пальца, поэтому зона
   клика растянута прозрачным псевдоэлементом. Вид не меняется. */
.amigos__dot::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(24px, calc(var(--dot-hit) * var(--u)));
  height: max(44px, calc(33 * var(--u)));
  transform: translate(-50%, -50%);
}

.amigos__dot.is-active { background: var(--accent); }

/* Наведения в макете нет — подсвечиваем в той же палитре. */
.amigos__dot:hover,
.amigos__dot:focus-visible { background: var(--white-50); }
.amigos__dot.is-active:hover,
.amigos__dot.is-active:focus-visible { background: var(--accent); }

/* ============================================================
   МОБИЛКА (макет 375 × 632)
   Тот же слой-в-слой расклад, только декора нет, а снимок шире
   экрана вдвое. Кадр у каждой должности свой — рамки 522:427…522:477
   макета (дорисованы 25.08.2026), кадры 3–5 крупнее остальных.
   ============================================================ */

@media (max-width: 599px) {
  .amigos {
    --shift: calc(390 * var(--u));
    --blur: 13;                             /* та же доля кадра, что 50 на 1440 */
    --dot: 10.7162;
    --dot-hit: 18.96;
  }

  .amigos .band__inner { height: calc(632 * var(--u)); }

  .amigos__img:nth-child(1) { left: calc(-211 * var(--u)); top: calc(178 * var(--u)); width: calc(756 * var(--u)); height: calc(504 * var(--u)); }
  .amigos__img:nth-child(2) { left: calc(-171 * var(--u)); top: calc(179 * var(--u)); width: calc(756 * var(--u)); height: calc(504 * var(--u)); }
  .amigos__img:nth-child(3) { left: calc(-214 * var(--u)); top: calc(137 * var(--u)); width: calc(849 * var(--u)); height: calc(566 * var(--u)); }
  .amigos__img:nth-child(4) { left: calc(-194 * var(--u)); top: calc(147 * var(--u)); width: calc(849 * var(--u)); height: calc(566 * var(--u)); }
  .amigos__img:nth-child(5) { left: calc(-260 * var(--u)); top: calc(150 * var(--u)); width: calc(849 * var(--u)); height: calc(566 * var(--u)); }

  .amigos__fade {
    top: calc(511 * var(--u));
    height: calc(121 * var(--u));
  }

  .amigos__title { font-size: calc(62.738 * var(--u)); }

  .amigos__static {
    left: calc(30 * var(--u));
    top: calc(27.8 * var(--u));
  }

  /* Окно шире экрана: гасить нужно только левый край, справа слово
     и так обрезает рамка секции. */
  .amigos__rotator {
    left: 0;
    top: calc(141 * var(--u));
    width: calc(400 * var(--u));
    height: calc(70 * var(--u));
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 calc(24 * var(--u)), #000 calc(375 * var(--u)), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 calc(24 * var(--u)), #000 calc(375 * var(--u)), transparent 100%);
  }

  .amigos__word { left: calc(30 * var(--u)); }

  .amigos__dots {
    left: calc(136 * var(--u));
    top: calc(570 * var(--u));
    gap: calc(8.2432 * var(--u));
    padding: calc(8.2432 * var(--u));
  }
}

/* ============================================================
   Спокойный режим: ни сдвига, ни размытия — только подмена.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .amigos { --shift: 0px; }
  /* иначе уходящее и входящее слово 0.6 с лежат друг на друге */
  .amigos__word.is-leaving { visibility: hidden; }
  .amigos.is-shifting .amigos__img { animation: none; }
}