/* fx.css · page-change/shared-image, the clicked photograph carries across to the next page · owner: Lizzy East · all rights reserved */

/* Cross-page View Transitions, pure CSS: both pages carry
   <html data-fx-page="shared-image">, and a photograph marked data-fx-photo="2" on one
   page grows into the one marked data-fx-photo="2" on the next while the rest of the
   page cross-fades. Only when motion is allowed; other browsers simply load the page. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  html[data-fx-page="shared-image"] [data-fx-photo] { view-transition-class: fx-photo; }
  html[data-fx-page="shared-image"] [data-fx-photo="1"] { view-transition-name: fx-photo-1; }
  html[data-fx-page="shared-image"] [data-fx-photo="2"] { view-transition-name: fx-photo-2; }
  html[data-fx-page="shared-image"] [data-fx-photo="3"] { view-transition-name: fx-photo-3; }
  html[data-fx-page="shared-image"] [data-fx-photo="4"] { view-transition-name: fx-photo-4; }
  html[data-fx-page="shared-image"] [data-fx-photo="5"] { view-transition-name: fx-photo-5; }
  html[data-fx-page="shared-image"] [data-fx-photo="6"] { view-transition-name: fx-photo-6; }
  html[data-fx-page="shared-image"]::view-transition-group(*) {
    animation-duration: var(--fx-page-dur, 560ms);
    animation-timing-function: var(--fx-ease);
  }
  /* The old page gets out of the way quickly, so the photograph is what moves. */
  html[data-fx-page="shared-image"]::view-transition-old(root) { animation: fx-shared-out 220ms var(--fx-ease) both; mix-blend-mode: normal; }
  html[data-fx-page="shared-image"]::view-transition-new(root) { animation: fx-shared-in 380ms var(--fx-ease) 120ms both; mix-blend-mode: normal; }
  /* The photograph keeps its proportions while its frame changes shape. */
  html[data-fx-page="shared-image"]::view-transition-old(*.fx-photo),
  html[data-fx-page="shared-image"]::view-transition-new(*.fx-photo) {
    height: 100%;
    object-fit: cover;
    overflow: clip;
  }
  /* Photographs with no partner on the other page leave (or arrive) with the page. */
  html[data-fx-page="shared-image"]::view-transition-old(*.fx-photo):only-child { animation: fx-shared-out 220ms var(--fx-ease) both; }
  html[data-fx-page="shared-image"]::view-transition-new(*.fx-photo):only-child { animation: fx-shared-in 380ms var(--fx-ease) 120ms both; }
}

/* A detail page may hold several shots (data-fx-shot); the link's #fragment picks the
   one it shows, the first by default. Browsers without :has() show them all. */
:has(> [data-fx-shot]:target) > [data-fx-shot]:not(:target),
:not(:has(> [data-fx-shot]:target)) > [data-fx-shot] ~ [data-fx-shot] { display: none; }
@keyframes fx-shared-out { to { opacity: 0; } }
@keyframes fx-shared-in { from { opacity: 0; } }