.ffnf-celebration-layer {
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    position: fixed;
    z-index: 99998;
}

.ffnf-celebration-balloon {
    animation: ffnf-celebration-balloon-fly var(--ffnf-balloon-duration, 12000ms) ease-in-out forwards;
    bottom: -45vh;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.14));
    left: var(--ffnf-balloon-left, 50vw);
    max-width: 78vw;
    pointer-events: none;
    position: fixed;
    transform: translateX(-50%) rotate(-3deg) scale(var(--ffnf-balloon-scale, 1));
    transform-origin: 50% 85%;
    width: var(--ffnf-balloon-width, min(360px, 58vw));
    will-change: bottom, opacity, transform;
    z-index: 99999;
}

.ffnf-celebration-confetti {
    animation: ffnf-celebration-confetti-fall linear forwards;
    pointer-events: none;
    position: fixed;
    top: -24px;
    transform: translate3d(0, -24px, 0) rotate(var(--ffnf-confetti-start-rotate, 0deg));
    transform-origin: center;
    will-change: opacity, transform;
    z-index: 99998;
}

.ffnf-celebration-confetti--snow {
    box-shadow: 0 0 9px rgba(255, 255, 255, 0.42);
    filter: blur(0.15px);
}

.ffnf-celebration-confetti--sand {
    box-shadow: 0 0 5px rgba(231, 183, 99, 0.3);
}

@keyframes ffnf-celebration-balloon-fly {
    0% {
        bottom: -45vh;
        opacity: 0;
        transform: translateX(-50%) rotate(-3deg) scale(var(--ffnf-balloon-scale, 1));
    }

    8% {
        opacity: 1;
    }

    45% {
        transform: translateX(calc(-50% + var(--ffnf-balloon-drift, 34px))) rotate(3deg) scale(var(--ffnf-balloon-scale, 1));
    }

    75% {
        opacity: 1;
    }

    100% {
        bottom: 120vh;
        opacity: 0.94;
        transform: translateX(calc(-50% - var(--ffnf-balloon-drift, 34px))) rotate(-2deg) scale(var(--ffnf-balloon-scale, 1));
    }
}

@keyframes ffnf-celebration-balloon-fly-mobile {
    0% {
        bottom: -28vh;
        opacity: 0;
        transform: translateX(-50%) rotate(-3deg) scale(var(--ffnf-balloon-scale, 1));
    }

    8% {
        opacity: 1;
    }

    45% {
        transform: translateX(calc(-50% + var(--ffnf-balloon-drift, 28px))) rotate(3deg) scale(var(--ffnf-balloon-scale, 1));
    }

    75% {
        opacity: 1;
    }

    100% {
        bottom: 120vh;
        opacity: 0.94;
        transform: translateX(calc(-50% - var(--ffnf-balloon-drift, 28px))) rotate(-2deg) scale(var(--ffnf-balloon-scale, 1));
    }
}

@keyframes ffnf-celebration-confetti-fall {
    0% {
        opacity: 0;
        transform: translate3d(0, -24px, 0) rotate(var(--ffnf-confetti-start-rotate, 0deg));
    }

    8% {
        opacity: var(--ffnf-confetti-opacity, 0.9);
    }

    100% {
        opacity: 0;
        transform: translate3d(var(--ffnf-confetti-x-end, 0), 120vh, 0) rotate(var(--ffnf-confetti-end-rotate, 1080deg));
    }
}

@media (max-width: 780px) {
    .ffnf-celebration-balloon {
        animation-name: ffnf-celebration-balloon-fly-mobile;
        width: var(--ffnf-balloon-mobile-width, min(320px, 78vw));
    }

    .ffnf-celebration-confetti {
        max-height: 16px;
        max-width: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ffnf-celebration-layer:not(.ffnf-celebration-layer--debug) {
        display: none;
    }
}