/* fx.css · page-change/rise, the new page rises into place · owner: Lizzy East · all rights reserved */

/* Cross-page View Transitions, pure CSS: both pages carry <html data-fx-page="rise">.
   Only when motion is allowed; other browsers simply load the next page. Mark the
   site's menu with data-fx-keep and it holds still while the page changes. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  html[data-fx-page="rise"]::view-transition-old(root) { animation: fx-page-rise-out var(--fx-page-dur, 360ms) var(--fx-ease) both; mix-blend-mode: normal; }
  html[data-fx-page="rise"]::view-transition-new(root) { animation: fx-page-rise-in var(--fx-page-dur, 360ms) var(--fx-ease) both; mix-blend-mode: normal; }
}
[data-fx-keep] { view-transition-name: fx-keep; }
@keyframes fx-page-rise-out { to { opacity: 0; } }
@keyframes fx-page-rise-in { from { opacity: 0; translate: 0 32px; } }