/*
 * Motion. HTMX swap/settle classes and View Transitions, following
 * https://htmx.org/examples/animations/. Everything here is removed under
 * prefers-reduced-motion.
 */

/* Request in flight: dim the busy region */
.dim-on-request { transition: opacity var(--dur) linear; }
.htmx-request.dim-on-request, .htmx-request .dim-on-request { opacity: 0.55; }

/* Indicators (spinners inside search fields, buttons) */
.htmx-indicator { opacity: 0; transition: opacity var(--dur-fast); }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

/* Fade in new content on settle (search results, appended rows, tab panels) */
.fade-in { opacity: 1; transform: none; transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.fade-in.htmx-added { opacity: 0; transform: translateY(4px); }

/* Fade out on removal: pair with hx-swap="outerHTML swap:200ms" */
.fade-out.htmx-swapping { opacity: 0; transform: translateX(8px); transition: opacity 200ms ease-out, transform 200ms ease-out; }

/* Success flash on an updated row: pair with hx-swap="outerHTML settle:600ms" */
.flash-ok.htmx-added, .flash-ok.htmx-added td { background: var(--success-tint); }
.flash-ok, .flash-ok td { transition: background 700ms ease-out; }

/* Modal + drawer enter/exit: transitions on [open] run when opening, the base
   ones when closing, so entry decelerates gently and exit is quick. */
dialog.modal, dialog.drawer { will-change: opacity, transform; }

dialog.modal {
	opacity: 0;
	transform: translateY(4px) scale(0.98);
	transition:
		opacity var(--dur-exit) var(--ease-exit),
		transform var(--dur-exit) var(--ease-exit),
		overlay var(--dur-exit) allow-discrete,
		display var(--dur-exit) allow-discrete;
}
dialog.modal[open] {
	opacity: 1;
	transform: none;
	transition:
		opacity var(--dur) ease-out,
		transform var(--dur-enter) var(--ease-enter),
		overlay var(--dur-enter) allow-discrete,
		display var(--dur-enter) allow-discrete;
}
@starting-style { dialog.modal[open] { opacity: 0; transform: translateY(12px) scale(0.96); } }

dialog.drawer {
	opacity: 0;
	transform: translateX(32px);
	transition:
		opacity var(--dur-exit) var(--ease-exit),
		transform var(--dur-exit) var(--ease-exit),
		overlay var(--dur-exit) allow-discrete,
		display var(--dur-exit) allow-discrete;
}
dialog.drawer[open] {
	opacity: 1;
	transform: none;
	transition:
		opacity var(--dur-fast) ease-out,
		transform var(--dur-enter) var(--ease-enter),
		overlay var(--dur-enter) allow-discrete,
		display var(--dur-enter) allow-discrete;
}
@starting-style { dialog.drawer[open] { opacity: 0; transform: translateX(100%); } }

dialog::backdrop {
	opacity: 0;
	transition:
		opacity var(--dur-exit) var(--ease-exit),
		overlay var(--dur-exit) allow-discrete,
		display var(--dur-exit) allow-discrete;
}
dialog[open]::backdrop {
	opacity: 1;
	transition:
		opacity var(--dur-enter) ease-out,
		overlay var(--dur-enter) allow-discrete,
		display var(--dur-enter) allow-discrete;
}
@starting-style { dialog[open]::backdrop { opacity: 0; } }

/* Toasts */
.toast { animation: toast-in var(--dur-slow) var(--ease-out) both; }
.toast.leaving { animation: toast-out var(--dur) ease-in both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }

/* Menus (details popovers) */
details[open] > .menu { animation: pop-in var(--dur-fast) var(--ease-out) both; }
@keyframes pop-in { from { opacity: 0; transform: translateY(4px); } }

/* Global request progress bar */
#nprogress.htmx-request { opacity: 1; animation: progress 1.4s var(--ease-out) forwards; }
@keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(0.85); } }

/* Page + theme transitions (View Transitions API): one in-place cross-fade of
   the whole page. No named regions, so nothing slides or resizes between
   pages; old and new share timing so unchanged pixels stay solid. */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
	::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}