/* ══════════════════════════════════════════════════════════════════════
   АНИМАЦИИ ГЛАВНОЙ — единый файл параметров.

   Грузится ЧЕРЕЗ $preStylesheets, ДО homepage.css (index.php) — обычный
   <link>, версионированный тем же filemtime-приёмом, что и другие файлы
   сайта (см. комментарий у $preStylesheets в includes/header.php).

   ЧАСТЬ 1 (ниже) — ЖИВЫЕ CSS-переменные: реально подставляются через var()
   в homepage.css/index.php, менять числа нужно ТОЛЬКО здесь.

   ЧАСТЬ 2 (в конце файла) — ТОЛЬКО описание, без живых переменных:
   слайдеры/карусели, чьи тайминги — JS-константы/админ-настройки, не
   голые CSS-числа. */

:root{
  /* ── .reveal-item (shared.css/homepage.css — общий IntersectionObserver
     initRevealOnScroll(), site.js) — базовый fade+сдвиг вверх. Реально
     применяется только к #sec-b3 .proj-grid .reveal-item (Projects) —
     тот использует СВОИ доп. переменные ниже (translateX+blur поверх
     этой базы), см. .proj-reveal--*. */
  --reveal-move-y: 24px;
  --reveal-duration: .35s;

  /* ── #sec-b3 .proj-grid .reveal-item (карточки Completed Projects) —
     появление сбоку (влево у чётных/--left, вправо у нечётных/--right) с
     блюром, поверх базового .reveal-item выше. */
  --proj-reveal-move-x: 70px;
  --proj-reveal-blur: 16px;
  --proj-reveal-duration: .375s;

  /* ── .why-reveal (карточки #sec-b2 Why Clients Choose) — initWhyCardsReveal()
     в index.php. В отличие от .reveal-item/proj-reveal — БЕЗ opacity в
     анимации (карточка видна сразу), только сдвиг вверх + блюр, каждый со
     своей длительностью. --why-reveal-move-y-mobile — переопределяется в
     media-блоке ниже (≤980px), сама .why-reveal в homepage.css переопределений
     не содержит — только var(). */
  --why-reveal-move-y: 24px;
  --why-reveal-blur: 8px;
  --why-reveal-move-duration: .25s;
  --why-reveal-blur-duration: .15s;

  /* ── #sec-b2/#sec-how .section-title (заголовки Why Clients Choose и How
     We Work) — один набор переменных на оба (значения совпадают) — сдвиг
     вправо-налево + блюр, initWhyCardsReveal()/initHowSteps(). Подзаголовка
     ни у одного из двух разделов сейчас в разметке нет — переменной под
     него тоже нет. */
  --section-title-move-x: 50px;
  --section-title-move-duration: .2s;
  --section-title-blur: 8px;
  --section-title-blur-duration: .15s;

  /* ── .how-card + .how-card-text h3/p (карточки #sec-how How We Work) —
     initHowSteps() в index.php. Появление карточки — блюр+выезд справа (c
     opacity, карточка действительно невидима до появления); текст внутри
     карточки — отдельный чуть более мелкий сдвиг с собственной задержкой
     (стаггер .12s/.22s зашит в homepage.css, не вынесен — двух чисел мало,
     чтобы оправдывать переменные). */
  --how-card-move-x: 70px;
  --how-card-blur: 16px;
  --how-card-duration: .375s;
  --how-card-text-move-x: 22px;

  /* ── .how-row-num-wrap (кружок-номер шага, #sec-how) — покоящееся
     состояние (маленький, размытый, блёклый) до того, как курсор (середина
     окна) дойдёт до его позиции, initHowSteps(). */
  --how-num-blur: 6px;
  --how-num-scale-dormant: .55;
  --how-num-opacity-dormant: .35;
  --how-num-duration: .25s;

  /* ══════════════════════════════════════════════════════════════════════
     HERO — пин-скролл (.hero фиксирован, .hero-spacer резервирует место в
     потоке, .hero-lift — непрозрачная обёртка следующего контента, наезжает
     снизу поверх hero). initHeroPinScroll() в index.php каждый кадр (rAF)
     считает для каждого элемента ниже "процент перекрытия" — какая доля ЕГО
     СОБСТВЕННОЙ высоты уже закрыта снизу наезжающим .hero-lift — и линейно
     интерполирует нужное CSS-свойство между значением на cover-start (0%
     эффекта) и cover-end (100% эффекта, дальше — обратно к исходному,
     "отмена", если явно не сказано иное). Пороги читаются JS ОДИН РАЗ при
     инициализации (getComputedStyle), сам расчёт — на каждый кадр. */

  /* (а) .hero-pitch (текст+CTA) + .hprogress (полоски-таймер слайдов) —
     перекрытие считается ОТ САМОГО .hero-pitch. На cover-end полностью
     скрывается (opacity 0) и остаётся скрытым до конца страницы. */
  --hero-pitch-cover-start: .1;
  --hero-pitch-cover-end: 1;
  --hero-pitch-blur-max: 8px;
  --hero-pitch-scale-min: .95;
  --hero-pitch-shift-max: 10px;

  /* (б) карусель (.hero-rails десктоп / .hero-rail-mobile мобильный) —
     блюр+масштаб(+сдвиг, только десктоп), перекрытие считается ОТ САМОЙ
     карусели. После cover-end блюр/масштаб ОТМЕНЯЮТСЯ (мгновенный возврат
     к блюру 0 / масштабу 1) — сдвиг, наоборот, ДЕРЖИТСЯ (по прямому
     запросу — откатывается только реальной обратной прокруткой, не
     обнуляется вместе с блюром). Пороги одинаковые на мобильном и
     десктопе; --hero-carousel-shift-max — горизонтальный сдвиг ТОЛЬКО
     десктопной пары .hero-rails (на мобильной ленте .hero-rail-mobile
     сдвига нет, только блюр+масштаб). */
  --hero-carousel-cover-start: .1;
  --hero-carousel-cover-end: 1;
  --hero-carousel-blur-max: 8px;
  --hero-carousel-scale-min: .95;
  --hero-carousel-shift-max: 140px;

  /* (в) фон hero-фото (#hslides, .hslide/.hshade — самый нижний слой,
     z-index:1) — блюр. Начало отсчитывается ОТ ПЕРЕКРЫТИЯ КАРУСЕЛИ
     (--hero-bg-cover-start), конец — от перекрытия САМОГО #hslides
     (--hero-bg-cover-end, разные элементы-ориентиры у начала и конца).
     После cover-end эффект ОТМЕНЯЕТСЯ (блюр мгновенно возвращается к 0). */
  --hero-bg-cover-start: .5;
  --hero-bg-cover-end: 1;
  --hero-bg-blur-max: 8px;

  /* (г) движение карусели (.hero-rail-track десктоп / .hero-rail-mobile-track
     мобильный) — БЕЗ порогов, крутится непрерывно с загрузки страницы,
     независимо от перекрытия. Десктоп — пара лент в разные стороны, две
     разные скорости; мобильный/планшетный — одна горизонтальная лента. */
  --hero-rail-desktop-duration: 70s;
  --hero-rail-desktop-duration-reverse: 110s;
  --hero-rail-mobile-duration: 150s;

  /* (д) .nav (шапка) — стиль "стеклянной панели при скролле", перекрытие
     считается ОТ КАРУСЕЛИ. Линейная интерполяция cover-start→cover-end
     управляет --p (0..1) у .nav (shared.css) — фон/blur/отступы/цвет
     текста. После cover-end состояние ДЕРЖИТСЯ (не отменяется само по
     себе) — уменьшается обратно только при реальной обратной прокрутке,
     т.к. --p пересчитывается из живого перекрытия каждый кадр.
     --hero-brand-blur-max — логотип В САМОМ МЕНЮ (.brand-logo, header.php),
     те же пороги/тот же --p, что и у остальной плашки .nav, но ОБРАТНОЕ
     направление: 8px блюра при p=0 (в начале не виден чётко), 0px к p=1
     (полностью проскроллено) — этот эффект УМЕНЬШАЕТСЯ по мере роста t, а
     не растёт. Прозрачность — та же логика по прямому запросу: p=0 —
     opacity:0 (логотип полностью скрыт в начале, не просто размыт), p=1 —
     opacity:1 (проявляется целиком к концу анимации меню, вместе со снятием
     блюра). Только десктоп (shared.css), только главная страница
     (window.heroNavP есть только там, initNavScroll в site.js). */
  --hero-nav-cover-start: .7;
  --hero-nav-cover-end: 1;
  --hero-brand-blur-max: 8px;

  /* (е) .hero-logo (логотип над hero-pitch, только десктоп) — перекрытие
     считается ОТ САМОГО .hero-logo. Сдвиг влево ДЕРЖИТСЯ (по прямому
     запросу — откатывается только реальной обратной прокруткой к самому
     верху, не обнуляется на cover-end). Блюр — своя, отдельная логика: НЕ
     завязан на cover-end самого логотипа, а снимается, когда .usp-strip
     целиком уходит выше верхней границы окна (обычный viewport-чек
     rect.bottom<0, не coverEdge), и возвращается обратно, если usp-strip
     снова показалась в кадре при обратной прокрутке.
     --hero-logo-shift-max — верхняя граница сдвига, но не гарантированное
     значение: JS (index.php) обрезает его каждый кадр так, чтобы левый
     край логотипа не ушёл левее левого края страницы (x=0), по прямому
     запросу — на узких десктопных окнах реальный сдвиг может быть меньше
     300px. */
  --hero-logo-cover-start: .1;
  --hero-logo-cover-end: 1;
  --hero-logo-blur-max: 8px;
  --hero-logo-shift-max: 300px;

  /* Общая длительность CSS-transition для сглаживания между кадрами rAF
     (не длительность самой анимации — та управляется положением скролла,
     не таймером) — используется у filter/opacity/transform всех групп
     выше. */
  --hero-cover-smoothing: .1s;
}
@media(max-width:980px){
  :root{
    --why-reveal-move-y: 16px;
    --section-title-move-x: 32px;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   ЧАСТЬ 2 — СЛАЙДЕРЫ/КАРУСЕЛИ (только описание, живых переменных нет —
   см. пояснение вверху файла). ══════════════════════════════════════════

   • Смена фото hero (.hslide, homepage.css) — кроссфейд opacity 0→1 за
     .6s ease. Автопрокрутка — JS-таймер HERO_INTERVAL_MS (index.php),
     значение из admin/adm-settings.php → site_settings.hero_autoplay_speed_ms
     (уже регулируемая настройка). Полоски-таймер под текстом — .hprogress/
     .hprog-fill, та же HERO_INTERVAL_MS через --hprog-dur.

   • Лента USP (.usp-track--marquee, @keyframes usp-marquee, homepage.css)
     — бесконечная горизонтальная прокрутка, 38s linear, захардкожено в
     самом keyframe-правиле, не вынесено никуда.

   • Рельса образцов MDF (.rail--sample, InfiniteCarousel, initSampleRail()
     в index.php) — автопрокрутка карточек, JS-таймер SAMPLE_AUTOPLAY_MS,
     значение из той же site_settings (carousel_autoplay_speed_ms) — тоже
     уже регулируемая настройка. Полоска-таймер — .rail-progress-fill.

   • Hero pin-scroll — непрерывный расчёт перекрытия каждого элемента
     каждый кадр (0..1 по факту скролла) — JS-логика, не CSS-число,
     вынести в чистый CSS нельзя по своей природе; сами пороги/максимумы —
     переменные выше (группы (а)-(д) в блоке HERO). */