/* =========================================================================
   anim.css — эффекты при прокрутке: появление блоков, раскрытие картинок,
   параллакс, поведение шапки.

   Всё живёт под классом .khz-anim на <html> — его ставит короткий инлайновый
   скрипт в <head> (header.php) до первой отрисовки. Если JavaScript выключен,
   класса нет: начальные состояния не применяются, контент виден сразу.
   Класс .is-in навешивает js/main.js через IntersectionObserver.

   Разметку эффекты не меняют: селекторы опираются на уже существующие классы,
   поэтому структура страниц совпадает со статикой-эталоном (_check/wpdiff.py).

   Отключить эффекты целиком: убрать 'anim' из массива $css в functions.php.
   ========================================================================= */

/* ------------------------------------------------- появление блоков */
/* Сдержанно: сдвиг 24px и 0.55с. Таймлайн сюда не входит — у .timeline__item
   своя логика (is-active + размытие неактивных), см. components.css. */
.khz-anim .h-section,
.khz-anim .projects-light__head .link-underline,
.khz-anim .page-title,
.khz-anim .h-block,
.khz-anim .about__lead,
.khz-anim .about__body,
.khz-anim .work-card,
.khz-anim .project-card,
.khz-anim .intl-card,
.khz-anim .why-card,
.khz-anim .connect__item,
.khz-anim .detail-text__block,
.khz-anim .service-hero__text {
  opacity: 0;
  transform: translateY(2.4rem);
  transition: opacity .55s cubic-bezier(.22,.61,.36,1),
              transform .55s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--khz-i, 0) * .07s);
}

.khz-anim .h-section.is-in,
.khz-anim .projects-light__head .link-underline.is-in,
.khz-anim .page-title.is-in,
.khz-anim .h-block.is-in,
.khz-anim .about__lead.is-in,
.khz-anim .about__body.is-in,
.khz-anim .work-card.is-in,
.khz-anim .project-card.is-in,
.khz-anim .intl-card.is-in,
.khz-anim .why-card.is-in,
.khz-anim .connect__item.is-in,
.khz-anim .detail-text__block.is-in,
.khz-anim .service-hero__text.is-in {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------- раскрытие картинок */
/* Шторка снизу вверх. Обёртки уже с overflow: hidden, clip-path им не мешает. */
.khz-anim .project-card__media,
.khz-anim .work-card__media,
.khz-anim .service-hero__media,
.khz-anim .gallery__item {
  clip-path: inset(100% 0 0 0);
  transition: clip-path .7s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--khz-i, 0) * .07s);
}
.khz-anim .project-card__media.is-in,
.khz-anim .work-card__media.is-in,
.khz-anim .service-hero__media.is-in,
.khz-anim .gallery__item.is-in {
  clip-path: inset(0 0 0 0);
}

/* Зум при появлении — только там, где ховер не двигает ту же картинку.
   У .project-card и .work-card ховер уже анимирует transform у img,
   поэтому им достаётся одна шторка: иначе два правила спорят за одно свойство. */
.khz-anim .intl-card__frame,
.khz-anim .service-hero__media img {
  transform: scale(1.06);
  transition: transform .9s cubic-bezier(.22,.61,.36,1);
}
.khz-anim .intl-card.is-in .intl-card__frame,
.khz-anim .service-hero__media.is-in img {
  transform: scale(1);
}

/* ------------------------------------------------------- параллакс */
/* Смещения считает js/main.js и кладёт в переменные — здесь только их
   применение, чтобы вся арифметика жила в одном месте. */
.khz-anim .hero__bg,
.khz-anim .about__portrait {
  will-change: transform;
  transform: translate3d(0, var(--khz-shift, 0px), 0);
}
.khz-anim .footer-wm {
  will-change: transform;
  transform: translate3d(var(--khz-shift-x, 0px), 0, 0);
}
/* Баннер проекта медленно наезжает по мере прокрутки блока. */
.khz-anim .video-block img {
  will-change: transform;
  transform: scale(var(--khz-zoom, 1));
}

/* ---------------------------------------------------------- шапка */
/* Прячется при движении вниз, возвращается при движении вверх.
   Позицию (sticky на внутренних страницах, fixed на главной) ставит JS —
   она зависит от того, лежит ли шапка в потоке.
   Только на десктопе: ниже 1024px классы не ставятся вовсе (main.js), потому
   что на маленьком экране выезжающая панель читается как непрошеное меню. */
.khz-anim .site-header {
  transition: transform .35s ease, background-color .35s ease;
}
.khz-anim .site-header.is-stuck {
  background: rgba(8, 7, 10, .92);
  backdrop-filter: blur(6px);
}
.khz-anim .site-header.is-hidden {
  transform: translateY(-100%);
}

/* --------------------------------------- уважение к системной настройке */
/* base.css глушит длительности; здесь убираем сами смещения, иначе элементы
   так и остались бы сдвинутыми и прозрачными. */
@media (prefers-reduced-motion: reduce) {
  .khz-anim .h-section,
  .khz-anim .projects-light__head .link-underline,
  .khz-anim .page-title,
  .khz-anim .h-block,
  .khz-anim .about__lead,
  .khz-anim .about__body,
  .khz-anim .work-card,
  .khz-anim .project-card,
  .khz-anim .intl-card,
  .khz-anim .why-card,
  .khz-anim .connect__item,
  .khz-anim .detail-text__block,
  .khz-anim .service-hero__text {
    opacity: 1;
    transform: none;
  }

  .khz-anim .project-card__media,
  .khz-anim .work-card__media,
  .khz-anim .service-hero__media,
  .khz-anim .gallery__item {
    clip-path: none;
  }

  .khz-anim .intl-card__frame,
  .khz-anim .service-hero__media img,
  .khz-anim .hero__bg,
  .khz-anim .about__portrait,
  .khz-anim .footer-wm,
  .khz-anim .video-block img {
    transform: none;
  }

  .khz-anim .site-header.is-hidden { transform: none; }
}