@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fade-in {
    animation: fadeIn 0.5s ease-out forwards;
}

@keyframes slideUp {
    from { transform: translateY(20%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.slide-up {
    animation: slideUp 0.5s ease-out forwards;
}

@keyframes zoomIn {
    from { transform: scale(0.5); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.zoom-in {
    animation: zoomIn 0.5s ease-out forwards;
}

@keyframes rotateIn {
    from { transform: rotate(-360deg); opacity: 0; }
    to { transform: rotate(0deg); opacity: 1; }
}

.rotate-in {
    animation: rotateIn 0.8s ease-out forwards;
}


@keyframes slideInLeft {
    from { transform: translateX(-100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.slide-in-left {
    animation: slideInLeft 0.5s ease-out forwards;
}


@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.slide-in-right {
    animation: slideInRight 0.5s ease-out forwards;
}

@keyframes slideInTop {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.slide-in-top {
    animation: slideInTop 0.5s ease-out forwards;
}

@keyframes slideInBottom {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.slide-in-bottom {
    animation: slideInBottom 0.5s ease-out forwards;
}