/**
 * AG Liquid Glass for Elementor
 * Apple-inspired multi-layer glass material.
 *
 * Layer order (bottom -> top):
 *   backdrop-filter -> tinted base -> ambient blooms -> optical sweeps
 *   -> ::before edge reflection ring -> .ag-lg-lens (edge / corner refraction)
 *   -> .ag-lg-sheen (specular, cursor light, chromatic dispersion rim)
 *   -> ::after micro grain -> content (z-index 1)
 */

/* -------------------------------------------------------------------------
 * Animatable custom properties (progressive enhancement).
 * ---------------------------------------------------------------------- */
/* Inherited so the decorative layers can own the transition instead of the
   Elementor-controlled root element. */
@property --ag-lg-hover {
	syntax: "<number>";
	inherits: true;
	initial-value: 0;
}

@property --ag-lg-cursor {
	syntax: "<number>";
	inherits: true;
	initial-value: 0;
}

/* -------------------------------------------------------------------------
 * Material defaults.
 * ---------------------------------------------------------------------- */
.ag-liquid-glass,
.ag-liquid-glass--on {
	/* Geometry */
	--ag-lg-radius: 32px;

	/* Surface */
	--ag-lg-opacity: 0.62;
	--ag-lg-blur: 18px;
	--ag-lg-sat: 115%;
	--ag-lg-bright: 105%;

	/* Optics (0 - 1) */
	--ag-lg-intensity: 1;
	--ag-lg-border: 0.55;
	--ag-lg-highlight: 0.7;
	--ag-lg-reflection: 0.5;
	--ag-lg-glow: 0.35;
	--ag-lg-shadow: 0.38;
	--ag-lg-noise: 0.03;

	/* Refraction system (0 - 1) */
	--ag-lg-rfx: 0.4;
	--ag-lg-disp: 0.12;
	--ag-lg-lens: 0.4;
	--ag-lg-corner: 0.5;
	--ag-lg-rfx-blur: 3px;
	--ag-lg-rfx-k: 1;
	--ag-lg-rfx-fn: ;

	/* Preset colourway (overridden by the preset classes) */
	--ag-lg-tint-fb: 255, 255, 255;
	--ag-lg-edge: 255, 255, 255;
	--ag-lg-ink: 17, 24, 39;
	--ag-lg-bloom: 150, 175, 215;

	/* Preset multipliers */
	--ag-lg-k-blur: 1;
	--ag-lg-k-sat: 1;
	--ag-lg-k-high: 1;
	--ag-lg-k-refl: 1;

	/* Interaction state */
	--ag-lg-hover: 0;
	--ag-lg-cursor: 0;
	--ag-lg-mx: 50%;
	--ag-lg-my: 0%;

	/* Derived */
	--ag-lg-i: var(--ag-lg-intensity, 1);
	--ag-lg-blur-e: calc(var(--ag-lg-blur) * var(--ag-lg-k-blur));
	--ag-lg-hi: calc(var(--ag-lg-highlight) * var(--ag-lg-k-high) * var(--ag-lg-i));
	--ag-lg-rf: calc(var(--ag-lg-reflection) * var(--ag-lg-k-refl) * var(--ag-lg-i));
	--ag-lg-bd: calc(var(--ag-lg-border) * var(--ag-lg-i));
	--ag-lg-gl: calc(var(--ag-lg-glow) * var(--ag-lg-i));
	--ag-lg-surface: rgba(var(--ag-lg-tint-fb), var(--ag-lg-opacity));
	--ag-lg-rfx-e: calc(var(--ag-lg-rfx) * var(--ag-lg-rfx-k) * var(--ag-lg-k-rfx, 1));
	/* Lens band thickness, driven by the real radius so the optical edge always
	   follows the shape the user set. */
	--ag-lg-band: calc(7px + var(--ag-lg-radius) * 0.55 * var(--ag-lg-lens));
	--ag-lg-corner-size: calc(var(--ag-lg-radius) * 2.2 + 14px);
}

/* Tint colour picker support (all evergreen browsers). */
@supports (color: color-mix(in srgb, #fff 50%, transparent)) {
	.ag-liquid-glass,
	.ag-liquid-glass--on {
		--ag-lg-surface: color-mix(
			in srgb,
			var(--ag-lg-tint-color, rgb(var(--ag-lg-tint-fb))) calc(var(--ag-lg-opacity) * 100%),
			transparent
		);
	}
}

/* -------------------------------------------------------------------------
 * The glass body.
 * Doubled class keeps us above Elementor's element CSS specificity floor
 * while still letting an explicit user setting win.
 * ---------------------------------------------------------------------- */
.ag-liquid-glass.ag-liquid-glass,
.ag-liquid-glass--on.ag-liquid-glass--on {
	position: relative;
	isolation: isolate;
	border-radius: var(--ag-lg-radius);
	background-color: var(--ag-lg-surface);
	background-image:
		/* 1. top specular sheen - soft, curved, diffused */
		radial-gradient(
			130% 72% at 50% -32%,
			rgba(var(--ag-lg-edge), calc(0.78 * var(--ag-lg-hi))) 0%,
			rgba(var(--ag-lg-edge), calc(0.16 * var(--ag-lg-hi))) 38%,
			rgba(var(--ag-lg-edge), 0) 68%
		),
		/* 3. diagonal optical sweep */
		linear-gradient(
			118deg,
			rgba(var(--ag-lg-edge), calc(0.34 * var(--ag-lg-rf))) 0%,
			rgba(var(--ag-lg-edge), 0) 26%,
			rgba(var(--ag-lg-edge), 0) 58%,
			rgba(var(--ag-lg-edge), calc(0.22 * var(--ag-lg-rf))) 86%,
			rgba(var(--ag-lg-edge), 0) 100%
		),
		/* 4. bottom light bounce */
		linear-gradient(
			0deg,
			rgba(var(--ag-lg-edge), calc(0.3 * var(--ag-lg-rf))) 0%,
			rgba(var(--ag-lg-edge), 0) 24%
		),
		/* 5. ambient corner blooms - the optical separation on pure white */
		radial-gradient(
			90% 130% at 100% 108%,
			rgba(var(--ag-lg-bloom), calc(0.1 + 0.16 * var(--ag-lg-gl))) 0%,
			rgba(var(--ag-lg-bloom), 0) 62%
		),
		radial-gradient(
			80% 120% at -8% 100%,
			rgba(var(--ag-lg-bloom), calc(0.06 + 0.12 * var(--ag-lg-gl))) 0%,
			rgba(var(--ag-lg-bloom), 0) 58%
		),
		/* 6. body shading - the surface must sit slightly below paper white,
		      otherwise every specular highlight is invisible on #ffffff */
		linear-gradient(
			176deg,
			rgba(var(--ag-lg-edge), calc(0.5 * var(--ag-lg-hi))) 0%,
			rgba(var(--ag-lg-bloom), calc(0.04 + 0.07 * var(--ag-lg-gl))) 52%,
			rgba(var(--ag-lg-bloom), calc(0.09 + 0.14 * var(--ag-lg-gl))) 100%
		);
	box-shadow:
		/* inner hairline edges - light travelling around a curved surface */
		inset 0 1px 0.5px rgba(var(--ag-lg-edge), calc(0.95 * var(--ag-lg-bd))),
		inset 1px 0 0.5px rgba(var(--ag-lg-edge), calc(0.6 * var(--ag-lg-bd))),
		inset -1px 0 0.5px rgba(var(--ag-lg-edge), calc(0.6 * var(--ag-lg-bd))),
		inset 0 -1px 0.5px rgba(var(--ag-lg-edge), calc(0.75 * var(--ag-lg-bd))),
		/* inner depth */
		inset 0 10px 26px -14px rgba(var(--ag-lg-edge), calc(0.95 * var(--ag-lg-hi))),
		inset 0 -18px 30px -22px rgba(var(--ag-lg-bloom), calc(0.55 * var(--ag-lg-gl))),
		inset 0 0 0 1px rgba(var(--ag-lg-edge), calc(0.28 * var(--ag-lg-bd))),
		/* outer contour - keeps the shape readable on #ffffff */
		0 0 0 1px rgba(var(--ag-lg-ink), calc(0.05 + 0.05 * var(--ag-lg-shadow))),
		0 2px 5px -2px rgba(var(--ag-lg-ink), calc(0.03 + 0.08 * var(--ag-lg-shadow))),
		0 12px 26px -12px rgba(var(--ag-lg-ink), calc(0.22 * var(--ag-lg-shadow))),
		0 34px 62px -32px rgba(var(--ag-lg-ink), calc(0.4 * var(--ag-lg-shadow)));
	/* No `transition` declaration here on purpose: this element is owned by
	   Elementor (resize, motion effects, entrance animations, hover). Every
	   dynamic part of the material lives on the decorative layers below. */
}

/* Backdrop processing (progressive). */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.ag-liquid-glass.ag-liquid-glass,
	.ag-liquid-glass--on.ag-liquid-glass--on {
		-webkit-backdrop-filter: blur(var(--ag-lg-blur-e))
			saturate(calc(var(--ag-lg-sat) * var(--ag-lg-k-sat)))
			brightness(var(--ag-lg-bright));
		backdrop-filter: blur(var(--ag-lg-blur-e))
			saturate(calc(var(--ag-lg-sat) * var(--ag-lg-k-sat)))
			brightness(var(--ag-lg-bright));
	}
}

/* Fallback: no backdrop-filter -> denser body, stronger optics. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.ag-liquid-glass.ag-liquid-glass,
	.ag-liquid-glass--on.ag-liquid-glass--on {
		--ag-lg-opacity: 0.88;
		--ag-lg-k-high: 1.15;
		--ag-lg-k-refl: 1.1;
	}
}

/* -------------------------------------------------------------------------
 * ::before - edge reflection ring that follows the radius.
 * ---------------------------------------------------------------------- */
.ag-liquid-glass.ag-liquid-glass::before,
.ag-liquid-glass--on.ag-liquid-glass--on::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	border-radius: inherit;
	padding: 1px;
	background:
		linear-gradient(
			152deg,
			rgba(var(--ag-lg-edge), calc(0.95 * var(--ag-lg-rf))) 0%,
			rgba(var(--ag-lg-edge), calc(0.12 * var(--ag-lg-rf))) 26%,
			rgba(var(--ag-lg-edge), 0) 46%,
			rgba(var(--ag-lg-edge), calc(0.1 * var(--ag-lg-rf))) 62%,
			rgba(var(--ag-lg-edge), calc(0.8 * var(--ag-lg-rf))) 84%,
			rgba(var(--ag-lg-edge), calc(0.22 * var(--ag-lg-rf))) 100%
		),
		radial-gradient(
			62% 44% at 50% -6%,
			rgba(var(--ag-lg-edge), calc(0.9 * var(--ag-lg-hi))) 0%,
			rgba(var(--ag-lg-edge), 0) 72%
		),
		radial-gradient(
			62% 44% at 50% 106%,
			rgba(var(--ag-lg-edge), calc(0.55 * var(--ag-lg-rf))) 0%,
			rgba(var(--ag-lg-edge), 0) 72%
		),
		/* thickness cue: the lower rim refracts slightly darker */
		linear-gradient(
			180deg,
			rgba(var(--ag-lg-ink), 0) 55%,
			rgba(var(--ag-lg-ink), calc(0.1 * var(--ag-lg-rf) + 0.04)) 100%
		);
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: calc(0.85 + 0.15 * var(--ag-lg-hover));
	transition: opacity 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* -------------------------------------------------------------------------
 * ::after - microscopic grain, breaks the synthetic CSS surface.
 * ---------------------------------------------------------------------- */
.ag-liquid-glass.ag-liquid-glass::after,
.ag-liquid-glass--on.ag-liquid-glass--on::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	border-radius: inherit;
	opacity: var(--ag-lg-noise);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
	background-size: 180px 180px;
	mix-blend-mode: overlay;
}

/* -------------------------------------------------------------------------
 * Content stays above every decorative layer.
 * ---------------------------------------------------------------------- */
.ag-liquid-glass > .elementor-element,
.ag-liquid-glass > .e-con-inner,
.ag-liquid-glass > .elementor-container,
.ag-liquid-glass > .elementor-widget-wrap,
.ag-liquid-glass--on > .elementor-element,
.ag-liquid-glass--on > .e-con-inner,
.ag-liquid-glass--on > .elementor-container,
.ag-liquid-glass--on > .elementor-widget-wrap {
	position: relative;
	z-index: 1;
}

/* Focus visibility must never be swallowed by the material. */
.ag-liquid-glass :focus-visible,
.ag-liquid-glass--on :focus-visible {
	outline-offset: 2px;
	position: relative;
	z-index: 2;
}

/* -------------------------------------------------------------------------
 * Hover response.
 * ---------------------------------------------------------------------- */
.ag-lg-hover--on.ag-liquid-glass--on:hover,
.ag-lg-hover--on.ag-liquid-glass:hover {
	/* Only a custom property changes here - no `transition` and no `transform`
	   on the Elementor root, so Elementor keeps full control of the element. */
	--ag-lg-hover: 1;
}

/* JS sets this while the pointer is inside a cursor-light surface. */
.ag-lg-cursor--on.ag-lg-is-lit {
	--ag-lg-cursor: 1;
}

/* -------------------------------------------------------------------------
 * Refraction system.
 *
 * `.ag-lg-lens` and `.ag-lg-sheen` are decorative nodes injected once per
 * surface by liquid-glass.js. They are absolutely positioned with `inset: 0`
 * and `border-radius: inherit`, so every Elementor width / height / padding /
 * radius transition is followed by the compositor - no JS measuring, no
 * ResizeObserver, no layout thrashing.
 *
 *   .ag-lg-lens          full-surface displacement (edge weighted map)
 *   .ag-lg-lens::before  edge band  - lens blur that follows the radius
 *   .ag-lg-lens::after   corner lens - strongest optical zone
 *   .ag-lg-sheen         specular / cursor light / hover response
 *   .ag-lg-sheen::after  chromatic dispersion rim
 * ---------------------------------------------------------------------- */
.ag-lg-lens,
.ag-lg-sheen {
	position: absolute;
	inset: 0;
	/* Painted above the glass body but below every child, so no content -
	   neither Elementor widgets nor plain markup - is ever refracted. */
	z-index: -1;
	margin: 0;
	pointer-events: none;
	border-radius: inherit;
}

/* Refraction group. The layer itself carries no mask, so its two children are
   free to use different bands; group opacity is the strength control. */
.ag-lg-lens {
	opacity: clamp(0, calc(var(--ag-lg-rfx-e) * 1.1), 1);
	transition: opacity 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Set by liquid-glass.js on the documents whose engine can run an SVG filter
   as a backdrop filter. Everywhere else the lens degrades to its blur band. */
.ag-lg-rfx-ready .ag-liquid-glass--on,
.ag-lg-rfx-ready .ag-liquid-glass {
	--ag-lg-rfx-fn: url(#ag-lg-refraction);
}

/* Edge band: the actual bending, clipped to a ring that follows the radius.
   The displacement map is neutral inside the ring, so the seam carries almost
   no offset and the centre of the glass is left completely untouched. */
.ag-lg-lens::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: calc(var(--ag-lg-band) * 2.2);
	-webkit-backdrop-filter: var(--ag-lg-rfx-fn);
	backdrop-filter: var(--ag-lg-rfx-fn);
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}

/* Corner lens: blob size is derived from the real radius, so 16px / 32px /
   64px corners all get a proportional optical zone. */
.ag-lg-lens::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	-webkit-backdrop-filter: var(--ag-lg-rfx-fn) blur(calc(var(--ag-lg-rfx-blur) * 0.6));
	backdrop-filter: var(--ag-lg-rfx-fn) blur(calc(var(--ag-lg-rfx-blur) * 0.6));
	opacity: var(--ag-lg-corner);
	-webkit-mask-image:
		radial-gradient(closest-side at 0% 0%, #000 0%, transparent 100%),
		radial-gradient(closest-side at 100% 0%, #000 0%, transparent 100%),
		radial-gradient(closest-side at 100% 100%, #000 0%, transparent 100%),
		radial-gradient(closest-side at 0% 100%, #000 0%, transparent 100%);
	mask-image:
		radial-gradient(closest-side at 0% 0%, #000 0%, transparent 100%),
		radial-gradient(closest-side at 100% 0%, #000 0%, transparent 100%),
		radial-gradient(closest-side at 100% 100%, #000 0%, transparent 100%),
		radial-gradient(closest-side at 0% 100%, #000 0%, transparent 100%);
	-webkit-mask-size: var(--ag-lg-corner-size) var(--ag-lg-corner-size);
	mask-size: var(--ag-lg-corner-size) var(--ag-lg-corner-size);
	-webkit-mask-position: top left, top right, bottom right, bottom left;
	mask-position: top left, top right, bottom right, bottom left;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* Specular / interaction layer. Owns the transitions so the Elementor root
   never needs one. */
.ag-lg-sheen {
	background-image:
		radial-gradient(
			260px 200px at var(--ag-lg-mx) var(--ag-lg-my),
			rgba(var(--ag-lg-edge), calc(0.55 * var(--ag-lg-cursor) * var(--ag-lg-hi))),
			rgba(var(--ag-lg-edge), 0) 70%
		),
		radial-gradient(
			140% 70% at 50% -34%,
			rgba(var(--ag-lg-edge), calc(0.26 * var(--ag-lg-hover) * var(--ag-lg-hi))),
			rgba(var(--ag-lg-edge), 0) 62%
		);
	box-shadow:
		inset 0 12px 30px -14px rgba(var(--ag-lg-edge), calc(0.6 * var(--ag-lg-hover) * var(--ag-lg-hi))),
		inset 0 0 0 1px rgba(var(--ag-lg-edge), calc(0.2 * var(--ag-lg-hover) * var(--ag-lg-bd))),
		0 18px 40px -18px rgba(var(--ag-lg-ink), calc(0.12 * var(--ag-lg-hover) * var(--ag-lg-shadow)));
	transition:
		--ag-lg-hover 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
		--ag-lg-cursor 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Feather pass: a wider, softer band painted over the refraction seam so the
   transition from bent to unbent content reads as curvature, not as an edge. */
.ag-lg-sheen::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: calc(var(--ag-lg-band) * 3.3);
	-webkit-backdrop-filter: blur(calc(var(--ag-lg-rfx-blur) * 0.8));
	backdrop-filter: blur(calc(var(--ag-lg-rfx-blur) * 0.8));
	opacity: calc(0.3 + 0.5 * var(--ag-lg-lens));
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}

/* Chromatic dispersion rim: warm on one side of the curve, cool on the other,
   exactly like the colour break-up at the edge of a real lens. Multiply keeps
   it readable on light glass, screen on dark glass. */
.ag-lg-sheen::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: calc(var(--ag-lg-band) * 0.6 + 1px);
	background-image: linear-gradient(
		138deg,
		rgba(255, 128, 92, calc(0.5 * var(--ag-lg-disp))) 0%,
		rgba(255, 196, 150, calc(0.16 * var(--ag-lg-disp))) 15%,
		rgba(255, 255, 255, 0) 40%,
		rgba(255, 255, 255, 0) 60%,
		rgba(150, 200, 255, calc(0.2 * var(--ag-lg-disp))) 84%,
		rgba(96, 140, 255, calc(0.55 * var(--ag-lg-disp))) 100%
	);
	background-size: 100% 100%;
	mix-blend-mode: var(--ag-lg-chroma-blend, multiply);
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}

/* Optional slow drift of the dispersion band. */
@keyframes ag-lg-drift {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

.ag-lg-anim--on .ag-lg-sheen::after {
	background-size: 260% 260%;
	animation: ag-lg-drift 24s ease-in-out infinite;
}

/* -------------------------------------------------------------------------
 * Presets.
 * ---------------------------------------------------------------------- */
.ag-lg-preset--apple-light {
	--ag-lg-k-rfx: 1;
	--ag-lg-tint-fb: 255, 255, 255;
	--ag-lg-edge: 255, 255, 255;
	--ag-lg-ink: 17, 24, 39;
	--ag-lg-bloom: 150, 175, 215;
}

.ag-lg-preset--apple-dark {
	--ag-lg-k-rfx: 1.1;
	--ag-lg-chroma-blend: screen;
	--ag-lg-tint-fb: 20, 22, 28;
	--ag-lg-edge: 255, 255, 255;
	--ag-lg-ink: 0, 0, 0;
	--ag-lg-bloom: 130, 160, 210;
	--ag-lg-k-high: 0.75;
	--ag-lg-k-refl: 0.9;
	--ag-lg-k-sat: 1.1;
}

.ag-lg-preset--frosted {
	--ag-lg-k-rfx: 0.7;
	--ag-lg-tint-fb: 252, 253, 255;
	--ag-lg-edge: 255, 255, 255;
	--ag-lg-ink: 20, 28, 45;
	--ag-lg-bloom: 165, 185, 220;
	--ag-lg-k-blur: 1.9;
	--ag-lg-k-sat: 1.1;
	--ag-lg-k-high: 0.85;
	--ag-lg-k-refl: 0.75;
}

.ag-lg-preset--crystal {
	--ag-lg-k-rfx: 1.45;
	--ag-lg-tint-fb: 255, 255, 255;
	--ag-lg-edge: 255, 255, 255;
	--ag-lg-ink: 15, 23, 42;
	--ag-lg-bloom: 140, 170, 215;
	--ag-lg-k-blur: 0.6;
	--ag-lg-k-sat: 1.25;
	--ag-lg-k-refl: 1.6;
	--ag-lg-k-high: 1.15;
}

.ag-lg-preset--soft {
	--ag-lg-k-rfx: 0.6;
	--ag-lg-tint-fb: 255, 255, 255;
	--ag-lg-edge: 255, 255, 255;
	--ag-lg-ink: 24, 32, 48;
	--ag-lg-bloom: 175, 195, 225;
	--ag-lg-k-blur: 1.3;
	--ag-lg-k-sat: 0.95;
	--ag-lg-k-high: 0.6;
	--ag-lg-k-refl: 0.55;
}

.ag-lg-preset--liquid {
	--ag-lg-k-rfx: 1.6;
	--ag-lg-tint-fb: 253, 254, 255;
	--ag-lg-edge: 255, 255, 255;
	--ag-lg-ink: 12, 20, 38;
	--ag-lg-bloom: 125, 160, 220;
	--ag-lg-k-blur: 1.15;
	--ag-lg-k-sat: 1.35;
	--ag-lg-k-refl: 1.75;
	--ag-lg-k-high: 1.3;
}

/* Liquid preset gets an extra travelling optical band. */
.ag-lg-preset--liquid.ag-liquid-glass--on::before {
	background:
		conic-gradient(
			from calc(180deg + var(--ag-lg-hover) * 25deg) at 50% 50%,
			rgba(var(--ag-lg-edge), calc(0.15 * var(--ag-lg-rf))) 0deg,
			rgba(var(--ag-lg-edge), calc(0.95 * var(--ag-lg-rf))) 42deg,
			rgba(var(--ag-lg-edge), 0) 96deg,
			rgba(var(--ag-lg-edge), calc(0.2 * var(--ag-lg-rf))) 180deg,
			rgba(var(--ag-lg-edge), calc(0.85 * var(--ag-lg-rf))) 232deg,
			rgba(var(--ag-lg-edge), 0) 300deg,
			rgba(var(--ag-lg-edge), calc(0.15 * var(--ag-lg-rf))) 360deg
		),
		radial-gradient(
			62% 44% at 50% -6%,
			rgba(var(--ag-lg-edge), calc(0.9 * var(--ag-lg-hi))) 0%,
			rgba(var(--ag-lg-edge), 0) 72%
		);
}

/* -------------------------------------------------------------------------
 * Responsive / performance / accessibility guards.
 * ---------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.ag-lg-perf--on.ag-liquid-glass--on {
		--ag-lg-k-blur: calc(var(--ag-lg-k-blur, 1) * 0.8);
		--ag-lg-rfx-k: 0.75;
	}
}

@media (max-width: 767px) {
	.ag-lg-perf--on.ag-liquid-glass--on {
		--ag-lg-k-blur: 0.55;
	}

	.ag-lg-perf--on.ag-liquid-glass--on::after {
		opacity: calc(var(--ag-lg-noise) * 0.6);
	}

	/* Backdrop displacement is the most expensive part of the material: keep
	   the optical edge, drop the per-pixel map on small screens. */
	.ag-lg-perf--on.ag-liquid-glass--on {
		--ag-lg-rfx-k: 0.5;
		--ag-lg-rfx-fn: ;
	}

	.ag-lg-perf--on.ag-liquid-glass--on .ag-lg-lens::after {
		display: none;
	}
}

@media (hover: none) {
	.ag-liquid-glass--on {
		--ag-lg-cursor: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ag-liquid-glass--on.ag-liquid-glass--on::before,
	.ag-lg-lens,
	.ag-lg-sheen {
		transition: none;
	}

	/* Static optical glass stays, motion does not. */
	.ag-lg-anim--on .ag-lg-sheen::after {
		animation: none;
	}

	.ag-lg-sheen {
		--ag-lg-cursor: 0;
	}
}

/* Windows high-contrast / forced colours: drop the decoration entirely. */
@media (forced-colors: active) {
	.ag-liquid-glass.ag-liquid-glass,
	.ag-liquid-glass--on.ag-liquid-glass--on {
		background-image: none;
		box-shadow: none;
		border: 1px solid CanvasText;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	.ag-liquid-glass--on.ag-liquid-glass--on::before,
	.ag-liquid-glass--on.ag-liquid-glass--on::after,
	.ag-lg-lens,
	.ag-lg-sheen {
		display: none;
	}
}