/* ================================================================
   Static CSS — animation keyframes from the kaze-consulting.com
   (Squarespace) stylesheet. Referenced by the contact form:
   field highlight glow/trace, error shake, submit spinner.
   ================================================================ */

@keyframes animation-form-field-fx-highlight-trace {
    0% {
        left: 50%;
        transform: translate3d(-50%,-50%,0) scaleY(1) scaleX(3) rotate(0deg)
    }

    25% {
        left: min(50%,2.5em);
        transform: translate3d(-50%,-50%,0) scaleY(1.5) scaleX(1) rotate(90deg)
    }

    50% {
        transform: translate3d(-50%,-50%,0) scaleY(1) scaleX(3) rotate(180deg)
    }

    75% {
        left: calc(100% - min(2.5em,50%));
        transform: translate3d(-50%,-50%,0) scaleY(1.5) scaleX(1) rotate(270deg)
    }

    to {
        left: 50%;
        transform: translate3d(-50%,-50%,0) scaleY(1) scaleX(3) rotate(360deg)
    }
}

@keyframes animation-form-field-fx-highlight-double-trace {
    0% {
        left: 50%;
        transform: translate3d(-50%,-50%,0) scaleY(1) scaleX(3) rotate(0deg)
    }

    25% {
        left: min(50%,2.5em);
        transform: translate3d(-50%,-50%,0) scaleY(1.5) scaleX(1) rotate(90deg)
    }

    50% {
        transform: translate3d(-50%,-50%,0) scaleY(1) scaleX(3) rotate(180deg)
    }

    75% {
        left: calc(100% - min(2.5em,50%));
        transform: translate3d(-50%,-50%,0) scaleY(1.5) scaleX(1) rotate(270deg)
    }

    to {
        left: 50%;
        transform: translate3d(-50%,-50%,0) scaleY(1) scaleX(3) rotate(360deg)
    }
}

@keyframes animation-form-field-fx-highlight-trace-bottom {
    0% {
        left: calc(100% + 2.5em);
        transform: translate3d(-50%,-50%,0) scaleY(1) scaleX(3) rotate(0deg)
    }

    to {
        left: -2.5em;
        transform: translate3d(-50%,-50%,0) scaleY(1) scaleX(3) rotate(0deg)
    }
}

@keyframes animation-form-field-fx-highlight-double-trace-bottom {
    0% {
        left: calc(100% + 2.5em);
        transform: translate3d(-50%,-50%,0) scaleY(1) scaleX(3) rotate(0deg)
    }

    to {
        left: -2.5em;
        transform: translate3d(-50%,-50%,0) scaleY(1) scaleX(3) rotate(0deg)
    }
}

@keyframes animation-form-field-fx-highlight-glow {
    0%,to {
        opacity: .1
    }

    50% {
        opacity: 1
    }
}

@keyframes shake-three {
    0%,to {
        transform: translate3d(0,0,0)
    }

    16.666%,50%,83.333% {
        transform: translate3d(.333rem,0,0)
    }

    33.333%,66.666% {
        transform: translate3d(-.333rem,0,0)
    }
}

@keyframes keyframes-spinner {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes keyframes-spinner-check {
    0% {
        transform: translate3d(-100%,0,0)
    }

    to {
        transform: translate3d(0,0,0)
    }
}

@keyframes keyframes-circle {
    0%,to {
        animation-timing-function: cubic-bezier(.5,0,1,.5)
    }

    0% {
        transform: rotateY(0deg)
    }

    to {
        transform: rotateY(1440deg)
    }
}

@keyframes keyframes-circle-check {
    0% {
        transform: translate3d(0,0,0)
    }

    to {
        transform: translate3d(100%,0,0)
    }
}

@keyframes keyframes-check {
    0% {
        transform: translate3d(-100%,0,0)
    }

    to {
        transform: translate3d(0,0,0)
    }
}

@keyframes keyframes-bar {
    0% {
        transform: translate3d(-200%,0,0)
    }

    to {
        transform: translate3d(100%,0,0)
    }
}

@keyframes keyframes-ellipsis-grow {
    0% {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

@keyframes keyframes-ellipsis-shrink {
    0% {
        transform: scale(1)
    }

    to {
        transform: scale(0)
    }
}

@keyframes keyframes-ellipsis-shift {
    0% {
        transform: translate(0,0)
    }

    to {
        transform: translate(calc(.35em*2),0)
    }
}

@keyframes anim-form-post-submit {
    0% {
        opacity: 0;
        transform: translate3d(0,.5rem,0)
    }

    to {
        opacity: 1;
        transform: translate3d(0,0,0)
    }
}

@keyframes hideContent {
    0%,99% {
        opacity: 0
    }
}

@keyframes clipAnimation {
    0% {
        -webkit-clip-path: polygon(0 0,10% 0,0 100%,0 100%);
        clip-path: polygon(0 0,10% 0,0 100%,0 100%)
    }

    to {
        -webkit-clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
        clip-path: polygon(0 0,100% 0,100% 100%,0 100%)
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes loading-dot-2 {
    0% {
        opacity: 0
    }

    25% {
        opacity: 1
    }
}

@keyframes loading-dot-3 {
    0% {
        opacity: 0
    }

    50% {
        opacity: 1
    }
}