/*
 * ==========================================================
 * FitUI
 * The Design System for FitOcala
 *
 * File: 05-animations.css
 * Version: 1.0.0
 * ==========================================================
 */

/*
|--------------------------------------------------------------------------
| Standard Transitions
|--------------------------------------------------------------------------
*/

.fit-transition {
    transition:
        transform var(--fit-normal) ease,
        opacity var(--fit-normal) ease,
        background-color var(--fit-normal) ease,
        border-color var(--fit-normal) ease,
        color var(--fit-normal) ease,
        box-shadow var(--fit-normal) ease;
}

.fit-transition-fast {
    transition:
        transform var(--fit-fast) ease,
        opacity var(--fit-fast) ease,
        background-color var(--fit-fast) ease,
        border-color var(--fit-fast) ease,
        color var(--fit-fast) ease,
        box-shadow var(--fit-fast) ease;
}

.fit-transition-slow {
    transition:
        transform var(--fit-slow) ease,
        opacity var(--fit-slow) ease,
        background-color var(--fit-slow) ease,
        border-color var(--fit-slow) ease,
        color var(--fit-slow) ease,
        box-shadow var(--fit-slow) ease;
}

/*
|--------------------------------------------------------------------------
| Lift
|--------------------------------------------------------------------------
*/

.fit-lift {
    transition:
        transform var(--fit-normal) ease,
        border-color var(--fit-normal) ease,
        box-shadow var(--fit-normal) ease;
}

.fit-lift:hover {
    transform: translateY(-6px);

    box-shadow:
        var(--fit-shadow-lg),
        var(--fit-gold-glow);
}

/*
|--------------------------------------------------------------------------
| Scale
|--------------------------------------------------------------------------
*/

.fit-scale {
    transition: transform var(--fit-normal) ease;
}

.fit-scale:hover {
    transform: scale(1.03);
}

/*
|--------------------------------------------------------------------------
| Glow
|--------------------------------------------------------------------------
*/

.fit-glow-hover {
    transition:
        border-color var(--fit-normal) ease,
        box-shadow var(--fit-normal) ease;
}

.fit-glow-hover:hover {
    border-color: var(--fit-gold-border);

    box-shadow:
        var(--fit-shadow),
        var(--fit-gold-glow);
}

/*
|--------------------------------------------------------------------------
| Fade Up
|--------------------------------------------------------------------------
*/

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

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

.fit-fade-up {
    animation: fitFadeUp .8s cubic-bezier(.16, 1, .3, 1) both;
}

/*
|--------------------------------------------------------------------------
| Fade
|--------------------------------------------------------------------------
*/

@keyframes fitFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fit-fade {
    animation: fitFade .7s ease both;
}

/*
|--------------------------------------------------------------------------
| Floating
|--------------------------------------------------------------------------
*/

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

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

.fit-float {
    animation: fitFloat 6s ease-in-out infinite;
}

/*
|--------------------------------------------------------------------------
| Pulse Glow
|--------------------------------------------------------------------------
*/

@keyframes fitPulseGlow {
    0%,
    100% {
        box-shadow:
            var(--fit-shadow),
            0 0 0 rgba(184, 146, 70, 0);
    }

    50% {
        box-shadow:
            var(--fit-shadow),
            var(--fit-gold-glow);
    }
}

.fit-pulse-glow {
    animation: fitPulseGlow 3.5s ease-in-out infinite;
}

/*
|--------------------------------------------------------------------------
| Reveal
|--------------------------------------------------------------------------
*/

.fit-reveal {
    opacity: 0;
    transform: translateY(42px);

    transition:
        opacity .8s ease,
        transform .9s cubic-bezier(.16, 1, .3, 1);

    transition-delay: var(--fit-reveal-delay, 0ms);
}

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

/*
|--------------------------------------------------------------------------
| Arrow Movement
|--------------------------------------------------------------------------
*/

.fit-hover-arrow {
    display: inline-block;

    transition: transform var(--fit-fast) ease;
}

.fit-hover-arrow:hover,
a:hover .fit-hover-arrow,
button:hover .fit-hover-arrow,
.fit-panel--interactive:hover .fit-hover-arrow {
    transform: translateX(4px);
}

/*
|--------------------------------------------------------------------------
| Press Feedback
|--------------------------------------------------------------------------
*/

.fit-press {
    transition: transform var(--fit-fast) ease;
}

.fit-press:active {
    transform: scale(.97);
}

/*
|--------------------------------------------------------------------------
| Motion Preferences
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {
    .fit-v2-body,
    .fit-v2-body *,
    .fit-v2-body *::before,
    .fit-v2-body *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .fit-reveal {
        opacity: 1;
        transform: none;
    }
}