@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

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

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

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

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(16px);
    }

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

@keyframes softPulse {
    50% {
        opacity: .55;
        transform: scale(.96);
    }
}

.animate-fade-in {
    animation: fadeIn var(--transition-base) both;
}

.animate-fade-up {
    animation: fadeUp var(--transition-slow) both;
}

.animate-scale-in {
    animation: scaleIn var(--transition-base) both;
}

.animate-slide-right {
    animation: slideInRight var(--transition-base) both;
}

.is-updating {
    animation: softPulse .8s ease-in-out infinite;
}

.view-transition-enter {
    animation: fadeUp 260ms ease both;
}

.view-transition-leave {
    opacity: 0;
    transform: translateY(8px);
    transition:
        opacity 180ms ease,
        transform 180ms ease;
}

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