html:active-view-transition-type(slide-left){&::view-transition-old(main-content){animation:var(--duration-brand-base) var(--ease-brand) both fade-out, var(--duration-brand-base) var(--ease-brand) both slide-to-left}&::view-transition-new(main-content){animation:var(--duration-brand-base) var(--ease-brand) both fade-in, var(--duration-brand-base) var(--ease-brand) both slide-from-right}}html:active-view-transition-type(slide-right){&::view-transition-old(main-content){animation:var(--duration-brand-base) var(--ease-brand) both fade-out, var(--duration-brand-base) var(--ease-brand) both slide-to-right}&::view-transition-new(main-content){animation:var(--duration-brand-base) var(--ease-brand) both fade-in, var(--duration-brand-base) var(--ease-brand) both slide-from-left}}::view-transition-old(cdb-footer){animation:none}::view-transition-new(cdb-footer){animation:none}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}@keyframes slide-to-left{to{transform:translate(-20px)}}@keyframes slide-from-right{0%{transform:translate(20px)}}@keyframes slide-to-right{to{transform:translate(20px)}}@keyframes slide-from-left{0%{transform:translate(-20px)}}@media (prefers-reduced-motion:reduce){:is(html:active-view-transition-type(slide-left),html:active-view-transition-type(slide-right)){&::view-transition-old(main-content){animation:var(--duration-brand-base) var(--ease-brand) both fade-out}&::view-transition-new(main-content){animation:var(--duration-brand-base) var(--ease-brand) both fade-in}}}