/* ==========================================================================
   uiux.pics — Shared dialog / modal motion (image viewer, native dialogs, etc.)
   ========================================================================== */

:root {
	--uiux-dialog-backdrop-duration: 0.22s;
	--uiux-dialog-backdrop-ease: ease;
	--uiux-dialog-scale-duration: 0.82s;
	--uiux-dialog-scale-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--uiux-dialog-scale-delay: 0.25s;
	--uiux-dialog-scale-from: 0.92;
}

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

@keyframes uiux-dialog-scale-in {
	from { transform: scale(var(--uiux-dialog-scale-from)); }
	to { transform: scale(1); }
}

/* Native <dialog> — account modals, future dialogs */
.uiux-dialog-native {
	border: none;
	padding: 0;
	transform-origin: center center;
}

.uiux-dialog-native[open] {
	animation:
		uiux-dialog-scale-in
		var(--uiux-dialog-scale-duration)
		var(--uiux-dialog-scale-ease)
		var(--uiux-dialog-scale-delay)
		both;
}

.uiux-dialog-native[open]::backdrop {
	animation:
		uiux-dialog-backdrop-in
		var(--uiux-dialog-backdrop-duration)
		var(--uiux-dialog-backdrop-ease)
		forwards;
}

/* Div overlay shells — auth modal, collection picker, etc. */
.uiux-dialog:not([hidden]) .uiux-dialog__overlay,
.uiux-auth-modal:not([hidden]):not(.uiux-auth-modal--page) .uiux-auth-modal__overlay {
	animation:
		uiux-dialog-backdrop-in
		var(--uiux-dialog-backdrop-duration)
		var(--uiux-dialog-backdrop-ease)
		forwards;
}

.uiux-dialog:not([hidden]) .uiux-dialog__panel,
.uiux-auth-modal:not([hidden]):not(.uiux-auth-modal--page) .uiux-auth-modal__card {
	animation:
		uiux-dialog-scale-in
		var(--uiux-dialog-scale-duration)
		var(--uiux-dialog-scale-ease)
		var(--uiux-dialog-scale-delay)
		both;
	transform-origin: center center;
}

@media (prefers-reduced-motion: reduce) {
	.uiux-dialog-native[open],
	.uiux-dialog-native[open]::backdrop,
	.uiux-dialog:not([hidden]) .uiux-dialog__overlay,
	.uiux-dialog:not([hidden]) .uiux-dialog__panel,
	.uiux-auth-modal:not([hidden]):not(.uiux-auth-modal--page) .uiux-auth-modal__overlay,
	.uiux-auth-modal:not([hidden]):not(.uiux-auth-modal--page) .uiux-auth-modal__card {
		animation: none !important;
	}
}