/* ============================================================================
   Анимации: три варианта на выбор заказчика.

   Как устроено. Режим задаётся атрибутом на <html>: data-anim="minimal",
   "stagger", "expressive" или "off". Переключение — только этим атрибутом,
   код анимаций один и тот же.

   Чтобы клиент мог выбрать, все три варианта собраны на одной странице:
   сайт\demo\animations.html — там переключатель и образцы.

   ВАЖНО ПРО ДОСТУПНОСТЬ. Скрывать содержимое до появления можно только
   тогда, когда скрипты работают: иначе без JavaScript страница останется
   пустой. Поэтому все «невидимые» состояния висят на классе .anim-on,
   который ставит сам скрипт. Нет скрипта — нет класса — всё видно сразу.

   Системная настройка «уменьшить движение» анимацию не отключает —
   так решил владелец сайта (см. конец файла).
   ========================================================================== */

/* --- Общая основа -------------------------------------------------------- */

.anim-on[data-anim] .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.anim-on[data-anim] .reveal.is-in { opacity: 1; transform: none; }

/* Линии-разделители «прорисовываются» сверху вниз */
.anim-on[data-anim] .draw-line::after {
  content: "";
  display: block;
  height: 1px;
  background: var(--hair-strong);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .8s cubic-bezier(.22, .61, .36, 1);
}

.anim-on[data-anim] .draw-line.is-in::after { transform: scaleX(1); }

/* ==========================================================================
   Вариант 1. Минимальный — строгий
   Просто мягкое появление. Ничего не двигается, ничего не отвлекает.
   ========================================================================== */

.anim-on[data-anim="minimal"] .reveal { transition-duration: .45s; }

/* ==========================================================================
   Вариант 2. Ступенчатый — сдержанно-техничный
   Блоки появляются по очереди, цифры досчитываются, линии прорисовываются.
   Живее, но по-прежнему без «прыжков».
   ========================================================================== */

.anim-on[data-anim="stagger"] .grid > * { transition-delay: var(--reveal-delay, 0ms); }

/* Ступеньки задаёт скрипт через --reveal-delay: 0, 60, 120 мс и так далее */

/* ==========================================================================
   Вариант 3. Выразительный
   Тот же ступенчатый показ плюс: лёгкое движение фотографии на первом экране,
   подъём карточек при наведении и полоса прочитанного сверху.
   ========================================================================== */

.anim-on[data-anim="expressive"] .hero__media img {
  transform: scale(1.04) translateY(var(--hero-shift, 0px));
  transition: transform .2s linear;
  will-change: transform;
}

.anim-on[data-anim="expressive"] .feature,
.anim-on[data-anim="expressive"] .service-card,
.anim-on[data-anim="expressive"] .project-card {
  transition: transform .25s cubic-bezier(.22, .61, .36, 1), border-color .2s ease;
}

.anim-on[data-anim="expressive"] .feature:hover,
.anim-on[data-anim="expressive"] .service-card:hover { transform: translateY(-3px); }

/* Полоса прочитанного — тонкая красная линия сверху */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--red);
  z-index: 999;
  pointer-events: none;
}

.anim-on[data-anim="expressive"] .scroll-progress { display: block; }
.scroll-progress { display: none; }

/* «Уменьшить движение» сознательно не отключает анимацию: так решил владелец сайта. */