@import url('sanne.css');





/********************/
/* #GENERAL STYLING */
/********************/
html {
	font-variation-settings:'wdth' 75;
	scroll-behavior: smooth;
}

h1, h2, h3 {
	margin:0;

	font-size:1em;
	font-weight:400;
}





/****************/
/* #SLIDE-PANEL */
/****************/
.slide-panel {
	position:fixed;
	right:var(--size-chrome-main);
	bottom:var(--size-chrome-main);
	z-index:9999;

	display:flex;
	/* viewport width - 2x margin - button width */
	max-width:calc(100% - var(--size-chrome-main) *  - var(--size-chrome-main));
	/* viewport height - 2x margin */
	max-height:calc(100% - var(--size-chrome-main) * 2);
	
	background-color:var(--color-background);
	filter:drop-shadow(
		calc(var(--size-chrome-sub) * .5) 
		calc(var(--size-chrome-sub) * .5) 
		calc(var(--size-chrome-sub) * 1) 
		var(--color-shade-gray)
	);

	transition:
		transform var(--reduced-motion, 0s) var(--motion, .3s);
}

.slide-panel.is-hidden {
	transform:translateX(calc(100% + var(--size-chrome-main)));

	filter:none;
}

/* slide-panel -> title-button */
.slide-panel h2 {
	position:absolute;	
	right:100%;
	bottom:var(--size-chrome-main);

	display:flex;
	flex-direction:row-reverse;
	gap:var(--size-chrome-sub);
	padding:calc(var(--size-chrome-sub) * 1) 0;
	transform:rotate(180deg);

	background-color:inherit;
	cursor:pointer;
	
	line-height:var(--size-chrome-main);
	writing-mode:vertical-lr;
}

.slide-panel.is-hidden h2 {
	background-color:transparent;
}

.slide-panel h2::before {
	content:"\2191";

	display:inline-block;
	transform:rotate(180deg);

	transition:
		transform var(--reduced-motion, 0s) var(--motion, .45s .15s);
}

.slide-panel.is-hidden h2::before {
	transform:rotate(0deg);
}





/**********/
/* #BOXES */
/**********/
.box {
	padding:var(--size-chrome-main);
	overflow:auto;
	overscroll-behavior: contain;
}

.box--form {
	display:grid;
	grid-template-columns:min-content min-content;
	gap:var(--size-chrome-main) var(--size-chrome-sub);
}





/******************/
/* #FORM ELEMENTS */
/******************/

/*************************/
/* #C-RADIO-BUTTON-GROUP */
/*************************/
.c-radio-button-group {
	grid-column:1 / -1;
	margin:0;
	padding:0;

	border:none;
}

.c-radio-button-group legend {
	padding:0;
}

.c-radio-button-group legend::after {
	content:":";
}

.c-radio-button-group > div {
	display:grid;
	grid-template-columns:min-content min-content;
	gap:var(--size-chrome-sub);
}





/************************************/
/* #C-RADIO-BUTTON & #C-LINK-BUTTON */
/************************************/

.c-radio-button,
.c-link-button {
	position:relative;

	border-radius:var(--size-chrome-main);
	
	text-decoration:none;
}

/* input */
/* invisible biut touchable */
.c-radio-button input {
	position: absolute;
	left:0;
	top:0;
	z-index:1;
	
	width:100%;
	height:100%;
	margin:0;
	padding:0;

	opacity:0;
}

/* label */
.c-radio-button span,
.c-link-button span {
	position:relative;

	min-width:min(33vmin, calc(var(--size-chrome-main) * 4.5));
	min-height:min(33vmin, calc(var(--size-chrome-main) * 4.5));
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	gap:calc(var(--size-chrome-sub) * .5);
	padding-top:1em;
	overflow:hidden;

	background-image:linear-gradient(
		135deg,
		var(--color-button-sun ,var(--color-sun-gray-75)),
		var(--color-button-mid, var(--color-background-00)),
		var(--color-button-shade, var(--color-shade-gray-75))
	);
	border-radius:inherit;
	box-shadow:
		inset 
		0 0 
		calc(var(--size-chrome-sub) * 3/8) 
		calc(var(--size-chrome-sub) * 1/8) 
		var(--color-background);
	line-height:1em;
}

/* icon */
.c-radio-button span::before,
.c-link-button span::before {
	content:"\01F447";

	font-size:2.5em;
	line-height:1em;

	filter:brightness( var(--light, 1) var(--dark, .75));
}

.c-link-button.icon--sanne span::before { content:"\01F468\0200D\01F9B2";}
.c-link-button.icon--mail span::before { content:"\01F4EE"; }

.c-radio-button.icon--view-list span::before { content:"\01F95E";}
.c-radio-button.icon--view-grid span::before{ content:"\01F36B";}
.c-radio-button.icon--view-orbit span::before { content:"\01F369";}
.c-radio-button.icon--view-whack-a-mole span::before { content:"\01F573";}

.c-radio-button.icon--color-theme-light span::before { content:"\01F411"; transform:scaleX(-1);}
.c-radio-button.icon--color-theme-dark span::before { content:"\01F98D"; }

/* states */
.c-link-button:hover::after,
.c-link-button:focus::after {
	content:"";
	position:absolute;
	left:37.5%;
	bottom:12.5%;

	width:25%;
	height:1px;
	
	background-color:var(--color-sannes-blue);
} 

.c-radio-button :checked + span {
	--color-button-sun: var(--color-shade-gray-75);
	--color-button-shade: var(--color-sun-gray-75);
}

.c-radio-button :checked + span::before {
	font-size:2em;
}

.c-radio-button :focus-visible + span {
	outline: 1px dotted var(--color-text);
  outline: 5px auto -webkit-focus-ring-color;
}

/* bubbles */
@keyframes bubble {
	25% {
		transform:scale(0);
		filter: hue-rotate(180deg);
	}
	87.5%, 90%{
		transform:scale(1);
		opacity:.25;
		filter:none;
	}
	100%{
		transform:scale(2);
		opacity:.125;
		filter:blur(5px) hue-rotate(-180deg);
	}
}

.c-link-button:hover:not(:focus) span::after,
.c-radio-button:hover input:not(:checked) + span::after {
	--bubble-size:calc(var(--size-chrome-main) * 3);
	--bubble-time:
		var(--reduced-motion, 0s)
		var(--motion, 1.5s);

	content:"";

	position:absolute;
	left:calc( var(--mouse-local-x) * 100% - var(--bubble-size) / 2);
	top:calc( var(--mouse-local-y) * 100% - var(--bubble-size) / 2);
	transform:scale(0);

	width:var(--bubble-size);
	height:var(--bubble-size);
	
	background-image:radial-gradient(closest-side, transparent, lime);
	border-radius:50%;
	filter: hue-rotate(180deg);

	pointer-events:none;

	animation:bubble var(--bubble-time) ease-out infinite backwards;	
}





/************/
/* #C-RANGE */
/************/
.c-range {
	grid-column:1/-1;

	display:flex;
	flex-wrap:wrap;
	gap:var(--size-chrome-sub);
}

/* label */
.c-range span {
	flex-basis:100%;
	order:-1;
}

.c-range span::after {
	content:":";
}

.c-range input {
	flex-grow:1;
	
	width:0;
}

/* icons */
.c-range::before,
.c-range::after {
  content: "\01F447";

	font-size:2.5em;
	line-height:1em;
}

.c-range.icon-min--color-temp-cold::before { content:"\01F9CA"; }
.c-range.icon-max--color-temp-warm::after { content:"\01F383"; } 





/********/
/* MAIN */
/********/

main * {
	/* sizes */
	--size-hill-dale-shape-diameter:clamp(40em, 100vmin, 60em);
	--size-carousel-radius:calc(var(--size-hill-dale-shape-diameter) / 2 * 21/32);

	--size-item-min:6.7em;
	--size-item-optimal:calc( var(--size-carousel-radius) * 6.28 / var(--item-count) * 3/4 );
	--size-item-max:10em;
	--size-item:clamp(var(--size-item-min), var(--size-item-optimal), var(--size-item-max));

	--size-item-spacing:calc(var(--size-item) * .6);

	/* animations */
	--time-ani:var(--ani-custom-time, 1s);
	--time-ani-delay:calc( var(--time-ani) / var(--item-count) * (var(--index) - var(--item-count)));

	--time-orbit-title:
		var(--reduced-motion, 0s)
		var(--motion, 8s);
	--time-flame-title:
		var(--reduced-motion, 0s)
		var(--motion, .1s);

	--number-start-turn:.375;
	--angle-start-turn:calc(var(--number-start-turn) * 1turn);
	--angle-end-turn:calc(var(--number-start-turn) * 1turn - 1turn);
	
	/* item color - based on img color */
	--color-item-hs: calc(var(--h, 0) * 360) calc(var(--s, 0) * 100%);
	--color-item-l: calc(var(--l, .5) * 100%);

	--color-item:hsl( var(--color-item-hs) var(--color-item-l) );
	--color-item-mid:hsl( var(--color-item-hs) calc( var(--color-item-l) * .75 ) / 1);
	--color-item-dark:hsl( var(--color-item-hs) calc( var(--color-item-l) * .05 ) / 1);

	--color-flame-center:gold;
	--color-flame-outer:red;
}

[data-view="view-orbit"] *, [data-view="view-orbit"] *::before {
	/* sizes */
	--size-orbit-radius: calc( (var(--size-carousel-radius) + var(--size-item) / 2) );
	--size-orbit-depth: calc( var(--size-orbit-radius) * var(--number-orbit-depth-factor, -.125 ));
	--size-item-min:0em;

	/* animations */
	--time-orbit-globe:
		var(--reduced-motion, 96s)
		var(--motion, 48s);
	--time-orbit-item:
		var(--reduced-motion, 48s)
		var(--motion, 16s);
	
	/* colors */
	--color-fog-translucent:var(--color-background-50);
	--color-fog-transparent:var(--color-background-00);
	--color-item-atmosphere:
		var(--light, hsl( var(--color-item-hs) var(--color-item-l) ))
		var(--dark, hsl( var(--color-item-hs) var(--color-item-l) / .5));
}

[data-view="view-whack-a-mole"] * {
	/* sizes */
	--size-hole-height:calc( var(--size-item) / 2);
	--size-item-min:0em;

	/* animations */
	--time-whack-spin:
		var(--reduced-motion, 256s)
		var(--motion, 128s);
	--time-whack-whack:
		var(--reduced-motion, 30s)
		var(--motion, 10s);
	--time-whack-img-spin:var(--time-whack-whack);

	--size-whack-amplitude:calc( var(--size-carousel-radius) * .33 + var(--size-item) * (1.17 + var(--const-hill-dale-shape) / 3 ));
	--size-whack-depth:calc(var(--size-carousel-radius) * 10 );

	/* colors */
	--color-hole-sun:
		var(--light, hsl(var(--color-root-hs) 25%))
		var(--dark, hsl(var(--color-root-hs) 20%));
	--color-hole-shade:
		var(--light, hsl(var(--color-root-hs) 15%))
		var(--dark, hsl(var(--color-root-hs) 10%));

	--color-hole-border-sun:
		var(--light, hsl(var(--color-root-hs) 80%))
		var(--dark, hsl(var(--color-root-hs) 35%));
	--color-hole-border-shade:
		var(--light, hsl(var(--color-root-hs) 40%))
		var(--dark, hsl(var(--color-root-hs) 15%));
	
	--color-item-hole:var(--color-item);
	--color-item-hole-shade:hsl( var(--color-item-hs) calc(var(--color-item-l) * .33) / .33 );

	--color-item-glow:
		var(--light, hsl( var(--color-item-hs) var(--color-item-l) ))
		var(--dark, hsl( var(--color-item-hs) var(--color-item-l) / .5));
	--color-item-glow-transparent:
		hsl( var(--color-item-hs) var(--color-item-l) / 0 );

	--color-title-sun:
		var(--light, hsl(var(--color-root-hs) 30%))
		var(--dark, hsl(var(--color-root-hs) 80%));
	--color-title-shade:
		var(--light, hsl(var(--color-root-hs) 20%))
		var(--dark, hsl(var(--color-root-hs) 60%));

	/* hill en dale */
	--const-hill:var(--pos);
	--const-dale:var(--neg);
	--const-hill-dale-shape:var(--const-dale);

	--gradient-hill-dale:
		/* fade from hill/dale to background */
		radial-gradient(
			circle, 
			var(--color-background-00) 48%, 
			var(--color-background-25) 70%
		),
		radial-gradient(
			circle,
			var(--color-background-00) 55%, 
			var(--color-background-50) 70%
		),
		radial-gradient(
			circle,
			var(--color-background-00) 60%, 
			var(--color-background-75) 70%
		),
		radial-gradient(
			circle,
			var(--color-background-00) 63%, 
			var(--color-background) 70%
		),
		/* hill or dale */
		radial-gradient(
			circle, 
			var(--color-sun-gray-25) 32%, 
			var(--color-shade-gray-25) 68%
		) 
		calc(-62.5% + 390.5% * var(--const-hill-dale-shape)) 
		calc(-62.5% + 390.5% * var(--const-hill-dale-shape))
		/ 180% 180%,
		radial-gradient(
			circle, 
			var(--color-sun-gray-25) 36%, 
			var(--color-shade-gray-25) 64%
		) 
		calc(-43.4% + 320.4% * var(--const-hill-dale-shape)) 
		calc(-43.4% + 320.4% * var(--const-hill-dale-shape))
		/ 215% 215%,
		radial-gradient(
			circle,
			var(--color-sun-gray) 40%,
			var(--color-shade-gray) 60%
		)
		calc(-33.35% + 283.35% * var(--const-hill-dale-shape))
		calc(-33.35% + 283.35% * var(--const-hill-dale-shape))
		/ 250% 250%;
}

@media (min-width:32em) and (min-height:32em) {
	[data-view="view-whack-a-mole"] * {
		--const-hill-dale-shape:var(--const-hill);
	}
}





/********/
/* LIST */
/********/

/* item list */
main ul {	
  display: flex;
	flex-direction:column;
	gap:calc(var(--size-item-spacing));
	align-items:center;
	margin: 0;
  padding:min(30vh, calc(var(--size-item) * 2)) var(--size-item-spacing) var(--size-item-spacing);
	
	list-style: none;
}

/* item */
main li {
	margin:0;
	user-select:none;
}

/* item link */
main a {
	position:relative;
  display: block;

	outline: none;
	
	cursor:default;
	pointer-events:none;
	
	text-decoration: none;
	color:inherit;
}

/* item title */
@keyframes orbit-title {
	0% {
		transform:translateX(-50%) rotate(0turn) ;
	}
	100% {
		transform:translateX(-50%) rotate(-1turn) ;
	}
}

main h3 {
	--v:min(1.5em, calc( var(--size-item) / 5 ) );

	position:absolute;
	top:calc(var(--v) * -2);
	z-index:100;
	transform-origin: center calc(var(--v) * 2 + var(--size-item) / 2);
	transform:translateX(-50%);

	height:1em;
	left:50%;

	line-height:1em;
	white-space:nowrap;
}

main a:hover h3 {
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-decoration-skip-ink: all;
	text-underline-offset: 15%;
	text-decoration-style:wavy;
	text-decoration-color:var(--color-item-mid);
}

@media (prefers-reduced-motion:reduce) {
	main a:focus h3 {
		text-decoration-line: underline;
		text-decoration-thickness: 1px;
		text-decoration-skip-ink: all;
		text-underline-offset: 15%;
		text-decoration-style:wavy;
	}
}

@media (prefers-reduced-motion:no-preference) {
	main h3 {
		animation:orbit-title var(--time-orbit-title) linear infinite paused;
	}
	
	main a:focus h3 {
		animation-play-state: running;
	}
}

/* item title arrow */
main h3::before {
	content:"\2193";
	position:absolute;
	left:50%;
	bottom:calc(var(--v) * -1);
	transform: translateX(-50%);
}

/* item title flame */
@keyframes orbit-flame {
	0% {
		transform:translatex(.125em) rotate(30deg);
	}
	100% {
		transform:translatex(.125em) rotate(60deg);
	}
}

main a:focus h3::after {
	content:"";
	position:absolute;

	width:1em;
	height:1em;
	transform:scale(0);

	background-image:radial-gradient(at 40% 60%, var(--color-flame-center) 12.5%, var(--color-flame-outer) 87.5%);
	border-radius: 60% 0 60% 40%;
	
  pointer-events: none;

	transform-origin: 40% 60%;
	animation: orbit-flame var(--time-flame-title) infinite alternate ease-in-out;
}

/* ball */
main .ball {
	background-image:radial-gradient(circle at 40% 40%, #fff9, var(--color-item-dark));
	border-radius:50%;
	box-shadow:
		calc(var(--size-item) * .025) 
		calc(var(--size-item) * .075) 
		calc(var(--size-item) * .075)
		calc(var(--size-item) * .025)
		var(--color-shade-gray);
	
	cursor:pointer;
	pointer-events:auto;
}

/* ball img */
main picture {
  display: block;
	width:var(--size-item); 
	height:var(--size-item);

	border-radius:inherit;
	mix-blend-mode: overlay;

	overflow:hidden;
}

main picture img {
	width:100%;
	height:100%;
}





/********/
/* GRID */
/********/

/* item list */
[data-view="view-grid"] ul {
	flex-direction: row;
	flex-wrap:wrap;
	justify-content:center;
	/* 5*item + 4*gap + 2*container-padding */
	max-width: calc(var(--size-item) * 5 + var(--size-item-spacing) * 4 + var(--size-item-spacing) * 2);
	margin:0 auto;
}





/*********/
/* ORBIT */
/*********/

/* item list wrapper */
[data-view="view-orbit"] {
	position:relative;
	perspective: 60em;
	transform-style: preserve-3d;

	height: 100%;
	overflow:hidden;
}

/* item list */
@keyframes globe {
	/* in between keyframes are required for safari */
	0%   { transform: translateZ( var(--size-orbit-depth) ) rotate3d( 1, 1, 1, calc(0deg   * var(--globe-dir, 1)) ); }
	25%  { transform: translateZ( var(--size-orbit-depth) ) rotate3d( 1, 1, 1, calc(90deg  * var(--globe-dir, 1)) ); }
	50%  { transform: translateZ( var(--size-orbit-depth) ) rotate3d( 1, 1, 1, calc(180deg * var(--globe-dir, 1)) ); }
	75%  { transform: translateZ( var(--size-orbit-depth) ) rotate3d( 1, 1, 1, calc(270deg * var(--globe-dir, 1)) ); }
	100% { transform: translateZ( var(--size-orbit-depth) ) rotate3d( 1, 1, 1, calc(360deg * var(--globe-dir, 1)) ); }
}

[data-view="view-orbit"] ul {
	--ani-custom-time:var(--time-orbit-globe);

	position: absolute;
	left: calc(50% - var(--size-carousel-radius));
	top: calc(50% - var(--size-carousel-radius));
	transform-style: preserve-3d;
	transform:translateZ( calc(var(--size-orbit-depth) * 1));

	justify-content:center;
	width: calc( var(--size-carousel-radius) * 2);
	height: calc( var(--size-carousel-radius) * 2);	
	padding:0;

	animation: globe var(--time-ani) infinite linear;
}

/* including fog */
[data-view="view-orbit"] ul::before {
	--globe-dir:var(--neg);
	--number-orbit-depth-factor:0;
	
	content:"";

	width:100%;
	height:100%;

	background-image:
		radial-gradient(
			circle,
			var(--color-fog-translucent) calc(var(--size-carousel-radius) * 0),
			var(--color-fog-transparent) calc(var(--size-carousel-radius) * 1)
		),
		radial-gradient(
			circle,
			var(--color-fog-translucent) calc(var(--size-carousel-radius) * .5),
			var(--color-fog-transparent) calc(var(--size-carousel-radius) * 1)
		);
	background-blend-mode: overlay;

	pointer-events:none;

	animation: globe var(--time-ani) infinite linear;

	filter: blur(10px);
}

/* item */
@keyframes orbit {
	0%   { transform: rotateY(0turn)  translateZ( var(--size-orbit-radius) ) rotateY(0turn); }
	100% { transform: rotateY(-1turn) translateZ( var(--size-orbit-radius) ) rotateY(1turn); }
}

[data-view="view-orbit"] li {
	--ani-custom-time:var(--time-orbit-item);	
	
	position:absolute;
	transform-style: preserve-3d;
	
	animation: orbit var(--time-ani) var(--time-ani-delay) infinite linear;
}

/* item link */
[data-view="view-orbit"] a {
	--ani-custom-time:var(--time-orbit-globe);
	--globe-dir:var(--neg);
	--number-orbit-depth-factor:0;

	animation: globe var(--time-ani) infinite linear;
}

/* item ball */
[data-view="view-orbit"] .ball {
	box-shadow:
		/* shade */
		calc(var(--size-item) * .02)
		calc(var(--size-item) * .02)
		calc(var(--size-item) * .1)
		calc(var(--size-item) * -.02)
		var(--color-shade-gray-50),
		/* atmosphere */
		0
		0
		calc(var(--size-item) * .25)
		calc(var(--size-item) * -.05)
		var(--color-item-atmosphere);
}





/****************/
/* WHACK-A-MOLE */
/****************/

/* item list wrapper */
[data-view="view-whack-a-mole"] {
	position:relative;
	height:100%;
	overflow:hidden;
}

[data-view="view-whack-a-mole"], [data-view="view-whack-a-mole"] * {
	cursor: url("../images/mallet.svg") 12 12, auto;
}

[data-view="view-whack-a-mole"]:active, [data-view="view-whack-a-mole"] *:active {
	cursor: url("../images/mallet-active.svg") 12 4, auto;
}



/* item list */
/* including hill or dale */
[data-view="view-whack-a-mole"] ul {
	position: absolute;
	left:calc(50% - var(--size-hill-dale-shape-diameter) / 2);
	top:calc(50% - var(--size-hill-dale-shape-diameter) / 2);

	justify-content:center;
	width: var(--size-hill-dale-shape-diameter);
	height: var(--size-hill-dale-shape-diameter);	
	padding:0;

	background: var(--gradient-hill-dale);
	border-radius:50%;
}

/* item */
@keyframes rondje {
	0%   { transform: rotate( var(--angle-start-turn) ) translateY( calc(var(--size-carousel-radius) * -1 * var(--const-hill-dale-shape)) ); }
	100% { transform: rotate( var(--angle-end-turn) )   translateY( calc(var(--size-carousel-radius) * -1 * var(--const-hill-dale-shape)) ); }
}

[data-view="view-whack-a-mole"] li {
	--ani-custom-time:var(--time-whack-spin);

	position:absolute;

	animation: rondje var(--time-ani) var(--time-ani-delay) infinite linear;
}

[data-view="view-whack-a-mole"] a {
	width:var(--size-item);
	height:var(--size-hole-height);
}

/* item title */
@keyframes titel {
	0%   { color:var(--color-title-shade); }
	50%  { color:var(--color-title-sun); }
	100% { color:var(--color-title-shade); }
}

[data-view="view-whack-a-mole"] h3 {
	top:auto;
	bottom:calc(var(--v) * -2);

	opacity:0;

	animation: titel var(--time-ani) var(--time-ani-delay) linear infinite;
}

/* item title arrow */
[data-view="view-whack-a-mole"] h3::before {
	content:"\2191";
	top:calc(var(--v) * -1);
}

[data-view="view-whack-a-mole"] a:hover h3,
[data-view="view-whack-a-mole"] a:focus h3  {
	opacity:1;
	text-decoration:none;
}

[data-view="view-whack-a-mole"] a:focus h3::after {
	display:none;
}

/* item ball outer wrapper  */
/* area ball moves in */
[data-view="view-whack-a-mole"] a > div {
	position:absolute;
	left:0;
	bottom:0;
	transform: translateZ(0); /*voor safari */

	display:flex;
	align-items:flex-end;
	width:var(--size-item);
	height:var(--size-whack-amplitude);
	overflow:hidden;

	border-radius:50% / calc(var(--size-hole-height) / 2);
}

/* including hole */
@keyframes color-hole-border {
	0%   { background-color:var(--color-hole-border-shade); }
	50%  { background-color:var(--color-hole-border-sun); }
	100% { background-color:var(--color-hole-border-shade); }
}

@keyframes color-hole {
	0%   { background-color:var(--color-hole-shade); }
	50%  { background-color:var(--color-hole-sun); }
	100% { background-color:var(--color-hole-shade); }
}

/* hole & hole border */
[data-view="view-whack-a-mole"] a > div::before,
[data-view="view-whack-a-mole"] a > div::after {
	content:"";

	position:absolute;
	left:0;
	bottom:0;

	width:100%;
	height:var(--size-hole-height);
	
	border-radius:50%;
}

/* hole border */
[data-view="view-whack-a-mole"] a > div::before {
	animation: color-hole-border var(--time-ani) var(--time-ani-delay) infinite linear;
}

/* hole */
[data-view="view-whack-a-mole"] a > div::after {
	transform:translateY(calc(var(--size-hole-height) / 2.5)) scale(.95);

	background: radial-gradient(
		closest-side, 
		var(--color-item-hole), 
		var(--color-item-hole-shade)
	) center top / 120% 140%;
	
	animation: color-hole var(--time-ani) var(--time-ani-delay) infinite linear;
}

/* item ball middle wrapper */
@keyframes opneer {
	0% {
		transform:translateY( calc(var(--size-whack-amplitude) * -1) );
		animation-timing-function:ease-in;
	}
	50% {
		transform:translateY( var(--size-whack-depth) );
		animation-timing-function:ease-out;
	}
	100% {
		transform:translateY( calc(var(--size-whack-amplitude) * -1) );
	}
}

[data-view="view-whack-a-mole"] a > div > div {
	--ani-custom-time:var(--time-whack-whack);
	
	position:relative;
	bottom:calc(var(--size-item) * -1);
	z-index:100;

	animation: opneer var(--time-ani) var(--time-ani-delay) infinite;
}

[data-view="view-whack-a-mole"] a > div > div::before {
	/* light beam */
	content:"";
	position:absolute;
	left:0;
	top:0;
	
	width:100%;
	height:calc(var(--size-whack-amplitude) + var(--size-item));

	background:
		radial-gradient(
			circle at center top, 
			var(--color-item-glow-transparent) var(--size-item), 
			var(--color-item-glow));
}

/* ball */
@keyframes contra-rotate {
	/* scale .995 to prevent square edges */
	0%   { transform: rotate(calc(var(--angle-start-turn) * -1)) scale(.995); }
	100% { transform: rotate(calc(var(--angle-end-turn) * -1))   scale(.995); }
}

[data-view="view-whack-a-mole"] .ball {
	--ani-custom-time:var(--time-whack-spin);

	box-shadow:none;
	
	animation: contra-rotate var(--time-ani) var(--time-ani-delay) infinite linear;
}

/* bal img */
@keyframes img-spin {
	0%   { transform: rotate(0turn); }
	100% { transform: rotate(2turn); }
}

[data-view="view-whack-a-mole"] picture {
	--ani-custom-time:
		var(--reduced-motion, 0s)
		var(--motion, var(--time-whack-img-spin));
	animation:img-spin var(--time-ani) var(--time-ani-delay) infinite linear;
}





/*****************/
/* WHACK NOT TAB */
/*****************/

@keyframes move-bg {
	100% {
		background-position: calc(50% + 2.121320343559643rem) calc(50% - 2.121320343559643rem);
	}
}

/* dialog */
dialog {
	--animation:move-bg var(--time-move-bg) infinite linear;
	--bg-color:LimeGreen;
	--bg:
		fixed
		repeating-linear-gradient(
			45deg,
			var(--bg-color) calc(50% - 1.5rem) 50%,
			white  0 calc(50% + 1.5rem)
		) 50% / 100vw 100vh;
	--time-move-bg:1.5s;

	max-width:min(calc(100% - 4em), 40em);
	padding:2em;
	background:var(--bg);
	border:none;
	font-variation-settings: "wdth" 100;
}

html[data-out="2"] dialog {
	--time-move-bg:1s;
	--bg-color:#f60;
}

html[data-out="3"] dialog {
	--time-move-bg:.5s;
	--bg-color:red;
}

/* form */
dialog form {
	padding:clamp(1.4em, 4.8vmin, 2em);;
	background-color: white;
}

/* dialog title */
dialog h2 {
	margin:0;
	font-size:clamp(3.5em, 12vmin, 5em);
	line-height:1em;
	font-variation-settings: "wght" 900, "wdth" 100;

	background:var(--bg);
	-webkit-background-clip:text;
	background-clip:text;
	color:transparent;
	text-transform: uppercase;
	text-wrap:balance;
}

/* dialog button */
dialog button {
	padding:var(--size-chrome-sub) calc(var(--size-chrome-sub)  * 2);
	appearance: none;
	color:white;
	background-color: var(--color-sannes-blue);
	border:none;
}

/* dialog backdrop */
@supports (backdrop-filter: blur(1.5em)) or (-webkit-backdrop-filter: blur(1.5em)) {
	dialog::backdrop {
		-webkit-backdrop-filter: blur(1.5em);
		backdrop-filter: blur(1.5em);
	}
}



/* dialog - motion is ok */
@media (prefers-reduced-motion:no-preference) {
	dialog,
	dialog h2 {
		animation:var(--animation);
	}
}


/****************************/
/* THREE STRIKES YOU'RE OUT */
/****************************/
html[data-out="true"] body * {
	display: none;
}

html[data-out="true"] body {
	display:grid;
	place-content: center;
	place-items: center;
}

html[data-out="true"] body::before {
	content:"Told ya.";
}

html[data-out="true"] body::after {
	--color-attention:
		var(--light, deeppink)
		var(--dark, gold);

	content:"type 'reset' quickly";
	position:absolute;
	right:.75em;
	bottom:.5em;

	opacity:1;
}

@media (prefers-reduced-motion:no-preference) {
	html[data-out="true"] body::after {
		animation:fade-in 4s 5s backwards reverse ease-in-out;
	}

	@keyframes fade-in {
		0% {
			color:currentColor;
		}
		12.5% {
			color:var(--color-attention);
		}
		25% {
			color:currentColor;
		}
		37.5% {
			color:var(--color-attention);
		}
		50% {
			color:currentColor;
		}
		62.5% {
			color:var(--color-attention);
		}
		75% {
			color:currentColor;
		}
		87.5% {
			opacity:1;
			color:var(--color-attention);
		}
		100% {
			opacity:0;
			color:currentColor;
		}
	}
}