/* ===== Наблюдение ТЗВ: page-level стили (секции — rosstat:section.text-image) ===== */

.page-title {
  margin-top: 5rem;
}

.page-title__heading {
  font-family: var(--font-heading);
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 1.05rem + 1.9vw, 2rem);
  line-height: 1.25;
  margin: 4rem auto;
  max-width: var(--container-width);
}

.js-reveal .page-title__heading {
  animation: title-fade-in 0.45s ease both;
}

@keyframes title-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ===== Заголовки секций — верхний регистр ===== */
.observation-page .block-text-image__heading {
  text-transform: uppercase;
}

/* ===== Ряд «текст + изображение» (пропорции для наблюдения) ===== */

.observation-page .block-text-image__inner {
  gap: clamp(1.5rem, 1rem + 3vw, 3rem);
}

.observation-page .block-text-image__visual {
  flex: 1 1 45%;
  max-width: none;
}

.observation-page .block-text-image__content {
  flex: 1 1 55%;
}

/* ===== Изображения: маска и режим смешивания ===== */

.observation-page .block-text-image__visual-img {
  -webkit-mask-image: radial-gradient(ellipse 78% 78% at 50% 50%, #000 58%, transparent 100%);
  mask-image: radial-gradient(ellipse 78% 78% at 50% 50%, #000 58%, transparent 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.observation-page .block-text-image.data .block-text-image__visual-img,
.observation-page .block-text-image.tables .block-text-image__visual-img {
  mix-blend-mode: normal;
}

/* ===== Reveal-анимация ===== */

.observation-page .block-text-image__visual {
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.js-reveal .observation-page [data-block-text-image] {
  opacity: 0;
  transform: translateY(24px);
}

.js-reveal .observation-page [data-block-text-image].is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.js-reveal .observation-page .block-text-image__visual {
  opacity: 0;
  transform: translateX(var(--reveal-x, 0)) scale(0.98);
}

.js-reveal .observation-page [data-block-text-image].is-visible .block-text-image__visual {
  opacity: 1;
  transform: none;
}

.observation-page .block-text-image.about .block-text-image__visual,
.observation-page .block-text-image.why .block-text-image__visual,
.observation-page .block-text-image.usage .block-text-image__visual {
  --reveal-x: 24px;
}

.observation-page .block-text-image.data .block-text-image__visual,
.observation-page .block-text-image.tables .block-text-image__visual {
  --reveal-x: -24px;
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal .observation-page [data-block-text-image],
  .js-reveal .observation-page .block-text-image__visual {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js-reveal .page-title__heading {
    animation: none;
    opacity: 1;
  }
}