﻿
.show_inflateSquare {
    opacity: 1;
    animation: show_inflateSquare 2s;
}

@keyframes show_inflateSquare {
    0% {
        clip-path: inset(49% 49% 49% 49%);
    }

    100% {
        clip-path: inset(0% 0% 0% 0%);
    }
}

.show_unstretch {
    animation: show_unstretch 2s;
}

@keyframes show_unstretch {
    0% {
        opacity: 0;
        transform: scale(3);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.show_unstretchrotate {
    animation: show_unstretchrotate 2s;
}

@keyframes show_unstretchrotate {
    0% {
        opacity: 0;
        transform: scale(10);
        transform: rotate(720deg);
    }

    100% {
        opacity: 1;
        transform: scale(1);
        transform: rotate(0deg);
    }
}

.show_fade {
    opacity: 1;
}

.show_rotate360 {
    animation: show_rotate360 2s;
}

@keyframes show_rotate360 {
    0% {
        opacity: 0;
        transform: rotate(-360deg);
    }

    100% {
        opacity: 1;
        transform: rotate(0deg);
    }
}

.show_inflateCircle {
    opacity: 1;
    animation: show_inflateCircle 2s;
}

@keyframes show_inflateCircle {
    0% {
        clip-path: circle(1% at 50% 50%);
    }

    50% {
        clip-path: circle(50% at 50% 50%);
    }

    100% {
        clip-path: circle(100% at 50% 50%);
    }
}

.show_spin {
    animation: show_spin 2s;
}

@keyframes show_spin {
    0% {
        transform: rotateX(-1800deg);
        opacity: 0;
    }

    100% {
        transform: rotateX(0deg);
        opacity: 1;
    }
}

.show_flipX {
    animation: show_flipX 2s;
}

@keyframes show_flipX {
    0% {
        transform: scaleX(-1);
        opacity: 0;
    }

    100% {
        transform: scaleX(1);
        opacity: 1;
    }
}

.show_flipY {
    animation: show_flipY 2s;
}

@keyframes show_flipY {
    0% {
        transform: scaleY(-1);
        opacity: 0;
    }

    100% {
        transform: scaleY(1);
        opacity: 1;
    }
}

.show_growNWSE {
    animation: show_growNWSE 2s;
}

@keyframes show_growNWSE {
    0% {
        width: 1%;
        height: 1%;
        opacity: 0;
    }

    100% {
        width: 100%;
        height: 100%;
        opacity: 1;
    }
}

.show_widenX {
    animation: show_widenX 2s;
}

@keyframes show_widenX {
    0% {
        transform: scaleX(0);
        opacity: 0;
    }

    100% {
        transform: scaleX(1);
        opacity: 1;
    }
}

.show_widenY {
    animation: show_widenY 2s;
}

@keyframes show_widenY {
    0% {
        transform: scaleY(0);
        opacity: 0;
    }

    100% {
        transform: scaleY(1);
        opacity: 1;
    }
}

.show_widenXY {
    animation: show_widenXY 2s;
}

@keyframes show_widenXY {
    0% {
        transform: scale3d(0,0,0);
        opacity: 0;
    }

    100% {
        transform: scale3d(1,1,1);
        opacity: 1;
    }
}


.show_spiral {
    animation: 3s show_spiral reverse;
}

@keyframes show_spiral {
    0% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 50%, 50% 50%, 25% 50%, 25% 75%, 75% 75%, 75% 25%, 0% 25%);
    }

    14.25% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 25%, 75% 25%, 75% 75%, 50% 75%, 50% 50%, 50% 50%, 25% 50%, 25% 75%, 75% 75%, 75% 25%, 0% 25%);
    }

    28.5% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 25%, 75% 25%, 75% 50%, 50% 50%, 50% 50%, 50% 50%, 25% 50%, 25% 75%, 75% 75%, 75% 25%, 0% 25%);
    }

    42.75% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 25%, 25% 25%, 25% 50%, 25% 50%, 25% 50%, 25% 50%, 25% 50%, 25% 75%, 75% 75%, 75% 25%, 0% 25%);
    }

    57% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 75%, 25% 75%, 25% 75%, 25% 75%, 25% 75%, 25% 75%, 25% 75%, 25% 75%, 75% 75%, 75% 25%, 0% 25%);
    }

    71.25% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 75% 100%, 75% 75%, 75% 75%, 75% 75%, 75% 75%, 75% 75%, 75% 75%, 75% 75%, 75% 75%, 75% 75%, 75% 25%, 0% 25%);
    }

    85.5% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 25%, 75% 25%, 75% 25%, 75% 25%, 75% 25%, 75% 25%, 75% 25%, 75% 25%, 75% 25%, 75% 25%, 75% 25%, 75% 25%, 0% 25%);
    }

    100% {
        clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 25%, 0% 25%, 0% 25%, 0% 25%, 0% 25%, 0% 25%, 0% 25%);
    }
}

.show_slots {
    animation: 2s show_slots reverse;
}

@keyframes show_slots {
    0% {
        clip-path: polygon(0% 0%, 14% 0%, 14% 0%, 28% 0%, 28% 0%, 42% 0%, 42% 0%, 56% 0%, 56% 0%, 70% 0%, 70% 0%, 84% 0%, 84% 0%, 100% 0, 100% 100%, 0% 100%);
    }

    50% {
        clip-path: polygon(0% 0%, 14% 0%, 14% 100%, 28% 100%, 28% 0%, 42% 0%, 42% 100%, 56% 100%, 56% 0%, 70% 0%, 70% 100%, 84% 100%, 84% 0%, 100% 0, 100% 100%, 0% 100%);
    }

    100% {
        clip-path: polygon(0% 100%, 14% 100%, 14% 100%, 28% 100%, 28% 100%, 42% 100%, 42% 100%, 56% 100%, 56% 100%, 70% 100%, 70% 100%, 84% 100%, 84% 100%, 100% 100%, 100% 100%, 0% 100%);
    }
}

.show_shutters {
    animation: 2s show_shutters reverse;
}

@keyframes show_shutters {
    0% {
        clip-path: polygon(0% 0%, 20% 0%, 20% 100%, 20% 100%, 20% 0%, 40% 0%, 40% 100%, 40% 100%, 40% 0%, 60% 0%, 60% 100%, 60% 100%, 60% 0%, 80% 0%, 80% 100%, 80% 100%, 80% 0%, 100% 0%, 100% 100%, 0% 100%);
    }

    100% {
        clip-path: polygon(20% 0%, 20% 0%, 20% 100%, 40% 100%, 40% 0%, 40% 0%, 40% 100%, 60% 100%, 60% 0%, 60% 0%, 60% 100%, 80% 100%, 80% 0%, 80% 0%, 80% 100%, 100% 100%, 100% 0%, 100% 0%, 100% 100%, 20% 100%);
    }
}

.show_iris {
    animation: 3s show_iris reverse;
}

@keyframes show_iris {
    0% {
        clip-path: path(' M103.13 100C103 32.96 135.29 -0.37 200 0L0 0C0.35 66.42 34.73 99.75 103.13 100Z M199.35 200C199.83 133.21 167.75 99.88 103.13 100C102.94 165.93 68.72 199.26 0.46 200L199.35 200Z M103.13 100C167.46 99.75 199.54 133.09 199.35 200L200 0C135.15 -0.86 102.86 32.47 103.13 100Z M0 200C68.63 200 103 166.67 103.13 100C34.36 100.12 -0.02 66.79 0 0L0 200Z ');
    }

    100% {
        clip-path: path(' M60.85 2.56C108.17 -44.93 154.57 -45.66 200.06 0.35L58.64 -141.07C11.93 -93.85 12.67 -45.97 60.85 2.56Z M139.87 340.05C187.44 293.16 188.33 246.91 142.54 201.29C95.79 247.78 48.02 247.15 -0.77 199.41L139.87 340.05Z M201.68 61.75C247.35 107.07 246.46 153.32 199.01 200.5L340.89 59.54C295.65 13.07 249.25 13.81 201.68 61.75Z M-140.61 141.25C-92.08 189.78 -44.21 190.51 3.02 143.46C-45.69 94.92 -46.43 47.05 0.81 -0.17L-140.61 141.25Z ');
    }
}

.melt-active {
    animation: 4s melt;
}

@keyframes melt {
    0% {
        clip-path: path('M0 -0.12C8.33 -8.46 16.67 -12.62 25 -12.62C37.5 -12.62 35.91 0.15 50 -0.12C64.09 -0.4 62.5 -34.5 75 -34.5C87.5 -34.5 87.17 -4.45 100 -0.12C112.83 4.2 112.71 -17.95 125 -18.28C137.29 -18.62 137.76 1.54 150.48 -0.12C163.19 -1.79 162.16 -25.12 174.54 -25.12C182.79 -25.12 191.28 -16.79 200 -0.12L200 -34.37L0 -34.37L0 -0.12Z');
    }

    100% {
        clip-path: path('M0 199.88C8.33 270.71 16.67 306.13 25 306.13C37.5 306.13 35.91 231.4 50 231.13C64.09 230.85 62.5 284.25 75 284.25C87.5 284.25 87.17 208.05 100 212.38C112.83 216.7 112.71 300.8 125 300.47C137.29 300.13 137.76 239.04 150.48 237.38C163.19 235.71 162.16 293.63 174.54 293.63C182.79 293.63 191.28 262.38 200 199.88L200 0.13L0 0.13L0 199.88Z');
    }
}

.show_tvon {
    animation: show_tvon 2s;
}

@keyframes show_tvon {
    0% {
        transform: scaleX(0);
        transform: scaleY(.01);
        opacity: 0;
    }

    75% {
        transform: scaleX(.25);
        transform: scaleY(.01);
        opacity: 1;
    }

    100% {
        transform: scaleX(1);
        transform: scaleY(1);
        opacity: 1;
    }
}
