/* "Open the desk": clicking an example card morphs its preview into the full
   example page (and back). Cross-document view transitions, loaded on the
   homepage, /work and the six /work/examples/ pages. Both pages must opt in,
   so links from anywhere else navigate as normal. Browsers without support
   navigate as normal. Reduced motion: the opt-in is skipped entirely. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

/* Destination: each example page has exactly one of these containers. The
   card side gets the same name from example-transitions.js, only on the card
   being opened, so one element carries it at a time. */
.ex-temco-owners-desk,
.ex-bramblewood-heating,
.fhd-window,
.ex-hartwell-pine-cpas,
#jrs-app,
.lsk-window {
  view-transition-name: ex-desk;
}

::view-transition-group(ex-desk) {
  animation-duration: 0.55s;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
::view-transition-old(ex-desk),
::view-transition-new(ex-desk) {
  /* Keep proportions while the small preview grows into the full desk. */
  height: 100%;
  object-fit: cover;
  object-position: top left;
}
/* Fade the small card out quickly so its title does not ghost over the desk. */
::view-transition-old(ex-desk) {
  animation-duration: 0.2s;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.3s;
}