body {
    font-family: Arial, sans-serif;
    background-color: #111;
    text-align: center;
    color: white;
    overflow: hidden;
}

.container {
    position: relative;
    margin-top: 100px;
}

input {
    width: 300px;
    padding: 10px;
    font-size: 18px;
    border: none;
    border-radius: 5px;
    outline: none;
    position: relative;
    z-index: 10;
    background-color: white;
}

/* Faster Drop */

.fragment {
    position: absolute;
    border-radius: 50%;
    opacity: 1;
    z-index: 9999; /* Ensure it appears above everything */
    animation: scatter 0.9s cubic-bezier(0.25, 1, 0.5, 1) forwards, drop 0.8s 0.4s cubic-bezier(0.4, 0, 1, 1) forwards, fade-out 0.7s 0.5s ease-out forwards;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    transition: opacity 0.5s ease-out;
}

/* Scattering outward effect with a more natural feel */
@keyframes scatter {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }

    60% {
        transform: translate(var(--x-move), var(--y-move)) scale(1.2);
        opacity: 1;
    }

    100% {
        transform: translate(calc(var(--x-move) * 1.1), calc(var(--y-move) * 1.1)) scale(1.1);
        opacity: 0.9;
    }
}

/* Smooth gravity-like drop */
@keyframes drop {
    0% {
        transform: translate(var(--x-move), var(--y-move)) scale(1.1);
        opacity: 0.9;
    }

    100% {
        transform: translate(var(--x-move), calc(var(--y-move) + 120px)) scale(0.7);
        opacity: 0.5;
    }
}


/* Gentle fade-out */
@keyframes fade-out {
    0% {
        opacity: 0.5;
    }

    100% {
        opacity: 0;
    }
}