/* ==========================================================================
   Появление блоков при прокрутке

   Блок помечается в разметке атрибутом data-reveal. Спрятан он этими
   стилями, а показывает его js/components/reveal.js — вешает класс
   is-revealed, когда блок входит в кадр.

   Значение атрибута — набор слов, их можно сочетать:

     data-reveal              блок всплывает: прозрачность + сдвиг снизу
     data-reveal="fade"       только прозрачность, без сдвига
     data-reveal="children"   появляется не сам блок, а его прямые дети —
                              по очереди, задержка --reveal-i × --reveal-step

   Рядом может стоять data-reveal-i="2" — номер блока в очереди. Он нужен на
   первом экране, где всё попадает в кадр разом: шапка и hero проявляются по
   порядку, а не одной вспышкой. Ниже по странице номера не нужны — там блоки
   и так разведены прокруткой.

   Сдвиг маленький, а кривая с быстрым началом и долгим выходом: движение
   должно читаться боковым зрением, а не тянуть взгляд на себя.

   На первом экране почти везде стоит "fade": крупная графика — фотографии во
   весь кадр, локап, матовые панели — от сдвига выглядит тяжело. Всплывает
   только текст и кнопки.

   Всё спрятано внутри @media (scripting: enabled): при выключенном скрипте
   и в браузерах, которые этот запрос не знают, правила не применяются
   вовсе — блоки просто стоят на своих местах видимыми.
   ========================================================================== */

@media (scripting: enabled) {
  :root {
    --reveal-shift: 1.5rem;
    --reveal-duration: 0.8s;
    --reveal-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --reveal-step: 90ms;
  }

  /* Исходное состояние: сам блок либо, для "children", каждый его ребёнок */
  [data-reveal]:not([data-reveal~="children"]),
  [data-reveal~="children"] > * {
    opacity: 0;
    transform: translateY(var(--reveal-shift));
    transition:
      opacity var(--reveal-duration) var(--reveal-ease),
      transform var(--reveal-duration) var(--reveal-ease);
    transition-delay: calc(var(--reveal-i, 0) * var(--reveal-step));
  }

  /* Вариант "fade": сдвига нет, остаётся только проявление */
  [data-reveal~="fade"]:not([data-reveal~="children"]),
  [data-reveal~="fade"][data-reveal~="children"] > * {
    transform: none;
  }

  [data-reveal].is-revealed:not([data-reveal~="children"]),
  [data-reveal~="children"].is-revealed > * {
    opacity: 1;
    transform: none;
  }
}

/*
   Просьба убрать анимацию: показываем сразу. Глобальное правило в reset.css
   и так сжимает переходы почти в ноль, но здесь важнее, что элемент вообще
   не начинает свой путь из прозрачности.
*/
@media (scripting: enabled) and (prefers-reduced-motion: reduce) {
  [data-reveal]:not([data-reveal~="children"]),
  [data-reveal~="children"] > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}