/* ==========================================================================
   09 — Animations
   --------------------------------------------------------------------------
   All @keyframes and animation helper classes.
   NOTE: The original CSS had two conflicting @keyframes pulse definitions.
   Only the fuller scale3d version is kept here — it is what browsers used.
   ========================================================================== */


/* --- Pulse (used by dot-effect, popup image hover, .pulse class) --- */

@keyframes pulse {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        -ms-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        -ms-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05);
    }

    100% {
        -webkit-transform: scale3d(1, 1, 1);
        -ms-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse;
}


/* --- Pulse Shadow (used by span.dot-effect) --- */

@keyframes pulse-shadow {
    0% {
        box-shadow: 0 0 0 0 rgba(226, 101, 64, 0.4);
    }

    100% {
        box-shadow: 0 0 0 7px rgba(226, 101, 64, 0);
    }
}


/* --- Animate Border (used by .button-bg animated gradient button) --- */

@-webkit-keyframes AnimateBorder {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@-moz-keyframes AnimateBorder {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes AnimateBorder {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}


/* --- Gradient Animation (used by .amp-hero background) --- */

@keyframes gradientAnimation {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}


/* --- Bounce Glow (used by .amp-price.animate-bounce) --- */

@keyframes bounce-glow {
    0% {
        transform: scale(1);
        text-shadow: none;
    }

    30% {
        transform: scale(1.2);
        text-shadow: 0 0 10px rgba(0, 115, 230, 0.5);
    }

    60% {
        transform: scale(0.95);
        text-shadow: 0 0 5px rgba(0, 115, 230, 0.3);
    }

    100% {
        transform: scale(1);
        text-shadow: none;
    }
}