/* ── Glass: the one glass recipe for every page ────────────────
   Surface: faint diagonal white gradient + 4px blur, layered inset shadows.
   Rim: conic-gradient border whose angle rotates on hover.
   Sheen: a diagonal light band (screen blend) that slides on hover/press.
   Press: shrinks to 0.975 and tilts back. */
@property --glass-angle-1 { syntax: "<angle>"; inherits: false; initial-value: -75deg; }
:root {
	--glass-ease: cubic-bezier(0.25, 1, 0.5, 1);
	--glass-bg: linear-gradient(-75deg, #ffffff0d, #ffffff38, #ffffff0d);
	--glass-blur: blur(4px);
	--glass-shadow: inset 0 .125em .125em #0000000d, inset 0 -.125em .125em #ffffff80, 0 .25em .125em -.125em #0003, 0 0 .1em .25em inset #fff3;
}
.glass {
	--glass-bw: clamp(1px, 0.0625em, 4px);
	--glass-angle-1: -75deg;
	isolation: isolate; overflow: visible;
	background: var(--glass-bg);
	-webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
	box-shadow: var(--glass-shadow), 0 0 0 0 #fff;
	transition: all 0.4s var(--glass-ease), --glass-angle-1 0.5s var(--glass-ease);
	-webkit-tap-highlight-color: transparent;
}
.glass::before, .glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
/* rim */
.glass::after {
	z-index: 2; padding: var(--glass-bw); box-sizing: border-box;
	background: conic-gradient(from var(--glass-angle-1) at 50% 50%, #00000080, #0000 5% 40%, #00000080 50%, #0000 60% 95%, #00000080), linear-gradient(180deg, #ffffff80, #ffffff80);
	box-shadow: inset 0 0 0 calc(var(--glass-bw) / 2) #ffffff80;
	-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);
	transition: all 0.4s var(--glass-ease), --glass-angle-1 0.5s var(--glass-ease);
}
/* sheen */
.glass::before {
	z-index: 1; overflow: hidden;
	background: linear-gradient(-45deg, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / .55) 40%, rgb(255 255 255 / .55) 50%, rgb(255 255 255 / 0) 55%);
	background-size: 200% 200%; background-position: 0% center; background-repeat: no-repeat;
	mix-blend-mode: screen;
	transition: background-position 0.5s var(--glass-ease);
}
@media (hover: hover) {
	.glass:hover {
		--glass-angle-1: -125deg;
		transform: scale(0.975);
		box-shadow: inset 0 .125em .125em #0000000d, inset 0 -.125em .125em #ffffff80, 0 .15em .05em -.1em #00000040, 0 0 .05em .1em inset #ffffff80, 0 0 0 0 #fff;
	}
	.glass:hover::after { --glass-angle-1: -125deg; }
	.glass:hover::before { background-position: 25% center; }
}
.glass:active, .glass.is-pressed {
	--glass-angle-1: -75deg;
	transform: scale(0.975) rotate3d(1, 0, 0, 25deg);
	box-shadow: inset 0 .125em .125em #0000000d, inset 0 -.125em .125em #ffffff80, 0 .125em .125em -.125em #0003, 0 0 .1em .25em inset #fff3, 0 .225em .05em 0 #0000000d, 0 .25em 0 0 #ffffffbf, inset 0 .25em .05em 0 #00000026;
}
.glass:active::after, .glass.is-pressed::after { --glass-angle-1: -75deg; }
.glass:active::before, .glass.is-pressed::before { background-position: 50% 15%; }
.glass:focus-visible { outline: 2px solid rgb(0 122 255 / 0.6); outline-offset: 3px; }
.glass > * { position: relative; z-index: 3; }
@media (prefers-reduced-motion: reduce) {
	.glass, .glass:hover, .glass:active, .glass.is-pressed { transform: none; }
}