/* This CSS animation is courtesy of animate.css. I don't own the rights of this animation. */

.animate__swing {
    transform-origin: top center;
    animation-name: swing;
    animation-duration: 1.5s;
}

@keyframes swing {
    20% {
        -webkit-transform: rotate3d(0, 0, 1, 15deg);
        transform: rotate3d(0, 0, 1, 15deg);
    }

    40% {
        -webkit-transform: rotate3d(0, 0, 1, -10deg);
        transform: rotate3d(0, 0, 1, -10deg);
    }

    60% {
        -webkit-transform: rotate3d(0, 0, 1, 5deg);
        transform: rotate3d(0, 0, 1, 5deg);
    }

    80% {
        -webkit-transform: rotate3d(0, 0, 1, -5deg);
        transform: rotate3d(0, 0, 1, -5deg);
    }

    to {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
    }
}



/* ==========================================
   Sitewide Popup Animations (Animate.css Base)
   ========================================== */

/* Base class required for standard animations */
.animate__animated {
    animation-duration: 1s;
    animation-fill-mode: both;
}

/* 1. Swing (Your Existing Animation) */
@keyframes swing {
    20% { transform: rotate(15deg); }
    40% { transform: rotate(-10deg); }
    60% { transform: rotate(5deg); }
    80% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}
.animate__swing {
    transform-origin: top center;
    animation-name: swing;
    animation-duration: 1s;
}

/* 2. Fade In */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.animate__fadeIn {
    animation-name: fadeIn;
    animation-duration: 0.5s;
}

/* 3. Fade In Up */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
.animate__fadeInUp {
    animation-name: fadeInUp;
    animation-duration: 0.6s;
}

/* 4. Zoom In */
@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }
    50% { opacity: 1; }
}
.animate__zoomIn {
    animation-name: zoomIn;
    animation-duration: 0.5s;
}

/* 5. Slide In Down */
@keyframes slideInDown {
    from {
        transform: translate3d(0, -100%, 0);
        visibility: visible;
    }
    to { transform: translate3d(0, 0, 0); }
}
.animate__slideInDown {
    animation-name: slideInDown;
    animation-duration: 0.5s;
}

/* 6. Pulse */
@keyframes pulse {
    from { transform: scale3d(1, 1, 1); }
    50% { transform: scale3d(1.05, 1.05, 1.05); }
    to { transform: scale3d(1, 1, 1); }
}
.animate__pulse {
    animation-name: pulse;
    animation-duration: 0.8s;
}

/* 7. Bounce In */
@keyframes bounceIn {
    from, 20%, 40%, 60%, 80%, to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }
    20% { transform: scale3d(1.1, 1.1, 1.1); }
    40% { transform: scale3d(0.9, 0.9, 0.9); }
    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03);
    }
    80% { transform: scale3d(0.97, 0.97, 0.97); }
    to {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}
.animate__bounceIn {
    animation-name: bounceIn;
    animation-duration: 0.75s;
}