/* Pulse */
.pulse{
    transition: all 0.3s ease;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* ===== Slide-In Animationen ===== */

/* Slide In von Links */
.slide-in-left {
    opacity: 0;
    transform: translateX(-100px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.slide-in-left.animate {
    opacity: 1;
    transform: translateX(0);
}

/* Slide In von Rechts */
.slide-in-right {
    opacity: 0;
    transform: translateX(100px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.slide-in-right.animate {
    opacity: 1;
    transform: translateX(0);
}

/* Slide In von Oben */
.slide-in-top {
    opacity: 0;
    transform: translateY(-100px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.slide-in-top.animate {
    opacity: 1;
    transform: translateY(0);
}

/* Slide In von Unten */
.slide-in-bottom {
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.slide-in-bottom.animate {
    opacity: 1;
    transform: translateY(0);
}

/* Fade In (ohne Bewegung) */
.fade-in {
    opacity: 0;
    transition: opacity 0.6s ease-out;
}

.fade-in.animate {
    opacity: 1;
}

/* Zoom In */
.zoom-in {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.zoom-in.animate {
    opacity: 1;
    transform: scale(1);
}

/* Flip In */
.flip-in {
    opacity: 0;
    transform: perspective(400px) rotateY(90deg);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.flip-in.animate {
    opacity: 1;
    transform: perspective(400px) rotateY(0);
}

/* ===== Hover Animationen ===== */

/* Basis-Transition für alle Hover-Animationen */
.hover-glow,
.hover-lift-rotate,
.hover-scale,
.hover-lift,
.hover-border-glow {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Glow Shadow */
.hover-glow:hover {
    transform: scale(1.02);
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.2);
}

/* Lift & Rotate */
.hover-lift-rotate:hover {
    transform: translateY(-5px) rotate(1deg);
}

/* Scale */
.hover-scale:hover {
    transform: scale(1.05);
}

/* Lift (nur nach oben) */
.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

/* Border Glow */
.hover-border-glow:hover {
    box-shadow: 0 0 0 3px var(--accent1), 0 4px 15px rgba(0, 0, 0, 0.1);
}