@property --page-wipe{syntax:"<number>";inherits:false;initial-value:0}html[data-page-transition]::view-transition-old(root){mix-blend-mode:normal;backface-visibility:hidden;animation-duration:.4s;animation-timing-function:cubic-bezier(.73,0,.33,1);animation-fill-mode:both}html[data-page-transition]::view-transition-new(root){mix-blend-mode:normal;backface-visibility:hidden;animation-duration:.4s;animation-timing-function:cubic-bezier(.73,0,.33,1);animation-fill-mode:both}html[data-page-transition]::view-transition-old(root){-webkit-mask-image:linear-gradient(0deg, transparent calc(100% * var(--page-wipe)), black calc(100% * var(--page-wipe)));mask-image:linear-gradient(0deg, transparent calc(100% * var(--page-wipe)), black calc(100% * var(--page-wipe)));animation-name:page-exit}html[data-page-transition]::view-transition-new(root){-webkit-mask-image:linear-gradient(0deg, black calc(100% * var(--page-wipe)), transparent calc(100% * var(--page-wipe)));mask-image:linear-gradient(0deg, black calc(100% * var(--page-wipe)), transparent calc(100% * var(--page-wipe)));animation-name:page-enter;animation-delay:.4s}@keyframes page-exit{0%{opacity:1;--page-wipe:0;transform:translateY(0)}to{opacity:0;--page-wipe:1;transform:translateY(-30%)}}@keyframes page-enter{0%{opacity:0;--page-wipe:0;transform:translateY(30%)}to{opacity:1;--page-wipe:1;transform:translateY(0)}}