/* ===================================================== */
/* WordPress Theme Animation System */
/* ===================================================== */

/* ---------- Base Animation Class ---------- */

.anim {
    animation-duration: 1s;
    animation-fill-mode: both;
}

/* ---------- Speed Controls ---------- */

.anim-fast {
    animation-duration: .4s;
}

.anim-normal {
    animation-duration: 1s;
}

.anim-slow {
    animation-duration: 2s;
}

/* ---------- Delay Controls ---------- */

.anim-delay-1 {
    animation-delay: .2s;
}

.anim-delay-2 {
    animation-delay: .4s;
}

.anim-delay-3 {
    animation-delay: .6s;
}

.anim-delay-4 {
    animation-delay: .8s;
}

/* ---------- Hover Trigger ---------- */

.anim-hover:hover {
    animation-play-state: running;
}

/* ---------- Infinite ---------- */

.anim-infinite {
    animation-iteration-count: infinite;
}

/* ===================================================== */
/* Keyframes */
/* ===================================================== */

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

    to {
        transform: rotate(360deg);
    }
}

@keyframes blink {
    from {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes popHearts {
    0% {
        left: calc(50% - 7px);
        top: 10px;
    }

    20% {
        opacity: 1;
    }

    80% {
        top: -20px;
    }

    100% {
        opacity: 0;
    }
}

@keyframes wpUlikeNotifitcationsAnimation {
    from {
        opacity: 0;
        transform: translateY(100%);
    }

    to {
        opacity: .8;
        transform: translateY(0);
    }
}

@keyframes FillBasket {
    0% {
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    70% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes ArrowMoveBasket {

    0% {
        opacity: 0;
    }

    30% {
        opacity: 1;
        top: 50%;
        transform: translateY(-50%);
    }

    70% {
        opacity: 1;
        top: 50%;
        transform: translateY(-50%);
    }

    100% {
        opacity: 0;
        top: 60%;
    }
}

@keyframes PulseGrow {

    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes PulseGradient {

    0% {
        box-shadow: 0 0 0 0 #ee1d27;
    }

    100% {
        box-shadow: 0 0 0 10px rgba(238, 29, 39, 0);
    }
}

@keyframes BasketIconRotate {

    0% {
        transform: rotate(0);
    }

    25% {
        transform: rotate(10deg);
    }

    75% {
        transform: rotate(-10deg);
    }

    100% {
        transform: rotate(0);
    }
}

@keyframes AuxFadeInPreloaded {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ===================================================== */
/* Animation Classes */
/* ===================================================== */

.anim-spin {
    animation-name: spin;
    animation-timing-function: linear;
}

.anim-blink {
    animation-name: blink;
}

.anim-heart {
    animation-name: popHearts;
    animation-timing-function: ease;
}

.anim-notification {
    animation-name: wpUlikeNotifitcationsAnimation;
}

.anim-fill-basket {
    animation-name: FillBasket;
    animation-timing-function: cubic-bezier(.455, .03, .515, .955);
}

.anim-arrow-basket {
    animation-name: ArrowMoveBasket;
}

.anim-basket-rotate {
    animation-name: BasketIconRotate;
}

.anim-pulse-grow {
    animation-name: PulseGrow;
}

.anim-pulse-gradient {
    animation-name: PulseGradient;
}

.anim-fade-in {
    animation-name: AuxFadeInPreloaded;
}