@media (prefers-reduced-motion: no-preference) {
    :root dialog[open]:not(.rail-panel) {
        --modal-enter-offset: 6px;
        --modal-exit-offset: 4px;
        animation: qoops-modal-in 200ms cubic-bezier(.22, 1, .36, 1);
    }

    :root dialog[open]:is(.guided-tour, .pressure-stage, .photo-viewer, .post-image-dialog, .story-panel) {
        --modal-enter-offset: 0px;
        --modal-exit-offset: 0px;
    }

    :root dialog[open].modal-closing:not(.rail-panel) {
        animation: qoops-modal-out 150ms ease-in forwards;
        pointer-events: none;
    }

    :root dialog[open]::backdrop {
        animation: qoops-backdrop-in 200ms ease-out;
    }

    :root dialog[open].modal-closing::backdrop {
        animation: qoops-backdrop-out 150ms ease-in forwards;
        pointer-events: none;
    }

    :root dialog.rail-panel[open]::backdrop { animation-duration: 320ms; }

    @keyframes qoops-modal-in {
        from { opacity: var(--modal-enter-opacity, 0); translate: var(--modal-enter-translate, 0 var(--modal-enter-offset)); }
        to { opacity: 1; translate: 0 0; }
    }

    @keyframes qoops-modal-out {
        from { opacity: var(--modal-exit-opacity, 1); translate: var(--modal-exit-translate, 0 0); }
        to { opacity: 0; translate: 0 var(--modal-exit-offset); }
    }

    @keyframes qoops-backdrop-in {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @keyframes qoops-backdrop-out {
        from { opacity: 1; }
        to { opacity: 0; }
    }
}

@media (prefers-reduced-motion: reduce) {
    :root dialog, :root dialog::backdrop { animation: none; }
}