/* ============================================================
   ITERANS 2.0 · ДВИЖЕНИЕ
   Правило: движение допустимо там, где оно что-то объясняет.
   Никаких плавающих фигур, поворотов, масштабирования и градиентных
   пятен. Только вертикаль, только transform и opacity.

   Амплитуда — 3–5%, на грани заметности. Если движение видно как
   «эффект», оно сделано неправильно.

   Реализация — прогрессивное улучшение на нативных scroll-driven
   анимациях CSS. Без поддержки браузером и при prefers-reduced-motion
   всё просто статично и полностью видно: контент никогда не прячется
   за анимацию, которая может не запуститься.
   ============================================================ */

/* Чертёжная сетка — «калька под чертежом».
   Всегда видна; движение добавляется ниже, если браузер умеет. */
/* Крупный знак на первом экране. Рисуется псевдоэлементом самого .hero,
   а не отдельным <div> в разметке: так он появляется на КАЖДОЙ странице
   автоматически. Раньше div стоял только в index.php, и остальные
   первые экраны оставались голыми — разнобой, который никто не заметил бы
   в коде, но видно на сайте.

   Знак разрезан ровно пополам правым краем. Величина сдвига вычислена
   из пропорций файла, а не подобрана: промах в несколько пикселей
   превращает жест в «картинка не поместилась». */
.hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:var(--mark);
  background-size:var(--mark-size);
  background-position:var(--mark-pos);
  background-repeat:no-repeat;
  opacity:var(--mark-dens);
  mask-image:var(--pattern-mask);
  -webkit-mask-image:var(--pattern-mask);
}
/* На узком экране знак съедал бы половину первого экрана */
@media (max-width:760px){
  .hero::before{background-size:auto 260px; background-position:right -137px top 20px; opacity:.4}
}
.hero{position:relative; overflow:hidden}
.hero > .wrap{position:relative; z-index:1}
/* На главной обрезка не нужна — знака там нет, зато она ломала параллакс:
   элемент с overflow отличным от visible становится контейнером прокрутки,
   и view() начинает мерить прогресс относительно него. Контейнер не
   прокручивается, прогресс всегда ноль, анимация не идёт. */
.hero--main{overflow:visible}

@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){

    /* Появление блока: 10px и лёгкое проявление. Не «влёт», а «проступает». */
    .reveal{
      animation:reveal-in linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 48%;
    }
    @keyframes reveal-in{
      from{ opacity:.4; transform:translateY(10px) }
      to  { opacity:1;  transform:none }
    }

    /* Слои модели: чем «глубже» слой, тем медленнее он догоняет.
       Разница между первым и последним — 6px. Читается как глубина,
       а не как анимация. */
    .layered > *:nth-child(1){ animation-range:entry 0% entry 42% }
    .layered > *:nth-child(2){ animation-range:entry 0% entry 48% }
    .layered > *:nth-child(3){ animation-range:entry 0% entry 54% }
    .layered > *:nth-child(4){ animation-range:entry 0% entry 60% }
    .layered > *:nth-child(5){ animation-range:entry 0% entry 66% }

    /* СНЯТО 25.09.2026 — движение сетки.
       Не проходит проверку: смещение фона ничего не объясняет
       про услуги, это чистая атмосфера. Сетка осталась статичной. */

    /* Полосы таксономии в журнале — растут при въезде в вид. */
    .bars .fill{
      animation:bar-grow linear both;
      animation-timeline:view();
      animation-range:entry 10% entry 60%;
      transform-origin:left center;
    }
    @keyframes bar-grow{
      from{ transform:scaleX(.08) }
      to  { transform:scaleX(1) }
    }
  }
}

/* ============================================================
   ПЕРВЫЙ ЭКРАН ГЛАВНОЙ · послойный параллакс и смена слова

   Параллакс здесь — не эффект, а способ показать глубину:
   слои идут с разной скоростью, ближний быстрее дальнего.
   Классические доли — дальний 0,2× · средний 0,5× · передний 1,0×.
   Амплитуду держим маленькой: задача — ощущение объёма,
   а не заметное движение.

   Слово в строке сменяется по мере прокрутки:
   ЗАДАЧА → ВОЗМОЖНОСТЬ → РЕШЕНИЕ → РЕЗУЛЬТАТ.
   Это тот самый путь, который продаётся текстом рядом.
   Движение несёт то же содержание, что и слова, — иначе
   его не было бы вовсе.

   Без поддержки браузером видно первое слово и статичную
   композицию: ничего не прячется за анимацию, которая может
   не запуститься.
   ============================================================ */

@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){

    /* Дальний слой отключён вместе со знаком: на главной визуальный
       центр — фотография, и второй рисунок ей мешал. */

    /* Средний слой: фотография, 0,5× */
    /* Анимации первого экрана сняты. Портрет убран, а слова пути
       ведёт assets/px/heromark.js тем же прогрессом, что и знак:
       два источника движения на одном экране неизбежно расходятся. */
23%,100%{opacity:0} } 23%,42%{opacity:1} 48%,100%{opacity:0} } 48%,67%{opacity:1} 73%,100%{opacity:0} } 73%,100%{opacity:1} }
  }
}