/* Can webstudio pick this up, for a global palette etc.? */

/* MOVED INTO JS TEMPLATE 
~:root ~~
:host {
    --officialBlue:   rgba(0, 147, 193, 1);
    --officialYellow: rgba(243, 228, 88, 1);

    --hue: 260;

}
*/


*,
*:after,
*:before {
	box-sizing: border-box;
}
/* THIS IS AN ISSUE WHEN AS A COMPONENT! this is what makes the littlehtings go round the edge
:root {
*/ 
:host {
	--transition: 0.25s;
	--spark: 1.8s;

    --buttonGrowthAmount: 0.1; /* When hovered, it becomes 10% larger */

    --BaseScale: 0.9; /* We need to start a little bit below 1.0 as it still expands beyond the edges */
    
}




body {
    --active: 0;
    background: hsl(
        var(--hue)
        calc(var(--active) * 97%)
        6%
    );
    display: grid;
    place-items: center;
    min-height: 100vh;
    font-family: system-ui, sans-serif;
    transition: background var(--transition);
    overflow: hidden;
}

button {
width: 100%;
	--cut: 0.1em;
	--active: 0;

    /* Linear map based on the active variable. */
    --baseSaturation:  40%;
    --swingSaturation: 57%;

    --baseLightness:  30%;
    --swingLightness: 25%;

    /* Pre-computation to make the below easier to handle. */
    --saturation: calc( ( var(--active) * var(--swingSaturation) ) + var(--baseSaturation)  );
    
    --lightness:  calc( ( var(--active) * var(--swingLightness ) ) + var(--baseLightness )  );


    /* Optional, added.
       Undoes excessive hinting from the grey-white ircular outline 
       Outline rather than border lets us displace it a bit from the edge of the element.
    */
    border:         0;
    outline:        0.2em solid hsl(var(--hue) 97% 50% / 0.7 ); /* SLASH CONTROLS ALPHGA */
    outline-offset: 0.05em;
    
	--bg:
        /* Very bottom colour on the highlight??? */
        radial-gradient(
            40% 50% at center 100%,
            hsl(
                var(--hue)
                97%
                /* 72% / 1   - slash controls alpha*/
                calc(var(--lightness) + 40%  )  
            ),
            transparent
        ),
        /* Middle colour on the highlight??? */
        radial-gradient(
            80% 100% at center 120%,
            hsl(
                var(--hue)
                97%
                calc(var(--lightness) + 15%  )
            ),
            transparent
        ),

        /* Main colour */
        hsl(
            var(--hue)
            97%
            var(--lightness)
        )
    ;
	

    
	background: var(--bg);
	/*font-size: 2rem;*/
	font-weight: 500;
	cursor: pointer;
	padding: 0.9em 1.3em;
	display: flex;
	align-items: center;
	gap: 0.25em;
	white-space: nowrap;
	border-radius: 100px;
	position: relative; 
    
    --shadowLength1: calc(var(--active) * 6em + (1 - var(--active)) * 1.5em);
    --shadowLength2: calc(var(--active) * 3em + (1 - var(--active)) * 0.5em);

    /* Glow outline */
	box-shadow:
		0  0      var(--shadowLength1)  var(--shadowLength2)     hsl(var(--hue)                      97%  61% / 0.75),  /* - slash controls alpha */
		
        0  0.05em 0                     0                        hsl(var(--hue) calc(var(--active) * 97%) calc((var(--active) *  20%) + 70%)) inset,
		0 -0.05em 0                     0                        hsl(var(--hue) calc(var(--active) * 97%) calc((var(--active) * -20%) + 60%)) inset
/*
        0  0.05em 0                     0                        hsl(var(--hue) calc(var(--active) * 97%) calc((var(--active) * 50%) + 30%)) inset,
        0 -0.05em 0                     0                        hsl(var(--hue) calc(var(--active) * 97%) calc((var(--active) * 60%)      )) inset
*/
    ; /* ;;;; */



	transition: box-shadow var(--transition), scale var(--transition), background var(--transition);
    
    
    /* 
        We can't get the size of the object itself.

        Percentages are usage space of the parent, not the element itself.
    
        So shrink it instead under normal scenario.
    
    margin: calc(1 + var(--buttonGrowthAmount));
    padding: calc( var(--buttonGrowthAmount) * 100%);
    */

	scale: calc(
        var(--BaseScale) - (
            (1 - var(--active)) * var(--buttonGrowthAmount)
        )
    );
}




button:active {
  /*scale: 1;*/
  scale: calc(var(--BaseScale) - var(--buttonGrowthAmount));
}

svg {
	overflow: visible !important;
}

.sparkle path {
	color: hsl(0 0% calc((var(--active, 0) * 70%) + var(--base)));
	transform-box: fill-box;
	transform-origin: center;
	fill: currentColor;
	stroke: currentColor;
	animation-delay: calc((var(--transition) * 1.5) + (var(--delay) * 1s));
	animation-duration: 0.6s;
	transition: color var(--transition);
}

button:is(:hover, :focus-visible) path {
	animation-name: bounce;
}

@keyframes bounce {
	35%, 65% {
		scale: var(--scale);
	}
}
.sparkle path:nth-of-type(1) {
	--scale: 0.5;
	--delay: 0.1;
	--base: 40%;
}

.sparkle path:nth-of-type(2) {
	--scale: 1.5;
	--delay: 0.2;
	--base: 20%;
}

.sparkle path:nth-of-type(3) {
	--scale: 2.5;
	--delay: 0.35;
	--base: 30%;
}

button:before {
	content: "";
	position: absolute;
	inset: -0.25em;
	z-index: -1;
	border: 0.25em solid hsl(var(--hue) 97% 50% / 0.5);
	border-radius: 100px;
	opacity: var(--active, 0);
	transition: opacity var(--transition);
}

.spark {
	position: absolute;
	inset: 0;
	border-radius: 100px;
	rotate: 0deg;
	overflow: hidden;
	mask: linear-gradient(white, transparent 50%);
	animation: flip calc(var(--spark) * 2) infinite steps(2, end);
}

@keyframes flip {
	to {
		rotate: 360deg;
	}
}

.spark:before {
	content: "";
	position: absolute;
	width: 200%;
	aspect-ratio: 1;
	top: 0%;
	left: 50%;
	z-index: -1;
	translate: -50% -15%;
	rotate: 0;
	transform: rotate(-90deg);
	opacity: calc((var(--active)) + 0.4);
	background: conic-gradient(
		from 0deg,
		transparent 0 340deg,
		white 360deg
	);
	transition: opacity var(--transition);
	animation: rotate var(--spark) linear infinite both;
}

.spark:after {
	content: "";
	position: absolute;
	inset: var(--cut);
	border-radius: 100px;
}

.backdrop {
	position: absolute;
	inset: var(--cut);
	background: var(--bg);
	border-radius: 100px;
	transition: background var(--transition);
}

@keyframes rotate {
	to {
		transform: rotate(90deg);
	}
}



@supports(selector(:has(:is(+ *)))) {
	body:has(button:is(:hover, :focus-visible)) {
		--active: 1;
		--play-state: running;
	}
	.bodydrop {
		display: none;
	}
}

button:is(:hover, :focus-visible) ~ :is(.bodydrop, .particle-pen) {
	--active: 1;
	--play-state: running;
}

.bodydrop {
	/*background: hsl(
		var(--hue)
		calc(var(--active) * 97%)
		6%
	);*/
	position: fixed;
	inset: 0;
    
    /* see below on pointer events */
	z-index: -1;
    pointer-events: none;
}



button:is(:hover, :focus-visible) {
	--active: 1;
	--play-state: running;
}

/* the div */
.sparkle-button {
	position: relative;
}

.particle-pen {
    /*
        z-index: -1;            Unset to ensure the sparkles always appear (they did not on the real page 
        pointer-events: none;   And then if this is not set, this messes up buttons. 
    */
    pointer-events: none; 


	position: absolute;
	width: 200%;
	aspect-ratio: 1;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
	-webkit-mask: radial-gradient(white, transparent 65%);
	
	opacity: var(--active, 0);
	transition: opacity var(--transition);
}

.particle {
	fill: white;
	width: calc(var(--size, 0.25) * 1rem);
	aspect-ratio: 1;
	position: absolute;
	top: calc(var(--y) * 1%);
	left: calc(var(--x) * 1%);
	opacity: var(--alpha, 1);
	animation: float-out calc(var(--duration, 1) * 1s) calc(var(--delay) * -1s) infinite linear;
	transform-origin: var(--origin-x, 1000%) var(--origin-y, 1000%);
	z-index: -1;
	animation-play-state: var(--play-state, paused);
}

.particle path {
	fill: hsl(0 0% 90%);
	stroke: none;
}

.particle:nth-of-type(even) {
	animation-direction: reverse;
}

@keyframes float-out {
	to {
		rotate: 360deg;
	}
}

.text {
	translate: 2% -6%;
	letter-spacing: 0.01ch;
	background: linear-gradient(90deg, hsl(0 0% calc((var(--active) * 100%) + 65%)), hsl(0 0% calc((var(--active) * 100%) + 26%)));
	-webkit-background-clip: text;
	
    /*color: var(--textColour);        */
    /*opacity: calc(1 - var(--active));*/ /* make transparent when hovered to get the original behaviour */
    /*color: transparent;*/

    color: rgba(30, 30, 30, calc(
        (1 - var(--active)) * 0.7
    ));

	transition: background var(--transition);
}

button svg {
    inline-size: 1.25em;
    translate: -25% -5%;
}