/*
 * HCS Glass Surface
 * The background itself is set inline by glass-surface.js (with !important)
 * so it reliably overrides theme styles such as UIkit button backgrounds.
 * The highlight colors come in as full-color custom properties (no calc/var
 * inside color functions — some WebKit builds mishandle those).
 */

.hcs-glass--ready {
	position: relative;
	isolation: isolate;
	transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* Full SVG-refraction path (Chromium) */
.hcs-glass--svg {
	box-shadow:
		0 0 2px 1px var(--hcs-glass-hl1, rgba(255, 255, 255, 0.25)) inset,
		0 0 10px 4px var(--hcs-glass-hl2, rgba(255, 255, 255, 0.12)) inset,
		0 4px 16px rgba(17, 17, 26, 0.08),
		0 12px 24px rgba(17, 17, 26, 0.06);
}

/* Frosted-glass fallback (Safari, Firefox) */
.hcs-glass--fallback {
	-webkit-backdrop-filter: blur(12px) saturate(1.8) brightness(1.08);
	backdrop-filter: blur(12px) saturate(1.8) brightness(1.08);
	box-shadow:
		0 0 2px 1px var(--hcs-glass-hl1, rgba(255, 255, 255, 0.3)) inset,
		0 0 10px 4px var(--hcs-glass-hl2, rgba(255, 255, 255, 0.12)) inset,
		0 4px 16px rgba(17, 17, 26, 0.08),
		0 12px 24px rgba(17, 17, 26, 0.06);
}