/* card-morph: the timing of the card-to-page morph (card-morph.js gives the names). From
   apps/emiomer/public/assets/site.css and apps/lash-room/public/assets/site.css (feature 4), 25.10.2026.
   Every page that has cards or the page they open needs this file. Chrome, Edge and Safari 18.2+ play it; other
   browsers just change pages.
   Its root rules are scoped to html.vt-morph, which card-morph.js sets only while a morph runs. Two unscoped
   ::view-transition-*(root) rules (this one and page-fade's, say) silently override each other: Lash Room once got a
   grey wash from exactly that. page-fade steps aside under html.vt-morph, so the two can share a page.
   Tune a site by overriding these tokens in its own CSS. */
:root {
  --km-dur: .6s;                          /* the photo's flight */
  --km-ease: cubic-bezier(.16, 1, .3, 1); /* expo.out */
}
@media (min-width: 0px) {
  @view-transition { navigation: auto; }
  /* While the photo flies, the rest of the page cross-fades quickly behind it. */
  .vt-morph::view-transition-old(root) { animation: km-out .25s cubic-bezier(.5, 0, .75, 0) both; }
  .vt-morph::view-transition-new(root) { animation: km-in .45s var(--km-ease) both; }
  ::view-transition-group(morph-photo),
  ::view-transition-group(morph-title) { animation-duration: var(--km-dur); animation-timing-function: var(--km-ease); }
  /* The photo keeps its crop while its box changes shape (a 4:5 card into a 16:9 cover): both snapshots fill the box. */
  ::view-transition-old(morph-photo),
  ::view-transition-new(morph-photo) { height: 100%; object-fit: cover; overflow: clip; animation-duration: var(--km-dur); }
  ::view-transition-old(morph-title),
  ::view-transition-new(morph-title) { width: auto; height: 100%; animation-duration: var(--km-dur); }
}
@keyframes km-out { to { opacity: 0; } }
@keyframes km-in { from { opacity: 0; } }