/* Animations */
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes knightJump {
    /* Anticipation - slight crouch before jump */
    0% {
        transform: translateY(0px) translateX(0px) scaleY(1) scaleX(1) rotate(0deg);
        filter: brightness(0) invert(1) drop-shadow(0 0 0px rgba(255, 255, 255, 0));
    }
    5% {
        transform: translateY(1px) translateX(0px) scaleY(0.96) scaleX(1.02) rotate(1deg);
        filter: brightness(0) invert(1) drop-shadow(0 0 2px rgba(255, 255, 255, 0.3));
    }
    
    /* Takeoff - quick upward motion */
    10% {
        transform: translateY(-2px) translateX(1px) scaleY(1.02) scaleX(0.98) rotate(-2deg);
        filter: brightness(0) invert(1) drop-shadow(0 0 4px rgba(255, 255, 255, 0.4));
    }
    15% {
        transform: translateY(-6px) translateX(2px) scaleY(1.04) scaleX(0.96) rotate(-4deg);
        filter: brightness(0) invert(1) drop-shadow(0 0 6px rgba(255, 255, 255, 0.5));
    }
    
    /* Peak of jump - highest point with slight forward lean */
    25% {
        transform: translateY(-16px) translateX(3px) scaleY(1.06) scaleX(0.94) rotate(-6deg);
        filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(255, 255, 255, 0.6)) drop-shadow(0 0 20px rgba(255, 255, 255, 0.3));
    }
    35% {
        transform: translateY(-18px) translateX(4px) scaleY(1.05) scaleX(0.95) rotate(-5deg);
        filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(255, 255, 255, 0.55)) drop-shadow(0 0 18px rgba(255, 255, 255, 0.25));
    }
    
    /* Descent - coming down */
    50% {
        transform: translateY(-12px) translateX(5px) scaleY(1.02) scaleX(0.97) rotate(-3deg);
        filter: brightness(0) invert(1) drop-shadow(0 0 5px rgba(255, 255, 255, 0.45));
    }
    65% {
        transform: translateY(-4px) translateX(4px) scaleY(0.98) scaleX(1.01) rotate(1deg);
        filter: brightness(0) invert(1) drop-shadow(0 0 3px rgba(255, 255, 255, 0.35));
    }
    
    /* Landing - impact with squash */
    75% {
        transform: translateY(2px) translateX(3px) scaleY(0.92) scaleX(1.08) rotate(3deg);
        filter: brightness(0) invert(1) drop-shadow(0 0 6px rgba(255, 255, 255, 0.5));
    }
    80% {
        transform: translateY(1px) translateX(2px) scaleY(0.94) scaleX(1.06) rotate(2deg);
        filter: brightness(0) invert(1) drop-shadow(0 0 3px rgba(255, 255, 255, 0.35));
    }
    
    /* Bounce back */
    85% {
        transform: translateY(-1px) translateX(1px) scaleY(0.98) scaleX(1.02) rotate(0deg);
        filter: brightness(0) invert(1) drop-shadow(0 0 2px rgba(255, 255, 255, 0.3));
    }
    
    /* Settle */
    92% {
        transform: translateY(0.3px) translateX(0.5px) scaleY(0.99) scaleX(1.01) rotate(0deg);
        filter: brightness(0) invert(1) drop-shadow(0 0 1px rgba(255, 255, 255, 0.2));
    }
    
    /* Rest position */
    100% {
        transform: translateY(0px) translateX(0px) scaleY(1) scaleX(1) rotate(0deg);
        filter: brightness(0) invert(1) drop-shadow(0 0 0px rgba(255, 255, 255, 0));
    }
}

/* Idle breathing animation when not jumping */
@keyframes knightIdle {
    0%, 100% {
        transform: translateY(0px) scale(1);
        filter: brightness(0) invert(1) drop-shadow(0 0 2px rgba(255, 255, 255, 0.2));
    }
    50% {
        transform: translateY(-2.5px) scale(1.04);
        filter: brightness(0) invert(1) drop-shadow(0 0 4px rgba(255, 255, 255, 0.35));
    }
}

/* Click animation - special effect when clicked */
@keyframes knightClick {
    0% {
        transform: scale(1) rotate(0deg);
        filter: brightness(0) invert(1) drop-shadow(0 0 0px rgba(255, 255, 255, 0));
    }
    20% {
        transform: scale(0.9) rotate(-10deg);
        filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(255, 255, 255, 0.4));
    }
    40% {
        transform: scale(1.15) rotate(10deg);
        filter: brightness(0) invert(1) drop-shadow(0 0 12px rgba(255, 255, 255, 0.5));
    }
    60% {
        transform: scale(1.05) rotate(-5deg);
        filter: brightness(0) invert(1) drop-shadow(0 0 6px rgba(255, 255, 255, 0.3));
    }
    80% {
        transform: scale(0.98) rotate(2deg);
        filter: brightness(0) invert(1) drop-shadow(0 0 3px rgba(255, 255, 255, 0.2));
    }
    100% {
        transform: scale(1) rotate(0deg);
        filter: brightness(0) invert(1) drop-shadow(0 0 0px rgba(255, 255, 255, 0));
    }
}

/* Particle trail effect during jump */
@keyframes knightTrail {
    0% {
        opacity: 0;
        transform: translateY(0) translateX(0) scale(0);
    }
    10% {
        opacity: 0.6;
        transform: translateY(-2px) translateX(1px) scale(0.3);
    }
    25% {
        opacity: 0.4;
        transform: translateY(-8px) translateX(2px) scale(0.5);
    }
    50% {
        opacity: 0.2;
        transform: translateY(-6px) translateX(3px) scale(0.7);
    }
    75% {
        opacity: 0.1;
        transform: translateY(-2px) translateX(2px) scale(0.9);
    }
    100% {
        opacity: 0;
        transform: translateY(0) translateX(1px) scale(1);
    }
}

/* Landing impact ripple */
@keyframes landingRipple {
    0% {
        transform: scale(0.8);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.3);
        opacity: 0.3;
    }
    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

@keyframes knightShadow {
    /* Shadow follows the knight's horizontal movement and scales with height */
    0%, 100% {
        transform: translateX(-50%) scale(1);
        opacity: 0.8;
        filter: blur(3px);
    }
    25%, 35% {
        transform: translateX(calc(-50% + 4px)) scale(0.7);
        opacity: 0.5;
        filter: blur(4px);
    }
    50% {
        transform: translateX(calc(-50% + 5px)) scale(0.9);
        opacity: 0.65;
        filter: blur(3.5px);
    }
    75% {
        transform: translateX(calc(-50% + 3px)) scale(1.1);
        opacity: 0.9;
        filter: blur(2.5px);
    }
    85% {
        transform: translateX(calc(-50% + 1px)) scale(1.05);
        opacity: 0.85;
        filter: blur(3px);
    }
}

/* Pulsing glow effect for the knight SVG */
@keyframes knightGlowPulse {
    0%, 100% {
        filter: brightness(0) invert(1) drop-shadow(0 0 0px rgba(255, 255, 255, 0));
    }
    50% {
        filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(255, 255, 255, 0.4)) drop-shadow(0 0 16px rgba(255, 255, 255, 0.2));
    }
}

/* Ring glow pulse effect */
@keyframes ringGlow {
    0%, 100% {
        opacity: 0.8;
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1);
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.05), 0 0 0 4px rgba(255, 255, 255, 0.1);
    }
}

/* Intermittent hint text fade in/out */
@keyframes hintFadeInOut {
    0%, 65%, 100% {
        opacity: 0;
        transform: translateX(-50%) translateY(6px);
    }
    70%, 80% {
        opacity: 0.75;
        transform: translateX(-50%) translateY(2px);
    }
    75% {
        opacity: 0.9;
        transform: translateX(-50%) translateY(0px);
    }
}

@keyframes knightHover {
    0% {
        transform: translateY(0) scale(1.0) rotate(0deg);
    }

    20% {
        transform: translateY(-2px) scale(1.03) rotate(-2deg);
    }

    40% {
        transform: translateY(-4px) scale(1.05) rotate(-5deg);
    }

    60% {
        transform: translateY(-2px) scale(1.02) rotate(-3deg);
    }

    80% {
        transform: translateY(-1px) scale(1.01) rotate(-1deg);
    }

    100% {
        transform: translateY(0) scale(1.0) rotate(0deg);
    }
}

@keyframes sendAnimation {
    0% {
        transform: scale(1) translateX(0);
        opacity: 0.7;
    }
    20% {
        transform: scale(0.85) translateX(-5%);
        opacity: 0.8;
    }
    45% {
        transform: scale(1) translateX(125%);
        opacity: 0.3;
    }
    46% {
        transform: scale(0.9) translateX(-120%);
        opacity: 0;
    }
    55% {
        transform: scale(0.9) translateX(-10%);
        opacity: 0;
    }
    65% {
        transform: scale(1) translateX(0);
        opacity: 1;
    }
    100% {
        transform: scale(1) translateX(0);
        opacity: 1;
    }
}

@keyframes thinkingPulse {
    0%, 80%, 100% {
        opacity: 0.4;
        transform: scale(0.8);
    }
    40% {
        opacity: 1;
        transform: scale(1.2);
    }
}

@keyframes statusPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(0.9);
    }
}

@keyframes turnIndicatorPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 12px rgba(59, 130, 246, 0.8);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.1);
        box-shadow: 0 0 20px rgba(59, 130, 246, 1);
    }
}

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

@keyframes thinkingRotate {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-10deg);
    }
    75% {
        transform: rotate(10deg);
    }
}

@keyframes botMoveFrom {
    0% {
        background-color: rgba(251, 191, 36, 0.8) !important;
        transform: scale(1.05);
    }
    100% {
        background-color: rgba(251, 191, 36, 0.3) !important;
        transform: scale(1);
    }
}

@keyframes botMoveTo {
    0% {
        background-color: rgba(251, 191, 36, 0.9) !important;
        transform: scale(1.1);
        box-shadow: 0 0 30px rgba(251, 191, 36, 0.6);
    }
    100% {
        background-color: rgba(251, 191, 36, 0.4) !important;
        transform: scale(1);
        box-shadow: 0 0 20px rgba(251, 191, 36, 0.3);
    }
}