/* ==================== 动画效果 ==================== */
/* 淡入淡出系列 */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

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

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

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

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

/* 平移系列 */
@keyframes slideIn {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

@keyframes slideInUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

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

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

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

@keyframes slideOut {
    from { transform: translateX(0); }
    to { transform: translateX(100%); }
}

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

@keyframes slideOutDown {
    from { transform: translateY(0); }
    to { transform: translateY(100%); }
}

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

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

/* 缩放系列 */
@keyframes zoomIn {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

@keyframes zoomOut {
    from { transform: scale(1); }
    to { transform: scale(0); }
}

@keyframes zoomInUp {
    from { transform: scale(0) translateY(100px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes zoomInDown {
    from { transform: scale(0) translateY(-100px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes zoomInLeft {
    from { transform: scale(0) translateX(-100px); opacity: 0; }
    to { transform: scale(1) translateX(0); opacity: 1; }
}

@keyframes zoomInRight {
    from { transform: scale(0) translateX(100px); opacity: 0; }
    to { transform: scale(1) translateX(0); opacity: 1; }
}

/* 旋转系列 */
@keyframes rotateIn {
    from { transform: rotate(-180deg); opacity: 0; }
    to { transform: rotate(0); opacity: 1; }
}

@keyframes rotateInUpLeft {
    from { transform: rotate(-90deg) translateY(-100%); opacity: 0; }
    to { transform: rotate(0) translateY(0); opacity: 1; }
}

@keyframes rotateInUpRight {
    from { transform: rotate(90deg) translateY(-100%); opacity: 0; }
    to { transform: rotate(0) translateY(0); opacity: 1; }
}

@keyframes rotateInDownLeft {
    from { transform: rotate(-90deg) translateY(100%); opacity: 0; }
    to { transform: rotate(0) translateY(0); opacity: 1; }
}

@keyframes rotateInDownRight {
    from { transform: rotate(90deg) translateY(100%); opacity: 0; }
    to { transform: rotate(0) translateY(0); opacity: 1; }
}

/* 其他基础动画 */
@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: translate3d(0,0,0);
    }
    20%, 53%, 80%, 100% {
        opacity: 1;
        transform: translate3d(0,0,0);
    }
    40%, 43% {
        opacity: 1;
        transform: translate3d(0, -30px, 0);
    }
    70% {
        opacity: 1;
        transform: translate3d(0, -15px, 0);
    }
    90% {
        opacity: 1;
        transform: translate3d(0,-4px,0);
    }
}

@keyframes bounceEmphasis {
    0%, 20%, 53%, 80%, 100% {
        transform: translate3d(0,0,0);
    }
    40%, 43% {
        transform: translate3d(0, -30px, 0);
    }
    70% {
        transform: translate3d(0, -15px, 0);
    }
    90% {
        transform: translate3d(0,-4px,0);
    }
}

@keyframes swing {
    0% {
        transform: rotate(0deg);
    }
    20% { transform: rotate(15deg); }
    40% { transform: rotate(-10deg); }
    60% { transform: rotate(5deg); }
    80% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}

@keyframes flip {
    0% {
        transform: perspective(400px) rotateY(0);
        animation-timing-function: ease-out;
    }
    40% {
        transform: perspective(400px) translateZ(150px) rotateY(-190deg);
        animation-timing-function: ease-out;
    }
    50% {
        transform: perspective(400px) translateZ(150px) rotateY(-170deg);
        animation-timing-function: ease-in;
    }
    80% {
        transform: perspective(400px) rotateY(0deg);
        animation-timing-function: ease-in;
    }
    100% {
        transform: perspective(400px) rotateY(0deg);
        animation-timing-function: ease-in;
    }
}

@keyframes flash {
    from, 50%, to {
        opacity: 1;
    }
    25%, 75% {
        opacity: 0;
    }
}

@keyframes shake {
    0% {
        opacity: 0;
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% { opacity: 1; transform: translateX(-10px); }
    20%, 40%, 60%, 80% { opacity: 1; transform: translateX(10px); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes wobble {
    0% { opacity: 0; transform: translateX(0%); }
    15% { opacity: 1; transform: translateX(-25%) rotate(-5deg); }
    30% { opacity: 1; transform: translateX(20%) rotate(3deg); }
    45% { opacity: 1; transform: translateX(-15%) rotate(-3deg); }
    60% { opacity: 1; transform: translateX(10%) rotate(2deg); }
    75% { opacity: 1; transform: translateX(-5%) rotate(-1deg); }
    100% { opacity: 1; transform: translateX(0%); }
}

@keyframes jello {
    0% { opacity: 0; transform: none; }
    11.1% { opacity: 1; transform: none; }
    22.2% { opacity: 1; transform: skewX(-12.5deg) skewY(-12.5deg); }
    33.3% { opacity: 1; transform: skewX(6.25deg) skewY(6.25deg); }
    44.4% { opacity: 1; transform: skewX(-3.125deg) skewY(-3.125deg); }
    55.5% { opacity: 1; transform: skewX(1.5625deg) skewY(1.5625deg); }
    66.6% { opacity: 1; transform: skewX(-0.78125deg) skewY(-0.78125deg); }
    77.7% { opacity: 1; transform: skewX(0.390625deg) skewY(0.390625deg); }
    88.8% { opacity: 1; transform: skewX(-0.1953125deg) skewY(-0.1953125deg); }
    100% { opacity: 1; transform: none; }
}

@keyframes rubberBand {
    0% { opacity: 0; transform: scale(1); }
    30% { opacity: 1; transform: scaleX(1.25) scaleY(0.75); }
    40% { opacity: 1; transform: scaleX(0.75) scaleY(1.25); }
    50% { opacity: 1; transform: scaleX(1.15) scaleY(0.85); }
    65% { opacity: 1; transform: scaleX(0.95) scaleY(1.05); }
    75% { opacity: 1; transform: scaleX(1.05) scaleY(0.95); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes pulse {
    0% { opacity: 0; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
    100% { opacity: 1; transform: scale(1); }
}

/* 动画类 */
/* 淡入淡出系列 */
.fadeIn { animation: fadeIn 1s ease-in-out forwards; }
.fadeOut { animation: fadeOut 1s ease-in-out forwards; }
.fadeInUp { animation: fadeInUp 1s ease-in-out forwards; }
.fadeInDown { animation: fadeInDown 1s ease-in-out forwards; }
.fadeInLeft { animation: fadeInLeft 1s ease-in-out forwards; }
.fadeInRight { animation: fadeInRight 1s ease-in-out forwards; }

/* 平移系列 */
.slideIn { animation: slideIn 1s ease-in-out forwards; }
.slideInUp { animation: slideInUp 1s ease-in-out forwards; }
.slideInDown { animation: slideInDown 1s ease-in-out forwards; }
.slideInLeft { animation: slideInLeft 1s ease-in-out forwards; }
.slideInRight { animation: slideInRight 1s ease-in-out forwards; }
.slideOut { animation: slideOut 1s ease-in-out forwards; }
.slideOutUp { animation: slideOutUp 1s ease-in-out forwards; }
.slideOutDown { animation: slideOutDown 1s ease-in-out forwards; }
.slideOutLeft { animation: slideOutLeft 1s ease-in-out forwards; }
.slideOutRight { animation: slideOutRight 1s ease-in-out forwards; }

/* 缩放系列 */
.zoomIn { animation: zoomIn 1s ease-in-out forwards; }
.zoomOut { animation: zoomOut 1s ease-in-out forwards; }
.zoomInUp { animation: zoomInUp 1s ease-in-out forwards; }
.zoomInDown { animation: zoomInDown 1s ease-in-out forwards; }
.zoomInLeft { animation: zoomInLeft 1s ease-in-out forwards; }
.zoomInRight { animation: zoomInRight 1s ease-in-out forwards; }

/* 旋转系列 */
.rotateIn { animation: rotateIn 1s ease-in-out forwards; }
.rotateInUpLeft { animation: rotateInUpLeft 1s ease-in-out forwards; }
.rotateInUpRight { animation: rotateInUpRight 1s ease-in-out forwards; }
.rotateInDownLeft { animation: rotateInDownLeft 1s ease-in-out forwards; }
.rotateInDownRight { animation: rotateInDownRight 1s ease-in-out forwards; }

/* 其他基础动画 */
.bounce { animation: bounce 1s ease-in-out forwards; }
.swing { animation: swing 1s ease-in-out forwards; }
.flip { animation: flip 1s ease-in-out forwards; }
.flash { animation: flash 1s ease-in-out forwards; }
.shake { animation: shake 1s ease-in-out forwards; }
.wobble { animation: wobble 1s ease-in-out forwards; }
.jello { animation: jello 1s ease-in-out forwards; }
.rubberBand { animation: rubberBand 1s ease-in-out forwards; }
.pulse { animation: pulse 1s ease-in-out forwards; }

/* 动画角标样式 */
.animation-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 24px;
    height: 24px;
    background-color: #ff6b6b;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    cursor: help;
    z-index: 100;
    animation: pulse 1.5s infinite;
}

.animation-badge::after {
    content: "A";
    font-family: Arial, sans-serif;
}

/* 动画徽章脉冲效果 */
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(255, 107, 107, 0.7);
    }
    70% {
        transform: scale(1.1);
        box-shadow: 0 0 10px rgba(255, 107, 107, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(255, 107, 107, 0);
    }
}