/* ============================================================================
 * css/animations.css — Hệ Thống Hoạt Ảnh Keyframes & Diễn Hoạt Nhân Vật
 * ============================================================================ */

@import url('./status_vfx_animations.css');

/* 1. Hiệu ứng cơ bản & Chibi */
@keyframes chibiBreathe {
    0%, 100% { transform: translateY(0px) scale(1); }
    50% { transform: translateY(-3px) scale(1.02); }
}
.chibi-idle { animation: chibiBreathe 2.4s ease-in-out infinite; }

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
.slide-in-right {
    animation: slideInRight 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes slideInLeft {
    from { transform: translateX(-100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
.slide-in-left {
    animation: slideInLeft 0.28s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 2. Hoạt ảnh thể hình người thực trực quan (Human Figure Animations) */
@keyframes figureBreathe {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}
.figure-idle { animation: figureBreathe 2.8s ease-in-out infinite; }

.figure-anim-attack #limb-arm-right {
    transform-origin: 155px 95px;
    animation: figureArmSlash 0.45s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}
@keyframes figureArmSlash {
    0% { transform: rotate(0deg); }
    30% { transform: rotate(-45deg) translateY(-8px); }
    70% { transform: rotate(50deg) translateY(10px); }
    100% { transform: rotate(0deg); }
}
.figure-anim-attack .vfx-slash-arc {
    animation: slashArcFlash 0.45s ease-out forwards;
}
@keyframes slashArcFlash {
    0% { opacity: 0; stroke-dashoffset: 90; }
    40% { opacity: 1; stroke-dashoffset: 0; filter: drop-shadow(0 0 10px #f59e0b); }
    100% { opacity: 0; stroke-dashoffset: -90; }
}

.figure-anim-heavy #limb-arm-right {
    transform-origin: 155px 95px;
    animation: figureHeavySlash 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes figureHeavySlash {
    0% { transform: rotate(0deg); }
    40% { transform: rotate(-85deg) translateY(-25px); }
    75% { transform: rotate(45deg) translateY(20px); }
    100% { transform: rotate(0deg); }
}

.figure-anim-ult {
    animation: figureUltFly 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes figureUltFly {
    0% { transform: translateY(0) scale(1); filter: brightness(1); }
    45% { transform: translateY(-30px) scale(1.15); filter: brightness(1.6) drop-shadow(0 0 25px #facc15); }
    100% { transform: translateY(0) scale(1); filter: brightness(1); }
}

.figure-anim-defend .vfx-shield-barrier {
    opacity: 0.95 !important;
    animation: shieldPulse 1.2s infinite ease-in-out;
}
@keyframes shieldPulse {
    0%, 100% { filter: drop-shadow(0 0 8px #38bdf8); }
    50% { filter: drop-shadow(0 0 18px #0284c7); }
}

.figure-anim-dodge {
    animation: figureDodgeBack 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes figureDodgeBack {
    0% { transform: translateX(0); opacity: 1; }
    40% { transform: translateX(-40px) skewX(8deg); opacity: 0.5; }
    100% { transform: translateX(0); opacity: 1; }
}

.figure-anim-hurt {
    animation: figureHurtJolt 0.35s ease-out forwards;
}
@keyframes figureHurtJolt {
    0% { transform: translate(0, 0); }
    25% { transform: translate(-15px, 6px) rotate(-6deg); filter: drop-shadow(0 0 10px #ef4444); }
    50% { transform: translate(12px, -4px) rotate(4deg); }
    75% { transform: translate(-6px, 2px); }
    100% { transform: translate(0, 0); }
}

.figure-anim-stun #limb-head {
    animation: stunHeadSway 1s infinite ease-in-out;
}
.figure-anim-stun .vfx-stun-stars {
    opacity: 1 !important;
    animation: stunSpin 1.5s infinite linear;
    transform-origin: 120px 45px;
}
@keyframes stunHeadSway {
    0%, 100% { transform: rotate(-8deg); }
    50% { transform: rotate(8deg); }
}

/* 3. Hiệu ứng thị giác bàn cờ chiến trận */
@keyframes spinReticle {
    0% { transform: translate(-50%, -50%) rotate(0deg) scale(0.95); opacity: 0.8; }
    50% { transform: translate(-50%, -50%) rotate(180deg) scale(1.1); opacity: 1; }
    100% { transform: translate(-50%, -50%) rotate(360deg) scale(0.95); opacity: 0.8; }
}

@keyframes floatUpFade {
    0% { transform: translate(-50%, 0) scale(0.85); opacity: 0; }
    20% { transform: translate(-50%, -10px) scale(1.15); opacity: 1; }
    70% { transform: translate(-50%, -30px) scale(1.05); opacity: 1; }
    100% { transform: translate(-50%, -50px) scale(0.9); opacity: 0; }
}

@keyframes slashPop {
    0% { transform: translate(-50%, -50%) scale(0.3) rotate(-20deg); opacity: 1; }
    50% { transform: translate(-50%, -50%) scale(1.2) rotate(10deg); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1.4) rotate(25deg); opacity: 0; }
}

@keyframes thunderStrike {
    0% { transform: translate(-50%, -95%) scaleY(0.2); opacity: 0.2; }
    30% { transform: translate(-50%, -85%) scaleY(1.1); opacity: 1; filter: drop-shadow(0 0 20px #38bdf8); }
    70% { transform: translate(-50%, -85%) scaleY(1); opacity: 0.9; }
    100% { transform: translate(-50%, -85%) scaleY(0.9); opacity: 0; }
}

@keyframes cutInSlide {
    0% { transform: translate(-50%, -30px) scale(0.8); opacity: 0; }
    15% { transform: translate(-50%, 0px) scale(1.05); opacity: 1; }
    85% { transform: translate(-50%, 0px) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -20px) scale(0.9); opacity: 0; }
}

@keyframes pulseMove {
    0%, 100% { background-color: rgba(56, 189, 248, 0.15); border-color: rgba(56, 189, 248, 0.5); }
    50% { background-color: rgba(56, 189, 248, 0.35); border-color: rgba(56, 189, 248, 0.9); }
}

@keyframes attackHighlightPulse {
    0%, 100% { background-color: rgba(239, 68, 68, 0.18); border-color: rgba(239, 68, 68, 0.6); }
    50% { background-color: rgba(239, 68, 68, 0.4); border-color: rgba(239, 68, 68, 1); }
}

@keyframes screenShakeAnim {
    10%, 90% { transform: translate3d(-2px, 1px, 0); }
    20%, 80% { transform: translate3d(3px, -2px, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 3px, 0); }
    40%, 60% { transform: translate3d(4px, -3px, 0); }
}

@keyframes attackSlash {
    0% { transform: scale(1) translateX(0); }
    35% { transform: scale(1.25) translateX(25px) rotate(12deg); filter: drop-shadow(0 0 16px #f59e0b); }
    100% { transform: scale(1) translateX(0); }
}
.anim-attack { animation: attackSlash 0.45s ease-out; }

@keyframes hurtJolt {
    0%, 100% { transform: translate(0, 0); }
    20% { transform: translate(-8px, 4px) rotate(-8deg); filter: drop-shadow(0 0 12px #ef4444); }
    40% { transform: translate(8px, -4px) rotate(6deg); }
    60% { transform: translate(-4px, 2px); }
    80% { transform: translate(4px, -2px); }
}
.anim-hurt { animation: hurtJolt 0.35s ease-out; }

@keyframes ultBurst {
    0% { transform: scale(1); filter: brightness(1); }
    40% { transform: scale(1.4) translateY(-15px); filter: brightness(2) drop-shadow(0 0 30px #facc15); }
    100% { transform: scale(1); filter: brightness(1); }
}
.anim-ult { animation: ultBurst 0.9s cubic-bezier(0.16, 1, 0.3, 1); }

@keyframes stunSpin {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-10deg) translateY(-2px); }
    75% { transform: rotate(10deg) translateY(2px); }
}
.anim-stun { animation: stunSpin 1.2s infinite ease-in-out; filter: grayscale(0.5); }

/* 4. Hào quang & Môi trường */
@keyframes goldGlowPulse {
    0%, 100% { filter: drop-shadow(0 0 10px rgba(250, 204, 21, 0.4)) drop-shadow(0 0 20px rgba(234, 179, 8, 0.2)); }
    50% { filter: drop-shadow(0 0 20px rgba(250, 204, 21, 0.85)) drop-shadow(0 0 40px rgba(245, 158, 11, 0.5)); }
}
.anim-gold-glow { animation: goldGlowPulse 2.5s infinite ease-in-out; }

@keyframes flameFlicker {
    0%, 100% { transform: scale(1) translateY(0); opacity: 0.95; }
    50% { transform: scale(1.08) translateY(-2px); opacity: 1; filter: brightness(1.2); }
}
.anim-flame { animation: flameFlicker 1.8s infinite ease-in-out; }

@keyframes floatGentle {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-5px); }
}
.anim-float { animation: floatGentle 3s ease-in-out infinite; }

/* 5. Chu kỳ hoạt ảnh khớp nối nhân vật (Character Animation Rig) */
@keyframes rigIdleBreathe {
    0%, 100% { transform: translateY(0px) scale(1, 1); }
    50% { transform: translateY(-4px) scale(1.02, 0.98); }
}
@keyframes rigTorsoBreathe {
    0%, 100% { transform: scale(1, 1); }
    50% { transform: scale(1.03, 1.02) translateY(-1.5px); }
}
@keyframes rigHeadBob {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-2px) rotate(1deg); }
}
@keyframes rigWeaponSway {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(-5deg) translateY(-2px); }
}
@keyframes rigCapeSway {
    0%, 100% { transform: skewX(0deg) scaleX(1); }
    50% { transform: skewX(-6deg) scaleX(1.05); }
}
.anim-rig-idle {
    --base-duration: 1.8s;
    animation: rigIdleBreathe var(--base-duration) ease-in-out infinite;
}
.anim-rig-idle .rig-torso-breathe {
    transform-origin: 107px 144px;
    animation: rigTorsoBreathe 1.8s ease-in-out infinite;
}
.anim-rig-idle .rig-head-bob {
    transform-origin: 107px 106px;
    animation: rigHeadBob 1.8s ease-in-out infinite;
}
.anim-rig-idle .rig-weapon-swing {
    transform-origin: 142px 150px;
    animation: rigWeaponSway 1.8s ease-in-out infinite;
}
.anim-rig-idle .rig-cape-sway {
    transform-origin: 96px 115px;
    animation: rigCapeSway 1.8s ease-in-out infinite;
}

@keyframes rigAttackCycle {
    0% { transform: translateX(0) rotate(0deg); }
    25% { transform: translateX(-15px) rotate(-8deg); }
    55% { transform: translateX(25px) rotate(12deg) scale(1.06); }
    80% { transform: translateX(8px) rotate(3deg); }
    100% { transform: translateX(0) rotate(0deg); }
}
@keyframes rigArmSlash {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(-45deg); }
    55% { transform: rotate(55deg); }
    100% { transform: rotate(0deg); }
}
.anim-rig-attack {
    --base-duration: 0.75s;
    animation: rigAttackCycle var(--base-duration) cubic-bezier(0.16, 1, 0.3, 1);
}
.anim-rig-attack .rig-arm-front {
    transform-origin: 126px 118px;
    animation: rigArmSlash 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes rigHeavySlam {
    0% { transform: translateY(0) scale(1); }
    30% { transform: translateY(-38px) scale(1.1) rotate(-10deg); }
    60% { transform: translateY(8px) scale(1.08, 0.92) rotate(10deg); }
    80% { transform: translateY(-4px) scale(1); }
    100% { transform: translateY(0) scale(1); }
}
.anim-rig-heavy {
    --base-duration: 0.9s;
    animation: rigHeavySlam var(--base-duration) cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.anim-rig-heavy .rig-arm-front {
    transform-origin: 126px 118px;
    animation: rigArmSlash 0.9s ease-out;
}

@keyframes rigUltLevitate {
    0% { transform: translateY(0) scale(1); filter: brightness(1); }
    20% { transform: translateY(-24px) scale(1.15); filter: brightness(1.6) drop-shadow(0 0 20px #f59e0b); }
    50% { transform: translateY(-28px) scale(1.2) rotate(6deg); filter: brightness(1.9) drop-shadow(0 0 35px #fbbf24); }
    75% { transform: translateY(-20px) scale(1.12) rotate(-4deg); }
    100% { transform: translateY(0) scale(1); filter: brightness(1); }
}
.anim-rig-ult {
    --base-duration: 1.2s;
    animation: rigUltLevitate var(--base-duration) cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes rigGuardTuck {
    0% { transform: translateY(0) scale(1); }
    50%, 100% { transform: translateY(8px) scale(1.06, 0.92); }
}
@keyframes rigArmBlock {
    0% { transform: rotate(0deg); }
    50%, 100% { transform: rotate(-35deg) translateX(-12px); }
}
.anim-rig-defend {
    --base-duration: 0.6s;
    animation: rigGuardTuck var(--base-duration) ease-out forwards;
}
.anim-rig-defend .rig-arm-front {
    transform-origin: 126px 118px;
    animation: rigArmBlock 0.6s ease-out forwards;
}

@keyframes rigDodgeSlide {
    0% { transform: translateX(0) skewX(0); opacity: 1; }
    35% { transform: translateX(-45px) skewX(18deg) scale(0.92); opacity: 0.55; }
    100% { transform: translateX(0) skewX(0); opacity: 1; }
}
.anim-rig-dodge {
    --base-duration: 0.65s;
    animation: rigDodgeSlide var(--base-duration) cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes rigHitRecoil {
    0% { transform: translateX(0); filter: brightness(1); }
    25% { transform: translateX(-22px) rotate(-12deg); filter: brightness(2.2) drop-shadow(0 0 15px #ef4444); }
    60% { transform: translateX(6px) rotate(4deg); }
    100% { transform: translateX(0); filter: brightness(1); }
}
.anim-rig-hurt {
    --base-duration: 0.55s;
    animation: rigHitRecoil var(--base-duration) ease-out;
}

@keyframes rigStunWobble {
    0%, 100% { transform: rotate(0deg) translateY(0); }
    25% { transform: rotate(-14deg) translateY(-3px); }
    75% { transform: rotate(14deg) translateY(3px); }
}
.anim-rig-stun {
    --base-duration: 1.1s;
    animation: rigStunWobble var(--base-duration) infinite ease-in-out;
    filter: grayscale(0.35);
}

@keyframes rigVictoryJump {
    0%, 100% { transform: translateY(0) scale(1); }
    35% { transform: translateY(-25px) scale(1.12); }
    65% { transform: translateY(-10px) scale(1.08); }
}
@keyframes rigArmVictory {
    0%, 100% { transform: rotate(0deg); }
    35%, 85% { transform: rotate(-85deg) translateY(-10px); }
}
.anim-rig-victory {
    --base-duration: 1.1s;
    animation: rigVictoryJump var(--base-duration) ease-in-out;
}
.anim-rig-victory .rig-arm-front {
    transform-origin: 126px 118px;
    animation: rigArmVictory 1.1s ease-in-out;
}

/* ============================================================================
 * 4. Hiệu Ứng Xúc Giác Chiến Đấu Độc Bản (Living Combat Feel & Aura FX)
 * ============================================================================ */
/* Đã loại bỏ cơ chế nghiêng màn hình (rotate/transform) để giữ màn hình cố định */
@keyframes screenShake {
    0%, 100% { transform: none; }
}
.screen-shake-anim {
    animation: none !important;
    transform: none !important;
}

@keyframes floatCombatText {
    0% { transform: translate(-50%, 0) scale(0.6); opacity: 0; }
    20% { transform: translate(-50%, -22px) scale(1.25); opacity: 1; }
    70% { transform: translate(-50%, -48px) scale(1.05); opacity: 1; }
    100% { transform: translate(-50%, -80px) scale(0.9); opacity: 0; }
}
.floating-combat-text {
    position: absolute;
    pointer-events: none;
    z-index: 100;
    font-family: 'Cinzel', serif, sans-serif;
    font-weight: 900;
    font-size: 13px;
    letter-spacing: 0.5px;
    text-shadow: 0 0 10px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,1);
    animation: floatCombatText 1.1s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
    white-space: nowrap;
}
.floating-combat-text.is-crit {
    font-size: 17px;
    color: #facc15 !important;
    text-shadow: 0 0 18px rgba(250, 204, 21, 0.9), 0 2px 6px #000;
}

@keyframes particleFloatUp {
    0% { transform: translateY(0) scale(0.8); opacity: 0; }
    25% { opacity: 0.9; }
    80% { opacity: 0.8; }
    100% { transform: translateY(-90px) scale(1.3); opacity: 0; }
}
@keyframes particleDriftSnow {
    0% { transform: translate(0, -20px); opacity: 0; }
    20% { opacity: 0.85; }
    100% { transform: translate(40px, 120px) rotate(180deg); opacity: 0; }
}
@keyframes lightningFlicker {
    0%, 100% { opacity: 0; }
    8%, 24% { opacity: 0.9; filter: drop-shadow(0 0 12px #c084fc); }
    14% { opacity: 0.15; }
}
@keyframes waterBubbleFloat {
    0% { transform: translate(0, 0) scale(0.6); opacity: 0; }
    30% { opacity: 0.8; }
    100% { transform: translate(15px, -80px) scale(1.1); opacity: 0; }
}

/* ============================================================================
 * LIVE WALLPAPER / PARALLAX 2.5D — LÂM XUNG PHONG TUYẾT SƠN THẦN MIẾU
 * ============================================================================ */

/* Ánh lửa miếu nhấp nháy bập bùng */
@keyframes fireFlicker {
    0%, 100% {
        opacity: 0.65;
        transform: scale(1) translate(0, 0);
        filter: drop-shadow(0 0 25px rgba(249, 115, 22, 0.7));
    }
    20% {
        opacity: 0.92;
        transform: scale(1.06) translate(3px, -2px);
        filter: drop-shadow(0 0 45px rgba(234, 88, 12, 0.95));
    }
    45% {
        opacity: 0.55;
        transform: scale(0.97) translate(-2px, 1px);
        filter: drop-shadow(0 0 20px rgba(249, 115, 22, 0.5));
    }
    70% {
        opacity: 0.88;
        transform: scale(1.04) translate(2px, -3px);
        filter: drop-shadow(0 0 40px rgba(251, 146, 60, 0.85));
    }
    85% {
        opacity: 0.62;
        transform: scale(0.99) translate(-1px, 2px);
        filter: drop-shadow(0 0 28px rgba(249, 115, 22, 0.6));
    }
}
.fire-glow-anim {
    animation: fireFlicker 3.2s ease-in-out infinite;
    mix-blend-mode: screen;
}

/* Ánh sáng hắt chân miếu */
@keyframes ambientFirePulse {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 0.8; }
}
.ambient-fire-pulse {
    animation: ambientFirePulse 2.8s ease-in-out infinite;
    mix-blend-mode: screen;
}

/* Lâm Xung nhịp thở (Breathing Idle) */
@keyframes lamXungBreathe {
    0%, 100% {
        transform: translateY(0px) scale(1);
    }
    50% {
        transform: translateY(-5px) scale(1.008);
    }
}
.lam-xung-idle {
    animation: lamXungBreathe 4.2s ease-in-out infinite;
}

/* Hiệu ứng chém chiêu thức khi click vào Lâm Xung */
@keyframes lamXungSlashVFX {
    0% {
        filter: brightness(1) drop-shadow(0 0 0px transparent);
        transform: scale(1);
    }
    25% {
        filter: brightness(1.7) drop-shadow(0 0 35px #38bdf8);
        transform: scale(1.03) translate(-8px, -4px);
    }
    60% {
        filter: brightness(1.2) drop-shadow(0 0 20px #0284c7);
        transform: scale(1.01) translate(4px, 2px);
    }
    100% {
        filter: brightness(1) drop-shadow(0 0 0px transparent);
        transform: scale(1);
    }
}
.lam-xung-slash {
    animation: lamXungSlashVFX 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

/* ============================================================================
 * 108 ANH HÙNG LƯƠNG SƠN — DỊCH CHUYỂN KHÔNG GIAN & HIỆU ỨNG VFX DI CHUYỂN
 * Góc nhìn 3/4 Sang Phải: Vector tiến chính diện (Left -> Right)
 * Hiệu ứng hạt dạt về phía sau (Leftward Trail) theo quán tính vật lý
 * ============================================================================ */

/* 1. KỴ BINH / MÃ QUÂN: Phi nước đại thần tốc */
@keyframes heroMoveCavalry {
    0% { transform: translateX(-80px) translateY(0) scale(1); }
    18% { transform: translateX(-30px) translateY(-6px) scale(1.02); }
    45% { transform: translateX(55px) translateY(-2px) scale(1.03); }
    70% { transform: translateX(115px) translateY(-5px) scale(1.03); }
    88% { transform: translateX(65px) translateY(0) scale(1.01); }
    100% { transform: translateX(0px) translateY(0) scale(1); }
}
.hero-move-anim-cavalry {
    animation: heroMoveCavalry 2.4s cubic-bezier(0.25, 0.1, 0.25, 1) forwards !important;
}

/* 2. BỘ QUÂN / MÃNH TƯỚNG: Hùng hổ xung phong chấn động mặt đất */
@keyframes heroMoveHeavy {
    0% { transform: translateX(-55px) translateY(0); }
    18% { transform: translateX(-20px) translateY(-6px); }
    38% { transform: translateX(18px) translateY(0); }
    58% { transform: translateX(52px) translateY(-6px); }
    78% { transform: translateX(85px) translateY(0); }
    92% { transform: translateX(40px) translateY(-3px); }
    100% { transform: translateX(0px) translateY(0); }
}
.hero-move-anim-heavy {
    animation: heroMoveHeavy 2.4s ease-in-out forwards !important;
}

/* 3. CUNG NỖ / TIỆP BINH: Lướt nhanh linh hoạt, búng người chếch lên trên */
@keyframes heroMoveRanger {
    0% { transform: translateX(-65px) translateY(0); }
    22% { transform: translateX(-15px) translateY(-12px); }
    50% { transform: translateX(45px) translateY(-16px); }
    75% { transform: translateX(95px) translateY(-8px); }
    90% { transform: translateX(45px) translateY(-3px); }
    100% { transform: translateX(0px) translateY(0); }
}
.hero-move-anim-ranger {
    animation: heroMoveRanger 2.4s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

/* 4. THỦY QUÂN / LÃNG LÝ: Đạp ba rẽ sóng, lướt êm ả như trên ngọn sóng */
@keyframes heroMoveNaval {
    0% { transform: translateX(-70px) translateY(0); }
    28% { transform: translateX(-15px) translateY(3px); }
    58% { transform: translateX(48px) translateY(-3px); }
    82% { transform: translateX(90px) translateY(2px); }
    100% { transform: translateX(0px) translateY(0); }
}
.hero-move-anim-naval {
    animation: heroMoveNaval 2.4s ease-in-out forwards !important;
}

/* 5. QUÂN SƯ / THUẬT SĨ: Tiêu dao ngự phong, bước chân lướt mây thanh thoát */
@keyframes heroMoveDaoist {
    0% { transform: translateX(-45px) translateY(0); }
    32% { transform: translateX(12px) translateY(5px); }
    68% { transform: translateX(70px) translateY(6px); }
    88% { transform: translateX(35px) translateY(2px); }
    100% { transform: translateX(0px) translateY(0); }
}
.hero-move-anim-daoist {
    animation: heroMoveDaoist 2.4s ease-in-out forwards !important;
}

/* 6. THỐNG SOÁI / LÃNH TỤ: Đại quân uy nghiêm, nhịp bước vững như thái sơn */
@keyframes heroMoveCommander {
    0% { transform: translateX(-50px) translateY(0); }
    22% { transform: translateX(-20px) translateY(-4px); }
    48% { transform: translateX(18px) translateY(0); }
    72% { transform: translateX(55px) translateY(-4px); }
    88% { transform: translateX(75px) translateY(0); }
    100% { transform: translateX(0px) translateY(0); }
}
.hero-move-anim-commander {
    animation: heroMoveCommander 2.4s ease-in-out forwards !important;
}

/* ----------------------------------------------------------------------------
 * HIỆU ỨNG VFX DI CHUYỂN DẠT VỀ PHÍA SAU (TRAIL PARTICLES)
 * ---------------------------------------------------------------------------- */

/* Khói bụi cuồn cuộn sa trường (Heavy Dust) */
@keyframes moveDustPuff {
    0% { opacity: 0; transform: translate(0, 0) scale(0.35); }
    25% { opacity: 0.85; transform: translate(-35px, -8px) scale(0.9); }
    65% { opacity: 0.55; transform: translate(-85px, -18px) scale(1.4); }
    100% { opacity: 0; transform: translate(-140px, -28px) scale(1.9); }
}
.vfx-move-dust-1 { animation: moveDustPuff 1.2s ease-out infinite; }
.vfx-move-dust-2 { animation: moveDustPuff 1.2s ease-out infinite 0.35s; }
.vfx-move-dust-3 { animation: moveDustPuff 1.2s ease-out infinite 0.7s; }

/* Vệt gió cuồng phong kỵ binh (Gale Streaks) */
@keyframes moveGaleLine {
    0% { opacity: 0; transform: translateX(0) scaleX(0.3); }
    25% { opacity: 0.95; transform: translateX(-45px) scaleX(1.4); }
    65% { opacity: 0.7; transform: translateX(-110px) scaleX(1.7); }
    100% { opacity: 0; transform: translateX(-180px) scaleX(0.6); }
}
.vfx-move-gale-1 { animation: moveGaleLine 0.9s ease-out infinite; }
.vfx-move-gale-2 { animation: moveGaleLine 0.9s ease-out infinite 0.3s; }
.vfx-move-gale-3 { animation: moveGaleLine 0.9s ease-out infinite 0.6s; }

/* Sóng nước & bọt biển thủy quân (Water Ripples) */
@keyframes moveWaterRippleAnim {
    0% { opacity: 0; transform: scaleX(0.3) scaleY(0.2) translateX(0); }
    35% { opacity: 0.85; transform: scaleX(1.2) scaleY(0.55) translateX(-30px); }
    75% { opacity: 0.5; transform: scaleX(1.7) scaleY(0.85) translateX(-75px); }
    100% { opacity: 0; transform: scaleX(2.1) scaleY(1.1) translateX(-120px); }
}
.vfx-move-water-1 { animation: moveWaterRippleAnim 1.1s ease-out infinite; }
.vfx-move-water-2 { animation: moveWaterRippleAnim 1.1s ease-out infinite 0.4s; }

/* Trận đồ bát quái & chân khí đạo gia (Daoist Trigram & Qi) */
@keyframes moveTrigramSpinAnim {
    0% { opacity: 0; transform: scale(0.6) rotate(0deg); }
    30% { opacity: 0.9; transform: scale(1.15) rotate(90deg); filter: drop-shadow(0 0 16px rgba(168,85,247,0.8)); }
    70% { opacity: 0.75; transform: scale(1.25) rotate(180deg); filter: drop-shadow(0 0 22px rgba(56,189,248,0.9)); }
    100% { opacity: 0; transform: scale(0.9) rotate(270deg); }
}
.vfx-move-mystic-trigram { animation: moveTrigramSpinAnim 2.4s ease-in-out infinite; }

/* Tàn ảnh tốc biến cung nỗ (Ranger Shadow) */
@keyframes moveShadowAfterimageAnim {
    0% { opacity: 0.65; transform: translateX(-25px) scale(0.98); filter: blur(1px); }
    50% { opacity: 0.35; transform: translateX(-65px) scale(0.95); filter: blur(2.5px); }
    100% { opacity: 0; transform: translateX(-110px) scale(0.92); filter: blur(5px); }
}
.vfx-move-shadow-1 { animation: moveShadowAfterimageAnim 1.2s ease-out infinite; }
.vfx-move-shadow-2 { animation: moveShadowAfterimageAnim 1.2s ease-out infinite 0.5s; }

/* Hào quang kim sắc thống soái (Golden Embers) */
@keyframes moveGoldenEmberAnim {
    0% { opacity: 0; transform: translate(0, 0) scale(0.4); }
    30% { opacity: 0.95; transform: translate(-40px, -15px) scale(1.2); filter: drop-shadow(0 0 10px #facc15); }
    70% { opacity: 0.6; transform: translate(-90px, -32px) scale(1); }
    100% { opacity: 0; transform: translate(-140px, -45px) scale(0.3); }
}
.vfx-move-golden-1 { animation: moveGoldenEmberAnim 1.3s ease-out infinite; }
.vfx-move-golden-2 { animation: moveGoldenEmberAnim 1.3s ease-out infinite 0.45s; }
.vfx-move-golden-3 { animation: moveGoldenEmberAnim 1.3s ease-out infinite 0.85s; }

/* ============================================================================
 * PHÂN HỆ DIỄN VÕ TRẠNG THÁI (STATUS SIMULATOR - MULTI-LAYER RGBA VFX)
 * ============================================================================ */
@keyframes heroStrike {
    0% { transform: translateX(0) scale(1); }
    35% { transform: translateX(46px) scale(1.08); filter: brightness(1.35); }
    100% { transform: translateX(0) scale(1); }
}
@keyframes targetHitShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(7px); filter: brightness(1.4) drop-shadow(0 0 10px rgba(245, 158, 11, 0.7)); }
    45% { transform: translateX(-4px); }
    70% { transform: translateX(2px); }
}
@keyframes targetKnockback {
    0% { transform: translateX(0); }
    30% { transform: translateX(88px) scale(0.95); filter: brightness(1.7) drop-shadow(-8px 0 12px #fbbf24); }
    60% { transform: translateX(68px); }
    85% { transform: translateX(74px); }
    100% { transform: translateX(72px); }
}
@keyframes floatUpText {
    0% { opacity: 0; transform: translateY(12px) scale(0.9); }
    20% { opacity: 1; transform: translateY(0px) scale(1.05); }
    80% { opacity: 1; transform: translateY(-4px) scale(1); }
    100% { opacity: 0.95; transform: translateY(-2px) scale(0.98); }
}
@keyframes vfxCleanseBurst {
    0% { transform: scale(0.3); opacity: 1; filter: brightness(2) drop-shadow(0 0 25px #34d399); }
    60% { transform: scale(1.25); opacity: 0.95; }
    100% { transform: scale(1.5); opacity: 0; }
}

.anim-strike { animation: heroStrike 0.48s cubic-bezier(0.22, 1, 0.36, 1); }
.anim-shake { animation: targetHitShake 0.45s ease-in-out; }
.anim-knockback { animation: targetKnockback 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.anim-float-text { animation: floatUpText 1.2s ease-out forwards; }

/* Tương thích ngược với các class VFX cũ */
.vfx-cleanse { animation: vfxCleanseBurst 0.95s ease-out forwards; }
.vfx-spin-halo { animation: vfxStunHaloOrbit 1.8s ease-in-out infinite; }
.vfx-pulse { animation: vfxImmortalSanctuary 2.0s ease-in-out infinite; }
.vfx-flame { animation: vfxBurnFlameRise 0.9s ease-in-out infinite alternate; }
.vfx-poison-cloud { animation: vfxPoisonBubbleFloat 2.0s ease-in-out infinite; }
.vfx-lotus-shield { animation: vfxLotusShieldBreathe 2.4s ease-in-out infinite; }
.vfx-wind-rush { animation: vfxSwiftWindFlow 1.2s ease-in-out infinite; }

/* Wuxia Control Panel & Button Styles */
.wuxia-pill-btn {
    position: relative;
    background: linear-gradient(180deg, #181d28 0%, #0d1017 100%) !important;
    border: 1.5px solid #a38244 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(245, 230, 184, 0.25) !important;
    transition: all 0.2s ease;
    user-select: none;
}
.wuxia-pill-btn:hover {
    border-color: #f59e0b !important;
    filter: brightness(1.25);
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.4), inset 0 1px 0 rgba(254, 240, 138, 0.4) !important;
    transform: translateY(-1px);
}
.wuxia-pill-btn:active {
    transform: scale(0.96);
}
.wuxia-pill-btn::before,
.wuxia-pill-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 10px;
    border-top: 1.5px solid #d4af37;
    border-bottom: 1.5px solid #d4af37;
    pointer-events: none;
}
.wuxia-pill-btn::before {
    left: 5px;
    border-left: 1.5px solid #d4af37;
    border-radius: 2px 0 0 2px;
}
.wuxia-pill-btn::after {
    right: 5px;
    border-right: 1.5px solid #d4af37;
    border-radius: 0 2px 2px 0;
}

.wuxia-toggle {
    width: 42px;
    height: 22px;
    background: #141822;
    border: 1.5px solid #7c6332;
    border-radius: 9999px;
    position: relative;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.8);
    flex-shrink: 0;
}
.wuxia-toggle.active {
    border-color: #d4af37;
    background: #1e1910;
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.35), inset 0 2px 4px rgba(0,0,0,0.6);
}
.wuxia-toggle-knob {
    width: 15px;
    height: 15px;
    background: linear-gradient(180deg, #dfbe7e 0%, #a88241 100%);
    border-radius: 9999px;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.6);
}
.wuxia-toggle.active .wuxia-toggle-knob {
    left: 21px;
    background: linear-gradient(180deg, #fef08a 0%, #d4af37 100%);
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.7);
}

.wuxia-panel-box {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

.wuxia-hp-plate {
    background: rgba(14, 19, 28, 0.75);
    border: none !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    clip-path: none !important;
    border-radius: 6px;
}

.wuxia-atb-track {
    background: #08101a;
    border-top: 1.5px solid #9e7f43;
    border-bottom: 1.5px solid #9e7f43;
    position: relative;
    box-shadow: inset 0 0 12px rgba(0,0,0,0.85);
}
.wuxia-atb-track::after {
    content: '';
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid #9e7f43;
}