/* 《诅咒轮回：暗影卡牌》动画样式 */

/* 卡牌动画 */
.card-enter {
    animation: cardEnter 0.3s ease-out;
}

.card-leave {
    animation: cardLeave 0.3s ease-in;
}

@keyframes cardEnter {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes cardLeave {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(-50px) scale(0.8);
    }
}

/* 卡牌悬浮效果 */
.card-float {
    animation: cardFloat 3s ease-in-out infinite;
}

@keyframes cardFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* 卡牌发光效果 */
.card-glow {
    animation: cardGlow 2s ease-in-out infinite;
}

@keyframes cardGlow {
    0%, 100% {
        box-shadow: 0 0 10px rgba(124, 77, 255, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(124, 77, 255, 0.6);
    }
}

/* 战斗动画 */
.attack-animation {
    animation: attack 0.5s ease;
}

@keyframes attack {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(50px);
    }
    100% {
        transform: translateX(0);
    }
}

.defend-animation {
    animation: defend 0.5s ease;
}

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

.heal-animation {
    animation: heal 0.8s ease;
}

@keyframes heal {
    0% {
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.4);
    }
    70% {
        box-shadow: 0 0 0 20px rgba(76, 175, 80, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
    }
}

/* 暴击动画 */
.critical-hit {
    animation: criticalHit 0.8s ease;
}

@keyframes criticalHit {
    0% {
        transform: scale(1);
        filter: brightness(1);
    }
    25% {
        transform: scale(1.2);
        filter: brightness(1.5);
    }
    50% {
        transform: scale(1);
        filter: brightness(1);
    }
    75% {
        transform: scale(1.1);
        filter: brightness(1.3);
    }
    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}

/* 受伤动画 */
.hurt-animation {
    animation: hurt 0.5s ease;
}

@keyframes hurt {
    0% {
        transform: translateX(0);
        filter: brightness(1);
    }
    25% {
        transform: translateX(-10px);
        filter: brightness(1.5) hue-rotate(90deg);
    }
    50% {
        transform: translateX(10px);
        filter: brightness(1);
    }
    75% {
        transform: translateX(-5px);
        filter: brightness(1.2);
    }
    100% {
        transform: translateX(0);
        filter: brightness(1);
    }
}

/* 闪避动画 */
.dodge-animation {
    animation: dodge 0.6s ease;
}

@keyframes dodge {
    0% {
        transform: translateX(0) rotate(0);
    }
    25% {
        transform: translateX(30px) rotate(10deg);
    }
    50% {
        transform: translateX(0) rotate(0);
    }
    75% {
        transform: translateX(-30px) rotate(-10deg);
    }
    100% {
        transform: translateX(0) rotate(0);
    }
}

/* 闪避失败动画 */
.dodge-fail {
    animation: dodgeFail 0.4s ease;
}

@keyframes dodgeFail {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    50% {
        transform: translateX(20px);
        opacity: 0.5;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* 状态效果动画 */
.poison-tick {
    animation: poisonTick 0.5s ease;
}

@keyframes poisonTick {
    0% {
        filter: brightness(1) hue-rotate(0);
    }
    50% {
        filter: brightness(1.3) hue-rotate(90deg);
    }
    100% {
        filter: brightness(1) hue-rotate(0);
    }
}

.burn-tick {
    animation: burnTick 0.5s ease;
}

@keyframes burnTick {
    0% {
        filter: brightness(1) saturate(1);
    }
    50% {
        filter: brightness(1.5) saturate(2);
    }
    100% {
        filter: brightness(1) saturate(1);
    }
}

.freeze-animation {
    animation: freeze 1s ease;
}

@keyframes freeze {
    0% {
        filter: brightness(1) hue-rotate(0);
    }
    50% {
        filter: brightness(1.2) hue-rotate(180deg);
    }
    100% {
        filter: brightness(1) hue-rotate(0);
    }
}

/* 死亡动画 */
.death-animation {
    animation: death 1s ease forwards;
}

@keyframes death {
    0% {
        transform: scale(1);
        opacity: 1;
        filter: brightness(1);
    }
    50% {
        transform: scale(1.2);
        opacity: 0.8;
        filter: brightness(2);
    }
    100% {
        transform: scale(0);
        opacity: 0;
        filter: brightness(0);
    }
}

/* 胜利动画 */
.victory-animation {
    animation: victory 2s ease;
}

@keyframes victory {
    0% {
        transform: scale(1);
        filter: brightness(1);
    }
    25% {
        transform: scale(1.1);
        filter: brightness(1.5);
    }
    50% {
        transform: scale(1);
        filter: brightness(1);
    }
    75% {
        transform: scale(1.05);
        filter: brightness(1.2);
    }
    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}

/* 升级动画 */
.level-up-animation {
    animation: levelUp 1.5s ease;
}

@keyframes levelUp {
    0% {
        transform: scale(1);
        filter: brightness(1);
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.4);
    }
    50% {
        transform: scale(1.1);
        filter: brightness(1.5);
        box-shadow: 0 0 0 20px rgba(255, 215, 0, 0);
    }
    100% {
        transform: scale(1);
        filter: brightness(1);
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
    }
}

/* 获得物品动画 */
.item-get-animation {
    animation: itemGet 0.8s ease;
}

@keyframes itemGet {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    50% {
        transform: translateY(-20px) scale(1.2);
        opacity: 1;
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* 金币获得动画 */
.gold-get-animation {
    animation: goldGet 0.6s ease;
}

@keyframes goldGet {
    0% {
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.3);
        filter: brightness(1.5);
    }
    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}

/* 地图节点动画 */
.node-pulse {
    animation: nodePulse 2s ease-in-out infinite;
}

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

.node-available {
    animation: nodeAvailable 1.5s ease-in-out infinite;
}

@keyframes nodeAvailable {
    0%, 100% {
        box-shadow: 0 0 10px rgba(124, 77, 255, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(124, 77, 255, 0.6);
    }
}

/* 商店物品动画 */
.shop-item-enter {
    animation: shopItemEnter 0.5s ease;
}

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

.shop-item-hover {
    animation: shopItemHover 0.3s ease;
}

@keyframes shopItemHover {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-5px);
    }
}

/* 事件动画 */
.event-appear {
    animation: eventAppear 0.5s ease;
}

@keyframes eventAppear {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Boss阶段转换动画 */
.boss-phase-change {
    animation: bossPhaseChange 2s ease;
}

@keyframes bossPhaseChange {
    0% {
        transform: scale(1);
        filter: brightness(1);
    }
    25% {
        transform: scale(1.1);
        filter: brightness(2);
    }
    50% {
        transform: scale(0.9);
        filter: brightness(0.5);
    }
    75% {
        transform: scale(1.05);
        filter: brightness(1.5);
    }
    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}

/* 屏幕震动 */
.screen-shake {
    animation: screenShake 0.5s ease;
}

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

/* 屏幕闪烁 */
.screen-flash {
    animation: screenFlash 0.3s ease;
}

@keyframes screenFlash {
    0% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(2);
    }
    100% {
        filter: brightness(1);
    }
}

/* 文字弹出 */
.text-popup {
    animation: textPopup 1s ease forwards;
}

@keyframes textPopup {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.8);
    }
    20% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    80% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-20px) scale(1.1);
    }
}

/* 粒子效果 */
.particle {
    position: absolute;
    pointer-events: none;
    animation: particle 1s ease forwards;
}

@keyframes particle {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(var(--particle-x, 50px), var(--particle-y, -50px)) scale(0);
    }
}

/* 火焰粒子 */
.fire-particle {
    background: radial-gradient(circle, #ff9800, #ff5722);
    border-radius: 50%;
    animation: fireParticle 0.8s ease forwards;
}

@keyframes fireParticle {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(var(--particle-x, 30px), var(--particle-y, -80px)) scale(0);
    }
}

/* 冰霜粒子 */
.frost-particle {
    background: radial-gradient(circle, #e3f2fd, #90caf9);
    border-radius: 50%;
    animation: frostParticle 1s ease forwards;
}

@keyframes frostParticle {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(var(--particle-x, 20px), var(--particle-y, -60px)) scale(0.5);
    }
}

/* 毒素粒子 */
.poison-particle {
    background: radial-gradient(circle, #4caf50, #2e7d32);
    border-radius: 50%;
    animation: poisonParticle 1.2s ease forwards;
}

@keyframes poisonParticle {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(var(--particle-x, 40px), var(--particle-y, -40px)) scale(0.3);
    }
}

/* 雷电粒子 */
.lightning-particle {
    background: radial-gradient(circle, #fff, #ffeb3b);
    border-radius: 50%;
    animation: lightningParticle 0.3s ease forwards;
}

@keyframes lightningParticle {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(var(--particle-x, 60px), var(--particle-y, -30px)) scale(0);
    }
}

/* 治疗粒子 */
.heal-particle {
    background: radial-gradient(circle, #a5d6a7, #66bb6a);
    border-radius: 50%;
    animation: healParticle 1s ease forwards;
}

@keyframes healParticle {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(var(--particle-x, 0px), var(--particle-y, -100px)) scale(0);
    }
}

/* 暗影粒子 */
.shadow-particle {
    background: radial-gradient(circle, #7c4dff, #311b92);
    border-radius: 50%;
    animation: shadowParticle 1.5s ease forwards;
}

@keyframes shadowParticle {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(var(--particle-x, 50px), var(--particle-y, -70px)) scale(0);
    }
}

/* 界面过渡动画 */
.screen-transition {
    animation: screenTransition 0.5s ease;
}

@keyframes screenTransition {
    0% {
        opacity: 0;
        transform: translateX(100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 淡入淡出 */
.fade-in-out {
    animation: fadeInOut 2s ease;
}

@keyframes fadeInOut {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* 弹跳效果 */
.bounce {
    animation: bounce 0.6s ease;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}

/* 脉冲效果 */
.pulse {
    animation: pulse 2s ease-in-out infinite;
}

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

/* 旋转效果 */
.rotate {
    animation: rotate 2s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* 摇晃效果 */
.shake {
    animation: shake 0.5s ease;
}

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

/* 弹簧效果 */
.spring {
    animation: spring 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes spring {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

/* 打字机效果 */
.typewriter {
    overflow: hidden;
    border-right: .15em solid #7c4dff;
    white-space: nowrap;
    animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
}

@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: #7c4dff; }
}

/* 渐变文字 */
.gradient-text {
    background: linear-gradient(90deg, #7c4dff, #536dfe, #448aff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* 霓虹灯效果 */
.neon {
    text-shadow: 0 0 10px #7c4dff, 0 0 20px #7c4dff, 0 0 30px #7c4dff;
    animation: neonFlicker 1.5s infinite alternate;
}

@keyframes neonFlicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        text-shadow: 0 0 10px #7c4dff, 0 0 20px #7c4dff, 0 0 30px #7c4dff;
    }
    20%, 24%, 55% {
        text-shadow: none;
    }
}

/* 涟漪效果 */
.ripple {
    position: relative;
    overflow: hidden;
}

.ripple::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, #7c4dff 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: scale(10, 10);
    opacity: 0;
    transition: transform .5s, opacity 1s;
}

.ripple:active::after {
    transform: scale(0, 0);
    opacity: .3;
    transition: 0s;
}

/* 骨架屏加载 */
.skeleton {
    background: linear-gradient(90deg, #1a1a2e 25%, #2a1a4a 50%, #1a1a2e 75%);
    background-size: 200% 100%;
    animation: skeleton 1.5s ease-in-out infinite;
}

@keyframes skeleton {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* 进度条动画 */
.progress-bar {
    background: linear-gradient(90deg, #7c4dff, #536dfe, #448aff);
    background-size: 200% 100%;
    animation: progress 2s linear infinite;
}

@keyframes progress {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* 粒子爆炸效果 */
.particle-explosion {
    position: relative;
}

.particle-explosion::before,
.particle-explosion::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: inherit;
    animation: particleExplosion 1s ease forwards;
}

@keyframes particleExplosion {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* 波纹扩散 */
.ripple-expand {
    animation: rippleExpand 1s ease forwards;
}

@keyframes rippleExpand {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}