/* ==========================================================================
   Into a project: the home page side (pairs with styles/zoom-project.css; scripts/zoom.js names the picture).
   Going: the picture grows into the project's full-screen opening while the
   table rushes past (the project page draws that part). Coming back: the
   opening shrinks into its place on the table and the table settles back.
   ========================================================================== */
@view-transition { navigation: auto; types: cw-zoom; }
/* Coming back from a project */
html:active-view-transition-type(cw-zoom)::view-transition-old(root) {
  animation: cw-out 260ms linear both;
}
html:active-view-transition-type(cw-zoom)::view-transition-new(root) {
  animation: cw-settle 760ms cubic-bezier(0.65, 0, 0.15, 1) both;
}
html:active-view-transition-type(cw-zoom)::view-transition-group(cw-hero) {
  animation-duration: 760ms;
  animation-timing-function: cubic-bezier(0.65, 0, 0.15, 1);
}
html:active-view-transition-type(cw-zoom)::view-transition-old(cw-hero) { animation: none; opacity: 0; }
html:active-view-transition-type(cw-zoom)::view-transition-new(cw-hero) {
  animation: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
html:active-view-transition-type(cw-zoom)::view-transition-old(cw-hero-veil),
html:active-view-transition-type(cw-zoom)::view-transition-old(cw-hero-text) {
  animation: cw-out 200ms linear both;
}
@keyframes cw-out { to { opacity: 0; } }
@keyframes cw-settle { from { opacity: 0; transform: scale(1.14); } }

/* The bar stays put through the zoom: it is on both pages in the same place,
   so it is lifted out of the page that rushes past. Only its contents change,
   the new ones fading in over the old. */
.bar { view-transition-name: site-bar; }
html:active-view-transition-type(cw-zoom)::view-transition-group(site-bar) { animation-duration: 820ms; }
html:active-view-transition-type(cw-zoom)::view-transition-old(site-bar) { animation: none; }
html:active-view-transition-type(cw-zoom)::view-transition-new(site-bar) {
  animation: cw-bar-in 360ms linear both;
  mix-blend-mode: normal;
}
@keyframes cw-bar-in { from { opacity: 0; } }

/* What shows behind the pages while they swap: the home page's own ground */
html:active-view-transition-type(cw-zoom)::view-transition { background: var(--ink); }