/* Animation Styles (to be expanded in phases) */

/* Placeholder for future animations */
.animated-element {
    transition: all 0.3s ease;
}

/* Fade in animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeIn 0.5s ease-out;
}

/* Bounce animation */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

.bounce {
    animation: bounce 1s ease-in-out;
}

/* Shake animation */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.shake {
    animation: shake 0.5s ease-in-out;
}

/* Speech Bubble Animations */
.fade-in {
    animation: fadeIn 0.3s ease-out;
}

.fade-out {
    animation: fadeOut 0.3s ease-in;
}

@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: scale(0.8) translateY(10px); 
    }
    to { 
        opacity: 1; 
        transform: scale(1) translateY(0); 
    }
}

@keyframes fadeOut {
    from { 
        opacity: 1; 
        transform: scale(1) translateY(0); 
    }
    to { 
        opacity: 0; 
        transform: scale(0.8) translateY(10px); 
    }
}

/* Mobile Paulchen Flight Animation */
@keyframes paulchenFlyMobile {
    0%, 100% { 
        transform: translate(0, 0) rotate(0deg); 
    }
    25% { 
        transform: translate(100px, -15px) rotate(5deg); 
    }
    50% { 
        transform: translate(200px, 0px) rotate(0deg); 
    }
    75% { 
        transform: translate(100px, 15px) rotate(-5deg); 
    }
}

/* Tablet Paulchen Flight Animation */
@keyframes paulchenFlyTablet {
    0%, 100% { 
        transform: translate(0, 0) rotate(0deg); 
    }
    25% { 
        transform: translate(120px, -18px) rotate(5deg); 
    }
    50% { 
        transform: translate(250px, 0px) rotate(0deg); 
    }
    75% { 
        transform: translate(120px, 18px) rotate(-5deg); 
    }
}