/**
 * Celsyn 360 Liquid — the glass primitive + its direct derivatives.
 * Every floating control in the system (header, mobile dock, cart drawer
 * chrome, search overlay, quick view, sticky purchase bar, filter pills)
 * is built from .celsyn-glass. Content-heavy surfaces (long-form copy,
 * FAQ answers, checkout fields) deliberately do NOT use this class — see
 * surfaces.css for the opaque content-surface components instead. Glass
 * is reserved for controls so it keeps reading as special.
 */

.celsyn-glass {
	position: relative;
	background: var( --glass-bg );
	border: 1px solid var( --glass-border );
	border-radius: var( --radius-md );
	box-shadow: var( --glass-shadow ), var( --glass-highlight );
	backdrop-filter: blur( var( --blur-md ) ) saturate( 1.4 );
	-webkit-backdrop-filter: blur( var( --blur-md ) ) saturate( 1.4 );
	color: var( --glass-text );
}

.celsyn-glass--strong {
	background: var( --glass-bg-strong );
	backdrop-filter: blur( var( --blur-lg ) ) saturate( 1.5 );
	-webkit-backdrop-filter: blur( var( --blur-lg ) ) saturate( 1.5 );
}

.celsyn-glass--pill { border-radius: var( --radius-pill ); }
.celsyn-glass--lg { border-radius: var( --radius-lg ); }

/* ---------- Floating nav surface (header, mobile dock) ----------------- */
.celsyn-glass-nav {
	background: var( --glass-bg-strong );
	border: 1px solid var( --glass-border );
	border-radius: var( --radius-pill );
	box-shadow: var( --glass-shadow ), var( --glass-highlight );
	backdrop-filter: blur( var( --blur-lg ) ) saturate( 1.5 );
	-webkit-backdrop-filter: blur( var( --blur-lg ) ) saturate( 1.5 );
	transition: background-color var( --dur-mid ) var( --ease-glass ),
	            box-shadow var( --dur-mid ) var( --ease-glass ),
	            transform var( --dur-mid ) var( --ease-glass );
}

/* ---------- Glass card (trust indicators, floating callouts) ---------- */
.celsyn-glass-card {
	background: var( --glass-bg );
	border: 1px solid var( --glass-border );
	border-radius: var( --radius-md );
	box-shadow: var( --glass-shadow-sm ), var( --glass-highlight );
	backdrop-filter: blur( var( --blur-md ) );
	-webkit-backdrop-filter: blur( var( --blur-md ) );
	padding: var( --space-5 );
	transition: transform var( --dur-fast ) var( --ease-glass ),
	            box-shadow var( --dur-fast ) var( --ease-glass );
}
.celsyn-glass-card:hover {
	transform: translateY( -2px );
	box-shadow: var( --glass-shadow ), var( --glass-highlight );
}

/* ---------- Glass modal / drawer scrim + surface ----------------------- */
.celsyn-glass-scrim {
	position: fixed;
	inset: 0;
	background: rgb( var( --celsyn-ink-rgb ) / 0.38 );
	backdrop-filter: blur( 6px );
	-webkit-backdrop-filter: blur( 6px );
	z-index: var( --z-overlay-scrim );
	opacity: 0;
	pointer-events: none;
	transition: opacity var( --dur-mid ) var( --ease-glass );
}
.celsyn-glass-scrim.is-open {
	opacity: 1;
	pointer-events: auto;
}

.celsyn-glass-modal {
	background: var( --env-surface );
	border: 1px solid var( --env-line );
	border-radius: var( --radius-lg );
	box-shadow: var( --glass-shadow );
	z-index: var( --z-modal );
	transform: scale( 0.96 ) translateY( 8px );
	opacity: 0;
	/* 2026-10-04 fix: this rule only ever faded the modal out in place
	   (opacity + a small scale/translate) — it never set pointer-events,
	   so the closed modal stayed exactly where its fixed-position/
	   transform put it and fully clickable, just invisible. On the
	   homepage that rectangle happens to land on top of several footer
	   links (confirmed via elementFromPoint hit-testing: clicks on
	   Research Catalog / Lab Results / Knowledge Base / FAQ / Shipping
	   Policy / Refund Policy were all landing on #celsyn-qv-body instead
	   of the link underneath). .celsyn-glass-scrim right above this in
	   this same file already gets this right — pointer-events:none at
	   rest, pointer-events:auto only on .is-open; this is that same fix
	   applied here. #celsyn-cart-drawer, the other "modal-ish" surface in
	   this theme, was never affected — it moves fully off-screen
	   (translateX(100%)) when closed rather than fading in place, so it
	   can't overlap anything else regardless of pointer-events. */
	pointer-events: none;
	transition: transform var( --dur-mid ) var( --ease-glass ),
	            opacity var( --dur-mid ) var( --ease-glass );
}
.celsyn-glass-modal.is-open {
	transform: scale( 1 ) translateY( 0 );
	opacity: 1;
	pointer-events: auto;
}
/* Modal INTERIOR stays an opaque content surface (--env-surface above) —
   only its chrome (header bar, floating close/action controls) uses
   glass. Readability of product/cart content is never traded for effect. */
.celsyn-glass-modal__chrome {
	background: var( --glass-bg-strong );
	backdrop-filter: blur( var( --blur-lg ) ) saturate( 1.5 );
	-webkit-backdrop-filter: blur( var( --blur-lg ) ) saturate( 1.5 );
	border-bottom: 1px solid var( --env-line );
}

/* ---------- Filter pills ------------------------------------------------ */
.celsyn-pill {
	display: inline-flex;
	align-items: center;
	gap: var( --space-2 );
	height: var( --control-h-sm );
	padding-inline: var( --space-4 );
	border-radius: var( --radius-pill );
	font-size: var( --text-xs );
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	background: var( --glass-bg );
	border: 1px solid var( --glass-border );
	color: var( --glass-text-muted );
	backdrop-filter: blur( var( --blur-md ) ) saturate( 1.4 );
	-webkit-backdrop-filter: blur( var( --blur-md ) ) saturate( 1.4 );
	transition: background-color var( --dur-fast ) var( --ease-standard ),
	            color var( --dur-fast ) var( --ease-standard ),
	            transform var( --dur-fast ) var( --ease-standard ),
	            box-shadow var( --dur-fast ) var( --ease-standard );
}
.celsyn-pill:hover { transform: translateY( -1px ); box-shadow: var( --glass-shadow-sm ); }
.celsyn-pill[aria-current="true"],
.celsyn-pill[aria-pressed="true"] {
	background: var( --celsyn-blue );
	border-color: var( --celsyn-blue );
	color: #fff;
	box-shadow: 0 4px 14px rgb( var( --celsyn-blue-rgb ) / 0.35 );
}

@media ( prefers-reduced-motion: reduce ) {
	.celsyn-glass-card:hover { transform: none; }
	.celsyn-pill:hover { transform: none; }
}