/* ========================================
   FEUERWEHR DB - Wiederverwendbare Animationen
   ========================================
   Diese Datei enthält spaßige Animationen
   die in Desktop UND Mobile verwendet werden.
   ======================================== */

/* ========================================
   BOUNCE ANIMATIONEN
   ======================================== */

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes bounceSmall {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

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

.animate-bounce { animation: bounce 2s ease-in-out infinite; }
.animate-bounce-small { animation: bounceSmall 1.5s ease-in-out infinite; }
.animate-bounce-scale { animation: bounceScale 1.5s ease-in-out infinite; }

/* ========================================
   PULSE ANIMATIONEN
   ======================================== */

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

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 20px rgba(245, 87, 108, 0.2); }
    50% { box-shadow: 0 0 40px rgba(245, 87, 108, 0.5); }
}

@keyframes pulseBorder {
    0%, 100% { border-color: rgba(102, 126, 234, 0.3); }
    50% { border-color: rgba(102, 126, 234, 0.8); }
}

.animate-pulse { animation: pulse 1.5s ease-in-out infinite; }
.animate-pulse-glow { animation: pulseGlow 2s ease-in-out infinite; }
.animate-pulse-border { animation: pulseBorder 2s ease-in-out infinite; }

/* ========================================
   SHAKE & WIGGLE
   ======================================== */

@keyframes wiggle {
    0%, 100% { transform: rotate(-5deg); }
    50% { transform: rotate(5deg); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

@keyframes partyPop {
    0% { transform: scale(1) rotate(-5deg); }
    100% { transform: scale(1.2) rotate(5deg); }
}

.animate-wiggle { animation: wiggle 1s ease-in-out infinite; }
.animate-shake { animation: shake 0.5s ease-in-out infinite; }
.animate-party { animation: partyPop 0.5s ease-in-out infinite alternate; }

/* ========================================
   SLIDE ANIMATIONEN
   ======================================== */

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-slide-in-left { animation: slideInLeft 0.3s ease-out forwards; }
.animate-slide-in-right { animation: slideInRight 0.3s ease-out forwards; }
.animate-slide-in-up { animation: slideInUp 0.3s ease-out forwards; }
.animate-slide-in-down { animation: slideInDown 0.3s ease-out forwards; }

/* ========================================
   FLICKER & GLOW (für Kerzen, Lichter)
   ======================================== */

@keyframes candleFlicker {
    0%, 100% { transform: scaleY(1); opacity: 1; }
    50% { transform: scaleY(1.15); opacity: 0.8; }
}

@keyframes glow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.3); }
}

.animate-flicker { animation: candleFlicker 0.5s ease-in-out infinite alternate; }
.animate-glow { animation: glow 1.5s ease-in-out infinite; }

/* Verzögerte Flicker-Animationen für mehrere Kerzen */
.animate-flicker-1 { animation: candleFlicker 0.5s ease-in-out infinite alternate; animation-delay: 0s; }
.animate-flicker-2 { animation: candleFlicker 0.5s ease-in-out infinite alternate; animation-delay: 0.2s; }
.animate-flicker-3 { animation: candleFlicker 0.5s ease-in-out infinite alternate; animation-delay: 0.4s; }

/* ========================================
   CONFETTI ANIMATION (CSS-basiert)
   ======================================== */

@keyframes confettiFall {
    0% { transform: translateY(-100%) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

@keyframes confettiSway {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(20px); }
}

.confetti-piece {
    position: absolute;
    width: 10px;
    height: 10px;
    animation: confettiFall 3s ease-out infinite;
}

.confetti-piece:nth-child(odd) { animation-duration: 2.5s; }
.confetti-piece:nth-child(even) { animation-duration: 3.5s; }

/* ========================================
   FLOAT ANIMATION
   ======================================== */

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-5px) rotate(2deg); }
    75% { transform: translateY(5px) rotate(-2deg); }
}

.animate-float { animation: float 3s ease-in-out infinite; }

/* ========================================
   SPIN ANIMATIONEN
   ======================================== */

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes spinSlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.animate-spin { animation: spin 1s linear infinite; }
.animate-spin-slow { animation: spinSlow 3s linear infinite; }

/* ========================================
   FADE ANIMATIONEN
   ======================================== */

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.animate-fade-in { animation: fadeIn 0.3s ease-out forwards; }
.animate-fade-in-scale { animation: fadeInScale 0.3s ease-out forwards; }

/* ========================================
   CELEBRATION / PARTY ANIMATIONEN
   ======================================== */

@keyframes celebrate {
    0% { transform: scale(1); }
    10% { transform: scale(1.1) rotate(-3deg); }
    20% { transform: scale(1.1) rotate(3deg); }
    30% { transform: scale(1.1) rotate(-3deg); }
    40% { transform: scale(1.1) rotate(3deg); }
    50% { transform: scale(1.1) rotate(0deg); }
    100% { transform: scale(1); }
}

@keyframes rainbow {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

.animate-celebrate { animation: celebrate 1s ease-in-out; }
.animate-rainbow { animation: rainbow 3s linear infinite; }

/* ========================================
   STAGGER DELAYS (für Listen-Animationen)
   ======================================== */

.stagger-1 { animation-delay: 50ms; }
.stagger-2 { animation-delay: 100ms; }
.stagger-3 { animation-delay: 150ms; }
.stagger-4 { animation-delay: 200ms; }
.stagger-5 { animation-delay: 250ms; }
.stagger-6 { animation-delay: 300ms; }
.stagger-7 { animation-delay: 350ms; }
.stagger-8 { animation-delay: 400ms; }
.stagger-9 { animation-delay: 450ms; }
.stagger-10 { animation-delay: 500ms; }

/* ========================================
   HERO GLOW EFFEKTE
   ======================================== */

@keyframes heroGlow {
    0%, 100% { box-shadow: 0 10px 40px rgba(245, 87, 108, 0.3); }
    50% { box-shadow: 0 10px 60px rgba(245, 87, 108, 0.6); }
}

@keyframes heroGlowPurple {
    0%, 100% { box-shadow: 0 10px 40px rgba(102, 126, 234, 0.3); }
    50% { box-shadow: 0 10px 60px rgba(102, 126, 234, 0.6); }
}

.animate-hero-glow { animation: heroGlow 2s ease-in-out infinite; }
.animate-hero-glow-purple { animation: heroGlowPurple 2s ease-in-out infinite; }

/* ========================================
   INTERACTIVE FEEDBACK
   ======================================== */

.press-effect {
    transition: transform 0.15s ease;
}

.press-effect:active {
    transform: scale(0.97);
}

.hover-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* ========================================
   LOADING STATES
   ======================================== */

.loading-dots::after {
    content: '';
    animation: loadingDots 1.5s infinite;
}

@keyframes loadingDots {
    0% { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
}