@keyframes floatSlow {
    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes floatMid {
    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-7px);
    }
}

@keyframes floatFast {
    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-13px);
    }
}

.animate-float-slow {
    animation: floatSlow 5s ease-in-out infinite;
}

.animate-float-mid {
    animation: floatMid 4s ease-in-out infinite 0.8s;
}

.animate-float-fast {
    animation: floatFast 6s ease-in-out infinite 1.6s;
}

@media (prefers-reduced-motion: reduce) {

    .animate-float-slow,
    .animate-float-mid,
    .animate-float-fast {
        animation: none;
    }
}