/* ============================================================
   animations.css — All @keyframes Definitions
   Single Responsibility: owns ONLY keyframe declarations.
   No selectors or property assignments live here.
   ============================================================ */

@keyframes spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes spin-rev {
    to {
        transform: translate(-50%, -50%) rotate(-360deg);
    }
}

@keyframes float-bean {
    0% {
        opacity: 0;
        transform: translateY(0) rotate(0deg);
    }

    10% {
        opacity: 0.5;
    }

    90% {
        opacity: 0.3;
    }

    100% {
        opacity: 0;
        transform: translateY(-100vh) rotate(360deg);
    }
}

@keyframes rise {
    0% {
        opacity: 0;
        height: 0;
        transform: translateX(0);
    }

    20% {
        opacity: 0.5;
    }

    80% {
        opacity: 0.1;
    }

    100% {
        opacity: 0;
        height: 72px;
        transform: translateX(var(--sx, 10px)) scaleX(2);
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

@keyframes float-logo {

    0%,
    100% {
        transform: translateY(0);
    }

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