/* Появление картинки раскрытием окна — reference/ashfall-work-image-reveal/MECHANIC.md.
   Здесь только начальное состояние до запуска (чтобы картинка не мигнула целой); движение и числа — в reveal-window.js.
   Окно — обёртка с [data-window], которая режет картинку; внутри неё картинка чуть увеличена.
   Класс rw ставит строка в <head>; если скрипт не запустился за 3 с, она его снимает — картинки видны как есть. */
html.rw [data-window]:not(.is-revealed) { clip-path: inset(10% 20% 0% 20% round var(--radius)); }
html.rw [data-window]:not(.is-revealed) img { transform: scale(1.1); }
/* слои для окна и картинки готовы до старта и остаются после конца: иначе браузер собирает их на первом кадре
   и перерисовывает картинку на последнем — заметный рывок */
html.rw [data-window] { will-change: clip-path; }
html.rw [data-window] img { will-change: transform; }
/* после раскрытия окно не исчезает, а остаётся полным — ровно таким, как последний кадр анимации. Иначе в конце картинку
   начинает резать уже скругление рамки, а отдельный слой картинки браузеры (особенно Safari) режут по-другому — угол менялся */
html.rw [data-window].is-revealed { clip-path: inset(0% 0% 0% 0% round var(--radius)); }
/* обложка первого экрана: при раскрытии на весь экран скругление окна уходит в ноль вместе со скруглением обложки (числа — из site.css) */
html.rw .ph__media[data-window] { transition: width 900ms cubic-bezier(.87, 0, .13, 1), height 900ms cubic-bezier(.87, 0, .13, 1), border-radius 900ms cubic-bezier(.87, 0, .13, 1), clip-path 900ms cubic-bezier(.87, 0, .13, 1); }
html.rw .ph.is-open .ph__media[data-window].is-revealed { clip-path: inset(0% 0% 0% 0% round 0px); }
/* сам файл картинки проявляется, когда загрузится */
html.rw [data-window] img:not(.is-loaded) { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  html.rw [data-window]:not(.is-revealed) { clip-path: inset(0% 0% 0% 0% round var(--radius)); }
  html.rw [data-window]:not(.is-revealed) img { transform: none; }
  html.rw [data-window] img:not(.is-loaded) { opacity: 1; }
}