@keyframes float {
    0%, 100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-18px) rotate(1.5deg);
    }
}

@keyframes morph {
    0%, 100% {
        border-radius: 42% 58% 48% 52%;
        transform: rotate(0);
    }

    50% {
        border-radius: 55% 45% 60% 40%;
        transform: rotate(6deg);
    }
}

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .85s ease, transform .85s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.text-reveal {
    opacity: 0;
    transform: translateY(22px);
    animation: revealText 1s .1s forwards cubic-bezier(.19, 1, .22, 1);
}

@keyframes revealText {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.magnetic {
    will-change: transform;
}

.shimmer {
    position: relative;
    overflow: hidden;
}

.shimmer::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .4), transparent);
    transform: translateX(-120%);
    transition: .6s;
}

.shimmer:hover::after {
    transform: translateX(120%);
}