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