/* Block: Includes */

.includes {
  /* position: relative нужно для абсолютно спозиционированного
     sentinel'а на вертикальной середине секции — он отслеживает
     достижение середины .includes нижней кромки viewport'а для
     запуска scroll-анимаций (см. scripts/includes.js и блок
     «Animations» в конце файла). */
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
  width: 100%;
  padding: var(--spacing-40) 0 0;
}

/* === Title === */
.includes__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding-inline: var(--spacing-20);
  color: var(--color-on-surface);
  text-align: center;
}

.includes__heading {
  width: 100%;
  font-size: var(--font-headline-s-size);
  font-weight: 600;
  line-height: var(--font-headline-s-line);
  letter-spacing: var(--font-headline-s-tracking);
}

.includes__subheading {
  width: 100%;
  font-size: var(--font-title-l-size);
  font-weight: 600;
  line-height: var(--font-title-l-line);
  letter-spacing: var(--font-title-l-tracking);
}

/* === Container === */
.includes__wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* === Structure container (gradient hero) === */
.includes__structure {
  position: relative;
  width: 100%;
  height: 457px;
  overflow: hidden;
  border-radius: var(--radius-32);
  background: var(--gradient-structure);
  /* Виртуальная ширина дизайна для центрирования группы карточек */
  --design-w: 360px;
}

/* Centered group: positions ethnos / woman / percents / caption по дизайн-координатам,
   но при увеличении ширины экрана группа остаётся центрированной */
.includes__group {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--design-w);
  transform: translateX(-50%);
}

/* Caption: "Состав по группам"
   ≤767: блок центрирован по горизонтали, заголовок текстом по центру, описание слева.
   ≥768: блок и текст выровнены по левому краю (дизайн-координаты). */
.includes__caption {
  position: absolute;
  top: var(--spacing-20);
  left: 50%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  width: 275px;
  transform: translateX(-50%);
  color: var(--color-surface-bright);
}

.includes__caption-title {
  font-size: var(--font-title-m-size);
  font-weight: 600;
  line-height: var(--font-title-m-line);
  letter-spacing: var(--font-title-m-tracking);
  text-align: center;
  text-shadow: var(--shadow-level-3);
}

.includes__caption-text {
  font-size: var(--font-body-xs-size);
  font-weight: 400;
  line-height: var(--font-body-xs-line);
  letter-spacing: var(--font-body-xs-tracking);
}

/* Ethnos card with "548" — слой ниже woman */
.includes__ethnos {
  position: absolute;
  top: 98px;
  left: 20px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 169px;
  padding: var(--spacing-8) var(--spacing-12) var(--spacing-12);
  border-radius: 20px;
  background: var(--color-state-blue-48);
  color: var(--color-surface-bright);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.includes__ethnos-info {
  display: flex;
  flex-direction: column;
}

.includes__ethnos-num {
  font-size: var(--font-headline-l-size);
  font-weight: 400;
  line-height: var(--font-headline-l-line);
  letter-spacing: var(--font-headline-l-tracking);
}

.includes__ethnos-text {
  width: 118px;
  font-size: var(--font-body-xs-size);
  font-weight: 400;
  line-height: var(--font-body-xs-line);
  letter-spacing: var(--font-body-xs-tracking);
}

.includes__view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 115px;
  height: 24px;
  padding: 0 var(--spacing-12) 0 6px;
  border: 1px solid var(--color-state-white-48);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-surface-bright);
  font-size: var(--font-label-s-size);
  font-weight: 600;
  line-height: var(--font-label-s-line);
  letter-spacing: var(--font-label-s-tracking);
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

.includes__view-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}

.includes__view-btn:focus-visible {
  outline: 2px solid var(--color-surface-bright);
  outline-offset: 2px;
}

.includes__view-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

/* Woman portrait — фиксированные размеры контейнера, изображение без деформации */
.includes__woman {
  position: absolute;
  top: 98px;
  left: 50%;
  z-index: 2;
  width: 259px;
  height: 356px;
  pointer-events: none;
  transform: translateX(calc(-50% + 11.5px));
}

.includes__woman img {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(-1);
}

/* Ethnos percent pills */
.includes__percents {
  position: absolute;
  top: 236px;
  left: 188px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 152px;
}

.includes__percent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--spacing-8) var(--spacing-12);
  border-radius: 20px;
  background: var(--color-state-blue-48);
  color: var(--color-surface-bright);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  white-space: nowrap;
}

.includes__percent-name {
  font-size: var(--font-body-s-size);
  font-weight: 600;
  line-height: var(--font-body-s-line);
}

.includes__percent-val {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.includes__percent-num {
  font-size: 24px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -0.4px;
}

.includes__percent-sign {
  font-size: var(--font-body-s-size);
  font-weight: 600;
  line-height: var(--font-body-s-line);
}

/* === Running line — marquee animation === */
.includes__runner {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 60px;
  padding: var(--spacing-20);
}

.includes__runner-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

.includes__runner-marquee {
  position: relative;
  width: 100%;
  height: 20px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 8%,
    #000 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 8%,
    #000 92%,
    transparent 100%
  );
}

.includes__runner-track {
  display: flex;
  width: max-content;
  height: 100%;
  align-items: center;
  animation: includes-marquee 40s linear infinite;
  white-space: nowrap;
}

/* padding-right (вместо flex gap) — чтобы у ПОСЛЕДНЕГО элемента
   тоже был отступ, иначе при сбросе translateX(-50%) → 0 виден шов */
.includes__runner-track li {
  padding-right: var(--spacing-24);
  font-size: var(--font-body-s-size);
  font-weight: 600;
  line-height: var(--font-body-s-line);
  letter-spacing: var(--font-body-s-tracking);
  color: var(--color-on-surface);
}

@keyframes includes-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .includes__runner-track {
    animation: none;
  }
}

/* === Geography — mobile (default): below structure === */
.includes__geography {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 30px;
  width: 100%;
  overflow: hidden;
}

.includes__geo-image {
  position: absolute;
  top: -47px;
  right: -9px;
  width: 182px;
  height: 182px;
  pointer-events: none;
}

.includes__geo-image-pic {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.includes__geo-image-frame {
  display: none;
}

.includes__geo-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-4);
  min-width: 0;
  padding: var(--spacing-24) var(--spacing-20);
  color: var(--color-on-surface);
}

.includes__geo-title {
  font-size: var(--font-title-m-size);
  font-weight: 600;
  line-height: var(--font-title-m-line);
  letter-spacing: var(--font-title-m-tracking);
  text-shadow: var(--shadow-level-3);
}

.includes__geo-text {
  width: 204px;
  font-size: var(--font-body-xs-size);
  font-weight: 400;
  line-height: var(--font-body-xs-line);
  letter-spacing: var(--font-body-xs-tracking);
}

/* ============================================ */
/* ≥390px                                        */
/* ============================================ */
@media (min-width: 390px) {
  .includes__structure {
    --design-w: 390px;
    height: 443px;
  }

  .includes__ethnos {
    top: 96px;
  }

  .includes__woman {
    top: 84px;
    left: 74px;
    transform: none;
  }

  .includes__percents {
    top: 236px;
    left: 199px;
    width: 171px;
  }

  .includes__runner {
    bottom: 0;
  }

  .includes__geo-image {
    top: -68px;
    right: 0;
    width: 206px;
    height: 206px;
  }
}

/* ============================================ */
/* ≥576px                                        */
/* ============================================ */
@media (min-width: 576px) {
  .includes__structure {
    --design-w: 576px;
  }

  .includes__ethnos {
    left: 93px;
  }

  .includes__woman {
    left: 164px;
  }

  .includes__percents {
    top: 236px;
    left: 324px;
    width: 169px;
  }

  .includes__geo-image {
    top: -75px;
    right: 24px;
    width: 210px;
    height: 210px;
  }

  .includes__geo-text {
    width: 311px;
  }
}

/* ============================================ */
/* ≥768px — geography как glass-карточка внутри  */
/* ============================================ */
@media (min-width: 768px) {
  .includes {
    padding-top: var(--spacing-80);
  }

  .includes__title {
    padding-inline: 0;
  }

  .includes__heading {
    font-size: var(--font-headline-l-size);
    line-height: var(--font-headline-l-line);
    letter-spacing: var(--font-headline-l-tracking);
  }

  .includes__subheading {
    font-size: var(--font-headline-s-size);
    line-height: var(--font-headline-s-line);
    letter-spacing: var(--font-headline-s-tracking);
  }

  .includes__structure {
    --design-w: 768px;
    height: 495px;
  }

  /* Caption: блок и текст по левому краю */
  .includes__caption {
    top: 20px;
    left: 73px;
    width: 273px;
    transform: none;
  }

  .includes__caption-title {
    text-align: left;
  }

  .includes__caption-text {
    font-size: var(--font-body-s-size);
    line-height: var(--font-body-s-line);
    letter-spacing: var(--font-body-s-tracking);
  }

  .includes__ethnos {
    top: 156px;
    left: 73px;
  }

  .includes__woman {
    top: 7px;
    left: 197px;
    width: 352px;
    height: 483px;
    transform: none;
  }

  .includes__percents {
    top: 136px;
    left: 454px;
    width: 169px;
  }

  .includes__runner {
    height: 85px;
  }

  /* Geography: glass-карточка, привязана к правому краю structure */
  .includes__geography {
    position: absolute;
    top: 332px;
    right: 20px;
    z-index: 3;
    width: 268px;
    gap: 0;
    border-radius: 20px;
    background: var(--color-state-blue-48);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  .includes__geo-image {
    top: -15px;
    right: auto;
    left: 181px;
    width: 127px;
    height: 118px;
  }

  .includes__geo-image-pic {
    display: none;
  }

  .includes__geo-image-frame {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .includes__geo-info {
    padding: var(--spacing-12);
    color: var(--color-surface-bright);
  }

  .includes__geo-title {
    font-size: var(--font-title-s-size);
    font-weight: 500;
    line-height: var(--font-title-s-line);
    letter-spacing: var(--font-title-s-tracking);
    text-align: left;
  }

  .includes__geo-text {
    width: 171px;
  }
}

/* ============================================ */
/* ≥1100px                                       */
/* ============================================ */
@media (min-width: 1100px) {
  .includes__structure {
    --design-w: 1100px;
    height: 564px;
  }

  .includes__caption {
    top: 40px;
    left: 167px;
  }

  .includes__ethnos {
    top: 156px;
    left: 167px;
    width: 249px;
    padding: var(--spacing-8) var(--spacing-20) var(--spacing-20);
  }

  .includes__ethnos-num {
    font-size: var(--font-headline-xl-size);
    line-height: var(--font-headline-xl-line);
    letter-spacing: var(--font-headline-xl-tracking);
  }

  .includes__ethnos-text {
    width: auto;
    font-size: var(--font-body-s-size);
    line-height: var(--font-body-s-line);
    letter-spacing: var(--font-body-s-tracking);
  }

  .includes__view-btn {
    width: 142px;
    height: 44px;
    padding: 0 var(--spacing-24) 0 var(--spacing-20);
    font-size: var(--font-label-m-size);
    line-height: var(--font-label-m-line);
    letter-spacing: var(--font-label-m-tracking);
  }

  .includes__view-icon {
    width: 20px;
    height: 20px;
  }

  .includes__woman {
    top: 7px;
    left: 50%;
    width: 403px;
    height: 553px;
    transform: translateX(-50%);
  }

  .includes__percents {
    top: 120px;
    left: 643px;
    width: 243px;
    gap: var(--spacing-8);
  }

  .includes__percent {
    padding: var(--spacing-8) var(--spacing-20);
  }

  .includes__percent-name {
    font-size: var(--font-title-m-size);
    line-height: var(--font-title-m-line);
  }

  .includes__percent-num {
    font-size: 40px;
    line-height: 49px;
  }

  .includes__percent-sign {
    font-size: var(--font-title-m-size);
    line-height: var(--font-title-m-line);
  }

  .includes__geography {
    top: 349px;
    right: 20px;
    width: 343px;
  }

  .includes__geo-image {
    top: -15px;
    right: auto;
    left: 210px;
    width: 167px;
    height: 155px;
  }

  .includes__geo-info {
    padding: var(--spacing-20);
  }

  .includes__geo-title {
    font-size: var(--font-title-m-size);
    font-weight: 600;
    line-height: var(--font-title-m-line);
    letter-spacing: var(--font-title-m-tracking);
  }

  .includes__geo-text {
    width: 202px;
    font-size: var(--font-body-s-size);
    line-height: var(--font-body-s-line);
    letter-spacing: var(--font-body-s-tracking);
  }
}

/* ============================================ */
/* ≥1440px — резиновая (с ограничением 1312px)   */
/* ============================================ */
@media (min-width: 1440px) {
  .includes {
    padding-inline: max(
      var(--spacing-64),
      calc((100% - var(--includes-content-max)) / 2)
    );
  }

  .includes__subheading {
    font-size: var(--font-headline-m-size);
    line-height: var(--font-headline-m-line);
    letter-spacing: var(--font-headline-m-tracking);
  }

  .includes__structure {
    --design-w: 1312px;
    height: 631px;
  }

  .includes__caption {
    top: 72px;
    left: 221px;
  }

  .includes__caption-title {
    font-size: var(--font-title-l-size);
    line-height: var(--font-title-l-line);
    letter-spacing: var(--font-title-l-tracking);
  }

  .includes__ethnos {
    top: 196px;
    left: 221px;
    padding: var(--spacing-8) var(--spacing-24) var(--spacing-24);
    border-radius: var(--radius-24);
  }

  .includes__woman {
    width: 451px;
    height: 620px;
  }

  .includes__percents {
    top: 127px;
    left: 775px;
    width: 280px;
  }

  .includes__percent {
    padding: var(--spacing-12) var(--spacing-32);
    border-radius: var(--radius-24);
  }

  .includes__geography {
    top: 416px;
    right: 40px;
    border-radius: var(--radius-24);
  }
}

/* ============================================ */
/* === Scroll-triggered animations ===
   Когда середина .includes достигает нижней кромки viewport'а
   (определяется JS'ом через IntersectionObserver и sentinel в середине
   секции — scripts/includes.js), на .includes ставится класс
   .is-visible. Это запускает последовательное появление:

     0ms     — .includes__woman      (300ms duration)
     450ms   — .includes__ethnos     (300ms duration)
     900ms   — .includes__percents   (300ms duration)
     1350ms  — .includes__geography  (300ms duration, только ≥768)

   Между концом одной и началом следующей — пауза ровно 150ms.

   Каждый элемент появляется fade-in'ом (opacity 0→1) и смещением
   снизу вверх на 30px.

   Используем отдельное CSS-свойство `translate` (а не `transform`),
   чтобы анимационный сдвиг по Y композился с уже существующим
   позиционирующим transform'ом (`translateX(-50%)` на .includes__woman
   на ≥1100, например) — без необходимости переопределять transform
   на каждом брейкпоинте. */
/* ============================================ */
.includes__woman,
.includes__ethnos,
.includes__percents,
.includes__geography {
  opacity: 0;
  translate: 0 30px;
  transition: opacity 300ms ease, translate 300ms ease;
}

.includes.is-visible .includes__woman {
  opacity: 1;
  translate: 0 0;
  transition-delay: 0ms;
}

.includes.is-visible .includes__ethnos {
  opacity: 1;
  translate: 0 0;
  transition-delay: 450ms;
}

.includes.is-visible .includes__percents {
  opacity: 1;
  translate: 0 0;
  transition-delay: 900ms;
}

/* На <768 у .includes__geography НЕТ анимации появления — элемент
   виден сразу (отображается обычным потоком под structure-блоком). */
@media (max-width: 767px) {
  .includes__geography {
    opacity: 1;
    translate: 0 0;
    transition: none;
  }
}

/* На ≥768 .includes__geography — последний шаг в очереди (1350ms). */
@media (min-width: 768px) {
  .includes.is-visible .includes__geography {
    opacity: 1;
    translate: 0 0;
    transition-delay: 1350ms;
  }
}

/* Пользователь выбрал «уменьшенное движение» — мгновенный показ. */
@media (prefers-reduced-motion: reduce) {
  .includes__woman,
  .includes__ethnos,
  .includes__percents,
  .includes__geography {
    opacity: 1;
    translate: 0 0;
    transition: none;
  }
}

/* Sentinel — 1px-точка на вертикальной середине .includes, наблюдаемая
   IntersectionObserver'ом из scripts/includes.js. Когда она входит
   во viewport (= середина секции достигла нижней кромки экрана),
   на .includes ставится .is-visible, и пошёл каскад анимаций. */
.includes__anim-sentinel {
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 1px;
  pointer-events: none;
  opacity: 0;
}