body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #1a1a1a; /* Darker background for drama */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Cleaner font */
    margin: 0;
    overflow: hidden; /* Hide potential overflow from animations */
}

.container {
    text-align: center;
    /* Removed background/shadow for a cleaner look, focusing on elements */
    padding: 40px 60px;
}

/* --- Sleeker Button Style --- */
#confettiButton {
    padding: 18px 40px;
    font-size: 1.3em;
    font-weight: bold;
    color: #ffffff;
    background-color: #007aff; /* Apple blue - sleek */
    border: none;
    border-radius: 10px; /* Less rounded */
    cursor: pointer;
    transition: all 0.2s ease-out;
    box-shadow: 0 5px 15px rgba(0, 122, 255, 0.3); /* Subtle blue glow */
    /* margin-bottom removed */
    letter-spacing: 1px;
}

#confettiButton:hover {
    background-color: #005ecb; /* Darker blue on hover */
    box-shadow: 0 8px 20px rgba(0, 122, 255, 0.4);
    transform: translateY(-3px); /* More lift */
}

#confettiButton:active {
    transform: translateY(0px); /* Back to original position */
    box-shadow: 0 3px 10px rgba(0, 122, 255, 0.2);
}

/* --- Dramatic Text Style & Animation --- */
#helloText {
    font-size: 5em; /* Larger */
    font-weight: bold;
    color: #ffffff; /* White text on dark background */
    margin-bottom: 40px; /* Added margin below text */
    opacity: 0; /* Start invisible for animation */
    transform: scale(0.5) rotate(-15deg); /* Start small and rotated */
    transition: opacity 0.5s ease-out; /* Add transition for smoother appearance if needed */
}

.hidden {
    display: none; /* Keep this to hide initially */
}

.animate-in {
    display: block !important; /* Ensure it's visible */
    animation: dramaticEntrance 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; /* Apply animation */
}

@keyframes dramaticEntrance {
    0% {
        opacity: 0;
        transform: scale(0.3) rotate(-20deg) translateY(50px);
    }
    60% {
        opacity: 1;
        transform: scale(1.1) rotate(5deg) translateY(-10px); /* Overshoot */
    }
    80% {
        transform: scale(0.95) rotate(-2deg) translateY(5px); /* Bounce back */
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg) translateY(0); /* Settle */
    }
}