/* transition */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.5s;
  will-change: background-color, transform, clip-path;
}

@keyframes move-out {
  from {
    background-color: inherit;
    transform: scale(1);
  }

  to {
    background-color: darkred !important;
    transform: scale(1.5);
  }
}

@keyframes move-in {
  from {
    clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%);
  }

  to {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
}

::view-transition-old(root) {
  animation: 1.5s cubic-bezier(0.87, 0, 0.13, 1) both move-out;
}

::view-transition-new(root) {
  animation: 1.5s cubic-bezier(0.87, 0, 0.13, 1) both move-in;
}