/**
 * Robot Anger System Animations
 * CSS animations for robot click interactions
 */

/* Robot Anger System Animations */
@keyframes robotBounce {
    0%, 100% { transform: translateY(0px) scale(1); }
    50% { transform: translateY(-5px) scale(1.05); }
}

@keyframes robotShakeSubtle {
    0%, 100% { transform: translateY(0px) translateX(0px); }
    25% { transform: translateY(-8px) translateX(-2px); }
    50% { transform: translateY(-12px) translateX(2px); }
    75% { transform: translateY(-8px) translateX(-1px); }
}

@keyframes robotShakeAngry {
    0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg); }
    10% { transform: translateY(-6px) translateX(-4px) rotate(-1deg); }
    20% { transform: translateY(-12px) translateX(4px) rotate(1deg); }
    30% { transform: translateY(-8px) translateX(-3px) rotate(-0.5deg); }
    40% { transform: translateY(-15px) translateX(3px) rotate(0.5deg); }
    50% { transform: translateY(-10px) translateX(-4px) rotate(-1deg); }
    60% { transform: translateY(-12px) translateX(4px) rotate(1deg); }
    70% { transform: translateY(-8px) translateX(-2px) rotate(-0.5deg); }
    80% { transform: translateY(-14px) translateX(2px) rotate(0.5deg); }
    90% { transform: translateY(-10px) translateX(-3px) rotate(-0.5deg); }
}

@keyframes robotShakeFurious {
    0%, 100% { transform: translateY(0px) translateX(0px) rotate(0deg) scale(1); }
    5% { transform: translateY(-8px) translateX(-6px) rotate(-2deg) scale(1.02); }
    10% { transform: translateY(-15px) translateX(6px) rotate(2deg) scale(0.98); }
    15% { transform: translateY(-12px) translateX(-5px) rotate(-1.5deg) scale(1.01); }
    20% { transform: translateY(-18px) translateX(5px) rotate(1.5deg) scale(0.99); }
    25% { transform: translateY(-10px) translateX(-6px) rotate(-2deg) scale(1.02); }
    30% { transform: translateY(-16px) translateX(6px) rotate(2deg) scale(0.98); }
    35% { transform: translateY(-13px) translateX(-4px) rotate(-1deg) scale(1.01); }
    40% { transform: translateY(-19px) translateX(4px) rotate(1deg) scale(0.99); }
    45% { transform: translateY(-11px) translateX(-6px) rotate(-2deg) scale(1.02); }
    50% { transform: translateY(-17px) translateX(6px) rotate(2deg) scale(0.98); }
    55% { transform: translateY(-14px) translateX(-5px) rotate(-1.5deg) scale(1.01); }
    60% { transform: translateY(-20px) translateX(5px) rotate(1.5deg) scale(0.99); }
    65% { transform: translateY(-12px) translateX(-4px) rotate(-1deg) scale(1.01); }
    70% { transform: translateY(-16px) translateX(4px) rotate(1deg) scale(0.99); }
    75% { transform: translateY(-10px) translateX(-5px) rotate(-1.5deg) scale(1.02); }
    80% { transform: translateY(-18px) translateX(5px) rotate(1.5deg) scale(0.98); }
    85% { transform: translateY(-13px) translateX(-3px) rotate(-0.5deg) scale(1.01); }
    90% { transform: translateY(-15px) translateX(3px) rotate(0.5deg) scale(0.99); }
    95% { transform: translateY(-8px) translateX(-2px) rotate(-0.5deg) scale(1.01); }
}

@keyframes angryGlow {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        background: radial-gradient(circle, rgba(220, 38, 38, 0.2) 0%, transparent 70%);
        opacity: 0.4;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
        background: radial-gradient(circle, rgba(220, 38, 38, 0.4) 0%, transparent 70%);
        opacity: 0.8;
    }
}

@keyframes furiousGlow {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        background: radial-gradient(circle, rgba(185, 28, 28, 0.3) 0%, transparent 70%);
        opacity: 0.5;
    }
    25% {
        transform: translate(-50%, -50%) scale(1.3);
        background: radial-gradient(circle, rgba(185, 28, 28, 0.6) 0%, transparent 70%);
        opacity: 0.9;
    }
    75% {
        transform: translate(-50%, -50%) scale(1.1);
        background: radial-gradient(circle, rgba(220, 38, 38, 0.5) 0%, transparent 70%);
        opacity: 0.7;
    }
}

/* Robot State Classes */
.hero-robot.poked {
    animation: robotBounce 0.3s ease-out;
}

.hero-robot.annoyed {
    animation: robotShakeSubtle 0.8s ease-in-out infinite;
    filter: drop-shadow(0 10px 30px rgba(42, 42, 42, 0.2)) hue-rotate(10deg);
}

.hero-robot.angry {
    animation: robotShakeAngry 0.6s ease-in-out infinite;
    filter: drop-shadow(0 10px 30px rgba(220, 38, 38, 0.4)) hue-rotate(20deg) saturate(1.2);
}

.hero-robot.furious {
    animation: robotShakeFurious 0.4s ease-in-out infinite;
    filter: drop-shadow(0 10px 30px rgba(185, 28, 28, 0.6)) hue-rotate(30deg) saturate(1.4) brightness(1.1);
}

/* Robot Glow State Classes */
.robot-glow.angry {
    animation: angryGlow 2s ease-in-out infinite;
}

.robot-glow.furious {
    animation: furiousGlow 1.5s ease-in-out infinite;
}

/* Robot Message Styling */
.robot-message {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 0.8rem 1.2rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    z-index: 100;
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.robot-message::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.9);
}

.robot-message.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

@media (max-width: 768px) {
    .robot-message {
        font-size: 0.8rem;
        padding: 0.6rem 1rem;
        top: -50px;
    }
}