:root {
  --duration-old: 1s;
  --duration-new: 1s;
  --fill-mode-old: both;
  --fill-mode-new: both;
}

/*
Disables view transitions
applied to html element if page level transitions are disabled in settings.
*/
.view-transition-none {
  view-transition-name: none;
}

html.custom-transition::view-transition-old(root) {
  animation: var(--duration-old) var(--easing-old) var(--animation-old) var(--fill-mode-old);
  mix-blend-mode: normal;
}

html.custom-transition::view-transition-new(root) {
  animation: var(--duration-new) var(--easing-new) var(--animation-new) var(--fill-mode-new);
  mix-blend-mode: normal;
}

@keyframes static {
	to {
		opacity: 1;
	}
}

html.custom-transition.slide {
  --easing-old: cubic-bezier(.25, 1, .30, 1);
  --animation-old: wipe-out-right;
  --easing-new: cubic-bezier(.25, 1, .30, 1);
  --animation-new: wipe-in-right;
}

@keyframes wipe-out-right {
  from {
    clip-path: inset(0 0 0 0);
  }
  to {
    clip-path: inset(0 0 0 100%);
  }
}

@keyframes wipe-in-right {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

html.custom-transition.circle {
  --easing-new: linear;
  --animation-new: static;
  --easing-new: ease-out;
  --animation-new: circle-in-center;
}

@keyframes circle-in-center {
  from {
    clip-path: circle(0%);
  }
  to {
    clip-path: circle(125%);
  }
}

html.custom-transition.shutter {
  --easing-old: cubic-bezier(.25, 1, .30, 1);
  --animation-old: wipe-shutter-out;
  --easing-new: cubic-bezier(.25, 1, .30, 1);
  --animation-new: wipe-shutter-in;
}

@keyframes wipe-shutter-out {
  0% {
    clip-path: inset(0 0 0 0);
  }
  100% {
    clip-path: inset(100% 0 100% 0);
  }
}

@keyframes wipe-shutter-in {
  0% {
    clip-path: inset(100% 0 100% 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}

html.custom-transition.wipe {
  --easing-old: cubic-bezier(.25, 1, .30, 1);
  --animation-old: static;
  --easing-new: ease-out;
  --animation-new: wipe-in-bottom-right;
}

@keyframes wipe-in-bottom-right {
  from {
    clip-path: polygon(0 0, 0 0, 0 0, 0 50%);
  }
  to {
    clip-path: polygon(-50% 0%, 200% 0, 0 200%, 0 -50%);
  }
}