/* core/style_base.css */
body, html { 
    margin: 0; padding: 0; width: 100%; height: 100%; 
    overflow: hidden; background-color: transparent; 
    font-family: 'Arial', sans-serif; 
}

#overlay-container {
    width: 100vw; height: 100vh;
    display: flex; justify-content: center; align-items: center;
    position: relative; perspective: 1500px;
}

#confetti-canvas { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    pointer-events: none; z-index: 99; 
}

/* Container für Animationen (Standardmäßig unsichtbar) */
.anim-box {
    position: absolute;
    width: 100%;
    display: none; /* Wird per JS auf flex geschaltet */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    pointer-events: none;
}

/* Hilfsklassen für Animationen */
.pulse { animation: pulse 1s infinite; }
.rocket-fly { animation: flyUp 3s ease-in-out forwards; }
.float-pulse { animation: pulseFloat 4s ease-in-out infinite; }

@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes flyUp { 
    0% { transform: translateY(50vh) scale(0.5); opacity: 0; } 
    20% { transform: translateY(0) scale(1.2); opacity: 1; }
    100% { transform: translateY(-100vh) scale(0.5); opacity: 0; }
}
@keyframes slideUp { to { transform: translateY(0); opacity: 1; } }
@keyframes pulseFloat {
    0% { transform: scale(1.0) translateY(0) rotate(0deg); opacity: 0.6; }
    50% { transform: scale(1.1) translateY(-2vh) rotate(5deg); opacity: 1; }
    100% { transform: scale(1.0) translateY(0) rotate(0deg); opacity: 0.6; }
}