/* Phase 4 — WebGL-lite (CSS glass / refraction) */

.sc361-webgl-lite {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 2;
	overflow: hidden;
}

.sc361-webgl-lite__glass {
	position: absolute;
	inset: -20%;
	background: radial-gradient(
		circle at var(--sc361-glass-x, 50%) var(--sc361-glass-y, 50%),
		rgba(255, 255, 255, 0.12),
		transparent 45%
	);
	backdrop-filter: blur(8px) saturate(1.2);
	mix-blend-mode: overlay;
	opacity: 0;
	transition: opacity 0.35s ease;
}

.sc361-motion--webgl-lite .sc361-card:hover .sc361-webgl-lite__glass {
	opacity: 1;
}

.sc361-motion--webgl-lite .sc361-card {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 12px 40px rgba(0, 0, 0, 0.35);
}