@charset "utf-8";

/*
 * 通用弹窗动画样式
 * 使用方法：
 * 1. 给需要添加动画的弹窗元素添加 'popup-animation' 类
 * 2. 显示时添加 'show-animation' 类
 * 3. 隐藏时移除 'show-animation' 类并添加 'hide-animation' 类
 * 4. 动画结束后可设置 display: none 隐藏元素
 */

/* 弹窗显示动画 - 从中心放大并弹跳 */
@keyframes popupShow {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.1);
    }
    70% {
        transform: translate(-50%, -50%) scale(0.95);
    }
    85% {
        transform: translate(-50%, -50%) scale(1.05);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* 弹窗隐藏动画 - 逐渐缩小 */
@keyframes popupHide {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0);
    }
}

@keyframes maskShow {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.3;
    }
}

@keyframes maskHide {
    0% {
        opacity: 0.3;
    }
    100% {
        opacity: 0;
    }
}

/* 通用弹窗动画类 */
.popup-animation.show-animation {
    animation: popupShow 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.popup-animation.hide-animation {
    animation: popupHide 0.3s ease-in-out forwards;
}

#mask.show-animation {
    animation: maskShow 0.3s ease-out forwards;
}

#mask.hide-animation {
    animation: maskHide 0.3s ease-out forwards;
}

/* 确保弹窗居中 */
.popup-animation {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    margin: 0 !important;
}