/* ==========================================================================
   Animation Presets
   Opt-in motion classes only. Nothing animates unless a class is applied.
   ========================================================================== */

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes float-soft {

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

    50% {
        transform: translateY(-0.625rem);
    }
}

@keyframes pulse-soft {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.84;
        transform: scale(1.035);
    }
}

@keyframes glow-soft {

    0%,
    100% {
        box-shadow: var(--shadow-sm);
    }

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

@keyframes bounce-soft {

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

    45% {
        transform: translateY(-0.5rem);
    }

    70% {
        transform: translateY(0.125rem);
    }
}

@keyframes slide-up {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }

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

@keyframes slide-down {
    from {
        opacity: 0;
        transform: translateY(-1rem);
    }

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

@keyframes slide-left {
    from {
        opacity: 0;
        transform: translateX(1rem);
    }

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

@keyframes slide-right {
    from {
        opacity: 0;
        transform: translateX(-1rem);
    }

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

@keyframes scale-in {
    from {
        opacity: 0;
        transform: scale(0.96);
    }

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

.animate-fade-in {
    animation: fade-in var(--duration-slow) var(--ease-standard) both;
}

.animate-fade-out {
    animation: fade-out var(--duration-base) var(--ease-standard) both;
}

.animate-float {
    animation: float-soft var(--duration-float) var(--ease-standard) infinite;
}

.animate-pulse {
    animation: pulse-soft var(--duration-glow) var(--ease-standard) infinite;
}

.animate-glow {
    animation: glow-soft var(--duration-glow) var(--ease-standard) infinite;
}

.animate-bounce {
    animation: bounce-soft var(--duration-slower) var(--ease-bounce) both;
}

.animate-slide-up {
    animation: slide-up var(--duration-slow) var(--ease-standard) both;
}

.animate-slide-down {
    animation: slide-down var(--duration-slow) var(--ease-standard) both;
}

.animate-slide-left {
    animation: slide-left var(--duration-slow) var(--ease-standard) both;
}

.animate-slide-right {
    animation: slide-right var(--duration-slow) var(--ease-standard) both;
}

.animate-scale-in {
    animation: scale-in var(--duration-slow) var(--ease-bounce) both;
}

.animation-delay-1 {
    animation-delay: 100ms;
}

.animation-delay-2 {
    animation-delay: 200ms;
}

.animation-delay-3 {
    animation-delay: 300ms;
}

.animation-slow {
    animation-duration: var(--duration-slower);
}

.animation-soft {
    animation-timing-function: var(--ease-standard);
}

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

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }
}