html:has(dialog[open]) {
    overflow: hidden;
}

@keyframes scaleDown {
    0% {
        opacity: 1;
        transform: scale(1);
    }

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

@keyframes slideInUp {
    0% {
        opacity: 0;
        transform: translateY(20%);
    }

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

dialog[open]::backdrop {
    backdrop-filter: blur(5px);
}

@media (prefers-reduced-motion: no-preference) {
    dialog {
        opacity: 0;
        transform: scale(0.9);
    }

    dialog.showing {
        animation: slideInUp 0.3s ease-out forwards;
    }

    dialog.closing {
        animation: scaleDown 0.3s ease-in forwards;
    }
}

.close-button {
    position: absolute;
    top: 1rem;
    right: 1rem;
    cursor: pointer;
}