@property --edge{syntax:"<percentage>";inherits:true;initial-value:.001%}@property --center{syntax:"<percentage>";inherits:true;initial-value:.001%}@property --angle{syntax:"<angle>";inherits:true;initial-value:-91deg}@property --mask-gap{syntax:"<percentage>";inherits:true;initial-value:2%}@property --transform{syntax:"<percentage>";inherits:true;initial-value:1%}:root{--motion-ease:var(--ease-smooth)}@view-transition{navigation:auto}header{view-transition-name:header}::view-transition-image-pair(root){animation-name:background;animation-duration:1s;animation-timing-function:var(--motion-ease);background:linear-gradient(var(--angle),transparent 0,var(--border-color-brand) 100%)}::view-transition-new(root){animation-name:slide-in;mask:linear-gradient(var(--angle),#000 var(--edge),transparent var(--edge))}::view-transition-old(root){animation-name:slide-out;mask:linear-gradient(var(--angle),transparent var(--edge),#000 var(--edge))}@keyframes slide-out{0%{--edge:calc(var(--center) + calc(0.5 * var(--mask-gap)))}to{--edge:calc(var(--center) + calc(0.5 * var(--mask-gap)) - var(--transform));transform:translateX(calc(-1 * var(--transform)));filter:blur(4px)}}@keyframes slide-in{0%{--edge:calc(var(--center) - calc(0.5 * var(--mask-gap)) + var(--transform));transform:translateX(var(--transform))}to{--edge:calc(var(--center) - calc(0.5 * var(--mask-gap)))}}@keyframes background{0%{--center:calc(0% - calc(0.5 * var(--mask-gap)))}to{--center:calc(100% + calc(0.5 * var(--mask-gap)))}}