.footer {
  view-transition-name: footer;
}

::view-transition-old(footer) {

}

::view-transition-new(footer) {

}

.slide {
  view-transition-name: slide-next;
}

body.slide-reverse .slide {
  view-transition-name: slide-previous;
}

::view-transition-old(slide-next) {
  animation-name: none;
}

::view-transition-new(slide-next) {
  animation-name: reveal-from-right;
  animation-duration: 0.5s;
}

::view-transition-old(slide-previous) {
  animation-name: none;
}

::view-transition-new(slide-previous) {
  animation-name: hide-to-left;
  animation-duration: 0.5s;
}


@keyframes reveal-from-right {
  from {
    clip-path: circle(0% at 200% 50%);
  }
  to {
    clip-path: circle(100% at 50% 50%);
  }
}

@keyframes hide-to-left {
  from {
    clip-path: circle(100% at -100% 50%);
  }
  to {
    clip-path: circle(100% at 50% 50%);
  }
}