/* Motion Elements Background Glass

   .pwf-glass-host         the container; isolated so the stack sits at
                           a negative level above its own background
   .pwf-glass-stack        runtime-built overlay, behind content
   .pwf-glass-lens         the pane: backdrop filtered through the SVG
                           lens (Chromium) or a plain frost blur
   .pwf-glass-rim          the light: a bright rim on the lit edge, a
                           fainter one opposite, a depth shadow

   Variables written by the controls, so the light previews live:
   --pwf-glass-angle   where the light comes from (CSS angle, 0 is up)
   --pwf-glass-light   rim strength, 0 to 1
   --pwf-glass-depth   pane thickness, 0 to 1
   --pwf-glass-frost   blur, as a length */

.pwf-glass-host {
	position: relative;
	isolation: isolate;
}

.pwf-glass-stack {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	overflow: hidden;
	border-radius: inherit;
}

.pwf-glass-lens,
.pwf-glass-rim {
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

/* Without the SVG lens the pane is frost alone. */
.pwf-glass-stack--plain .pwf-glass-lens {
	-webkit-backdrop-filter: blur(var(--pwf-glass-frost, 24px));
	backdrop-filter: blur(var(--pwf-glass-frost, 24px));
}

/* The light. A ring 1.5px wide, bright toward the light and faint on
   the far side, over an inner shadow that falls away from the light
   and a soft inner glow toward it. The ring is the layer's own box
   minus its content box, so it follows the corners exactly. */
.pwf-glass-rim {
	padding: 1.5px;
	background:
		linear-gradient(var(--pwf-glass-angle, -51deg), rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, calc(var(--pwf-glass-light, 0.4) * 0.95)) 100%),
		linear-gradient(calc(var(--pwf-glass-angle, -51deg) + 180deg), rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, calc(var(--pwf-glass-light, 0.4) * 0.4)) 100%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.pwf-glass-lens::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow:
		inset calc(sin(var(--pwf-glass-angle, -51deg)) * -1 * (4px + var(--pwf-glass-depth, 0.36) * 14px))
			calc(cos(var(--pwf-glass-angle, -51deg)) * (4px + var(--pwf-glass-depth, 0.36) * 14px))
			calc(10px + var(--pwf-glass-depth, 0.36) * 30px)
			calc(var(--pwf-glass-depth, 0.36) * -6px)
			rgba(0, 0, 0, calc(0.10 + var(--pwf-glass-depth, 0.36) * 0.25)),
		inset calc(sin(var(--pwf-glass-angle, -51deg)) * (2px + var(--pwf-glass-depth, 0.36) * 6px))
			calc(cos(var(--pwf-glass-angle, -51deg)) * -1 * (2px + var(--pwf-glass-depth, 0.36) * 6px))
			calc(8px + var(--pwf-glass-depth, 0.36) * 20px)
			0
			rgba(255, 255, 255, calc(var(--pwf-glass-light, 0.4) * 0.22));
}

.pwf-glass-svg {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
	pointer-events: none;
}