.page-fade-in,
.ds-page-enter {
    animation: ds-fade-up var(--motion-slow) var(--easing-standard);
}

.modal.active .modal-content,
.dialog-overlay.show .dialog-content {
    animation: ds-scale-fade var(--motion-base) var(--easing-standard);
}

.collapse-enter {
    animation: ds-fade-up var(--motion-base) var(--easing-standard);
}

@keyframes ds-fade-up {
    from {
        opacity: 0;
        transform: translateY(var(--motion-distance-sm));
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ds-scale-fade {
    from {
        opacity: 0;
        transform: translateY(var(--motion-distance-sm)) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

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