.rank-confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999; /* On top of everything */
    pointer-events: none; /* Allow clicks to pass through */
    display: none; /* Hidden by default */
    overflow: hidden;
    /* --- NEW: Add transition for smooth shrinking and fading --- */
    transition: opacity 0.5s ease;
    opacity: 1;
}

.rank-confetti-container.active {
    display: block;
}

/* --- NEW: State for when the animation is shrinking --- */
.rank-confetti-container.shrinking {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s 0.2s ease; /* Delay opacity fade */
    opacity: 0;
}

/* --- NEW: Keyframes for the zoom-out effect --- */
@keyframes zoomOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(1.5);
    }
}

/* --- NEW: Styles for generic full-screen animations (sparkles, tada, welcome) --- */
#general-animation-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9998; /* Below rank confetti, above everything else */
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease; /* For fade-in */
    overflow: hidden;
    transform: scale(1); /* Initial state for animation */
}

#general-animation-container.active {
    opacity: 1;
}

/* --- NEW: Styles for the favorite animation --- */
#favorite-animation-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* --- FIX: Remove initial scale for cleaner animation --- */
    width: 300px;
    height: 300px;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    /* --- REFINED: Separate transitions for entry and exit --- */
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* For entry animation */
}

#favorite-animation-container.active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* --- NEW: Class to trigger the zoom-out animation on general and favorite containers --- */
.zooming-out {
    animation: zoomOut 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}