@keyframes popups-zoomin {
    from {
        opacity: 0;
        transform: scale(0.8) rotate(-45deg);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

@keyframes popups-hover {
    from {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
    to {
        opacity: 1;
        transform: scale(1.1) rotate(5deg);
    }
}

@keyframes popups-bloomin {
    from {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
    to {
        opacity: 0;
        transform: scale(1.4) rotate(40deg);
    }
}


body .randflower {
    position: absolute;
    cursor: pointer;
    width: 60px;
    height: auto;
    z-index: 1000;
    opacity: 0;
    transform: scale(0.3) rotate(-45deg);
    transition: transform 0.3s ease-in-out;
    animation: popups-zoomin 1s forwards;
}

body .randflower:hover {
    animation: popups-hover 0.3s forwards;
}

body .randflower.bloom {
    animation: popups-bloomin 1s forwards;
    pointer-events: none;
}