/*
 * animations.css
 * Enthält alle Keyframe-Animationen
 * Optimiert für bessere Performance
 */

/* Erweiterte Animationen - optimiert für GPU-Beschleunigung */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes floatIn {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Optimierte Grain-Animation mit weniger Zwischenschritten */
@keyframes grain {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-5%, -10%); }
    50% { transform: translate(-15%, 10%); }
    75% { transform: translate(10%, 5%); }
}

/* Vereinfachte Breathe-Animation */
@keyframes breathe {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.03); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.9; } /* Reduzierte Skalierung */
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); } /* Reduzierte Bewegung */
}

/* Entfernt komplexe 3D-Rotation zugunsten einfacherer 2D-Rotation */
@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes flowConnection {
    0% { stroke-dashoffset: 100; opacity: 0; }
    50% { opacity: 0.8; }
    100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes cardFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-5px); } /* Reduzierte Bewegung */
}

/* Einfachere Kartenrotation */
@keyframes cardRotate {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(360deg); }
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

/* Optimierte Slide-Animationen */
@keyframes slideInRight {
    0% { transform: translateX(50px); opacity: 0; } /* Reduzierte Distanz */
    100% { transform: translateX(0); opacity: 1; }
}

@keyframes slideInLeft {
    0% { transform: translateX(-50px); opacity: 0; } /* Reduzierte Distanz */
    100% { transform: translateX(0); opacity: 1; }
}

@keyframes slideInUp {
    0% { transform: translateY(50px); opacity: 0; } /* Reduzierte Distanz */
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes slideInDown {
    0% { transform: translateY(-50px); opacity: 0; } /* Reduzierte Distanz */
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes ripple {
    0% { transform: scale(0); opacity: 1; }
    100% { transform: scale(3); opacity: 0; } /* Reduzierte Skalierung */
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; } /* Weniger starkes Blinken */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Vereinfachte Bounce-Animation */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); } /* Reduzierte Höhe */
}

/* Animation Utility Classes mit will-change für bessere Performance */
.animate-fadeIn {
    animation: fadeIn 0.5s var(--animation-curve) forwards;
    will-change: opacity;
}

.animate-fadeOut {
    animation: fadeOut 0.5s var(--animation-curve) forwards;
    will-change: opacity;
}

.animate-pulse {
    animation: pulse 3s infinite var(--animation-curve-smooth); /* Längere Dauer */
    will-change: transform, opacity;
}

.animate-float {
    animation: float 4s infinite var(--animation-curve-smooth); /* Längere Dauer */
    will-change: transform;
}

.animate-spin {
    animation: spin 3s linear infinite; /* Längere Dauer */
    will-change: transform;
}

.animate-bounce {
    animation: bounce 3s infinite; /* Längere Dauer */
    will-change: transform;
}

.animate-breathe {
    animation: breathe 5s infinite var(--animation-curve-smooth); /* Längere Dauer */
    will-change: transform;
}

.animate-shimmer {
    animation: shimmer 3s infinite linear; /* Längere Dauer */
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    background-size: 200% 100%;
    will-change: background-position;
}