/* ==========================================================================
   Glassmorphism utilities
   ========================================================================== */

.glass-panel {
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	border-radius: var(--radius-lg);
	backdrop-filter: blur(var(--glass-blur));
	-webkit-backdrop-filter: blur(var(--glass-blur));
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

.glass-nav {
	border-radius: 0;
	border-left: none;
	border-right: none;
	border-top: none;
	background: rgba(10, 10, 10, 0.55);
}

/* Only the sticky nav gets backdrop-filter always-on; other glass panels
   rely on a solid fallback for browsers/devices without support, since
   backdrop-filter is GPU-costly and shouldn't run everywhere at once. */
@supports not (backdrop-filter: blur(1px)) {
	.glass-panel {
		background: rgba(18, 18, 18, 0.92);
	}
}

/* Floats transparently over the hero/page-header banner every template
   starts with — position:absolute takes it out of normal flow so that
   section renders starting at the very top of the page, underneath the
   header, instead of below it (which is all a transparent background
   alone would achieve — sticky/static positioning still reserves the
   header's own space first). Once scrolled past that banner, JS adds
   .is-scrolled, which re-pins it with position:fixed and a solid
   blurred background so it stays readable over plain content below. */
.site-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: transparent;
	border: none;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	transition: background var(--transition-med), box-shadow var(--transition-med), backdrop-filter var(--transition-med);
}

.site-header.is-scrolled {
	position: fixed;
	background: rgba(8, 8, 8, 0.8);
	backdrop-filter: blur(var(--glass-blur));
	-webkit-backdrop-filter: blur(var(--glass-blur));
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}