/* Card -> project-page transition (cross-document view transitions; browsers
   without them simply navigate as before). The clicked card and its twin on the
   project page share the name "hero", so the picture glides up into place. */
@view-transition { navigation: auto; }

/* the header is the same on both pages: keep it still while the rest fades */
.navigation { view-transition-name: site-nav; }

/* "hero-2" is the other half of a pair shown side by side: the two travel as a block */
::view-transition-group(hero),
::view-transition-group(hero-2) {
  animation-duration: .65s;
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
  border-radius: 16px;
}
/* the card and the first slot can differ in shape: crop instead of stretching */
::view-transition-old(hero),
::view-transition-new(hero),
::view-transition-old(hero-2),
::view-transition-new(hero-2) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Same picture at both ends (html.vt-same, set on arrival): carry the one that was
   already on screen all the way, rather than cross-fading into a copy that may
   still be loading. The live picture takes over when the glide ends. The partner
   of a pair is always found by its own file, so it is always the same picture. */
:root.vt-same::view-transition-old(hero),
::view-transition-old(hero-2) { animation: none; opacity: 1; }
:root.vt-same::view-transition-new(hero),
::view-transition-new(hero-2) { animation: none; opacity: 0; }

::view-transition-old(root),
::view-transition-new(root) { animation-duration: .35s; animation-timing-function: ease-out; }

/* Back on the grid from a project page (html.grid-return): Webflow's scroll-in
   reveals would make the cards around the landing spot fade in late */
html.grid-return [data-w-id] { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* Case sidebar entrance (js/text-in.js): hidden until the script has split the
   text, so nothing flashes in its final place first. Layout is kept for measuring. */
html.text-wait .case-side .case-title,
html.text-wait .case-side .case-sub,
html.text-wait .case-side .case-ext { visibility: hidden; }
.ti-word { display: inline-block; white-space: nowrap; }
/* the mask reaches past the letter box so accents and descenders are not clipped */
.ti-mask { display: inline-block; overflow: hidden; vertical-align: top; padding: .14em 0 .2em; margin: -.14em 0 -.2em; }
.ti-char { display: inline-block; }
.ti-line { display: block; }