.confetti-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1080;
}

.confetti-piece {
    position: absolute;
    top: -12%;
    left: var(--x);
    width: var(--size);
    height: calc(var(--size) * 1.7);
    background: var(--color);
    opacity: var(--opacity);
    border-radius: 70% 40% 65% 45%;
    transform: translate3d(0, -10vh, 0) rotate(0deg);
    animation: confettiLeafFall var(--duration) linear forwards;
    animation-delay: var(--delay);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
    will-change: transform, opacity;
}

@keyframes confettiLeafFall {
    0% {
        transform: translate3d(0, -10vh, 0) rotate(0deg);
        opacity: 0;
    }

    8% {
        opacity: var(--opacity);
    }

    25% {
        transform: translate3d(calc(var(--sway) * 0.55), 24vh, 0) rotate(calc(var(--rotate) * 0.24));
    }

    50% {
        transform: translate3d(calc(var(--sway) * -0.85), 52vh, 0) rotate(calc(var(--rotate) * 0.56));
    }

    75% {
        transform: translate3d(calc(var(--sway) * 0.65), 78vh, 0) rotate(calc(var(--rotate) * 0.82));
    }

    100% {
        transform: translate3d(calc(var(--sway) * -0.4), 112vh, 0) rotate(var(--rotate));
        opacity: 0.12;
    }
}

@media (prefers-reduced-motion: reduce) {
    .confetti-piece {
        animation: none;
        opacity: 0;
    }
}