/* 闪烁效果 */
@keyframes glow {
    0% {
        box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #d4af37, 0 0 20px #d4af37;
    }
    100% {
        box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #d4af37, 0 0 40px #d4af37;
    }
}

/* 脉冲效果 */
@keyframes pulse-slow {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* 浮动效果 */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

/* 淡入效果 */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* 滑入效果 - 上 */
@keyframes slideUp {
    0% {
        transform: translateY(50px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 滑入效果 - 左 */
@keyframes slideInLeft {
    0% {
        transform: translateX(-50px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* 滑入效果 - 右 */
@keyframes slideInRight {
    0% {
        transform: translateX(50px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* 边框脉冲效果 */
@keyframes borderPulse {
    0%, 100% {
        border-color: rgba(212, 175, 55, 0.3);
        box-shadow: 0 0 5px rgba(212, 175, 55, 0.5);
    }
    50% {
        border-color: rgba(212, 175, 55, 0.8);
        box-shadow: 0 0 15px rgba(212, 175, 55, 0.8);
    }
}

/* 边框闪烁效果 */
@keyframes borderGlow {
    0% {
        border-color: rgba(212, 175, 55, 0.2);
        box-shadow: 0 0 10px rgba(212, 175, 55, 0.3), 0 0 20px rgba(212, 175, 55, 0.1);
    }
    100% {
        border-color: rgba(212, 175, 55, 0.8);
        box-shadow: 0 0 15px rgba(212, 175, 55, 0.6), 0 0 30px rgba(212, 175, 55, 0.3);
    }
}

/* 模态框淡入效果 */
@keyframes modalFadeIn {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* 技能卡片悬停效果 */
@keyframes skillCardHover {
    0% {
        transform: translateY(0) scale(1);
        box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2);
    }
    100% {
        transform: translateY(-10px) scale(1.05);
        box-shadow: 0 15px 35px rgba(212, 175, 55, 0.4);
    }
}

/* 属性条填充动画 */
@keyframes progressFill {
    0% {
        width: 0%;
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

/* 粒子动画 */
@keyframes particle {
    0% {
        transform: translateY(100vh) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100vh) rotate(360deg);
        opacity: 0;
    }
}

/* 魔法光环效果 */
@keyframes magicAura {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.3;
    }
    50% {
        transform: scale(1.1) rotate(180deg);
        opacity: 0.7;
    }
}

/* 战士光环效果 */
@keyframes warriorAura {
    0%, 100% {
        box-shadow: 0 0 20px rgba(230, 57, 70, 0.3);
    }
    50% {
        box-shadow: 0 0 40px rgba(230, 57, 70, 0.6);
    }
}

/* 弓箭手光环效果 */
@keyframes archerAura {
    0%, 100% {
        box-shadow: 0 0 20px rgba(6, 214, 160, 0.3);
    }
    50% {
        box-shadow: 0 0 40px rgba(6, 214, 160, 0.6);
    }
}

/* 法师光环效果 */
@keyframes mageAura {
    0%, 100% {
        box-shadow: 0 0 20px rgba(69, 123, 157, 0.3);
    }
    50% {
        box-shadow: 0 0 40px rgba(69, 123, 157, 0.6);
    }
}

/* 滚动动画类 */
.animate-on-scroll {
    opacity: 0;
    transition: all 1s ease;
}

.animate-on-scroll.visible {
    opacity: 1;
}

.animate-on-scroll.slide-up {
    transform: translateY(50px);
}

.animate-on-scroll.slide-up.visible {
    transform: translateY(0);
}

.animate-on-scroll.slide-in-left {
    transform: translateX(-50px);
}

.animate-on-scroll.slide-in-left.visible {
    transform: translateX(0);
}

.animate-on-scroll.slide-in-right {
    transform: translateX(50px);
}

.animate-on-scroll.slide-in-right.visible {
    transform: translateX(0);
}

/* 职业特效类 */
.warrior-effect {
    animation: warriorAura 3s ease-in-out infinite;
}

.mage-effect {
    animation: mageAura 3s ease-in-out infinite;
}

.archer-effect {
    animation: archerAura 3s ease-in-out infinite;
}

.skill-card:hover {
    animation: skillCardHover 0.3s ease-out forwards;
}

.progress-bar {
    animation: progressFill 2s ease-out;
}

.magic-aura {
    animation: magicAura 4s ease-in-out infinite;
}

/* 粒子背景 */
.particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(212, 175, 55, 0.6);
    border-radius: 50%;
    animation: particle linear infinite;
}

.particle:nth-child(1) { left: 10%; animation-duration: 15s; animation-delay: 0s; }
.particle:nth-child(2) { left: 20%; animation-duration: 18s; animation-delay: 2s; }
.particle:nth-child(3) { left: 30%; animation-duration: 12s; animation-delay: 4s; }
.particle:nth-child(4) { left: 40%; animation-duration: 20s; animation-delay: 6s; }
.particle:nth-child(5) { left: 50%; animation-duration: 16s; animation-delay: 8s; }
.particle:nth-child(6) { left: 60%; animation-duration: 14s; animation-delay: 10s; }
.particle:nth-child(7) { left: 70%; animation-duration: 22s; animation-delay: 12s; }
.particle:nth-child(8) { left: 80%; animation-duration: 19s; animation-delay: 14s; }
.particle:nth-child(9) { left: 90%; animation-duration: 17s; animation-delay: 16s; }
.particle:nth-child(10) { left: 95%; animation-duration: 13s; animation-delay: 18s; }