/**
 * Elite Kit — Liquid Glass.
 *
 * Everything is a custom property, so the effect presets and tones set
 * starting values and the panel's sliders (which are more specific) adjust them.
 */

@property --ek-lg-x {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 25%;
}

@property --ek-lg-y {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 0%;
}

/* The Clear tone, the default. */
.ek-liquid-glass-yes {
	--ek-lg-blur: 10px;
	--ek-lg-saturate: 170%;
	--ek-lg-brightness: 105%;
	--ek-lg-tint: rgba(255, 255, 255, 0.08);
	--ek-lg-radius: 24px;
	--ek-lg-edge: rgba(255, 255, 255, 0.65);
	--ek-lg-edge-width: 1px;
	--ek-lg-shine: rgba(255, 255, 255, 0.35);
	--ek-lg-shadow: 0.14;
	--ek-lg-glow: inset 0 0 15px 0 rgba(255, 255, 255, 0.6);
	--ek-lg-fallback: rgba(255, 255, 255, 0.72);
}

.ek-liquid-glass-yes.ek-lg-tone-frosted {
	--ek-lg-saturate: 140%;
	--ek-lg-brightness: 112%;
	--ek-lg-tint: rgba(255, 255, 255, 0.24);
	--ek-lg-shine: rgba(255, 255, 255, 0.45);
	--ek-lg-fallback: rgba(255, 255, 255, 0.82);
}

.ek-liquid-glass-yes.ek-lg-tone-tinted {
	--ek-lg-saturate: 210%;
	--ek-lg-tint: rgba(110, 150, 255, 0.2);
	--ek-lg-edge: rgba(220, 230, 255, 0.7);
	--ek-lg-fallback: rgba(200, 215, 255, 0.8);
}

.ek-liquid-glass-yes.ek-lg-tone-dark {
	--ek-lg-saturate: 160%;
	--ek-lg-brightness: 75%;
	--ek-lg-tint: rgba(14, 16, 24, 0.38);
	--ek-lg-edge: rgba(255, 255, 255, 0.28);
	--ek-lg-shine: rgba(255, 255, 255, 0.14);
	--ek-lg-shadow: 0.3;
	--ek-lg-fallback: rgba(20, 22, 30, 0.85);
}

/* How much each effect preset blurs, unless the Blur Strength slider says otherwise. */
.ek-liquid-glass-yes.ek-lg-effect-abyss-glass { --ek-lg-blur: 8px; }
.ek-liquid-glass-yes.ek-lg-effect-aqua-warp { --ek-lg-blur: 10px; }
.ek-liquid-glass-yes.ek-lg-effect-bubble-glass { --ek-lg-blur: 12px; }
.ek-liquid-glass-yes.ek-lg-effect-bubble-lens { --ek-lg-blur: 14px; }
.ek-liquid-glass-yes.ek-lg-effect-cascade-ripple { --ek-lg-blur: 18px; }
.ek-liquid-glass-yes.ek-lg-effect-diamond-dust { --ek-lg-blur: 4px; }
.ek-liquid-glass-yes.ek-lg-effect-drop-water { --ek-lg-blur: 8px; }
.ek-liquid-glass-yes.ek-lg-effect-distorted-prism { --ek-lg-blur: 8px; }
.ek-liquid-glass-yes.ek-lg-effect-fine-crystal { --ek-lg-blur: 4px; }
.ek-liquid-glass-yes.ek-lg-effect-frozen-glass { --ek-lg-blur: 10px; }
.ek-liquid-glass-yes.ek-lg-effect-gentle-wave { --ek-lg-blur: 6px; }
.ek-liquid-glass-yes.ek-lg-effect-glass-fiber { --ek-lg-blur: 6px; }
.ek-liquid-glass-yes.ek-lg-effect-holographic-glass { --ek-lg-blur: 10px; }
.ek-liquid-glass-yes.ek-lg-effect-ice-crystal { --ek-lg-blur: 6px; }
.ek-liquid-glass-yes.ek-lg-effect-jelly-blob { --ek-lg-blur: 14px; }
.ek-liquid-glass-yes.ek-lg-effect-jelly-surface { --ek-lg-blur: 10px; }
.ek-liquid-glass-yes.ek-lg-effect-lateral-surge { --ek-lg-blur: 16px; }
.ek-liquid-glass-yes.ek-lg-effect-lava-flow { --ek-lg-blur: 20px; }
.ek-liquid-glass-yes.ek-lg-effect-liquid-lens { --ek-lg-blur: 12px; }
.ek-liquid-glass-yes.ek-lg-effect-macos-glass { --ek-lg-blur: 14px; }
.ek-liquid-glass-yes.ek-lg-effect-magnifier-lens { --ek-lg-blur: 10px; }
.ek-liquid-glass-yes.ek-lg-effect-melted-glass { --ek-lg-blur: 8px; }
.ek-liquid-glass-yes.ek-lg-effect-micro-frost { --ek-lg-blur: 6px; }
.ek-liquid-glass-yes.ek-lg-effect-ocean-current { --ek-lg-blur: 10px; }
.ek-liquid-glass-yes.ek-lg-effect-prism-cut { --ek-lg-blur: 6px; }
.ek-liquid-glass-yes.ek-lg-effect-rain-streak { --ek-lg-blur: 12px; }
.ek-liquid-glass-yes.ek-lg-effect-tempest-glass { --ek-lg-blur: 14px; }
.ek-liquid-glass-yes.ek-lg-effect-thai-frost { --ek-lg-blur: 8px; }
.ek-liquid-glass-yes.ek-lg-effect-thai-frost-2 { --ek-lg-blur: 8px; }
.ek-liquid-glass-yes.ek-lg-effect-turbulent-warp { --ek-lg-blur: 24px; }
.ek-liquid-glass-yes.ek-lg-effect-ultra-lens { --ek-lg-blur: 16px; }
.ek-liquid-glass-yes.ek-lg-effect-viscous-gel { --ek-lg-blur: 14px; }
.ek-liquid-glass-yes.ek-lg-effect-wavy-water { --ek-lg-blur: 8px; }
.ek-liquid-glass-yes.ek-lg-effect-custom { --ek-lg-blur: 8px; }

/* The shadow presets: the light inside the pane, between the rim and the drop shadow. */
.ek-liquid-glass-yes.ek-lg-glow-none { --ek-lg-glow: 0 0 0 0 transparent; }
.ek-liquid-glass-yes.ek-lg-glow-soft-glow { --ek-lg-glow: inset 0 0 15px 0 rgba(255, 255, 255, 0.6); }
.ek-liquid-glass-yes.ek-lg-glow-warm-glow { --ek-lg-glow: inset 0 0 20px 0 rgba(255, 255, 255, 0.65); }
.ek-liquid-glass-yes.ek-lg-glow-bright-glow { --ek-lg-glow: inset 0 0 15px 0 rgba(255, 255, 255, 0.7); }
.ek-liquid-glass-yes.ek-lg-glow-wide-bloom { --ek-lg-glow: inset 0 0 30px 1px rgba(255, 255, 255, 0.7); }
.ek-liquid-glass-yes.ek-lg-glow-deep-bloom { --ek-lg-glow: inset 0 0 40px 5px rgba(255, 255, 255, 0.6); }
.ek-liquid-glass-yes.ek-lg-glow-top-light { --ek-lg-glow: inset 0 20px 15px -5px rgba(255, 255, 255, 0.5); }
.ek-liquid-glass-yes.ek-lg-glow-bottom-light { --ek-lg-glow: inset 0 -20px 25px -15px rgba(255, 255, 255, 0.5); }
.ek-liquid-glass-yes.ek-lg-glow-top-fade { --ek-lg-glow: inset 0 10px 25px -10px rgba(255, 255, 255, 0.4); }
.ek-liquid-glass-yes.ek-lg-glow-bottom-fade { --ek-lg-glow: inset 0 -10px 20px -5px rgba(255, 255, 255, 0.55); }
.ek-liquid-glass-yes.ek-lg-glow-top-edge { --ek-lg-glow: inset 0 15px 15px -10px rgba(255, 255, 255, 0.45); }
.ek-liquid-glass-yes.ek-lg-glow-rim-light { --ek-lg-glow: inset 0 0 10px 0 rgba(255, 255, 255, 0.8), inset 0 0 2px 0 rgba(255, 255, 255, 0.9); }
.ek-liquid-glass-yes.ek-lg-glow-inner-shadow { --ek-lg-glow: inset 0 2px 8px 0 rgba(0, 0, 0, 0.15), inset 0 0 12px 0 rgba(255, 255, 255, 0.3); }
.ek-liquid-glass-yes.ek-lg-glow-spotlight { --ek-lg-glow: inset 0 -5px 30px -10px rgba(255, 255, 255, 0.7); }
.ek-liquid-glass-yes.ek-lg-glow-frost-edge { --ek-lg-glow: inset 0 0 6px 0 rgba(255, 255, 255, 0.9), inset 0 0 20px -5px rgba(200, 220, 255, 0.4); }
.ek-liquid-glass-yes.ek-lg-glow-vignette { --ek-lg-glow: inset 0 0 50px 10px rgba(0, 0, 0, 0.08); }

/* Only so the sheen has a box to fill; an element given a position of its own keeps it. */
:where(.ek-liquid-glass-yes) {
	position: relative;
}

.ek-liquid-glass-yes {
	isolation: isolate;
	background-color: var(--ek-lg-tint);
	border-radius: var(--ek-lg-radius);
	-webkit-backdrop-filter: blur(var(--ek-lg-blur)) saturate(var(--ek-lg-saturate)) brightness(var(--ek-lg-brightness));
	backdrop-filter: blur(var(--ek-lg-blur)) saturate(var(--ek-lg-saturate)) brightness(var(--ek-lg-brightness));
	/* Light catches the top-left rim and the bottom-right rim a little, the shadow preset lights the inside, and the pane casts a shadow. */
	box-shadow:
		inset var(--ek-lg-edge-width) var(--ek-lg-edge-width) 0 0 var(--ek-lg-edge),
		inset calc(var(--ek-lg-edge-width) * -1) calc(var(--ek-lg-edge-width) * -1) 0 0 color-mix(in srgb, var(--ek-lg-edge) 45%, transparent),
		var(--ek-lg-glow),
		0 12px 32px -6px rgba(0, 0, 0, var(--ek-lg-shadow));
	transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease;
}

/*
 * The sheen: behind the content, above the glass. ::before is left alone —
 * Elementor draws a container's background overlay with it.
 */
.ek-liquid-glass-yes::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	pointer-events: none;
	background:
		radial-gradient(120% 90% at var(--ek-lg-x) var(--ek-lg-y), var(--ek-lg-shine) 0%, transparent 55%),
		linear-gradient(180deg, color-mix(in srgb, var(--ek-lg-shine) 60%, transparent) 0%, transparent 38%);
	transition: --ek-lg-x 0.5s ease-out, --ek-lg-y 0.5s ease-out, opacity 0.35s ease;
}

/* Hover effects. */
.ek-liquid-glass-yes.ek-lg-hover-lift:hover {
	transform: translateY(-6px);
	box-shadow:
		inset var(--ek-lg-edge-width) var(--ek-lg-edge-width) 0 0 var(--ek-lg-edge),
		inset calc(var(--ek-lg-edge-width) * -1) calc(var(--ek-lg-edge-width) * -1) 0 0 color-mix(in srgb, var(--ek-lg-edge) 45%, transparent),
		var(--ek-lg-glow),
		0 22px 44px -8px rgba(0, 0, 0, calc(var(--ek-lg-shadow) * 1.4));
}

.ek-liquid-glass-yes.ek-lg-hover-glow:hover {
	--ek-lg-shine: rgba(255, 255, 255, 0.6);
	box-shadow:
		inset var(--ek-lg-edge-width) var(--ek-lg-edge-width) 0 0 var(--ek-lg-edge),
		inset calc(var(--ek-lg-edge-width) * -1) calc(var(--ek-lg-edge-width) * -1) 0 0 var(--ek-lg-edge),
		inset 0 0 28px 2px color-mix(in srgb, var(--ek-lg-edge) 45%, transparent),
		0 12px 32px -6px rgba(0, 0, 0, var(--ek-lg-shadow));
}

.ek-liquid-glass-yes.ek-lg-hover-press:hover {
	transform: scale(0.98);
}

/* Browsers that cannot blur what is behind get a solid, readable pane instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.ek-liquid-glass-yes {
		background-color: var(--ek-lg-fallback);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ek-liquid-glass-yes,
	.ek-liquid-glass-yes::after {
		transition: none;
	}

	.ek-liquid-glass-yes.ek-lg-hover-lift:hover,
	.ek-liquid-glass-yes.ek-lg-hover-press:hover {
		transform: none;
	}
}