/**
 * KNOWLEDGEBASE MYLP - Fullscreen Celebration Animations
 *
 * CSS für 9 verschiedene Fullscreen-Animationen
 * (Rainbow-Animation entfernt)
 *
 * @version 1.1.0
 * @since 2.2.0
 */

/* ==========================================================================
   Overlay Base
   ========================================================================== */

.kb-celebration-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999999;
    pointer-events: auto;
    overflow: hidden;
    background: transparent;
    animation: kb-overlay-fade-in 0.3s ease-out;
}

.kb-celebration-fade-out {
    animation: kb-overlay-fade-out 0.3s ease-out forwards;
}

@keyframes kb-overlay-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes kb-overlay-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* ==========================================================================
   Particle Base
   ========================================================================== */

.kb-particle {
    position: absolute;
    pointer-events: none;
    will-change: transform, opacity;
}

/* ==========================================================================
   Animation 1: Konfetti-Regen 🎊
   ========================================================================== */

.kb-confetti {
    top: -20px;
    animation: kb-confetti-fall linear forwards;
}

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

/* ==========================================================================
   Animation 2: Feuerwerk 🎆
   ========================================================================== */

.kb-firework {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: kb-firework-explode 1.5s ease-out forwards;
}

@keyframes kb-firework-explode {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: 
            translate(
                calc(cos(var(--angle)) * var(--distance)),
                calc(sin(var(--angle)) * var(--distance))
            ) 
            scale(0);
        opacity: 0;
    }
}

/* Fallback für Browser ohne trigonometrische Funktionen */
@supports not (transform: translate(calc(cos(45deg) * 100px), 0)) {
    .kb-firework {
        animation: kb-firework-explode-fallback 1.5s ease-out forwards;
    }
    
    @keyframes kb-firework-explode-fallback {
        0% {
            transform: scale(1);
            opacity: 1;
        }
        100% {
            transform: scale(3) translateY(-50px);
            opacity: 0;
        }
    }
}

/* ==========================================================================
   Animation 3: Sterne-Explosion ⭐
   ========================================================================== */

.kb-star {
    animation: kb-star-explode 2s ease-out forwards;
    text-shadow: 0 0 10px currentColor;
}

@keyframes kb-star-explode {
    0% {
        transform: translate(-50%, -50%) scale(0) rotate(0deg);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    100% {
        transform: 
            translate(
                calc(-50% + cos(var(--angle)) * var(--distance)),
                calc(-50% + sin(var(--angle)) * var(--distance))
            )
            scale(1.5) 
            rotate(360deg);
        opacity: 0;
    }
}

/* Fallback */
@supports not (transform: translate(calc(cos(45deg) * 100px), 0)) {
    .kb-star {
        animation: kb-star-explode-fallback 2s ease-out forwards;
    }
    
    @keyframes kb-star-explode-fallback {
        0% {
            transform: translate(-50%, -50%) scale(0);
            opacity: 0;
        }
        20% {
            opacity: 1;
        }
        100% {
            transform: translate(-50%, -150%) scale(2);
            opacity: 0;
        }
    }
}

/* ==========================================================================
   Animation 4: Herzen ❤️
   ========================================================================== */

.kb-heart {
    animation: kb-heart-float ease-out forwards;
}

@keyframes kb-heart-float {
    0% {
        transform: translateY(0) scale(0.5);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    100% {
        transform: translateY(-120vh) scale(1.2) rotate(15deg);
        opacity: 0;
    }
}

/* ==========================================================================
   Animation 5: Daumen hoch 👍
   ========================================================================== */

.kb-thumb {
    animation: kb-thumb-rise ease-out forwards;
}

@keyframes kb-thumb-rise {
    0% {
        transform: translateY(0) scale(0.5) rotate(-10deg);
        opacity: 0;
    }
    15% {
        opacity: 1;
        transform: translateY(-10vh) scale(1) rotate(0deg);
    }
    100% {
        transform: translateY(-110vh) scale(1.3) rotate(10deg);
        opacity: 0;
    }
}

/* ==========================================================================
   Animation 6: Party-Popper 🎉
   ========================================================================== */

.kb-party-burst {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    animation: kb-party-burst-fly 2s ease-out forwards;
}

@keyframes kb-party-burst-fly {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: 
            translate(
                calc(cos(var(--angle)) * var(--distance)),
                calc(sin(var(--angle)) * var(--distance))
            )
            scale(0.3);
        opacity: 0;
    }
}

/* Fallback */
@supports not (transform: translate(calc(cos(45deg) * 100px), 0)) {
    .kb-party-burst {
        animation: kb-party-burst-fallback 2s ease-out forwards;
    }
    
    @keyframes kb-party-burst-fallback {
        0% {
            transform: scale(1);
            opacity: 1;
        }
        100% {
            transform: translateX(200px) translateY(-100px) scale(0.3);
            opacity: 0;
        }
    }
}

.kb-party-emoji {
    animation: kb-party-emoji-fall 2s ease-in forwards;
}

@keyframes kb-party-emoji-fall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(110vh) rotate(360deg);
        opacity: 0.5;
    }
}

/* ==========================================================================
   Animation 7: Glitzer-Regen ✨
   ========================================================================== */

.kb-glitter {
    animation: kb-glitter-fall linear forwards, kb-glitter-twinkle 0.3s ease-in-out infinite;
}

@keyframes kb-glitter-fall {
    0% {
        transform: translateY(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    100% {
        transform: translateY(110vh);
        opacity: 0;
    }
}

@keyframes kb-glitter-twinkle {
    0%, 100% {
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.3);
        filter: brightness(1.5);
    }
}

/* ==========================================================================
   Animation 8: Ballons 🎈
   ========================================================================== */

.kb-balloon {
    animation: kb-balloon-float ease-out forwards;
}

@keyframes kb-balloon-float {
    0% {
        transform: translateY(0) translateX(0) scale(0.8);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    50% {
        transform: translateY(-50vh) translateX(var(--sway, 0px)) scale(1);
    }
    100% {
        transform: translateY(-120vh) translateX(calc(var(--sway, 0px) * -1)) scale(1.1);
        opacity: 0;
    }
}

/* ==========================================================================
   Animation 9: Champagner-Blasen 🍾
   ========================================================================== */

.kb-champagne-bottle {
    position: absolute;
    left: 50%;
    bottom: 20%;
    transform: translateX(-50%);
    font-size: 80px;
    animation: kb-bottle-pop 0.5s ease-out forwards;
    z-index: 1;
}

@keyframes kb-bottle-pop {
    0% {
        transform: translateX(-50%) scale(0) rotate(-10deg);
    }
    50% {
        transform: translateX(-50%) scale(1.2) rotate(5deg);
    }
    100% {
        transform: translateX(-50%) scale(1) rotate(0deg);
    }
}

.kb-bubble {
    border-radius: 50%;
    opacity: 0.7;
    animation: kb-bubble-rise ease-out forwards;
}

@keyframes kb-bubble-rise {
    0% {
        transform: translateY(0) translateX(0) scale(0.5);
        opacity: 0;
    }
    20% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(-80vh) translateX(var(--drift, 0px)) scale(1);
        opacity: 0;
    }
}

/* ==========================================================================
   Mobile Optimizations
   ========================================================================== */

@media (max-width: 768px) {
    .kb-champagne-bottle {
        font-size: 60px;
        bottom: 25%;
    }
    
    .kb-star,
    .kb-heart,
    .kb-thumb,
    .kb-balloon {
        font-size: 80% !important;
    }
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .kb-celebration-overlay {
        display: none !important;
    }
}

/* ==========================================================================
   Print: Hide all celebrations
   ========================================================================== */

@media print {
    .kb-celebration-overlay {
        display: none !important;
    }
}