.app-region-transition {
    --app-region-transition-duration: 160ms;
    --app-region-transition-easing: ease-out;
    will-change: opacity, transform;
}

.app-region-transition-fade.app-region-transition-before-swap {
    opacity: 0.72;
    transition: opacity var(--app-region-transition-duration) var(--app-region-transition-easing);
}

.app-region-transition-fade.app-region-transition-after-swap {
    animation: app-region-fade-in var(--app-region-transition-duration) var(--app-region-transition-easing);
}

.app-region-transition-fade-slide.app-region-transition-before-swap {
    opacity: 0.72;
    transform: translateY(0.25rem);
    transition:
        opacity var(--app-region-transition-duration) var(--app-region-transition-easing),
        transform var(--app-region-transition-duration) var(--app-region-transition-easing);
}

.app-region-transition-fade-slide.app-region-transition-after-swap,
.app-region-transition-panel.app-region-transition-after-swap {
    animation: app-region-fade-slide-in 180ms var(--app-region-transition-easing);
}

.app-region-transition-panel {
    --app-region-transition-duration: 200ms;
}

.app-region-transition-panel.app-region-transition-before-swap {
    opacity: 0.78;
    transform: translateY(0.375rem);
    box-shadow: var(--app-shadow-sm);
    transition:
        opacity var(--app-region-transition-duration) var(--app-region-transition-easing),
        transform var(--app-region-transition-duration) var(--app-region-transition-easing),
        box-shadow var(--app-region-transition-duration) var(--app-region-transition-easing);
}

@keyframes app-region-fade-in {
    from { opacity: 0.72; }
    to { opacity: 1; }
}

@keyframes app-region-fade-slide-in {
    from {
        opacity: 0.72;
        transform: translateY(0.375rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-region-transition,
    .app-region-transition-fade.app-region-transition-before-swap,
    .app-region-transition-fade.app-region-transition-after-swap,
    .app-region-transition-fade-slide.app-region-transition-before-swap,
    .app-region-transition-fade-slide.app-region-transition-after-swap,
    .app-region-transition-panel.app-region-transition-before-swap,
    .app-region-transition-panel.app-region-transition-after-swap {
        animation: none;
        transition: none;
        transform: none;
        opacity: 1;
    }
}