/*
 * Inner Glass: liquid-glass primitives.
 *
 * Recipe, back to front:
 *   1. translucent fill        --ig-glass-fill (color-mix of --ig-surface)
 *   2. directional sheen       --ig-glass-sheen (a 145deg highlight inside the fill)
 *   3. backdrop blur+saturate  --ig-glass-filter
 *   4. specular edge + rim     inset 0 1px 0 --ig-glass-hi, inset 0 0 0 1px --ig-glass-border, soft inner glow
 *   5. layered shadow          tight contact, mid, long and soft
 * Everything scales with --ig-glass (Customizer "Glass strength"). Surfaces never set their own fill:
 * they consume the variables, so the fallbacks below only have to swap variables.
 *
 * Optional refraction (Chromium only, never required). The footer prints this filter (inc/assets.php):
 *   <filter id="ig-refract" x="-5%" y="-5%" width="110%" height="110%" color-interpolation-filters="sRGB">
 *     <feTurbulence type="fractalNoise" baseFrequency="0.012 0.018" numOctaves="2" seed="7" result="noise"/>
 *     <feGaussianBlur in="noise" stdDeviation="2" result="soft"/>
 *     <feDisplacementMap in="SourceGraphic" in2="soft" scale="10" xChannelSelector="R" yChannelSelector="G"/>
 *   </filter>
 * glass.js adds html.has-refract after feature detection; only then do .ig-glass--refract and the hero panel use it.
 */

:root {
	--ig-glass-shadow:
		inset 0 1px 0 0 var(--ig-glass-hi),
		inset 0 0 0 1px var(--ig-glass-border),
		inset 0 0 22px -8px var(--ig-glass-border),
		0 0 0 1px rgb(var(--ig-shade) / 0.05),
		0 1px 2px rgb(var(--ig-shade) / 0.06),
		0 10px 24px -12px rgb(var(--ig-shade) / 0.18),
		0 30px 60px -30px rgb(var(--ig-shade) / 0.3);
}

.ig-glass {
	position: relative;
	border-radius: var(--ig-glass-radius, var(--ig-radius-m));
	background-color: var(--ig-glass-fill);
	background-image: var(--ig-glass-sheen);
	-webkit-backdrop-filter: var(--ig-glass-filter);
	backdrop-filter: var(--ig-glass-filter);
	box-shadow: var(--ig-glass-shadow);
}

/* Variants */
.ig-glass--strong {
	background-color: var(--ig-glass-fill-strong);
}
.ig-glass--flat {
	box-shadow:
		inset 0 1px 0 0 var(--ig-glass-hi),
		inset 0 0 0 1px var(--ig-glass-border),
		0 0 0 1px rgb(var(--ig-shade) / 0.05);
}
.ig-glass--solid {
	background-color: var(--ig-glass-solid);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* Pointer-reactive specular. glass.js sets --ig-mx / --ig-my in px; without them the highlight sits top-centre. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.ig-glass--live {
		background-image:
			radial-gradient(260px circle at var(--ig-mx, 50%) var(--ig-my, -20%), rgb(255 255 255 / calc(0.34 * var(--ig-glass))), transparent 62%),
			var(--ig-glass-sheen);
	}
}

/* Refraction layer. Chromium accepts url() in backdrop-filter; others never get the class. */
html.has-refract :is(.ig-glass--refract, .ig-hero__panel) {
	-webkit-backdrop-filter: url("#ig-refract") var(--ig-glass-filter);
	backdrop-filter: url("#ig-refract") var(--ig-glass-filter);
}

/* Fallbacks: swap the variables, every surface follows. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	:root:root {
		--ig-glass-filter: none;
		--ig-glass-fill: var(--ig-glass-solid);
		--ig-glass-fill-strong: var(--ig-glass-solid);
	}
}
@media (prefers-reduced-transparency: reduce) {
	:root:root {
		--ig-glass-filter: none;
		--ig-glass-fill: var(--ig-glass-solid);
		--ig-glass-fill-strong: var(--ig-glass-solid);
	}
	html.has-refract :is(.ig-glass--refract, .ig-hero__panel) {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
	body::before {
		opacity: 0.25;
	}
}