: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(.25,1,.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"] {
    --transition__duration: 4s;
    --transition__easing:linear;
    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: 1.5s;
    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
}