/* fx.css · page-change/wipe, the new page is uncovered by a wipe · owner: Lizzy East · all rights reserved */

/* Cross-page View Transitions, pure CSS: both pages carry <html data-fx-page="wipe">.
   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="wipe"]::view-transition-old(root) { animation: none; mix-blend-mode: normal; }
  html[data-fx-page="wipe"]::view-transition-new(root) { animation: fx-page-wipe-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-wipe-in { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }