/**
 * glassmorphism.css — reusable frosted-glass surfaces and effects.
 */

.glass {
	background: var(--ci-glass-bg);
	-webkit-backdrop-filter: blur(var(--ci-glass-blur)) saturate(140%);
	backdrop-filter: blur(var(--ci-glass-blur)) saturate(140%);
	border: 1px solid var(--ci-glass-brd);
	border-radius: var(--ci-radius);
	box-shadow: var(--ci-shadow);
}

.glass-sticky {
	background: var(--ci-glass-bg);
	-webkit-backdrop-filter: blur(var(--ci-glass-blur)) saturate(140%);
	backdrop-filter: blur(var(--ci-glass-blur)) saturate(140%);
	border-bottom: 1px solid var(--ci-glass-brd);
}

/* Subtle gradient glow used behind hero / accents. */
.glow-accent {
	position: relative;
}
.glow-accent::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(135deg, var(--ci-accent), var(--ci-accent-2));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: .6;
	pointer-events: none;
}

/* Fallback when backdrop-filter isn't supported. */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
	.glass, .glass-sticky { background: var(--ci-bg-2); }
}

/* Hover lift animation for cards. */
.hover-lift {
	transition: transform .35s var(--ci-ease), box-shadow .35s var(--ci-ease), border-color .35s var(--ci-ease);
	will-change: transform;
}
.hover-lift:hover {
	transform: translateY(-4px);
	border-color: color-mix(in srgb, var(--ci-accent) 45%, var(--ci-glass-brd));
	box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--ci-accent) 40%, transparent);
}