/* ==========================================================================
   Into a project: the project page side (pairs with styles/zoom.css. Every project page links this file).
   The picture from the table grows into this full-screen opening; the home
   page pushes past the camera and fades; then the shade and the words of the
   opening arrive, and the rest of the page with them.
   ========================================================================== */
@view-transition { navigation: auto; types: cw-zoom; }
.wb-hero__image { view-transition-name: cw-hero; }
.wb-hero__veil { view-transition-name: cw-hero-veil; }
.wb-hero__content { view-transition-name: cw-hero-text; }
/* A case page whose opening is a film rather than a picture (One Pinch) */
.sx-hero__film { view-transition-name: cw-hero; }
.sx-hero__veil { view-transition-name: cw-hero-veil; }
.sx-hero__say { view-transition-name: cw-hero-text; }

html:active-view-transition-type(cw-zoom)::view-transition-old(root) {
  animation: cw-push 700ms cubic-bezier(0.65, 0, 0.35, 1) both;
}
html:active-view-transition-type(cw-zoom)::view-transition-new(root) {
  animation: cw-in 320ms linear 560ms both;
}
html:active-view-transition-type(cw-zoom)::view-transition-group(cw-hero) {
  animation-duration: 820ms;
  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-new(cw-hero-veil) {
  animation: cw-in 420ms linear 620ms both;
}
html:active-view-transition-type(cw-zoom)::view-transition-new(cw-hero-text) {
  animation: cw-rise 640ms cubic-bezier(0.16, 1, 0.3, 1) 760ms both;
}
@keyframes cw-push { to { opacity: 0; transform: scale(1.14); } }
@keyframes cw-in { from { opacity: 0; } }
@keyframes cw-rise { from { opacity: 0; transform: translate3d(0, 24px, 0); } }

/* 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 page as it rushes past: the dark of the opening */
html:active-view-transition-type(cw-zoom)::view-transition { background: #151513; }