html {
  --origin-x: calc(var(--click-x, 0.5) * 100%);
  --origin-y: calc(var(--click-y, 0.5) * 100%);
}

html.is-changing .transition-reveal {
  transition: clip-path 1s cubic-bezier(0.5, 0, 0.15, 1), mask-position 1s cubic-bezier(0.5, 0, 0.15, 1), -webkit-mask-position 1s cubic-bezier(0.5, 0, 0.15, 1);
}

html.to-circle .transition-reveal {
  clip-path: circle(75% at 50% 50%);
}

html.to-circle .transition-reveal.is-next-container {
  clip-path: circle(0% at var(--origin-x) var(--origin-y));
}

html.to-square .page+.page {
  z-index: 300;
}

html.to-square .transition-reveal {
  clip-path: polygon(50% -50%, 150% 50%, 50% 150%, -50% 50%);
}

html.to-square .transition-reveal.is-previous-container {
  clip-path: polygon(var(--origin-x) var(--origin-y), var(--origin-x) var(--origin-y), var(--origin-x) var(--origin-y), var(--origin-x) var(--origin-y));
}

html.to-gradient .page+.page {
  z-index: 300;
}

html.to-gradient .transition-reveal {}

html.to-gradient .page+.page {
  mask-image: linear-gradient(to left, transparent 33.33%, white 66.66%);
  -webkit-mask-image: linear-gradient(to left, transparent 33.33%, white 66.66%);
  mask-size: 300% 100%;
  -webkit-mask-size: 300% 100%;
  mask-position: right;
  -webkit-mask-position: right;
}

html.to-gradient .transition-reveal.is-next-container {
  mask-position: left;
  -webkit-mask-position: left;
}