.glass-effect::before{
	content:"";
	position:absolute;
	inset:0;
	background:
		radial-gradient(circle at var(--x) var(--y),rgba(255,255,255,.5) 0%,rgba(255,255,255,.4) 8%,rgba(255,255,255,.2) 16%,rgba(255,255,255,0) 38%),
		radial-gradient(circle at calc(var(--x) + 2%) calc(var(--y) + 2%),rgba(255,255,255,.45) 0%,rgba(255,255,255,0) 60%),
		radial-gradient(circle at var(--x) var(--y),rgba(0,170,255,.38) 0%,rgba(0,170,255,0) 72%),
		radial-gradient(circle at var(--x) var(--y),rgba(255,80,80,.34) 0%,rgba(255,80,80,0) 72%),
		linear-gradient(to bottom,rgba(255,255,255,.12) 0%,rgba(255,255,255,0) 20%),
		linear-gradient(to top,rgba(0,0,0,.25) 0%,rgba(0,0,0,0) 20%),
		linear-gradient(to right,rgba(255,255,255,.08) 0%,rgba(255,255,255,0) 18%),
		linear-gradient(to left,rgba(0,0,0,.26) 0%,rgba(0,0,0,0) 18%);
	filter:blur(60px);
	mix-blend-mode:overlay;
	pointer-events:none;
	transition:opacity .15s linear;
}

.glass-effect::after{
	content:"";
	position:absolute;
	inset:0;
	background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAABLbSncAAAAPElEQVR42mP8/5+BIFRAXIYSAwMIgselYikYiXsv8PzTAHWB7MhNhKAGwPDwMAwMDCIEwDQw4EmYQuS4qwEAAKAXFPhCEfuWAAAAAElFTkSuQmCC") repeat,url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAABAcHiAAAAADUlEQVR42mNc8OXPfwAJkAP+ZpVKYAAAAABJRU5ErkJggg==") repeat;
	background-size:160px 160px,40px 40px;
	opacity:.13;
	mix-blend-mode:overlay;
	box-shadow:inset 0 0 40px rgba(0,0,0,.45);
	pointer-events:none;
	filter:url(#glassEffectLiquid);
}

.glass-effect-caustic{
	position:absolute;
	inset:-65%;
	background:repeating-conic-gradient(rgba(255,255,255,.13) 0deg 7deg,transparent 7deg 30deg);
	animation:glass-effect-spin 40s linear infinite;
	mix-blend-mode:overlay;
	filter:blur(74px);
	opacity:.11;
	-webkit-mask:radial-gradient(circle at 50% 50%,#000 0 58%,transparent 80%);
	mask:radial-gradient(circle at 50% 50%,#000 0 58%,transparent 80%);
	pointer-events:none;
}
@keyframes glass-effect-spin{to{transform:rotate(360deg)}}