/**
 * Glass buttons: a soft capsule over the flat buttons. For now only the hero buttons of the front page: loaded last
 * on the front page (inc/artikkeli.php), elsewhere the buttons stay flat. The test page with sliders is
 * kehitys/painikkeet/ and the values below come from it. kehitys/PAINIKKEET.md has the rules for the other buttons.
 *
 * Every shade is the button's own colour (--pa-nappi-pohja) with the OKLCH lightness moved up or down, so the effect
 * feels the same on green, white, black and red. The base lightness stays between --pa-nappi-l-min and -max: white
 * leaves room for light, black for shade. Lighter shades lose chroma as if mixed with white and darker ones as if
 * mixed with black, so saturated colours stay inside sRGB. Browsers without relative colours keep the flat buttons.
 *
 * Face: a little lighter on top, darker above the middle, brightest near the bottom where the light comes through.
 * Inside the edge a soft light ring, a shine on top and a glow on the bottom; outside a slightly darker outline.
 */

@property --pa-nappi-pohja {
	syntax: "<color>";
	inherits: false;
	initial-value: #000;
}

:root {
	/* Test page values: strength 30 % of top light .03, darkest band .1, bottom light .08, ring .1, shine .15,
	   glow .15 and outline .08 */
	--pa-nappi-l-min: .2;
	--pa-nappi-l-max: .88;
	--pa-nappi-yla: .009;
	--pa-nappi-keski: .03;
	--pa-nappi-kohta: 38%;
	--pa-nappi-ala: .024;
	--pa-nappi-rengas: .03;
	--pa-nappi-rengas-leveys: 1.5px;
	--pa-nappi-rengas-pehmeys: 1.5px;
	--pa-nappi-kiilto: .045;
	--pa-nappi-hehku: .045;
	--pa-nappi-hehku-korkeus: 6px;
	--pa-nappi-reuna: .024;
	--pa-nappi-varjo: 0 5px 16px -4px rgba(0, 0, 0, .5);
	--pa-nappi-kesto: .15s;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--pa-nappi-kesto: 0s;
	}
}

@supports (color: oklch(from red l c h)) {
	/* Matches the most specific hero button rule of css/etusivu.css (also the hover rule, whose background
	   shorthand would clear the gradient), so this file wins. */
	:is(.pa-home__cta a, .pa-home .pa-home__liity:hover) {
		--pa-nappi-l: clamp(var(--pa-nappi-l-min), l, var(--pa-nappi-l-max));
		--pa-nappi-valo:
			inset 0 0 var(--pa-nappi-rengas-pehmeys) var(--pa-nappi-rengas-leveys) oklch(from var(--pa-nappi-pohja) calc(var(--pa-nappi-l) + var(--pa-nappi-rengas)) calc(c * (1 - var(--pa-nappi-rengas) / (1 - var(--pa-nappi-l)))) h),
			inset 0 1px 0 oklch(from var(--pa-nappi-pohja) calc(var(--pa-nappi-l) + var(--pa-nappi-kiilto)) calc(c * (1 - var(--pa-nappi-kiilto) / (1 - var(--pa-nappi-l)))) h),
			inset 0 calc(var(--pa-nappi-hehku-korkeus) * -1) var(--pa-nappi-hehku-korkeus) calc(var(--pa-nappi-hehku-korkeus) / -2) oklch(from var(--pa-nappi-pohja) calc(var(--pa-nappi-l) + var(--pa-nappi-hehku)) calc(c * (1 - var(--pa-nappi-hehku) / (1 - var(--pa-nappi-l)))) h);
		border-color: oklch(from var(--pa-nappi-pohja) calc(var(--pa-nappi-l) - var(--pa-nappi-reuna)) calc(c * (1 - var(--pa-nappi-reuna) / var(--pa-nappi-l))) h);
		background: linear-gradient(
			oklch(from var(--pa-nappi-pohja) calc(var(--pa-nappi-l) + var(--pa-nappi-yla)) calc(c * (1 - var(--pa-nappi-yla) / (1 - var(--pa-nappi-l)))) h),
			oklch(from var(--pa-nappi-pohja) calc(var(--pa-nappi-l) - var(--pa-nappi-keski)) calc(c * (1 - var(--pa-nappi-keski) / var(--pa-nappi-l))) h) var(--pa-nappi-kohta),
			oklch(from var(--pa-nappi-pohja) calc(var(--pa-nappi-l) + var(--pa-nappi-ala)) calc(c * (1 - var(--pa-nappi-ala) / (1 - var(--pa-nappi-l)))) h) 92%
		) border-box;
		box-shadow: var(--pa-nappi-valo), var(--pa-nappi-varjo);
		transition: --pa-nappi-pohja var(--pa-nappi-kesto), border-color var(--pa-nappi-kesto), color var(--pa-nappi-kesto);
	}

	/* Base colour of each button and state */
	.pa-home .pa-home__liity {
		--pa-nappi-pohja: var(--pa-color-spotify);
	}
	/* The dark button needs more: the same steps hardly show near black, and the base lets the photo through */
	.pa-home .pa-home__ilmaiseksi:not(:hover) {
		--pa-nappi-pohja: rgba(0, 0, 0, .65);
		--pa-nappi-yla: .05;
		--pa-nappi-keski: .1;
		--pa-nappi-ala: .14;
		--pa-nappi-rengas: .16;
		--pa-nappi-kiilto: .25;
		--pa-nappi-hehku: .22;
		--pa-nappi-reuna: .08;
	}
	.pa-home .pa-home__liity:hover,
	.pa-home .pa-home__ilmaiseksi:hover {
		--pa-nappi-pohja: #fff;
	}

	/* The green glow of the subscribe button stays */
	.pa-home .pa-home__cta .pa-home__liity {
		box-shadow: var(--pa-nappi-valo), var(--pa-nappi-varjo), 0 0 28px rgba(29, 185, 84, .35);
	}
}