/* Fade In Up Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }

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

.fadeInUp {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fadeInUp.visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Slide Right Animation */
@keyframes slideRight {
    from {
        opacity: 0;
        transform: translate3d(-150%, 0, 0);
    }

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

.slideRight {
    opacity: 0;
    transform: translate3d(-10%, 0, 0);
    transition: opacity 1.5s ease-in-out, transform 1s ease-in-out;
}

.slideRight.visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Slide Left */
@keyframes slideLeft {
    from {
        opacity: 0;
        transform: translate3d(150%, 0, 0);
    }

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

.slideLeft {
    opacity: 0;
    transform: translate3d(10%, 0, 0);
    transition: opacity 1.5s ease-in-out, transform 1s ease-in-out;
}

.slideLeft.visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Slide Expand Up Animation */
@keyframes slideExpandUp {
    from {
        opacity: 0;
        transform: translateY(100%) scaleX(0.5);
    }

    to {
        opacity: 1;
        transform: translateY(0) scaleX(1);
    }
}

.slideExpandUp {
    opacity: 0;
    transform: translateY(100%) scaleX(0.5);
    transition: opacity 1.6s ease-out, transform 1.6s ease-out;
}

.slideExpandUp.visible {
    opacity: 1;
    transform: translateY(0) scaleX(1);
}

/* Stretch Right Animation */
@keyframes stretchRight {
    from {
        opacity: 0;
        transform: scaleX(0.3);
    }

    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

.stretchRight {
    opacity: 0;
    transform: scaleX(0.3);
    transition: opacity 1.5s ease-out, transform 1.5s ease-out;
    transform-origin: 0% 0%;
}

.stretchRight.visible {
    opacity: 1;
    transform: scaleX(1);
}

/* Pulse Animation */

.pulsing-button {
    position: relative;
    animation: pulse-animation 1s infinite;
}

@keyframes pulse-animation {
    0% {
        box-shadow: 0 0 0 0 rgba(225, 128, 0, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(220, 20, 60, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(220, 20, 60, 0);
    }
}

/* Bounce */
@keyframes bounce {
    from {
        opacity: 0;
        transform: translate3d(0, 30px, 0);
    }

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

.bounce {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
    transition: opacity 1s, transform 1s;
}

.bounce.visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Moving Background Animation */
@keyframes animatedBackground {
    from {
        opacity: 0;
        background-position: 0 0;
    }

    to {
        opacity: 1;
        background-position: 100% 0;
    }
}

.animatedBackground {
    opacity: 0;
    transition: opacity 1s, background-position 1s;
}

.animatedBackground.visible {
    opacity: 1;
}

/* Slide Up */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }

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

.slideUp {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.slideUp.visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Slide Down */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }

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

.slideDown {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.slideDown.visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Scale Up */
@keyframes scaleUp {
    from {
        opacity: 0;
        transform: scale(0.5);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.scaleUp {
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.scaleUp.visible {
    opacity: 1;
    transform: scale(1);
    transition-delay: 1.5s;
}

/* Scale Down */
@keyframes scaleDown {
    from {
        opacity: 0;
        transform: scale(1.5);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.scaleDown {
    opacity: 0;
    transform: scale(1.5);
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.scaleDown.visible {
    opacity: 1;
    transform: scale(1);
}

/* Rotate */
@keyframes rotate {
    from {
        opacity: 0;
        transform: rotate(45deg);
    }

    to {
        opacity: 1;
        transform: rotate(0deg);
    }
}

.rotate {
    opacity: 0;
    transform: rotate(45deg);
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.rotate.visible {
    opacity: 1;
    transform: rotate(0deg);
}

/* Flip */
@keyframes flip {
    from {
        opacity: 0;
        transform: rotateY(90deg);
    }

    to {
        opacity: 1;
        transform: rotateY(0deg);
    }
}

.flip {
    opacity: 0;
    transform: rotateY(90deg);
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.flip.visible {
    opacity: 1;
    transform: rotateY(0deg);
}

/* Skew */
@keyframes skew {
    from {
        opacity: 0;
        transform: skew(20deg, 20deg);
    }

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

.skew {
    opacity: 0;
    transform: skew(20deg, 20deg);
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.skew.visible {
    opacity: 1;
    transform: skew(0deg, 0deg);
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.9;
    }

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

.btn-pulse {
    animation: pulse 2s infinite;
}