:root {
  --circle-center-center-out: circle(0%);
  --circle-center-center-in: circle(125%);
  --circle-hesitate: circle(40%);
  --circle-top-left-out: circle(0% at top left);
  --circle-top-right-out: circle(0% at top right);
  --circle-bottom-right-out: circle(0% at bottom right);
  --circle-bottom-left-out: circle(0% at bottom left);
  --circle-top-left-in: circle(150% at top left);
  --circle-top-right-in: circle(150% at top right);
  --circle-bottom-right-in: circle(150% at bottom right);
  --circle-bottom-left-in: circle(150% at bottom left);
  --wipe-in: inset(0 0 0 0);
  --wipe-bottom: inset(100% 0 0 0);
  --wipe-left: inset(0 100% 0 0);
  --wipe-top: inset(0 0 100% 0);
  --wipe-right: inset(0 0 0 100%);
  --wipe-top-left-in: polygon(50% -50%, 150% 50%, 50% 150%, -50% 50%);
  --wipe-top-right-in: polygon(50% -50%, 150% 50%, 50% 150%, -50% 50%);
  --wipe-bottom-left-in: polygon(50% -50%, 150% 50%, 50% 150%, -50% 50%);
  --wipe-bottom-right-in: polygon(-50% 0%, 200% 0, 0 200%, 0 -50%);
  --wipe-top-left-out: polygon(0 0, 0 0, 0 0, 0 50%);
  --wipe-top-right-out: polygon(50% -50%, 150% 50%, 150% 50%, 50% -50%);
  --wipe-bottom-left-out: polygon(-50% 50%, 50% 150%, 50% 150%, -50% 50%);
  --wipe-bottom-right-out: polygon(150% 50%, 150% 50%, 50% 150%, 50% 150%);
  --wipe-cinematic-out: inset(100% 0 100% 0);
  --wipe-cinematic-mid: inset(10% 0 10% 0);
  --square-hesitate: inset(33% 33% 33% 33%);
  --square-out: inset(100% 100% 100% 100%);
  --square-in: var(--wipe-in);
  --square-top-left-out: inset(0 100% 100% 0);
  --square-top-right-out: inset(0 0 100% 100%);
  --square-bottom-left-out: inset(100% 100% 0 0);
  --square-bottom-right-out: inset(100% 0 0 100%);
  --diamond-center-in: polygon(-50% 50%, 50% -50%, 150% 50%, 50% 150%);
  --diamond-center-out: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
  --diamond-hesitate: polygon(45% 50%, 50% 25%, 55% 50%, 50% 75%);
  --opposing-corners-in: polygon(0 0, 0 100%, 100% 100%, 100% 0);
  --opposing-corners-out: polygon(0 0, 50% 50%, 100% 100%, 50% 50%);
}

[transition-style="in:square:center"] {
    animation-delay: var(--transition__delay, 0);
    animation-duration: var(--transition__duration, 1.2s);
    animation-timing-function: var(
      --transition__easing,
      cubic-bezier(0.25, 1, 0.3, 1)
    );
    animation-fill-mode: both;
    will-change: clip-path;
  }

[transition-style="out:square:center"] {
  animation-delay: var(--transition__delay, 0);
  animation-duration: var(--transition__duration, 2s);
  animation-timing-function: var(
    --transition__easing,
    cubic-bezier(0.25, 1, 0.3, 1)
  );
  animation-fill-mode: both;
  will-change: clip-path;
}

@keyframes square-in-center {
  0% {
    -webkit-clip-path: var(--square-out);
    clip-path: var(--square-out);
  }
  to {
    -webkit-clip-path: var(--square-in);
    clip-path: var(--square-in);
  }
}
[transition-style="in:square:center"] {
  animation-name: square-in-center;
}
@keyframes square-out-center {
  0% {
    -webkit-clip-path: var(--square-in);
    clip-path: var(--square-in);
  }
  to {
    -webkit-clip-path: var(--square-out);
    clip-path: var(--square-out);
  }
}
[transition-style="out:square:center"] {
  animation-name: square-out-center;
}