/* ════════════════════════════════════════════
   SECTIONS / ABOUT — БАЗА: переменные блока, sticky-фон, рейка прогресса
   (общее для всех трёх актов истории — см. about-act1/2/3.css)
   ═════════════════════════════════════════════ */

/* ════════════════════════════════════════════
   ABOUT — «О нас»
   Арт-дирекция: Documentary Grit + Editorial + Cinematic.
   Все правила скоупятся внутрь .section--about / .story —
   остальной сайт не затрагивается.
   ═════════════════════════════════════════════ */

/* ── Секция «О нас» — локальные токены ── */
.section--about {
  /* Локальные токены страницы (не глобальные переменные) */
  --a-ink: #ece7e1;
  /* заголовки */
  --a-body: #b9b1a9;
  /* основной текст */
  --a-dim: #7d746c;
  /* подписи */
  --a-line: rgba(236, 231, 225, 0.14);
  --a-accent: var(--blue);
  --a-gut: clamp(20px, 5vw, 96px);
  --a-display: 'Oswald', 'Bebas Neue', sans-serif;
  --a-mono: 'JetBrains Mono', monospace;
}

/* ── Секция «О нас» идёт от края до края экрана, а не внутри .main padding */
.section--about {
  padding-top: 0;
  margin-inline: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
  overflow-x: clip;
}

.story {
  position: relative;
  isolation: isolate;
  padding-bottom: 0;
  z-index: 1;
}

/* Место под рейку прогресса слева (только desktop/tablet) */
@media (min-width: 769px) {
  .story {
    padding-left: 76px;
  }
}

/* ── Фотографический ambient ──
   sticky: остаётся на месте, пока контент проходит поверх,
   и исчезает вместе с секцией — не «протекает» на другие вкладки. */
/* ── Индикатор прогресса ──
   sticky (не fixed) — живёт только внутри секции «О нас». */
.story__progress {
  position: sticky;
  top: 50vh;
  z-index: 40;
  float: left;
  /* Рейка живёт в gutter-полосе слева от контента (.story padding-left: 76px) */
  margin-left: -58px;
  height: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transform: translateY(-50%);
}

.story__progress-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--a-dim);
  font-family: var(--a-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.5;
  transition: opacity var(--duration-base), color var(--duration-base);
}

.story__progress-item::before {
  content: "";
  width: 1px;
  height: 22px;
  background: currentColor;
  transition: height var(--duration-base), background var(--duration-base);
}

.story__progress-item.is-active {
  opacity: 1;
  color: var(--a-ink);
}

.story__progress-item.is-active::before {
  height: 38px;
  background: var(--a-accent);
}

.story__progress-label {
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--duration-base), transform var(--duration-base);
}

.story__progress-item.is-active .story__progress-label,
.story__progress:hover .story__progress-label {
  opacity: 1;
  transform: none;
}

/* ── Reveal ── */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ── Общая типографика страницы ── */
.story__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--a-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--a-dim);
  margin-bottom: 22px;
}

.story__eyebrow-rule {
  flex: 0 0 40px;
  height: 1px;
  background: var(--a-line);
}

.story__display {
  font-family: var(--a-display);
  font-weight: 700;
  font-size: clamp(42px, 8.4vw, 118px);
  line-height: 0.92;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--a-ink);
}

.story__heading {
  font-family: var(--a-display);
  font-weight: 700;
  font-size: clamp(30px, 4.6vw, 62px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--a-ink);
}

.story__heading--md {
  font-size: clamp(26px, 3.4vw, 44px);
}

.story__lead {
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.65;
  color: var(--a-body);
  max-width: 46ch;
  margin-top: 24px;
}

.story__screen {
  position: relative;
  padding-inline: var(--a-gut);
}

.story__act {
  position: relative;
}