@view-transition { navigation: auto; }

@property --fall-k { syntax: "<number>"; inherits: true; initial-value: 1; }

html:active-view-transition-type(fall-in)::view-transition-image-pair(root) {
  animation: fall-grow .95s cubic-bezier(.55, 0, .25, 1) both;
}
html:active-view-transition-type(fall-in)::view-transition-old(root) {
  mix-blend-mode: normal; animation: none;
  transform-origin: var(--fall-x) var(--fall-y); transform: scale(var(--fall-k));
}
html:active-view-transition-type(fall-in)::view-transition-new(root) {
  mix-blend-mode: normal; animation: fall-show .34s ease-out both;
  clip-path: circle(calc(var(--fall-r) * var(--fall-k)) at var(--fall-x) var(--fall-y));
}

@keyframes fall-grow {
  from { --fall-k: 1; }
  to { --fall-k: var(--fall-s); }
}
@keyframes fall-show {
  from { opacity: 0; }
  to { opacity: 1; }
}