/* Confetti Animation Styles */
.confetti-animation-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 999; /* Below modals, above content */
    overflow: hidden; /* Hide confetti outside the viewport */
}

.confetti-piece {
    position: absolute;
    /* Start slightly above viewport, exact position handled by JS random startX */
    font-size: 2.5rem; /* Size of confetti */
    opacity: 0;
    animation: fall-and-fade var(--duration) forwards;
}

@keyframes fall-and-fade {
    0% {
        opacity: 0;
        transform: translateX(var(--x-offset)) translateY(0px) rotate(var(--rotate-start)) scale(0.8);
    }
    10% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateX(var(--x-offset)) translateY(var(--y-fall-distance)) rotate(var(--rotate-end)) scale(0.5);
    }
}