/* =============================================================
   Unified toast region (#flash) — lightweight glass + fluid motion.

   Served as PLAIN CSS by Propshaft (NOT through Tailwind v4's Lightning
   CSS compiler). Lightning CSS strips `backdrop-filter` and collapses
   `color-mix(in oklch, var(...) N%, transparent)` because it cannot
   constant-fold a runtime variable — both are load-bearing here, so this
   file must stay outside app/assets/tailwind/.

   #flash is a DaisyUI .toast.toast-top.toast-center container; each
   message is an .alert child. Styles are scoped to `.toast .alert` so
   page-level alerts are untouched. Loaded after tailwind.css.
   ============================================================= */

/* Fluid, but cheap: transform + opacity only. The tiny overshoot adds
   softness without animating blur/filter or doing bounce/elastic. */
@keyframes toast-in {
	0% {
		opacity: 0;
		transform: translate3d(0, -115%, 0) scale(0.985);
	}
	62% {
		opacity: 1;
		transform: translate3d(0, 3px, 0) scale(1.002);
	}
	100% {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(1);
	}
}

@keyframes toast-out {
	from {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(1);
	}
	to {
		opacity: 0;
		transform: translate3d(0, -105%, 0) scale(0.99);
	}
}

.toast .alert {
	--toast-accent: var(--color-info);

	animation: toast-in 0.48s cubic-bezier(0.16, 1, 0.3, 1) both;
	will-change: transform, opacity;
	contain: paint;
	backface-visibility: hidden;

	color: var(--color-base-content);
	backdrop-filter: blur(8px) saturate(125%);
	-webkit-backdrop-filter: blur(8px) saturate(125%);
	background-color: color-mix(in oklch, var(--toast-accent) 16%, transparent);
	background-image: linear-gradient(
		135deg,
		color-mix(in oklch, var(--color-base-100) 78%, transparent),
		color-mix(in oklch, var(--color-base-200) 42%, transparent)
	);
	border: 1px solid
		color-mix(in oklch, var(--color-base-content) 14%, transparent);
	box-shadow:
		0 1px 0 0 color-mix(in oklch, var(--color-base-content) 8%, transparent)
		inset,
		0 10px 24px -16px color-mix(in oklch, black 58%, transparent);
}

.toast .alert.toast-exit {
	animation: toast-out 0.34s cubic-bezier(0.4, 0, 1, 1) forwards;
}

.toast .alert > svg {
	color: var(--toast-accent);
}

/* Semantic tint becomes an accent, not a full colored slab. */
.toast .alert-success {
	--toast-accent: var(--color-success);
	background-color: color-mix(in oklch, var(--color-success) 14%, transparent);
}
.toast .alert-error {
	--toast-accent: var(--color-error);
	background-color: color-mix(in oklch, var(--color-error) 16%, transparent);
}
.toast .alert-warning {
	--toast-accent: var(--color-warning);
	background-color: color-mix(in oklch, var(--color-warning) 14%, transparent);
}
.toast .alert-info {
	--toast-accent: var(--color-info);
	background-color: color-mix(in oklch, var(--color-info) 14%, transparent);
}

/* Dark mode needs less milk, more surface. */
html[data-theme="dark"] .toast .alert {
	backdrop-filter: blur(7px) saturate(118%);
	-webkit-backdrop-filter: blur(7px) saturate(118%);
	background-image: linear-gradient(
		135deg,
		color-mix(in oklch, var(--color-base-100) 86%, transparent),
		color-mix(in oklch, var(--color-base-300) 28%, transparent)
	);
	border-color: color-mix(in oklch, var(--color-base-content) 12%, transparent);
	box-shadow:
		0 1px 0 0 color-mix(in oklch, var(--color-base-content) 7%, transparent)
		inset,
		0 12px 26px -18px color-mix(in oklch, black 70%, transparent);
}

/* Auto-dismiss progress bar along the bottom edge of the shell. */
.toast-progress {
	height: 2px;
	width: 100%;
	transform-origin: left center;
	transform: scaleX(0);
	background: color-mix(in oklch, var(--toast-accent) 76%, transparent);
	opacity: 0.65;
}

.toast-progress-running {
	animation: toast-progress linear forwards;
}

@keyframes toast-progress {
	from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}

/* Reduced motion: no slide, no progress — just appear/disappear. */
@media (prefers-reduced-motion: reduce) {
	.toast .alert,
	.toast .alert.toast-exit,
	.toast-progress-running {
		animation: none !important;
		transform: none !important;
		will-change: auto !important;
	}
}