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

   ЗАЧЕМ. Секции просто были - страница выкладывалась целиком, и
   прокрутка ощущалась как перелистывание готовых экранов. Салон
   продаёт замедление, и страница должна не показываться, а
   раскрываться: блок всплывает снизу и проявляется, как будто
   выступает из полумрака.

   ПОЧЕМУ СКРЫТИЕ ВКЛЮЧАЕТ СКРИПТ, А НЕ СТИЛИ. Правило записано под
   классом has-reveal, который ставит скрипт, и только если браузер
   умеет следить за пересечением. Пропиши скрытие прямо в стилях -
   и при отключённом или упавшем скрипте посетитель получит пустую
   страницу с невидимым текстом. Для сайта, который живёт поиском,
   это ещё и прямой риск: скрытый текст поисковые системы разбирают
   отдельно и недоброжелательно.

   ПОЧЕМУ ТОЛЬКО СМЕЩЕНИЕ И ПРОЗРАЧНОСТЬ. Обе величины браузер считает
   на видеокарте и не пересобирает раскладку. Появление через height
   или margin дёргало бы всю страницу на каждом кадре. */
.has-reveal [data-reveal]{opacity:0;transform:translateY(18px);
  transition:opacity var(--dur-4) var(--ease),transform var(--dur-4) var(--ease)}
.has-reveal [data-reveal].is-revealed{opacity:1;transform:none}

/* Внутренние элементы всплывают по очереди, а не разом: очередь читается
   как движение слева направо и сверху вниз, то есть в том же порядке,
   в каком человек и так читает. Задержка накапливается скриптом
   в переменной - в стилях нельзя посчитать номер элемента в списке,
   собранном из данных. */
.has-reveal [data-reveal]{transition-delay:var(--reveal-wait,0ms)}

/* Плитки внутри горизонтальной ленты на телефоне всплывают только
   прозрачностью, без сдвига. Лента - контейнер прокрутки, а плитки за её
   правым краем ещё не проявлены и сидят на 18 px ниже: лента получала
   вертикальное переполнение, и на iPhone её можно было утянуть пальцем
   вниз (15.09). overflow-y:hidden этого не запрещает - касание в Safari
   всё равно прокручивает скрытую ось, если есть что прокручивать. */
@media (max-width:760px){
  .has-reveal .rituals > [data-reveal]{transform:none}
}


/* Проявление фотографии по загрузке.

   Раньше догрузившаяся картинка возникала мгновенно - на странице,
   где всё остальное движется медленно, это единственный оставшийся
   рывок. Теперь она проступает за 0.8 секунды.

   ПОЧЕМУ КЛАСС СТАВИТ СКРИПТ. Ровно та же причина, что у появления
   блоков выше: прозрачность, прописанная прямо в стилях, при упавшем
   скрипте оставила бы страницу без картинок навсегда.

   ПОМЕЧАЮТСЯ НЕ ВСЕ. Только те, что на момент запуска скрипта ещё
   не загружены. Картинке из первого экрана проявляться нечего - она
   уже на месте, и лишний переход только столкнулся бы со всплытием
   её блока. */
.has-fade img[data-fade]{opacity:0;transition:opacity var(--dur-3) var(--ease)}
.has-fade img[data-fade].is-loaded{opacity:1}