/* ============================================
   SHARED POPUP ANIMATIONS
   Common keyframes used by popup1 and popup2
   ============================================ */

@keyframes rotateFade {
    from {
        opacity: 0;
        transform: rotate(-180deg) scale(0.3);
    }

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

@keyframes rotateFadeOut {
    from {
        opacity: 1;
        transform: rotate(0) scale(1);
    }

    to {
        opacity: 0;
        transform: rotate(180deg) scale(0.3);
    }
}

@keyframes button-loading-spinner {
    to {
        transform: rotate(360deg);
    }
}

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

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

@keyframes slideUpIn {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUpOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-30px); }
}

@keyframes slideDownIn {
    from { opacity: 0; transform: translateY(-30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideDownOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(30px); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.3); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes scaleOut {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.3); }
}