/* ===========================================================
   AIEco — блок «Экосистема»
   Тёмный full-bleed разворот со скролл-пиннингом.
   Намеренно ломает ритм страницы: край в край, без скруглений,
   разделители в 1px вместо карточек.
   =========================================================== */

.ecoblock {
  position: relative;
  background: #050807;
  border-top: 1px solid rgba(255, 255, 255, .08);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  color: var(--fg);
  /* вырываемся из общего контейнера страницы */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  overflow: clip;
}

/* зернистость поверх — убирает «пластиковость» плоского чёрного */
.ecoblock::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  opacity: .22;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
}

/* -----------------------------------------------------------
   Заголовочная зона
   ----------------------------------------------------------- */

.ecoblock__intro {
  position: relative;
  z-index: 2;
  max-width: 1440px;
  margin: 0 auto;
  padding: clamp(64px, 8vw, 120px) clamp(20px, 4vw, 64px) clamp(40px, 5vw, 72px);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(26px, 4vw, 64px);
  justify-content: space-between;
  align-items: flex-end;
}

.ecoblock__head { flex: 1 1 min(100%, 720px); min-width: 0; }

.ecoblock__title {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(30px, 5vw, 76px);
  line-height: 1.08;
  letter-spacing: -.045em;
  margin: 18px 0 0;
  color: #fff;
  text-wrap: pretty;
}

/* три кружка-иконки внутри строки заголовка */
.ecoblock__icons {
  display: inline-flex;
  gap: clamp(6px, .8vw, 12px);
  vertical-align: middle;
  margin: 0 clamp(6px, .9vw, 16px);
  transform: translateY(-.08em);
}
.ecoblock__icon {
  width: clamp(34px, 4.4vw, 62px);
  height: clamp(34px, 4.4vw, 62px);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .22);
  background: #0A0F0D;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(231, 239, 235, .5);
  transition: background .45s var(--ease-out), color .45s var(--ease-out),
              border-color .45s var(--ease-out), transform .55s var(--ease-out);
}
.ecoblock__icon svg { width: 46%; height: 46%; }
.ecoblock__icon:hover {
  background: var(--acc);
  border-color: var(--acc);
  color: #04120C;
  transform: translateY(-3px) rotate(-6deg);
}

.ecoblock__aside { flex: 0 1 340px; min-width: 0; }
.ecoblock__tagline {
  font-family: var(--f-mono);
  font-size: 10.5px;
  line-height: 1.9;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-45);
  margin: 0 0 18px;
}
.ecoblock__pills { display: flex; flex-wrap: wrap; gap: 8px; }
.ecopill {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .18);
  color: rgba(231, 239, 235, .6);
  transition: background .35s ease, color .35s ease, border-color .35s ease;
}
.ecopill:hover { background: #fff; color: #05100B; border-color: #fff; }

/* -----------------------------------------------------------
   Скролл-трек и залипающая сцена
   ----------------------------------------------------------- */

.ecopin {
  position: relative;
  z-index: 2;
  height: 440vh;            /* длина «прокрутки» блока */
}

/* Раскрытие активной строки меняет высоту содержимого. Без этого
   браузерный scroll anchoring «подтягивает» вьюпорт и выкидывает
   читателя вверх, в предыдущую секцию. */
.ecoblock,
.ecopin,
.ecolist,
.ecorow,
.ecorow__body { overflow-anchor: none; }

.ecopin__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(255, 255, 255, .10);
}

/* тонкая шкала прохождения блока */
.ecoscale {
  flex: none;
  height: 2px;
  background: rgba(255, 255, 255, .07);
  position: relative;
  overflow: hidden;
}
.ecoscale__bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, var(--acc), var(--acc-pale));
}

.ecopanel {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 38% minmax(0, 1fr);
}

/* ---------- левая створка: визуал контура ---------- */

.ecoart-pane {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(18px, 2vw, 30px) clamp(18px, 2.4vw, 36px);
  border-right: 1px solid rgba(255, 255, 255, .10);
  min-width: 0;
}
.ecoart-pane__top,
.ecoart-pane__foot {
  flex: none;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(231, 239, 235, .3);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ecoart {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 12px 0;
}
.ecoart__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  will-change: filter, opacity;
}
.ecoart__slide.is-on { opacity: 1; visibility: visible; }
.ecoart__slide svg { width: min(100%, 380px); height: auto; }

/* живые штрихи внутри активного визуала */
.ecoart__slide.is-on .flow-dash { animation: ecoflow 3.4s linear infinite; }
.ecoart__slide.is-on .pulse-ring { animation: ecopulse 2.6s ease-out infinite; }
.ecoart__slide.is-on .blink { animation: ecoblink 2.2s ease-in-out infinite; }
@keyframes ecoflow  { to { stroke-dashoffset: -60; } }
@keyframes ecopulse { 0% { opacity: .6; transform: scale(.6); } 70%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes ecoblink { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* счётчик 01 / 06 */
.ecocount { display: flex; align-items: baseline; gap: 7px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .12em; }
.ecocount__now {
  display: inline-block;
  min-width: 2ch;
  color: var(--acc);
  transition: transform .5s var(--ease-out), opacity .3s ease;
}
.ecocount__now.is-rolling { transform: translateY(-70%); opacity: 0; }
.ecocount__sep { color: rgba(255, 255, 255, .18); }
.ecocount__all { color: rgba(231, 239, 235, .3); }

/* ---------- правая створка: индекс контуров ---------- */

.ecolist-pane { display: flex; flex-direction: column; min-width: 0; }

.ecolist-pane__bar {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  justify-content: space-between;
  align-items: center;
  padding: clamp(16px, 1.8vw, 26px) clamp(20px, 2.6vw, 44px);
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(231, 239, 235, .38);
}
.ecolist-pane__chapter { color: var(--acc); white-space: nowrap; }

.ecolist {
  flex: 1;
  min-height: 0;
  list-style: none;
  margin: 0;
  padding: 0 clamp(20px, 2.6vw, 44px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ecorow { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.ecorow:last-child { border-bottom: none; }

.ecorow__btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 26px);
  padding: clamp(13px, 1.7vh, 22px) 0;
  text-align: left;
  color: #3A4340;
  transition: color .45s var(--ease-out);
}
.ecorow__btn:hover { color: #8A938F; }
.ecorow.is-on .ecorow__btn { color: #fff; }

.ecorow__code {
  flex: none;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  color: inherit;
  opacity: .55;
  width: 2.4em;
}
.ecorow.is-on .ecorow__code { color: var(--acc); opacity: 1; }

.ecorow__name {
  flex: 1;
  min-width: 0;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(17px, 2.1vw, 32px);
  line-height: 1.12;
  letter-spacing: -.035em;
  text-wrap: pretty;
}

.ecorow__arrow {
  flex: none;
  width: 24px;
  height: 24px;
  color: rgba(231, 239, 235, .55);
  opacity: 0;
  transform: translate(-8px, 8px);
  transition: opacity .45s var(--ease-out), transform .55s var(--ease-out);
}
.ecorow.is-on .ecorow__arrow { opacity: 1; transform: none; }

/* раскрывающееся описание активного контура */
.ecorow__body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .65s var(--ease-out), opacity .45s ease, padding .65s var(--ease-out);
}
.ecorow.is-on .ecorow__body { grid-template-rows: 1fr; opacity: 1; padding-bottom: clamp(14px, 1.8vh, 22px); }
.ecorow__body > div { overflow: hidden; min-height: 0; }

.ecorow__text {
  margin: 0;
  max-width: 620px;
  font-size: clamp(13.5px, 1.05vw, 15.5px);
  line-height: 1.6;
  color: rgba(231, 239, 235, .62);
}
.ecorow__metric {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgba(63, 207, 151, .28);
}
.ecorow__metric b {
  font-family: var(--f-display);
  font-size: clamp(18px, 1.7vw, 24px);
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--acc);
}
.ecorow__metric span {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(231, 239, 235, .45);
}

.ecopanel__foot {
  flex: none;
  padding: clamp(14px, 1.6vw, 22px) clamp(20px, 2.6vw, 44px);
  border-top: 1px solid rgba(255, 255, 255, .10);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(231, 239, 235, .28);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 20px;
}

/* -----------------------------------------------------------
   Планшет и телефон: пиннинг выключаем, отдаём аккордеон
   ----------------------------------------------------------- */

@media (max-width: 980px) {
  .ecopin { height: auto; }
  .ecopin__sticky { position: static; height: auto; min-height: 0; }
  .ecopanel { grid-template-columns: minmax(0, 1fr); }
  .ecoart-pane {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, .10);
    height: 46vh;
    min-height: 300px;
  }
  .ecolist { padding: 0 clamp(20px, 4vw, 44px); }
  .ecorow__btn { padding: 16px 0; }
  .ecorow__name { font-size: clamp(17px, 4.4vw, 24px); }
}

@media (max-width: 620px) {
  .ecoblock__intro { padding-bottom: 32px; }
  .ecoart-pane { height: 38vh; min-height: 240px; }
  .ecolist-pane__bar { font-size: 9.5px; letter-spacing: .14em; }
  .ecopanel__foot { font-size: 9px; letter-spacing: .16em; }
  .ecorow__arrow { display: none; }
}

/* Уменьшенная анимация гасит декор, но НЕ ломает раскладку:
   пиннинг — это навигация скроллом, а не самоиграющая анимация.
   Если снять его здесь, скролл перестаёт переключать контуры. */
@media (prefers-reduced-motion: reduce) {
  .ecoart__slide.is-on .flow-dash,
  .ecoart__slide.is-on .pulse-ring,
  .ecoart__slide.is-on .blink { animation: none; }
  .ecorow__body { transition: none; }
  .ecocount__now { transition: none; }
}