/* Fade Up */
@keyframes fadeInUp {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

.fadeInUp {
    animation: 1.6s fadeInUp;
}

/* Fade Down */
@keyframes fadeInDown {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

.fadeInDown {
    animation: 1.6s fadeInDown;
}

/* Fade Left */
@keyframes fadeInLeft {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0%);
        opacity: 1;
    }
}

.fadeInLeft {
    animation: 1.6s fadeInLeft;
}

/* Fade Right */
@keyframes fadeInRight {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0%);
        opacity: 1;
    }
}

.fadeInRight {
    animation: 1.6s fadeInRight;
}

/* Fade In (simple opacity) */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.fadeIn {
    animation: 1.6s fadeIn;
}

/* Fade Zoom In */
@keyframes fadeZoomIn {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.fadeZoomIn {
    animation: 1.6s fadeZoomIn;
}

/* Fade Zoom Out */
@keyframes fadeZoomOut {
    0% {
        transform: scale(1.5);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.fadeZoomOut {
    animation: 1.6s fadeZoomOut;
}

/* Fade Rotate */
@keyframes fadeRotate {
    0% {
        transform: rotate(-180deg);
        opacity: 0;
    }
    100% {
        transform: rotate(0deg);
        opacity: 1;
    }
}

.fadeRotate {
    animation: 1.6s fadeRotate;
}

/* Fade Skew */
@keyframes fadeSkew {
    0% {
        transform: skew(45deg, 45deg);
        opacity: 0;
    }
    100% {
        transform: skew(0deg, 0deg);
        opacity: 1;
    }
}

.fadeSkew {
    animation: 1.6s fadeSkew;
}

/* Fade Flip X */
@keyframes fadeFlipX {
    0% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    100% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}

.fadeFlipX {
    animation: 1.6s fadeFlipX;
}

/* Fade Flip Y */
@keyframes fadeFlipY {
    0% {
        transform: perspective(400px) rotateY(90deg);
        opacity: 0;
    }
    100% {
        transform: perspective(400px) rotateY(0deg);
        opacity: 1;
    }
}

.fadeFlipY {
    animation: 1.6s fadeFlipY;
}


.animated-element {
    opacity: 0;
}

.animated-element.animated {
    opacity: 1;
}

/* Keyframe animations */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}