/** @format */

: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] {
  animation-delay: var(--transition__delay, 0);
  animation-duration: var(--transition__duration, 2.5s);
  animation-timing-function: var(--transition__easing, cubic-bezier(0.25, 1, 0.3, 1));
  animation-fill-mode: both;
  will-change: clip-path;
}
@media (prefers-reduced-motion: reduce), print {
  [transition-style] {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}
@keyframes wipe-out-top {
  0% {
    -webkit-clip-path: var(--wipe-in);
    clip-path: var(--wipe-in);
  }
  to {
    -webkit-clip-path: var(--wipe-top);
    clip-path: var(--wipe-top);
  }
}
[transition-style="out:wipe:top"],
[transition-style="out:wipe:up"] {
  animation-name: wipe-out-top;
}
@keyframes wipe-out-right {
  0% {
    -webkit-clip-path: var(--wipe-in);
    clip-path: var(--wipe-in);
  }
  to {
    -webkit-clip-path: var(--wipe-right);
    clip-path: var(--wipe-right);
  }
}
[transition-style="out:wipe:right"] {
  animation-name: wipe-out-right;
}
@keyframes wipe-out-bottom {
  0% {
    -webkit-clip-path: var(--wipe-in);
    clip-path: var(--wipe-in);
  }
  to {
    -webkit-clip-path: var(--wipe-bottom);
    clip-path: var(--wipe-bottom);
  }
}
[transition-style="out:wipe:bottom"],
[transition-style="out:wipe:down"] {
  animation-name: wipe-out-bottom;
}
@keyframes wipe-out-left {
  0% {
    -webkit-clip-path: var(--wipe-in);
    clip-path: var(--wipe-in);
  }
  to {
    -webkit-clip-path: var(--wipe-left);
    clip-path: var(--wipe-left);
  }
}
[transition-style="out:wipe:left"] {
  animation-name: wipe-out-left;
}
@keyframes wipe-in-top {
  0% {
    -webkit-clip-path: var(--wipe-top);
    clip-path: var(--wipe-top);
  }
  to {
    -webkit-clip-path: var(--wipe-in);
    clip-path: var(--wipe-in);
  }
}
[transition-style="in:wipe:down"],
[transition-style="in:wipe:top"] {
  animation-name: wipe-in-top;
}
@keyframes wipe-in-right {
  0% {
    -webkit-clip-path: var(--wipe-left);
    clip-path: var(--wipe-left);
  }
  to {
    -webkit-clip-path: var(--wipe-in);
    clip-path: var(--wipe-in);
  }
}
[transition-style="in:wipe:right"] {
  animation-name: wipe-in-right;
}
@keyframes wipe-in-bottom {
  0% {
    -webkit-clip-path: var(--wipe-bottom);
    clip-path: var(--wipe-bottom);
  }
  to {
    -webkit-clip-path: var(--wipe-in);
    clip-path: var(--wipe-in);
  }
}
[transition-style="in:wipe:bottom"],
[transition-style="in:wipe:up"] {
  animation-name: wipe-in-bottom;
}
@keyframes wipe-in-left {
  0% {
    -webkit-clip-path: var(--wipe-right);
    clip-path: var(--wipe-right);
  }
  to {
    -webkit-clip-path: var(--wipe-in);
    clip-path: var(--wipe-in);
  }
}
[transition-style="in:wipe:left"] {
  animation-name: wipe-in-left;
}
@keyframes wipe-in-top-right {
  0% {
    -webkit-clip-path: var(--wipe-bottom-left-out);
    clip-path: var(--wipe-bottom-left-out);
  }
  to {
    -webkit-clip-path: var(--wipe-top-right-in);
    clip-path: var(--wipe-top-right-in);
  }
}
[transition-style="in:wipe:top-right"] {
  animation-name: wipe-in-top-right;
}
@keyframes wipe-in-top-left {
  0% {
    -webkit-clip-path: var(--wipe-bottom-right-out);
    clip-path: var(--wipe-bottom-right-out);
  }
  to {
    -webkit-clip-path: var(--wipe-top-left-in);
    clip-path: var(--wipe-top-left-in);
  }
}
[transition-style="in:wipe:top-left"] {
  animation-name: wipe-in-top-left;
}
@keyframes wipe-in-bottom-right {
  0% {
    -webkit-clip-path: var(--wipe-top-left-out);
    clip-path: var(--wipe-top-left-out);
  }
  to {
    -webkit-clip-path: var(--wipe-bottom-right-in);
    clip-path: var(--wipe-bottom-right-in);
  }
}
[transition-style="in:wipe:bottom-right"] {
  animation-name: wipe-in-bottom-right;
}
@keyframes wipe-in-bottom-left {
  0% {
    -webkit-clip-path: var(--wipe-top-right-out);
    clip-path: var(--wipe-top-right-out);
  }
  to {
    -webkit-clip-path: var(--wipe-bottom-left-in);
    clip-path: var(--wipe-bottom-left-in);
  }
}
[transition-style="in:wipe:bottom-left"] {
  animation-name: wipe-in-bottom-left;
}
@keyframes wipe-out-top-right {
  0% {
    -webkit-clip-path: var(--wipe-bottom-left-in);
    clip-path: var(--wipe-bottom-left-in);
  }
  to {
    -webkit-clip-path: var(--wipe-top-right-out);
    clip-path: var(--wipe-top-right-out);
  }
}
[transition-style="out:wipe:top-right"] {
  animation-name: wipe-out-top-right;
}
@keyframes wipe-out-top-left {
  0% {
    -webkit-clip-path: var(--wipe-bottom-right-in);
    clip-path: var(--wipe-bottom-right-in);
  }
  to {
    -webkit-clip-path: var(--wipe-top-left-out);
    clip-path: var(--wipe-top-left-out);
  }
}
[transition-style="out:wipe:top-left"] {
  animation-name: wipe-out-top-left;
}
@keyframes wipe-out-bottom-right {
  0% {
    -webkit-clip-path: var(--wipe-top-left-in);
    clip-path: var(--wipe-top-left-in);
  }
  to {
    -webkit-clip-path: var(--wipe-bottom-right-out);
    clip-path: var(--wipe-bottom-right-out);
  }
}
[transition-style="out:wipe:bottom-right"] {
  animation-name: wipe-out-bottom-right;
}
@keyframes wipe-out-bottom-left {
  0% {
    -webkit-clip-path: var(--wipe-top-right-in);
    clip-path: var(--wipe-top-right-in);
  }
  to {
    -webkit-clip-path: var(--wipe-bottom-left-out);
    clip-path: var(--wipe-bottom-left-out);
  }
}
[transition-style="out:wipe:bottom-left"] {
  animation-name: wipe-out-bottom-left;
}
@keyframes wipe-cinematic-out {
  0% {
    -webkit-clip-path: var(--wipe-in);
    clip-path: var(--wipe-in);
  }
  30%,
  70% {
    -webkit-clip-path: var(--wipe-cinematic-mid);
    clip-path: var(--wipe-cinematic-mid);
  }
  to {
    -webkit-clip-path: var(--wipe-cinematic-out);
    clip-path: var(--wipe-cinematic-out);
  }
}
[transition-style="out:wipe:cinematic"] {
  animation-name: wipe-cinematic-out;
}
@keyframes wipe-cinematic-in {
  0% {
    -webkit-clip-path: var(--wipe-cinematic-out);
    clip-path: var(--wipe-cinematic-out);
  }
  30%,
  70% {
    -webkit-clip-path: var(--wipe-cinematic-mid);
    clip-path: var(--wipe-cinematic-mid);
  }
  to {
    -webkit-clip-path: var(--wipe-in);
    clip-path: var(--wipe-in);
  }
}
[transition-style="in:wipe:cinematic"] {
  animation-name: wipe-cinematic-in;
}
@keyframes circle-in-hesitate {
  0% {
    -webkit-clip-path: var(--circle-center-center-out);
    clip-path: var(--circle-center-center-out);
  }
  40% {
    -webkit-clip-path: var(--circle-hesitate);
    clip-path: var(--circle-hesitate);
  }
  to {
    -webkit-clip-path: var(--circle-center-center-in);
    clip-path: var(--circle-center-center-in);
  }
}
[transition-style="in:circle:hesitate"] {
  animation-name: circle-in-hesitate;
}
@keyframes circle-out-hesitate {
  0% {
    -webkit-clip-path: var(--circle-center-center-in);
    clip-path: var(--circle-center-center-in);
  }
  40% {
    -webkit-clip-path: var(--circle-hesitate);
    clip-path: var(--circle-hesitate);
  }
  to {
    -webkit-clip-path: var(--circle-center-center-out);
    clip-path: var(--circle-center-center-out);
  }
}
[transition-style="out:circle:hesitate"] {
  animation-name: circle-out-hesitate;
}
@keyframes circle-in-center {
  0% {
    -webkit-clip-path: var(--circle-center-center-out);
    clip-path: var(--circle-center-center-out);
  }
  to {
    -webkit-clip-path: var(--circle-center-center-in);
    clip-path: var(--circle-center-center-in);
  }
}
[transition-style="in:circle:center"] {
  animation-name: circle-in-center;
}
@keyframes circle-out-center {
  0% {
    -webkit-clip-path: var(--circle-center-center-in);
    clip-path: var(--circle-center-center-in);
  }
  to {
    -webkit-clip-path: var(--circle-center-center-out);
    clip-path: var(--circle-center-center-out);
  }
}
[transition-style="out:circle:center"] {
  animation-name: circle-out-center;
}
@keyframes circle-out-top-left {
  0% {
    -webkit-clip-path: var(--circle-center-center-in);
    clip-path: var(--circle-center-center-in);
  }
  to {
    -webkit-clip-path: var(--circle-top-left-out);
    clip-path: var(--circle-top-left-out);
  }
}
[transition-style="out:circle:top-left"] {
  --transition__duration: 1.5s;
  animation-name: circle-out-top-left;
}
@keyframes circle-out-top-right {
  0% {
    -webkit-clip-path: var(--circle-center-center-in);
    clip-path: var(--circle-center-center-in);
  }
  to {
    -webkit-clip-path: var(--circle-top-right-out);
    clip-path: var(--circle-top-right-out);
  }
}
[transition-style="out:circle:top-right"] {
  --transition__duration: 1.5s;
  animation-name: circle-out-top-right;
}
@keyframes circle-out-bottom-left {
  0% {
    -webkit-clip-path: var(--circle-center-center-in);
    clip-path: var(--circle-center-center-in);
  }
  to {
    -webkit-clip-path: var(--circle-bottom-left-out);
    clip-path: var(--circle-bottom-left-out);
  }
}
[transition-style="out:circle:bottom-left"] {
  --transition__duration: 1.5s;
  animation-name: circle-out-bottom-left;
}
@keyframes circle-out-bottom-right {
  0% {
    -webkit-clip-path: var(--circle-center-center-in);
    clip-path: var(--circle-center-center-in);
  }
  to {
    -webkit-clip-path: var(--circle-bottom-right-out);
    clip-path: var(--circle-bottom-right-out);
  }
}
[transition-style="out:circle:bottom-right"] {
  --transition__duration: 1.5s;
  animation-name: circle-out-bottom-right;
}
@keyframes circle-in-top-left {
  0% {
    -webkit-clip-path: var(--circle-center-center-out);
    clip-path: var(--circle-center-center-out);
  }
  to {
    -webkit-clip-path: var(--circle-top-left-in);
    clip-path: var(--circle-top-left-in);
  }
}
[transition-style="in:circle:top-left"] {
  animation-name: circle-in-top-left;
}
@keyframes circle-in-top-right {
  0% {
    -webkit-clip-path: var(--circle-center-center-out);
    clip-path: var(--circle-center-center-out);
  }
  to {
    -webkit-clip-path: var(--circle-top-right-in);
    clip-path: var(--circle-top-right-in);
  }
}
[transition-style="in:circle:top-right"] {
  animation-name: circle-in-top-right;
}
@keyframes circle-in-bottom-left {
  0% {
    -webkit-clip-path: var(--circle-center-center-out);
    clip-path: var(--circle-center-center-out);
  }
  to {
    -webkit-clip-path: var(--circle-bottom-left-in);
    clip-path: var(--circle-bottom-left-in);
  }
}
[transition-style="in:circle:bottom-left"] {
  animation-name: circle-in-bottom-left;
}
@keyframes circle-in-bottom-right {
  0% {
    -webkit-clip-path: var(--circle-center-center-out);
    clip-path: var(--circle-center-center-out);
  }
  to {
    -webkit-clip-path: var(--circle-bottom-right-in);
    clip-path: var(--circle-bottom-right-in);
  }
}
[transition-style="in:circle:bottom-right"] {
  animation-name: circle-in-bottom-right;
}
@keyframes square-in-hesitate {
  0% {
    -webkit-clip-path: var(--square-out);
    clip-path: var(--square-out);
  }
  40% {
    -webkit-clip-path: var(--square-hesitate);
    clip-path: var(--square-hesitate);
  }
  to {
    -webkit-clip-path: var(--square-in);
    clip-path: var(--square-in);
  }
}
[transition-style="in:square:hesitate"] {
  animation-name: square-in-hesitate;
}
@keyframes square-out-hesitate {
  0% {
    -webkit-clip-path: var(--square-in);
    clip-path: var(--square-in);
  }
  40% {
    -webkit-clip-path: var(--square-hesitate);
    clip-path: var(--square-hesitate);
  }
  to {
    -webkit-clip-path: var(--square-out);
    clip-path: var(--square-out);
  }
}
[transition-style="out:square:hesitate"] {
  animation-name: square-out-hesitate;
}
@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;
}
@keyframes square-out-top-left {
  0% {
    -webkit-clip-path: var(--square-in);
    clip-path: var(--square-in);
  }
  to {
    -webkit-clip-path: var(--square-top-left-out);
    clip-path: var(--square-top-left-out);
  }
}
[transition-style="out:square:top-left"] {
  --transition__duration: 1.5s;
  animation-name: square-out-top-left;
}
@keyframes square-out-top-right {
  0% {
    -webkit-clip-path: var(--square-in);
    clip-path: var(--square-in);
  }
  to {
    -webkit-clip-path: var(--square-top-right-out);
    clip-path: var(--square-top-right-out);
  }
}
[transition-style="out:square:top-right"] {
  --transition__duration: 1.5s;
  animation-name: square-out-top-right;
}
@keyframes square-out-bottom-left {
  0% {
    -webkit-clip-path: var(--square-in);
    clip-path: var(--square-in);
  }
  to {
    -webkit-clip-path: var(--square-bottom-left-out);
    clip-path: var(--square-bottom-left-out);
  }
}
[transition-style="out:square:bottom-left"] {
  --transition__duration: 1.5s;
  animation-name: square-out-bottom-left;
}
@keyframes square-out-bottom-right {
  0% {
    -webkit-clip-path: var(--square-in);
    clip-path: var(--square-in);
  }
  to {
    -webkit-clip-path: var(--square-bottom-right-out);
    clip-path: var(--square-bottom-right-out);
  }
}
[transition-style="out:square:bottom-right"] {
  --transition__duration: 1.5s;
  animation-name: square-out-bottom-right;
}
@keyframes square-in-top-left {
  0% {
    -webkit-clip-path: var(--square-bottom-right-out);
    clip-path: var(--square-bottom-right-out);
  }
  to {
    -webkit-clip-path: var(--square-in);
    clip-path: var(--square-in);
  }
}
[transition-style="in:square:top-left"] {
  animation-name: square-in-top-left;
}
@keyframes square-in-top-right {
  0% {
    -webkit-clip-path: var(--square-bottom-left-out);
    clip-path: var(--square-bottom-left-out);
  }
  to {
    -webkit-clip-path: var(--square-in);
    clip-path: var(--square-in);
  }
}
[transition-style="in:square:top-right"] {
  animation-name: square-in-top-right;
}
@keyframes square-in-bottom-left {
  0% {
    -webkit-clip-path: var(--square-top-right-out);
    clip-path: var(--square-top-right-out);
  }
  to {
    -webkit-clip-path: var(--square-in);
    clip-path: var(--square-in);
  }
}
[transition-style="in:square:bottom-left"] {
  animation-name: square-in-bottom-left;
}
@keyframes square-in-bottom-right {
  0% {
    -webkit-clip-path: var(--square-top-left-out);
    clip-path: var(--square-top-left-out);
  }
  to {
    -webkit-clip-path: var(--square-in);
    clip-path: var(--square-in);
  }
}
[transition-style="in:square:bottom-right"] {
  animation-name: square-in-bottom-right;
}
@keyframes polygon-in-opposing-corners {
  0% {
    -webkit-clip-path: var(--opposing-corners-out);
    clip-path: var(--opposing-corners-out);
  }
  to {
    -webkit-clip-path: var(--opposing-corners-in);
    clip-path: var(--opposing-corners-in);
  }
}
[transition-style="in:polygon:opposing-corners"] {
  --transition__duration: 1.5s;
  animation-name: polygon-in-opposing-corners;
}
@keyframes polygon-out-opposing-corners {
  0% {
    -webkit-clip-path: var(--opposing-corners-in);
    clip-path: var(--opposing-corners-in);
  }
  to {
    -webkit-clip-path: var(--opposing-corners-out);
    clip-path: var(--opposing-corners-out);
  }
}
[transition-style="out:polygon:opposing-corners"] {
  --transition__duration: 1.5s;
  animation-name: polygon-out-opposing-corners;
}
@keyframes diamond-in-center {
  0% {
    -webkit-clip-path: var(--diamond-center-out);
    clip-path: var(--diamond-center-out);
  }
  to {
    -webkit-clip-path: var(--diamond-center-in);
    clip-path: var(--diamond-center-in);
  }
}
[transition-style="in:diamond:center"] {
  --transition__duration: 7s;
  animation-name: diamond-in-center;
}
@keyframes diamond-out-center {
  0% {
    -webkit-clip-path: var(--diamond-center-in)
    clip-path: var(--diamond-center-in);
  }
  to {
    -webkit-clip-path: var(--diamond-center-out);
    clip-path: var(--diamond-center-out);
  }
}
[transition-style="out:diamond:center"] {
  --transition__duration: 1.5s;
  animation-name: diamond-out-center;
}
@keyframes diamond-in-double-scale {
  0% {
    -webkit-clip-path: var(--diamond-center-out);
    clip-path: var(--diamond-center-out);
  }
  40% {
    -webkit-clip-path: var(--diamond-hesitate);
    clip-path: var(--diamond-hesitate);
  }
  to {
    -webkit-clip-path: var(--diamond-center-in);
    clip-path: var(--diamond-center-in);
  }
}
[transition-style="in:diamond:hesitate"] {
  --transition__duration: 1.5s;
  animation-name: diamond-in-double-scale;
}
@keyframes diamond-out-double-scale {
  0% {
    -webkit-clip-path: var(--diamond-center-in);
    clip-path: var(--diamond-center-in);
  }
  40% {
    -webkit-clip-path: var(--diamond-hesitate);
    clip-path: var(--diamond-hesitate);
  }
  to {
    -webkit-clip-path: var(--diamond-center-out);
    clip-path: var(--diamond-center-out);
  }
}
[transition-style="out:diamond:hesitate"] {
  --transition__duration: 1.5s;
  animation-name: diamond-out-double-scale;
}