@keyframes square-out-bottom-left {
  from {
    clip-path: var(--square-in);
  }
  to {
    clip-path: var(--square-bottom-left-out);
  }
}

[transition-style="out:square:bottom-left"] {
  --transition__duration: 1.5s;
  animation-name: square-out-bottom-left;
}