/* D:\Websites\Internal_Company\Sarekam\css\animations.css */
/* Sliding Transitions for Screens and Modals */

.slide-in-right {
    animation: slideInRight 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

.slide-out-right {
    animation: slideOutRight 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

.slide-in-bottom {
    animation: slideInBottom 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

.slide-out-bottom {
    animation: slideOutBottom 0.35s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

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

.fade-out {
    animation: fadeOut 0.2s ease forwards;
}

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

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

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

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

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

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