/* css/animations.css */

/* --- Keyframe-Animationen --- */

/* Weiches Einblenden (Fade-In) */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Leichtes Hineinschieben von unten + Fade-In */
@keyframes slideInUpFade {
    from {
        opacity: 0;
        transform: translateY(15px); /* Startet etwas weiter unten */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Leichtes Skalieren (für Klick-Feedback) */
@keyframes subtlePulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.98);
    }
    100% {
        transform: scale(1);
    }
}


/* --- Anwendung der Animationen --- */

/* Globale Animation beim Laden der Seite (optional) */
body {
    animation: fadeIn 0.5s ease-in-out forwards;
}

/* Animation für neu erscheinende Nachrichten */
/* WICHTIG: Diese Klasse muss dynamisch per JavaScript hinzugefügt werden,
   wenn eine neue Nachricht erscheint, damit die Animation ausgelöst wird! */
.message.animate-in {
    animation: slideInUpFade 0.4s ease-out forwards;
}

/* --- Übergänge (Transitions) für Interaktionen --- */

/* Weiche Übergänge für Buttons bei Hover & Aktiv */
.btn, .dropdown-btn, .btn-icon, .btn-audio, .btn-help {
    transition: background-color 0.2s ease-in-out,
                transform 0.15s ease-in-out,
                opacity 0.2s ease-in-out;
}

.btn:hover, .dropdown-btn:hover, .btn-icon:hover, .btn-audio:hover, .btn-help:hover {
    opacity: 0.85; /* Leicht transparent bei Hover */
}

.btn:active, .dropdown-btn:active, .btn-icon:active, .btn-audio:active, .btn-help:active {
    transform: scale(0.97); /* Leichte Skalierung bei Klick */
    opacity: 1; /* Volle Deckkraft bei Klick */
}

/* Übergang für Links */
a {
   transition: color 0.2s ease-in-out;
}