/* ==========================================================
   MOTION TOKENS
========================================================== */

:root {

    --motion-fast: .2s;
    --motion-base: .35s;
    --motion-slow: .10s;

    --ease-standard: cubic-bezier(.2, .8, .2, 1);
    --ease-soft: cubic-bezier(.25, .46, .45, .94);
    --ease-hero: cubic-bezier(.42, 0, .28, 1);
}

/* ==========================================================
   KEYFRAMES
========================================================== */

@keyframes fade-up {

    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes scale-in {

    from {
        opacity: 0;
        transform: scale(.96);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes floatY {

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

    50% {
        transform: translateY(-6px)
    }
}

/* ==========================================================
   UTILITIES
========================================================== */

.motion-fade-up {
    animation: fade-up .8s var(--ease-soft);
}

.motion-scale {
    animation: scale-in .6s var(--ease-standard);
}

.motion-float {
    animation: floatY 10s var(--ease-hero) infinite;
}

/* ==========================================================
   ANIMATIONS
========================================================== */

@keyframes floatY {

    0%,
    100% {
        transform: translateY(12px) rotate(-4deg);
    }

    50% {
        transform: translateY(6px) rotate(4deg);
    }
}

@keyframes fadeUp {

    from {
        opacity: 0;
        transform: translateY(20px);
    }

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