/**
 * Slideshow Visual Effects CSS
 * Verschiedene visuelle Effekte die vom Admin ausgelöst werden können
 */

/* ========================================
   Base Effect Container
======================================== */
.effect-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 10001; /* Über Live-Stream (10000) */
    overflow: hidden;
}

/* ========================================
   Partikel System (Universal)
======================================== */
.effect-particle {
    position: absolute;
    pointer-events: none;
    will-change: transform, opacity;
}

/* ========================================
   1. Feuerwerk Effekt
======================================== */
.firework-particle {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: absolute;
    animation: firework-burst 1.5s ease-out forwards;
}

@keyframes firework-burst {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx), var(--ty)) scale(0);
        opacity: 0;
    }
}

.firework-trail {
    position: absolute;
    width: 4px;
    height: 30px;
    background: linear-gradient(to bottom, white, transparent);
    animation: firework-rise 1s ease-out forwards;
}

@keyframes firework-rise {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(-300px) scale(0);
        opacity: 0;
    }
}

/* ========================================
   2. Herzen Effekt
======================================== */
.heart-particle {
    font-size: 30px;
    position: absolute;
    animation: hearts-float 4s ease-in-out forwards;
    filter: drop-shadow(0 0 10px rgba(255, 105, 180, 0.8));
}

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

/* ========================================
   3. Blitz Effekt
======================================== */
.lightning-flash {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    animation: lightning-flash 0.4s ease-out;
    pointer-events: none;
}

@keyframes lightning-flash {
    0%, 100% { opacity: 0; }
    10%, 30%, 50% { opacity: 0.95; }
    20%, 40% { opacity: 0.1; }
}

.lightning-bolt {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 60px solid #ffff00;
    animation: lightning-strike 0.6s ease-out forwards;
    filter: drop-shadow(0 0 20px #ffff00);
}

@keyframes lightning-strike {
    0% {
        transform: translateY(-100px) scale(2);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) scale(0.5);
        opacity: 0;
    }
}

/* ========================================
   4. Konfetti Effekt
======================================== */
.confetti-particle {
    width: 10px;
    height: 15px;
    position: absolute;
    animation: confetti-fall 4s linear forwards;
}

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

/* ========================================
   5. Sterne Effekt
======================================== */
.star-particle {
    position: absolute;
    font-size: 25px;
    animation: stars-twinkle 2s ease-in-out forwards;
    filter: drop-shadow(0 0 10px gold);
}

@keyframes stars-twinkle {
    0%, 100% {
        transform: scale(0) rotate(0deg);
        opacity: 0;
    }
    50% {
        transform: scale(1.5) rotate(180deg);
        opacity: 1;
    }
}

/* ========================================
   6. Ballons Effekt
======================================== */
.balloon-particle {
    font-size: 40px;
    position: absolute;
    animation: balloon-rise 6s ease-out forwards;
}

@keyframes balloon-rise {
    0% {
        transform: translateY(0) rotate(0deg) scale(0.5);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    100% {
        transform: translateY(-120vh) rotate(20deg) scale(1);
        opacity: 0;
    }
}

/* ========================================
   7. Schnee Effekt
======================================== */
.snow-particle {
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 50%;
    position: absolute;
    animation: snow-fall 8s linear forwards;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

@keyframes snow-fall {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) translateX(var(--drift, 0px));
        opacity: 0;
    }
}

/* ========================================
   8. Blasen Effekt
======================================== */
.bubble-particle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
    border: 2px solid rgba(255, 255, 255, 0.3);
    position: absolute;
    animation: bubble-rise 5s ease-in-out forwards;
}

@keyframes bubble-rise {
    0% {
        transform: translateY(0) scale(0);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(-120vh) scale(1.2);
        opacity: 0;
    }
}

/* ========================================
   9. Glitzer Effekt
======================================== */
.sparkle-particle {
    width: 6px;
    height: 6px;
    background: white;
    position: absolute;
    animation: sparkle-shine 1.5s ease-out forwards;
    box-shadow: 0 0 15px 3px rgba(255, 255, 255, 0.9);
}

@keyframes sparkle-shine {
    0%, 100% {
        transform: scale(0) rotate(0deg);
        opacity: 0;
    }
    50% {
        transform: scale(2) rotate(180deg);
        opacity: 1;
    }
}

/* ========================================
   10. Regenbogen Effekt
======================================== */
.rainbow-wave {
    position: absolute;
    width: 100%;
    height: 20px;
    background: linear-gradient(to right,
        red, orange, yellow, green, blue, indigo, violet, red);
    background-size: 200% 100%;
    animation: rainbow-scroll 3s linear forwards;
    filter: blur(5px);
    opacity: 0.7;
}

@keyframes rainbow-scroll {
    0% {
        transform: translateY(-50px);
        background-position: 0% 50%;
        opacity: 0;
    }
    50% {
        opacity: 0.9;
    }
    100% {
        transform: translateY(100vh);
        background-position: 200% 50%;
        opacity: 0;
    }
}

/* ========================================
   11. Rauch Effekt
======================================== */
.smoke-particle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(100, 100, 100, 0.4), transparent);
    position: absolute;
    animation: smoke-rise 4s ease-out forwards;
    filter: blur(10px);
}

@keyframes smoke-rise {
    0% {
        transform: translateY(0) scale(0.5);
        opacity: 0;
    }
    50% {
        opacity: 0.6;
    }
    100% {
        transform: translateY(-80vh) scale(2);
        opacity: 0;
    }
}

/* ========================================
   12. Emojis Effekt
======================================== */
.emoji-particle {
    font-size: 35px;
    position: absolute;
    animation: emoji-bounce 3s ease-out forwards;
}

@keyframes emoji-bounce {
    0% {
        transform: translateY(0) scale(0) rotate(0deg);
        opacity: 0;
    }
    20% {
        opacity: 1;
        transform: scale(1.2) rotate(20deg);
    }
    40%, 60%, 80% {
        transform: translateY(-30px) scale(1) rotate(-10deg);
    }
    50%, 70%, 90% {
        transform: translateY(0) scale(1) rotate(10deg);
    }
    100% {
        transform: translateY(100vh) scale(0.5) rotate(360deg);
        opacity: 0;
    }
}

/* ========================================
   13. Funken Effekt
======================================== */
.spark-particle {
    width: 4px;
    height: 20px;
    background: linear-gradient(to bottom, #ffaa00, #ff4400);
    position: absolute;
    animation: spark-fly 1s ease-out forwards;
    box-shadow: 0 0 10px #ff6600;
}

@keyframes spark-fly {
    0% {
        transform: translate(0, 0) scale(1) rotate(var(--angle, 0deg));
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx), var(--ty)) scale(0) rotate(calc(var(--angle, 0deg) + 360deg));
        opacity: 0;
    }
}

/* ========================================
   14. Neon Blitz Effekt
======================================== */
.neon-pulse {
    position: absolute;
    width: 200px;
    height: 200px;
    border: 4px solid #00ffff;
    border-radius: 50%;
    animation: neon-expand 1s ease-out forwards;
    box-shadow: 0 0 20px #00ffff, inset 0 0 20px #00ffff;
}

@keyframes neon-expand {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(10);
        opacity: 0;
    }
}

/* ========================================
   15. Matrix Rain Effekt
======================================== */
.matrix-char {
    position: absolute;
    font-family: 'Courier New', monospace;
    font-size: 18px;
    color: #00ff00;
    animation: matrix-fall 3s linear forwards;
    text-shadow: 0 0 10px #00ff00;
}

@keyframes matrix-fall {
    0% {
        transform: translateY(-50px);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    100% {
        transform: translateY(100vh);
        opacity: 0;
    }
}

/* ========================================
   16. Plasma Welle Effekt
======================================== */
.plasma-wave {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at var(--x, 50%) var(--y, 50%),
        rgba(255, 0, 255, 0.6),
        rgba(0, 255, 255, 0.4),
        transparent 70%);
    animation: plasma-pulse 2s ease-out forwards;
    filter: blur(20px);
}

@keyframes plasma-pulse {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        opacity: 0.8;
    }
    100% {
        transform: scale(3);
        opacity: 0;
    }
}

/* ========================================
   17. Schmetterling Effekt
======================================== */
.butterfly-particle {
    font-size: 30px;
    position: absolute;
    animation: butterfly-fly 6s ease-in-out forwards;
    filter: drop-shadow(0 0 5px rgba(255, 182, 193, 0.8));
}

@keyframes butterfly-fly {
    0% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    25% {
        transform: translate(50px, -100px) rotate(20deg);
    }
    50% {
        transform: translate(100px, -200px) rotate(-20deg);
    }
    75% {
        transform: translate(150px, -300px) rotate(20deg);
    }
    100% {
        transform: translate(200px, -120vh) rotate(0deg);
        opacity: 0;
    }
}

/* ========================================
   18. Laser Strahl Effekt
======================================== */
.laser-beam {
    position: absolute;
    width: 4px;
    height: 100vh;
    background: linear-gradient(to bottom,
        transparent,
        rgba(255, 0, 0, 0.8) 10%,
        rgba(255, 0, 0, 1) 50%,
        rgba(255, 0, 0, 0.8) 90%,
        transparent);
    animation: laser-sweep 1.5s linear forwards;
    box-shadow: 0 0 20px #ff0000, 0 0 40px #ff0000;
}

@keyframes laser-sweep {
    0% {
        transform: translateX(-100px);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateX(calc(100vw + 100px));
        opacity: 0;
    }
}

/* ========================================
   19. Wirbel Effekt
======================================== */
.vortex-particle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
    animation: vortex-spin 3s ease-out forwards;
    box-shadow: 0 0 15px currentColor;
}

@keyframes vortex-spin {
    0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translate(var(--vx), var(--vy)) scale(0) rotate(1080deg);
        opacity: 0;
    }
}

/* ========================================
   20. Sakura (Kirschblüten) Effekt
======================================== */
.sakura-particle {
    font-size: 28px;
    position: absolute;
    animation: sakura-fall 8s ease-in-out forwards;
}

@keyframes sakura-fall {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) translateX(var(--drift, 0px)) rotate(360deg);
        opacity: 0;
    }
}

/* ========================================
   21. Meteor Regen Effekt
======================================== */
.meteor-particle {
    width: 3px;
    height: 80px;
    background: linear-gradient(to bottom, white, orange, transparent);
    position: absolute;
    animation: meteor-fall 2s linear forwards;
    box-shadow: 0 0 10px white;
    transform: rotate(45deg);
}

@keyframes meteor-fall {
    0% {
        transform: translate(0, 0) rotate(45deg);
        opacity: 1;
    }
    100% {
        transform: translate(-150px, 150px) rotate(45deg);
        opacity: 0;
    }
}

/* ========================================
   22. Partylichter Effekt
======================================== */
.party-light {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    animation: party-spin 2s linear forwards;
    filter: blur(20px);
}

@keyframes party-spin {
    0% {
        transform: translate(0, 0) scale(0);
        opacity: 0;
    }
    50% {
        opacity: 0.8;
    }
    100% {
        transform: translate(var(--px), var(--py)) scale(2);
        opacity: 0;
    }
}

/* ========================================
   23. Tsunami Welle Effekt
======================================== */
.tsunami-wave {
    position: absolute;
    width: 100%;
    height: 150px;
    background: linear-gradient(to top,
        rgba(0, 119, 190, 0.8),
        rgba(0, 180, 216, 0.6),
        transparent);
    animation: tsunami-crash 3s ease-in-out forwards;
    border-radius: 50% 50% 0 0;
}

@keyframes tsunami-crash {
    0% {
        transform: translateY(100vh) scaleY(0.5);
        opacity: 0;
    }
    50% {
        opacity: 0.9;
        transform: translateY(50vh) scaleY(1.2);
    }
    100% {
        transform: translateY(-100vh) scaleY(0.8);
        opacity: 0;
    }
}

/* ========================================
   24. Digitale Glitches Effekt
======================================== */
.glitch-block {
    position: absolute;
    width: 200px;
    height: 50px;
    background: rgba(255, 0, 255, 0.7);
    animation: glitch-flicker 0.8s steps(1, end) forwards;
    mix-blend-mode: screen;
}

@keyframes glitch-flicker {
    0%, 100% { opacity: 0; transform: translate(0, 0); }
    10% { opacity: 1; transform: translate(-10px, 5px); }
    20% { opacity: 0.8; transform: translate(10px, -5px); }
    30% { opacity: 1; transform: translate(-5px, 10px); }
    40% { opacity: 0.9; transform: translate(5px, -10px); }
    50% { opacity: 0.7; transform: translate(-15px, 0); }
    60% { opacity: 1; transform: translate(15px, 0); }
    70% { opacity: 0.8; transform: translate(0, 15px); }
    80% { opacity: 0.9; transform: translate(0, -15px); }
    90% { opacity: 0.6; transform: translate(-20px, 20px); }
}

/* ========================================
   25. Kometen Schweif Effekt
======================================== */
.comet-particle {
    width: 15px;
    height: 15px;
    background: white;
    border-radius: 50%;
    position: absolute;
    animation: comet-trail 2s ease-out forwards;
    box-shadow:
        0 0 20px white,
        0 0 40px #4169E1,
        -60px 0 100px 30px rgba(65, 105, 225, 0.5);
}

@keyframes comet-trail {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(calc(100vw + 200px), calc(100vh + 200px)) scale(0.5);
        opacity: 0;
    }
}

/* ========================================
   26. Disco Kugel Effekt
======================================== */
.disco-beam {
    position: absolute;
    width: 300px;
    height: 10px;
    transform-origin: left center;
    animation: disco-rotate 3s linear forwards;
    opacity: 0.7;
}

@keyframes disco-rotate {
    0% {
        transform: rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        transform: rotate(720deg);
        opacity: 0;
    }
}

/* ========================================
   27. Energie Kugeln Effekt
======================================== */
.energy-orb {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    position: absolute;
    background: radial-gradient(circle at 30% 30%,
        rgba(255, 255, 255, 1),
        var(--orb-color, rgba(0, 150, 255, 0.8)),
        transparent 70%);
    animation: energy-pulse 2s ease-out forwards;
    box-shadow: 0 0 40px var(--orb-color, rgba(0, 150, 255, 0.9));
}

@keyframes energy-pulse {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 0;
    }
    50% {
        opacity: 1;
        transform: scale(1.5) rotate(180deg);
    }
    100% {
        transform: scale(0) rotate(360deg);
        opacity: 0;
    }
}

/* ========================================
   28. Champagner Effekt
======================================== */
.champagne-particle {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 215, 0, 0.8);
    position: absolute;
    animation: champagne-spray 2s ease-out forwards;
}

@keyframes champagne-spray {
    0% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(var(--cy)) translateX(var(--cx)) scale(0.3);
        opacity: 0;
    }
}

/* ========================================
   29. Pixelregen Effekt
======================================== */
.pixel-particle {
    width: 15px;
    height: 15px;
    position: absolute;
    animation: pixel-fall 3s linear forwards;
    image-rendering: pixelated;
}

@keyframes pixel-fall {
    0% {
        transform: translateY(-50px);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh);
        opacity: 0;
    }
}

/* ========================================
   30. Aurora Borealis Effekt
======================================== */
.aurora-wave {
    position: absolute;
    width: 100%;
    height: 200px;
    background: linear-gradient(90deg,
        transparent,
        rgba(0, 255, 127, 0.4),
        rgba(138, 43, 226, 0.4),
        rgba(0, 191, 255, 0.4),
        transparent);
    animation: aurora-flow 5s ease-in-out forwards;
    filter: blur(30px);
    opacity: 0.7;
}

@keyframes aurora-flow {
    0% {
        transform: translateY(-200px) translateX(-100px) skewX(-20deg);
        opacity: 0;
    }
    50% {
        opacity: 0.8;
        transform: translateY(40vh) translateX(50px) skewX(10deg);
    }
    100% {
        transform: translateY(100vh) translateX(200px) skewX(-20deg);
        opacity: 0;
    }
}

/* ========================================
   31. Applaus Effekt (Visuelle Schallwellen)
======================================== */
.applause-wave {
    position: absolute;
    width: 100px;
    height: 100px;
    border: 4px solid rgba(255, 215, 0, 0.6);
    border-radius: 50%;
    animation: applause-ripple 2s ease-out forwards;
}

@keyframes applause-ripple {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(8);
        opacity: 0;
    }
}

/* ========================================
   32. Tropfen Effekt (Wasserspritzer)
======================================== */
.water-drop {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(0, 150, 255, 0.7);
    position: absolute;
    animation: drop-splash 1.5s ease-out forwards;
}

@keyframes drop-splash {
    0% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
    50% {
        transform: scale(1.5) translateY(20px);
    }
    100% {
        transform: scale(0.5) translateY(100px);
        opacity: 0;
    }
}

/* ========================================
   33. Sonnenstrahlen Effekt
======================================== */
.sunray {
    position: absolute;
    width: 4px;
    height: 300px;
    background: linear-gradient(to bottom,
        rgba(255, 255, 0, 0),
        rgba(255, 215, 0, 0.6),
        rgba(255, 255, 0, 0));
    animation: sunray-shine 3s ease-in-out forwards;
    transform-origin: top center;
}

@keyframes sunray-shine {
    0% {
        transform: translateY(-100%) scaleY(0) rotate(var(--ray-angle, 0deg));
        opacity: 0;
    }
    50% {
        opacity: 0.8;
        transform: translateY(0) scaleY(1) rotate(var(--ray-angle, 0deg));
    }
    100% {
        transform: translateY(50vh) scaleY(1.5) rotate(var(--ray-angle, 0deg));
        opacity: 0;
    }
}

/* ========================================
   34. MEGA EXPLOSION Effekt
======================================== */
.mega-explosion-ring {
    position: absolute;
    border-radius: 50%;
    border: 8px solid;
    animation: mega-explosion 1.5s ease-out forwards;
}

@keyframes mega-explosion {
    0% {
        transform: scale(0);
        opacity: 1;
        border-width: 20px;
    }
    50% {
        opacity: 0.8;
    }
    100% {
        transform: scale(15);
        opacity: 0;
        border-width: 2px;
    }
}

.mega-explosion-flash {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 255, 255, 1), transparent 60%);
    animation: explosion-flash 0.8s ease-out forwards;
}

@keyframes explosion-flash {
    0% { opacity: 0; }
    20% { opacity: 1; }
    100% { opacity: 0; }
}

/* ========================================
   35. STROBE LIGHTS (Club-Style)
======================================== */
.strobe-flash {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: strobe-effect 0.1s steps(1, end) forwards;
    mix-blend-mode: screen;
}

@keyframes strobe-effect {
    0%, 20%, 40%, 60%, 80%, 100% { opacity: 0; }
    10%, 30%, 50%, 70%, 90% { opacity: 1; }
}

/* ========================================
   36. FIREWORK FOUNTAIN (Fontäne)
======================================== */
.fountain-particle {
    width: 8px;
    height: 20px;
    border-radius: 50%;
    position: absolute;
    background: linear-gradient(to top, gold, orange, red);
    animation: fountain-spray 2s ease-out forwards;
    box-shadow: 0 0 15px gold;
}

@keyframes fountain-spray {
    0% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(var(--fy)) translateX(var(--fx)) scale(0.3);
        opacity: 0;
    }
}

/* ========================================
   37. CONFETTI CANNON (Konfetti-Kanone)
======================================== */
.cannon-confetti {
    width: 12px;
    height: 18px;
    position: absolute;
    animation: cannon-blast 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    box-shadow: 0 0 10px currentColor;
}

@keyframes cannon-blast {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--cx), var(--cy)) rotate(var(--cr)) scale(0.5);
        opacity: 0;
    }
}

/* ========================================
   38. SPOTLIGHT SWEEP (Scheinwerfer)
======================================== */
.spotlight-beam {
    position: absolute;
    width: 300px;
    height: 100vh;
    background: linear-gradient(to right,
        transparent,
        rgba(255, 255, 255, 0.3) 50%,
        transparent);
    animation: spotlight-sweep 4s ease-in-out forwards;
    filter: blur(20px);
    transform-origin: top center;
}

@keyframes spotlight-sweep {
    0% {
        transform: translateX(-100vw) rotate(-30deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateX(100vw) rotate(30deg);
        opacity: 0;
    }
}

/* ========================================
   39. GOLDEN RAIN (Goldregen)
======================================== */
.golden-particle {
    width: 6px;
    height: 30px;
    background: linear-gradient(to bottom,
        rgba(255, 215, 0, 1),
        rgba(255, 165, 0, 0.8),
        rgba(255, 140, 0, 0));
    position: absolute;
    animation: golden-fall 3s linear forwards;
    box-shadow: 0 0 15px gold;
}

@keyframes golden-fall {
    0% {
        transform: translateY(-50px) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0;
    }
}

/* ========================================
   40. HYPE WAVE (Energie-Welle)
======================================== */
.hype-wave-ring {
    position: absolute;
    border-radius: 50%;
    border: 6px solid;
    animation: hype-wave-expand 2s ease-out forwards;
    box-shadow: 0 0 30px currentColor, inset 0 0 30px currentColor;
}

@keyframes hype-wave-expand {
    0% {
        transform: scale(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: scale(20) rotate(180deg);
        opacity: 0;
    }
}

/* ========================================
   41. BASS DROP (Stoßwelle)
======================================== */
.bass-wave {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    margin: -50px 0 0 -50px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(138, 43, 226, 0.8),
        rgba(75, 0, 130, 0.4),
        transparent 70%);
    animation: bass-pulse 1s ease-out forwards;
}

@keyframes bass-pulse {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
    100% {
        transform: scale(25);
        opacity: 0;
    }
}

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

@keyframes screen-shake {
    0%, 100% { transform: translate(0, 0); }
    10%, 30%, 50%, 70%, 90% { transform: translate(-10px, 10px); }
    20%, 40%, 60%, 80% { transform: translate(10px, -10px); }
}

/* ========================================
   42. RAVE LASERS (Multi-Laser)
======================================== */
.rave-laser {
    position: absolute;
    width: 6px;
    height: 100vh;
    background: linear-gradient(to bottom,
        transparent,
        currentColor 20%,
        currentColor 80%,
        transparent);
    animation: rave-laser-sweep 2s linear forwards;
    box-shadow: 0 0 40px currentColor;
    filter: blur(2px);
}

@keyframes rave-laser-sweep {
    0% {
        transform: translateX(var(--start-x)) scaleY(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
        transform: translateX(var(--start-x)) scaleY(1);
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateX(var(--end-x)) scaleY(1);
        opacity: 0;
    }
}

/* ========================================
   43. PARTY POPPER (360° Explosion)
======================================== */
.popper-streamer {
    position: absolute;
    width: 8px;
    height: 40px;
    animation: popper-fly 2s ease-out forwards;
}

@keyframes popper-fly {
    0% {
        transform: translate(0, 0) rotate(var(--angle)) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--px), var(--py)) rotate(calc(var(--angle) + 720deg)) scale(0.3);
        opacity: 0;
    }
}

/* ========================================
   44. GLITTER BOMB (Glitzer-Explosion)
======================================== */
.glitter-piece {
    width: 8px;
    height: 8px;
    background: white;
    position: absolute;
    animation: glitter-explode 2s ease-out forwards;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

@keyframes glitter-explode {
    0% {
        transform: translate(0, 0) scale(0) rotate(0deg);
        opacity: 1;
        box-shadow: 0 0 20px white;
    }
    50% {
        opacity: 1;
        box-shadow: 0 0 30px gold;
    }
    100% {
        transform: translate(var(--gx), var(--gy)) scale(1.5) rotate(720deg);
        opacity: 0;
        box-shadow: 0 0 0 transparent;
    }
}

/* ========================================
   45. CROWD HYPE (Welle durch Publikum)
======================================== */
.crowd-wave-bar {
    position: absolute;
    width: 80px;
    bottom: 0;
    background: linear-gradient(to top,
        rgba(255, 0, 255, 0.8),
        rgba(0, 255, 255, 0.6));
    animation: crowd-wave-jump 1.5s ease-in-out forwards;
    border-radius: 40px 40px 0 0;
    box-shadow: 0 -5px 30px currentColor;
}

@keyframes crowd-wave-jump {
    0%, 100% {
        height: 50px;
        opacity: 0;
    }
    50% {
        height: 400px;
        opacity: 1;
    }
}

/* ========================================
   46. SMOKE MACHINE (Party-Nebel)
======================================== */
.smoke-cloud {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(150, 150, 150, 0.6), transparent 60%);
    position: absolute;
    animation: smoke-billow 5s ease-out forwards;
    filter: blur(30px);
}

@keyframes smoke-billow {
    0% {
        transform: translate(0, 0) scale(0.5);
        opacity: 0;
    }
    20% {
        opacity: 0.8;
    }
    100% {
        transform: translate(var(--sx), -100vh) scale(3);
        opacity: 0;
    }
}

/* ========================================
   47. NEON TEXT FLASH (Partytext)
======================================== */
.neon-text-flash {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 8rem;
    font-weight: 900;
    color: white;
    text-shadow:
        0 0 20px currentColor,
        0 0 40px currentColor,
        0 0 80px currentColor;
    animation: neon-text-appear 2s ease-out forwards;
    font-family: 'Arial Black', sans-serif;
    letter-spacing: 0.2em;
}

@keyframes neon-text-appear {
    0% {
        transform: translate(-50%, -50%) scale(0) rotate(-180deg);
        opacity: 0;
    }
    30% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.3) rotate(0deg);
    }
    70% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) scale(0) rotate(180deg);
        opacity: 0;
    }
}

/* ========================================
   48. FIREWORK FINALE (Mega-Feuerwerk)
======================================== */
.finale-burst {
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    animation: finale-explode 2s ease-out forwards;
}

@keyframes finale-explode {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
        box-shadow: 0 0 30px currentColor;
    }
    100% {
        transform: translate(var(--fx), var(--fy)) scale(0);
        opacity: 0;
        box-shadow: 0 0 60px currentColor;
    }
}

/* ========================================
   Cleanup Animation
======================================== */
.effect-cleanup {
    animation: fade-out 0.5s ease-out forwards;
}

@keyframes fade-out {
    to {
        opacity: 0;
        transform: scale(0);
    }
}