/* Lightweight top-level glitter for primary commerce actions. Particles use
 * the page layer, or an open dialog's own top layer, to avoid sitting beneath
 * buttons while preserving their short outward drift. */
.gentleland-button-glitter {
    position: fixed !important;
    z-index: 2147483647 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, #ffffff 0 28%, rgba(255, 255, 255, 1) 34%, rgba(255, 229, 130, .98) 59%, rgba(255, 229, 130, 0) 80%) !important;
    box-shadow: 0 0 4px rgba(255, 255, 255, .98), 0 0 8px rgba(255, 218, 105, .72) !important;
    opacity: 0;
    pointer-events: none !important;
    transform: translate3d(-50%, -50%, 0) scale(.25) rotate(0deg);
    animation: gentleland-button-glitter-float var(--gentleland-glitter-duration, 620ms) cubic-bezier(.18, .72, .28, 1) var(--gentleland-glitter-delay, 0ms) forwards;
    will-change: transform, opacity;
    backface-visibility: hidden;
    contain: layout style paint;
}

.gentleland-button-glitter--contained {
    position: absolute !important;
}

.gentleland-button-glitter--star {
    border-radius: 0 !important;
    clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%) !important;
}

.gentleland-button-glitter--spinner {
    background: radial-gradient(circle, #ffffff 0 34%, rgba(255, 255, 255, 1) 40%, rgba(255, 231, 141, 1) 64%, rgba(255, 231, 141, 0) 84%) !important;
    box-shadow: 0 0 6px rgba(255, 255, 255, 1), 0 0 12px rgba(255, 224, 118, .92), 0 0 18px rgba(255, 255, 255, .48) !important;
}

@keyframes gentleland-button-glitter-float {
    0% {
        opacity: 0;
        transform: translate3d(-50%, -50%, 0) scale(.25) rotate(0deg);
    }
    12% {
        opacity: var(--gentleland-glitter-opacity, .72);
        transform: translate3d(-50%, -50%, 0) scale(.9) rotate(24deg);
    }
    68% {
        opacity: var(--gentleland-glitter-opacity, .72);
        transform: translate3d(calc(-50% + var(--gentleland-glitter-mid-x, 0px)), calc(-50% + var(--gentleland-glitter-mid-y, -15px)), 0) scale(1) rotate(78deg);
    }
    100% {
        opacity: 0;
        transform: translate3d(calc(-50% + var(--gentleland-glitter-x, 0px)), calc(-50% + var(--gentleland-glitter-y, -24px)), 0) scale(.38) rotate(115deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .gentleland-button-glitter {
        display: none !important;
        animation: none !important;
    }
}