/**
 * Fluid Glassmorphism - core effect.
 * Consumes the :root variables generated in PHP (FluidGlass_CSS::root_variables()).
 *
 * Layers (both pseudo-elements at z-index:-1, so the block text stays crisp):
 *  - ::before  the frosted BODY: blurs the backdrop, carries the tint, the
 *              specular sheen (reflection streak) + grain, and can be extended
 *              past the edges to also sample nearby content ("consider nearby
 *              elements"), trimmed back with a mask.
 *  - ::after   the simulated GLASS BORDER: a full-perimeter ring with its own
 *              backdrop-filter, tint and bevel lighting (lit side / shaded
 *              side, faking edge refraction). Built with a transparent CSS
 *              border + mask-composite (padding-box XOR border-box); because
 *              border-radius rounds both boxes, the ring's outer corner
 *              (radius R) and inner corner (radius R - thickness) follow the
 *              curve exactly - no gap, and the flat CSS border is not needed.
 *
 * The element itself stacks the outer shadow, the inner top-edge highlight,
 * the rim glow and the chromatic dispersion fringe as box-shadows.
 *
 * No overflow/clip is used (Chrome applies it before the filter, killing the
 * blur); rounded corners come from border-radius:inherit instead.
 */

/* Fallback variables so the classes work even before PHP injection. */
:root {
	--fluidglass-blur: 6px;
	--fluidglass-saturation: 100%;
	--fluidglass-brightness: 100%;
	--fluidglass-contrast: 100%;
	--fluidglass-bg: rgba(255, 255, 255, 0.1);
	--fluidglass-fg: inherit;
	--fluidglass-bg-tinted: rgba(255, 255, 255, 0.35);
	--fluidglass-bg-dark: rgba(16, 19, 26, 0.3);
	--fluidglass-border: 4px solid rgba(255, 255, 255, 0.1);
	--fluidglass-radius: 20px;
	--fluidglass-shadow: 0 10px 10px 0 rgba(11, 16, 32, 0.1);
	--fluidglass-highlight: 0 0 0 0 transparent;
	--fluidglass-grain-image: none;
	--fluidglass-grain-blend: normal;
	--fluidglass-border-thickness: 4px;
	--fluidglass-border-tint: rgba(255, 255, 255, 0.1);
	--fluidglass-border-filter: blur(2px) brightness(120%) contrast(130%) saturate(250%);
	--fluidglass-border-opacity: 0.55;
	--fluidglass-border-glow: 0 0 0 0 transparent;
	--fluidglass-bevel: 0 0 0 0 transparent;
	--fluidglass-border-bevel: none;
	--fluidglass-sheen: none;
	--fluidglass-dispersion: 0 0 0 0 transparent;
	--fluidglass-body-inset: 0;
	--fluidglass-body-mask: none;
	--fluidglass-flicker: none;
}

/* The block itself: transparent (the glass is painted by ::before), with the
   radius, outer shadow, inner highlight, rim glow, bevel lighting and
   dispersion fringe (inset shadows hug the rounded corners, which is exactly
   why the bevel lives here and not on the ring). The real CSS border is
   removed - the ::after ring replaces it. isolation:isolate makes a stacking
   context so the z-index:-1 layers stay tucked behind the text but in front
   of the block background. */
.fluidglass {
	position: relative;
	isolation: isolate;
	color: var(--fluidglass-fg, inherit);
	background-color: transparent !important;
	border: 0 !important;
	border-radius: var(--fluidglass-radius) !important;
	box-shadow: var(--fluidglass-shadow), var(--fluidglass-highlight), var(--fluidglass-border-glow), var(--fluidglass-bevel), var(--fluidglass-dispersion) !important;
}

/* Explicit preset overrides (re-tint the body layer via the variable). */
.fluidglass--tinted {
	--fluidglass-bg: var(--fluidglass-bg-tinted);
}
.fluidglass--dark {
	--fluidglass-bg: var(--fluidglass-bg-dark);
	color: #fff;
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	/* Glass body: blurs the backdrop, carries the tint, sheen + grain (+ the
	   optional flicker-top gradient), and may extend past the edges to sample
	   nearby content, trimmed back by --fluidglass-body-mask. */
	.fluidglass::before {
		content: "";
		position: absolute;
		inset: var(--fluidglass-body-inset);
		z-index: -1;
		border-radius: inherit;
		pointer-events: none;
		background-color: var(--fluidglass-bg);
		background-image: var(--fluidglass-flicker), var(--fluidglass-sheen), var(--fluidglass-grain-image);
		background-repeat: no-repeat, no-repeat, repeat;
		background-size: auto, auto, 160px 160px;
		background-position: 0 0, 0 0, 0 0;
		background-blend-mode: normal, normal, var(--fluidglass-grain-blend);
		-webkit-backdrop-filter: brightness(var(--fluidglass-brightness)) contrast(var(--fluidglass-contrast)) saturate(var(--fluidglass-saturation)) blur(var(--fluidglass-blur));
		backdrop-filter: brightness(var(--fluidglass-brightness)) contrast(var(--fluidglass-contrast)) saturate(var(--fluidglass-saturation)) blur(var(--fluidglass-blur));
		-webkit-mask: var(--fluidglass-body-mask);
		        mask: var(--fluidglass-body-mask);
	}

	/* Simulated glass border: a full-perimeter ring with its own backdrop
	   filter, tint and bevel lighting. The transparent border defines the band
	   thickness; the mask keeps only that band (padding-box XOR border-box),
	   so both corners follow the radius. Overall opacity is configurable. */
	.fluidglass::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		border: var(--fluidglass-border-thickness) solid transparent;
		border-radius: inherit;
		pointer-events: none;
		opacity: var(--fluidglass-border-opacity);
		background-color: var(--fluidglass-border-tint);
		/* Ring shine: the bevel gradient painted on the band itself, so each
		   side of the frame catches the light differently along its length. */
		background-image: var(--fluidglass-border-bevel);
		-webkit-backdrop-filter: var(--fluidglass-border-filter);
		backdrop-filter: var(--fluidglass-border-filter);
		-webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0) border-box;
		        mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0) border-box;
		-webkit-mask-composite: xor;
		        mask-composite: exclude;
	}
}

/* Clean opaque fallback when backdrop-filter is unsupported: paint the tint on
   the block itself, restore a real border, and drop the (now ineffective)
   layers. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	.fluidglass {
		background-color: var(--fluidglass-bg-tinted) !important;
		border: var(--fluidglass-border) !important;
	}
	.fluidglass::before,
	.fluidglass::after {
		display: none !important;
	}
}

/* On mobile / low-end devices (class added by fluidglass-perf.js) drop the SECOND
   backdrop-filter (the border ring's own blur); the ring stays visible as a
   flat tinted band, and the base frosted body remains. */
.fluidglass-no-heavy .fluidglass::after {
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}

/* ---------- Accessibility fallbacks ---------- */

@media (prefers-reduced-transparency: reduce) {
	.fluidglass {
		background-color: var(--fluidglass-bg-tinted) !important;
		border: var(--fluidglass-border) !important;
	}
	.fluidglass::before,
	.fluidglass::after {
		display: none !important;
	}
}

@media (prefers-contrast: more) {
	.fluidglass {
		background-color: var(--fluidglass-bg-tinted) !important;
		border: var(--fluidglass-border) !important;
		border-color: currentColor !important;
	}
	.fluidglass::before,
	.fluidglass::after {
		display: none !important;
	}
}