/* 动画效果文件 - 所有@keyframes动画定义 */

/* --- CORE ANIMATIONS --- */
@keyframes glitch-skew {
    0% {
        transform: skew(0deg);
    }

    20% {
        transform: skew(-2deg);
    }

    40% {
        transform: skew(2deg);
    }

    60% {
        transform: skew(-1deg);
    }

    80% {
        transform: skew(1deg);
    }

    100% {
        transform: skew(0deg);
    }
}

@keyframes danmakuMove {
    from {
        right: -50%;
        opacity: 1;
    }

    to {
        right: 120%;
        opacity: 0;
    }
}

/* Updated Aggressive Shake - Apple 风格优雅非主流版 */
@keyframes screenShake {
    0% {
        transform: scale(1) translate(0, 0);
        filter: brightness(1) saturate(1);
    }
    
    10% {
        transform: scale(1.008) translate(-3px, -2px);
        filter: brightness(1.15) saturate(1.3);
    }
    
    20% {
        transform: scale(0.995) translate(4px, 2px);
        filter: brightness(0.95) saturate(1.1);
    }
    
    30% {
        transform: scale(1.005) translate(-2px, 3px);
        filter: brightness(1.1) saturate(1.2);
    }
    
    40% {
        transform: scale(0.998) translate(3px, -2px);
        filter: brightness(1.05) saturate(1.15);
    }
    
    50% {
        transform: scale(1.003) translate(-2px, 0);
        filter: brightness(1.08) saturate(1.1);
    }
    
    60% {
        transform: scale(0.999) translate(2px, 1px);
        filter: brightness(1.02) saturate(1.05);
    }
    
    70% {
        transform: scale(1.001) translate(-1px, -1px);
        filter: brightness(1.01) saturate(1.02);
    }
    
    80% {
        transform: scale(1) translate(1px, 0);
        filter: brightness(1) saturate(1);
    }
    
    90% {
        transform: scale(1) translate(-0.5px, 0);
        filter: brightness(1) saturate(1);
    }

    100% {
        transform: scale(1) translate(0, 0);
        filter: brightness(1) saturate(1);
    }
}

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

    10% {
        background-position: -5% -10%;
    }

    20% {
        background-position: -15% 5%;
    }

    30% {
        background-position: 7% -25%;
    }

    40% {
        background-position: 20% 25%;
    }

    50% {
        background-position: -25% 10%;
    }

    60% {
        background-position: 15% 5%;
    }

    70% {
        background-position: 0% 15%;
    }

    80% {
        background-position: 25% 35%;
    }

    90% {
        background-position: -10% 10%;
    }
}

@keyframes gridMove {
    0% {
        transform: perspective(500px) rotateX(60deg) translateY(0) translateZ(-200px);
    }

    100% {
        transform: perspective(500px) rotateX(60deg) translateY(50px) translateZ(-200px);
    }
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Glitch flash effect */
@keyframes glitch-bg {
    0% {
        background: var(--danger-color);
        color: #000;
        transform: translate(2px, 2px);
    }

    50% {
        background: #fff;
        color: #000;
        transform: translate(-2px, -2px);
    }

    100% {
        background: #000;
        color: var(--accent-color);
        transform: translate(0, 0);
    }
}

/* Screen Shake Animation */
@keyframes shake {
    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-8px) rotate(-1deg);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(8px) rotate(1deg);
    }
}

/* --- COMBO VISUALS --- */
@keyframes combo-pulse {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    50% {
        transform: scale(1.5);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes floatUp {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateY(-100px) scale(1.5);
        opacity: 0;
    }
}

/* 通知动画 */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* 英灵等级特效动画 */
@keyframes king-aura {
    0%,
    100% {
        box-shadow:
            0 0 25px rgba(255, 107, 53, 0.5),
            inset 0 0 35px rgba(255, 107, 53, 0.15);
    }

    25% {
        box-shadow:
            0 0 35px rgba(255, 107, 53, 0.7),
            0 0 60px rgba(255, 215, 0, 0.3),
            inset 0 0 45px rgba(255, 107, 53, 0.2);
    }

    50% {
        box-shadow:
            0 0 45px rgba(255, 107, 53, 0.9),
            0 0 80px rgba(255, 215, 0, 0.4),
            inset 0 0 55px rgba(255, 107, 53, 0.25);
    }

    75% {
        box-shadow:
            0 0 35px rgba(255, 107, 53, 0.7),
            0 0 60px rgba(255, 215, 0, 0.3),
            inset 0 0 45px rgba(255, 107, 53, 0.2);
    }
}

@keyframes diamond-aura {
    0%,
    100% {
        box-shadow:
            0 0 20px rgba(185, 242, 255, 0.4),
            inset 0 0 25px rgba(185, 242, 255, 0.1);
    }

    50% {
        box-shadow:
            0 0 30px rgba(185, 242, 255, 0.6),
            0 0 50px rgba(185, 242, 255, 0.2),
            inset 0 0 35px rgba(185, 242, 255, 0.15);
    }
}

@keyframes gold-aura {
    0%,
    100% {
        box-shadow:
            0 0 18px rgba(255, 215, 0, 0.4),
            inset 0 0 20px rgba(255, 215, 0, 0.1);
    }

    50% {
        box-shadow:
            0 0 28px rgba(255, 215, 0, 0.6),
            0 0 45px rgba(255, 215, 0, 0.2),
            inset 0 0 30px rgba(255, 215, 0, 0.15);
    }
}

@keyframes highlight-pulse {
    0%,
    100% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.6);
    }

    50% {
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.9), 0 0 40px rgba(255, 215, 0, 0.3);
    }
}

/* 火焰动画 */
@keyframes king-flame {
    0% {
        filter: drop-shadow(0 0 10px #ff6b35) drop-shadow(0 0 20px #ff6b35);
        transform: scale(1.3) rotate(-2deg);
    }

    50% {
        filter: drop-shadow(0 0 25px #ff6b35) drop-shadow(0 0 40px #ffd700);
        transform: scale(1.4) rotate(2deg);
    }

    100% {
        filter: drop-shadow(0 0 15px #ff6b35) drop-shadow(0 0 25px #ff6b35);
        transform: scale(1.35) rotate(-1deg);
    }
}

@keyframes diamond-flame {
    from {
        filter: drop-shadow(0 0 8px #b9f2ff) drop-shadow(0 0 16px #b9f2ff);
        transform: scale(1.25);
    }

    to {
        filter: drop-shadow(0 0 18px #b9f2ff) drop-shadow(0 0 30px #87ceeb);
        transform: scale(1.3);
    }
}

@keyframes gold-flame {
    from {
        filter: drop-shadow(0 0 6px #ffd700) drop-shadow(0 0 12px #ffd700);
        transform: scale(1.22);
    }

    to {
        filter: drop-shadow(0 0 15px #ffd700) drop-shadow(0 0 25px #ffed4e);
        transform: scale(1.27);
    }
}

@keyframes silver-flame {
    from {
        filter: drop-shadow(0 0 5px #c0c0c0) drop-shadow(0 0 10px #c0c0c0);
        transform: scale(1.2);
    }

    to {
        filter: drop-shadow(0 0 12px #c0c0c0) drop-shadow(0 0 20px #e6e6e6);
        transform: scale(1.24);
    }
}

@keyframes bronze-flame {
    from {
        filter: drop-shadow(0 0 4px #cd7f32) drop-shadow(0 0 8px #cd7f32);
        transform: scale(1.2);
    }

    to {
        filter: drop-shadow(0 0 10px #cd7f32) drop-shadow(0 0 15px #daa520);
        transform: scale(1.22);
    }
}

/* 怨气动画 */
@keyframes king-rage {
    0% {
        transform: scale(1.3) rotate(-2deg);
        filter: drop-shadow(0 0 15px #ff6b35);
    }

    50% {
        transform: scale(1.4) rotate(2deg);
        filter: drop-shadow(0 0 25px #ff6b35) drop-shadow(0 0 40px #ffd700);
    }

    100% {
        transform: scale(1.35) rotate(-1deg);
        filter: drop-shadow(0 0 20px #ff6b35);
    }
}

@keyframes diamond-rage {
    from {
        transform: scale(1.25);
        filter: drop-shadow(0 0 12px #b9f2ff);
    }

    to {
        transform: scale(1.3);
        filter: drop-shadow(0 0 18px #b9f2ff);
    }
}

@keyframes gold-rage {
    from {
        transform: scale(1.22);
        filter: drop-shadow(0 0 10px #ffd700);
    }

    to {
        transform: scale(1.27);
        filter: drop-shadow(0 0 15px #ffd700);
    }
}

@keyframes silver-rage {
    from {
        transform: scale(1.2);
        filter: drop-shadow(0 0 8px #c0c0c0);
    }

    to {
        transform: scale(1.24);
        filter: drop-shadow(0 0 12px #c0c0c0);
    }
}

@keyframes bronze-rage {
    from {
        transform: scale(1.2);
        filter: drop-shadow(0 0 6px #cd7f32);
    }

    to {
        transform: scale(1.22);
        filter: drop-shadow(0 0 10px #cd7f32);
    }
}

/* 英灵名字样式增强 */
@keyframes king-text-glow {
    from {
        text-shadow: 0 0 10px rgba(255, 107, 53, 0.8);
    }

    to {
        text-shadow: 0 0 20px rgba(255, 107, 53, 1), 0 0 30px rgba(255, 215, 0, 0.5);
    }
}

@keyframes gold-text-glow {
    from {
        text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
    }

    to {
        text-shadow: 0 0 15px rgba(255, 215, 0, 0.9), 0 0 25px rgba(255, 215, 0, 0.3);
    }
}

/* 英灵扫光效果 */
@keyframes soul-sweep {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}


/* ===== 精致非主流特效动画 ===== */
@keyframes softPulse {
  0% {
    transform: scale(0.5);
    opacity: 1;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* King 级别光环 - 精致版 */
@keyframes kingAura {
  0%, 100% {
    box-shadow:
      0 4px 20px rgba(255, 107, 53, 0.35),
      0 0 40px rgba(255, 107, 53, 0.15),
      inset 0 0 30px rgba(255, 107, 53, 0.08);
  }
  50% {
    box-shadow:
      0 6px 30px rgba(255, 107, 53, 0.5),
      0 0 60px rgba(255, 107, 53, 0.25),
      inset 0 0 40px rgba(255, 107, 53, 0.12);
  }
}

@keyframes kingRage {
  0%, 100% { 
    transform: scale(1.2);
    filter: drop-shadow(0 0 10px #ff6b35);
  }
  50% { 
    transform: scale(1.3);
    filter: drop-shadow(0 0 18px #ff6b35) drop-shadow(0 0 30px rgba(255, 107, 53, 0.5));
  }
}

/* Diamond 脉冲 */
@keyframes diamondPulse {
  0%, 100% {
    box-shadow:
      0 4px 20px rgba(0, 242, 255, 0.3),
      0 0 35px rgba(0, 242, 255, 0.12),
      inset 0 0 25px rgba(0, 242, 255, 0.06);
  }
  50% {
    box-shadow:
      0 6px 28px rgba(0, 242, 255, 0.45),
      0 0 50px rgba(0, 242, 255, 0.2),
      inset 0 0 35px rgba(0, 242, 255, 0.1);
  }
}

@keyframes diamondRage {
  0%, 100% { 
    transform: scale(1.18);
    filter: drop-shadow(0 0 8px #00f2ff);
  }
  50% { 
    transform: scale(1.28);
    filter: drop-shadow(0 0 15px #00f2ff) drop-shadow(0 0 25px rgba(0, 242, 255, 0.4));
  }
}

/* Gold 燃烧 */
@keyframes goldBurn {
  0%, 100% {
    box-shadow:
      0 4px 18px rgba(255, 215, 0, 0.3),
      0 0 30px rgba(255, 215, 0, 0.1),
      inset 0 0 20px rgba(255, 215, 0, 0.05);
  }
  50% {
    box-shadow:
      0 6px 25px rgba(255, 215, 0, 0.45),
      0 0 45px rgba(255, 215, 0, 0.18),
      inset 0 0 28px rgba(255, 215, 0, 0.08);
  }
}

@keyframes goldRage {
  0%, 100% { 
    transform: scale(1.15);
    filter: drop-shadow(0 0 6px #ffd700);
  }
  50% { 
    transform: scale(1.25);
    filter: drop-shadow(0 0 12px #ffd700) drop-shadow(0 0 20px rgba(255, 215, 0, 0.4));
  }
}

/* Silver 闪光 */
@keyframes silverShine {
  0%, 100% {
    box-shadow: 
      0 4px 15px rgba(192, 192, 192, 0.2),
      inset 0 0 15px rgba(192, 192, 192, 0.04);
  }
  50% {
    box-shadow: 
      0 5px 22px rgba(192, 192, 192, 0.35),
      0 0 30px rgba(255, 255, 255, 0.1),
      inset 0 0 20px rgba(192, 192, 192, 0.06);
  }
}

@keyframes silverRage {
  0%, 100% { 
    transform: scale(1.12);
    filter: drop-shadow(0 0 5px #c0c0c0);
  }
  50% { 
    transform: scale(1.2);
    filter: drop-shadow(0 0 10px #c0c0c0);
  }
}

/* Bronze */
@keyframes bronzeRage {
  0%, 100% { 
    transform: scale(1.1);
    filter: drop-shadow(0 0 4px #cd7f32);
  }
  50% { 
    transform: scale(1.18);
    filter: drop-shadow(0 0 8px #cd7f32);
  }
}


/* 非主流高亮脉冲 */
@keyframes crazyHighlightPulse {
  0%, 100% {
    box-shadow: 
      0 0 30px rgba(255, 0, 255, 0.6),
      0 0 60px rgba(255, 0, 255, 0.3),
      5px 5px 0 #00ff00;
  }
  50% {
    box-shadow: 
      0 0 50px rgba(0, 255, 255, 0.8),
      0 0 100px rgba(0, 255, 255, 0.4),
      -5px -5px 0 #ff00ff;
  }
}

/* ===== Apple 风格点赞特效动画 ===== */

/* Combo 数字弹性缩放 */
@keyframes appleComboScale {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  50% {
    transform: scale(1.15);
  }
  70% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Combo 淡出 */
@keyframes appleComboFadeOut {
  0% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-15px);
  }
}

/* 浮动 +1 优雅上升 */
@keyframes appleFloatUp {
  0% {
    transform: translateY(0) scale(0.8);
    opacity: 0;
  }
  15% {
    transform: translateY(-10px) scale(1.1);
    opacity: 1;
  }
  100% {
    transform: translateY(-80px) scale(0.9);
    opacity: 0;
  }
}

/* 按钮涟漪扩散 */
@keyframes appleRipple {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.6;
  }
  100% {
    transform: translate(-50%, -50%) scale(2.5);
    opacity: 0;
  }
}

/* 按钮按压效果 */
@keyframes appleBtnPress {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.92);
  }
  100% {
    transform: scale(1);
  }
}

/* 光点闪烁 */
@keyframes appleSparkle {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: scale(1.2) rotate(180deg);
    opacity: 0.8;
  }
  100% {
    transform: scale(0) rotate(360deg);
    opacity: 0;
  }
}

/* Combo 光晕呼吸 */
@keyframes appleGlowPulse {
  0%, 100% {
    opacity: 0.3;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1.2);
  }
}

/* 传奇级别彩虹渐变 */
@keyframes appleRainbowShift {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

/* 按钮发热效果 */
@keyframes appleHeatGlow {
  0%, 100% {
    box-shadow: 
      0 0 20px rgba(255, 59, 48, 0.4),
      0 0 40px rgba(255, 59, 48, 0.2),
      inset 0 0 15px rgba(255, 59, 48, 0.1);
  }
  50% {
    box-shadow: 
      0 0 30px rgba(255, 59, 48, 0.6),
      0 0 60px rgba(255, 59, 48, 0.3),
      inset 0 0 20px rgba(255, 59, 48, 0.15);
  }
}

/* 按钮燃烧效果 */
@keyframes appleBlazeGlow {
  0%, 100% {
    box-shadow: 
      0 0 25px rgba(255, 149, 0, 0.5),
      0 0 50px rgba(255, 59, 48, 0.3),
      0 0 75px rgba(175, 82, 222, 0.2),
      inset 0 0 20px rgba(255, 149, 0, 0.15);
  }
  50% {
    box-shadow: 
      0 0 40px rgba(255, 149, 0, 0.7),
      0 0 80px rgba(255, 59, 48, 0.4),
      0 0 100px rgba(175, 82, 222, 0.3),
      inset 0 0 30px rgba(255, 149, 0, 0.2);
  }
}

/* 更新高亮样式 - 非主流版 */
.fate-card.highlighted {
    border-left-color: #ff00ff !important;
    box-shadow: 
      0 0 30px rgba(255, 0, 255, 0.6),
      0 0 60px rgba(255, 0, 255, 0.3),
      5px 5px 0 #00ff00 !important;
    background: linear-gradient(90deg, #0a000a, #1a001a, #0a000a) !important;
    transform: scale(1.1) skew(-2deg) !important;
    animation: crazyHighlightPulse 0.5s infinite, glitchShake 0.2s infinite;
}


/* 故障闪烁 - 用于爆炸效果 */
@keyframes glitchFlash {
  0% { 
    transform: scale(0.5);
    opacity: 1;
    filter: hue-rotate(0deg);
  }
  33% { 
    transform: scale(1.2) skew(5deg);
    opacity: 0.8;
    filter: hue-rotate(90deg);
  }
  66% { 
    transform: scale(0.8) skew(-5deg);
    opacity: 1;
    filter: hue-rotate(180deg);
  }
  100% { 
    transform: scale(1.5);
    opacity: 0;
    filter: hue-rotate(270deg);
  }
}

/* 霓虹脉冲 */
@keyframes neonPulse {
  0% { 
    transform: scale(0.3);
    opacity: 1;
  }
  50% { 
    transform: scale(1.2);
    opacity: 0.8;
    filter: brightness(2);
  }
  100% { 
    transform: scale(1.8);
    opacity: 0;
  }
}