/*
 * anim.css — рух на сайті. Окремим файлом, щоб анімації можна було вимкнути
 * однією строкою і щоб вони не змішувалися зі стилями розкладки.
 *
 * Свідомо НЕ чіпаємо те, що вже працює: підняття карток на hover уже описане
 * в генераторі категорій і в index.html. Дублювати — значить отримати два
 * правила, які сперечаються. Тут лише те, чого на сайті не було.
 *
 * Три залізні обмеження, інакше анімація псує швидкість, а не прикрашає:
 *   1. Рухаємо тільки transform і opacity. Ці дві властивості браузер віддає
 *      відеокарті; будь-яка інша (height, top, box-shadow) змушує перерахувати
 *      розкладку сторінки на кожному кадрі.
 *   2. Нічого не ховаємо у верхньому екрані. Google міряє швидкість по тому,
 *      коли з'явився найбільший видимий елемент — якщо він стартує прозорим,
 *      оцінка падає. Тому клас .reveal вішає js/anim.js і лише на те, що зараз
 *      нижче за екран.
 *   3. Хто просив систему прибрати анімації — той їх не отримує (див. кінець файлу).
 */

/* Плавний перехід між сторінками замість білого миготіння.
   Працює в браузерах на Chromium; решта просто гортає сторінку як завжди. */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation-duration: .18s; }
::view-transition-new(root) { animation-duration: .22s; }

/* Поява блоку при прокручуванні. Клас .reveal з'являється з JS — без нього
   сторінка виглядає звичайно, тому вимкнений JS нічого не ламає. */
.reveal { opacity: 0; transform: translateY(16px); }
.reveal.is-in {
    opacity: 1;
    transform: none;
    transition: opacity .5s ease-out, transform .55s cubic-bezier(.22, 1, .36, 1);
}

@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    .reveal, .reveal.is-in { opacity: 1; transform: none; transition: none; }
}