/* ==============================================
   ERFOLGS-ANIMATIONEN & MICRO-INTERACTIONS
   ============================================== */

/* Erfolgs-Checkmark Animation */
@keyframes successPop {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes successRing {
    0% {
        transform: scale(0.8);
        opacity: 1;
    }

    100% {
        transform: scale(2);
        opacity: 0;
    }
}

.success-animation {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.success-animation i {
    color: var(--success-color);
    font-size: 2rem;
    animation: successPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.success-animation::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid var(--success-color);
    border-radius: 50%;
    animation: successRing 0.6s ease-out forwards;
}

/* Shake Animation für Fehler */
@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translateX(-4px);
    }

    20%,
    40%,
    60%,
    80% {
        transform: translateX(4px);
    }
}

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

/* Pulse Animation für Aufmerksamkeit */
@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 var(--overlay-purple-glow);
    }

    50% {
        transform: scale(1.02);
        box-shadow: 0 0 0 8px var(--overlay-purple-fade);
    }
}

.pulse {
    animation: pulse 2s ease-in-out infinite;
}

/* Favorit hinzugefügt Animation */
@keyframes heartBeat {
    0% {
        transform: scale(1);
    }

    14% {
        transform: scale(1.3);
    }

    28% {
        transform: scale(1);
    }

    42% {
        transform: scale(1.3);
    }

    70% {
        transform: scale(1);
    }
}

.heart-beat {
    animation: heartBeat 0.6s ease-in-out;
}

/* Sanftes Einblenden für neue Elemente */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}