/*********/
/* FONTS */
/*********/
@font-face {
	font-family: "Saira";
	font-weight:100..900;
	font-stretch:50..125;
	font-style: normal;
	src: url("../../fonts/Saira-Variable.woff2") format("woff2");
	font-display: fallback;
}

@font-face {
  font-family: "Saira";
	font-weight:100..900;
	font-stretch:50..125;
	font-style: italic;
  src: url("../../fonts/Saira-Italic-Variable.woff2") format("woff2");
	font-display: fallback;
}


*, *::after, *::before {
	box-sizing:border-box;
	font-family:'Saira', sans-serif;
}





/****************/
/* CUSTOM PROPS */
/****************/

:root {
	--body-bg:salmon;
	--body-grdnt:
			repeating-radial-gradient(
				closest-side circle at center calc(50% - 1.875em),
				salmon calc(100% - 4em) calc(100% - 3em),
				crimson 100%
			);

	--head-size:10em;
	--head-time-mood-change:1s;
	--head-bg:bisque;
	--head-bg-dark:#ffb699;
	--head-shadow:crimson;

	--head-light-x-default:.675;
	--head-light-y-default:.175;

	--head-glimmer-x-min:.17;
	--head-glimmer-x-max:calc(1 - var(--head-glimmer-x-min));
	--head-glimmer-y-min:.08;
	--head-glimmer-y-max:.225;
	--head-glimmer-time-rotate:10s;
	--head-glimmer-time-rotate-happy:.5s;
	--head-glimmer-time-filter:.3s;
	--head-glimmer-time-move:.15s;
	--head-glimmer-size:.2;
	--head-glimmer-clr:white;

	--head-balkje-time-mood-change:1s;
	--head-balkje-time-fcs:.3s;
	--head-balkje-time-correct:1s;
	--head-balkje-time-incorrect:.25s;
	--head-balkje-bg:black;
	--head-balkje-clr:salmon;
	--head-balkje-placeholder-clr:transparent;
	--head-balkje-placeholder-clr-hvr:#9996;
	--head-balkje-placeholder-clr-fcs:#999;
	--head-balkje-bg-correct:salmon;

	--head-oog-wit-bg:white;
	--head-oog-iris-bg:steelblue;
	--head-oog-iris-bg-boos:crimson;
	--head-oog-pupil-bg:black;
	--head-oog-shadow:burlywood;

	--head-wenkbrouw-bg:LemonChiffon;

	--head-highlight-x-limit:36%;
	--head-highlight-time-move:.15s;
	--head-highlight-time-rotate:10s;
	--head-highlight-time-flash:.5s;
	--head-highlight-time-spin:1s;
	--head-highlight-bg:white;

	--head-neus-bg:bisque;
	--head-neus-shadow:burlywood;

	--head-mond-bg:salmon;
	--head-mond-shadow:crimson;

	--head-oren-time-flap:.05s;

	--radio-filter:
		hue-rotate(-45deg)
		saturate(.75);
	--radio-filter-fcs:
		hue-rotate(-45deg)
		saturate(1)
		drop-shadow(0 0 .01em steelblue)
		drop-shadow(0 0 .02em steelblue)
		drop-shadow(0 0 .03em steelblue)
		drop-shadow(0 0 .04em steelblue)
		drop-shadow(0 0 .05em steelblue);
}





/************/
/* WRAPPERS */
/************/

html, body {
	height:100%;
	overflow:hidden;
	overscroll-behavior: none;
}

body {
	--font-size:clamp(1.25em, 4.5vmin, 2em);

	margin:0;

	display:flex;
	justify-content:center;
	align-items:center;

	background-color:var(--body-bg);

	font-size:var(--font-size);
}

body::before {
	content:"";
	position:fixed;
	inset:0;

	background-image:var(--body-grdnt);
		
	background-position:center center;
	background-size:100% 100%;

	opacity:.1;
}

@supports selector(:has(a)) {
	body::before {
		transition:opacity 2s;
		animation:
				blob 1s infinite linear paused;
	}
	
	body:has(nav:hover)::before {
		opacity:1;
		transition:opacity 20s;
		animation-play-state: running;
	}

	@keyframes blob {
		100% {
			background-size:calc(100% + 8em) calc(100% + 8em);
		}
	}
}

main {
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	gap:1.5em;
}




/************/
/* 'T HOOFT */
/************/

.👨‍🦲 {
  position:relative;
	
	width:var(--head-size);
	aspect-ratio:4/5;
	flex-shrink:0;
	
	display:grid;
	align-content:end;
	justify-items:center;
	gap:4%;
	
	background-color:var(--head-bg);
	background-image:
		radial-gradient(
			farthest-side at center bottom,
			transparent 88%,
			var(--head-bg-dark) 98%
		);
	background-size: 400% 300%;
	background-position:50% 0%;
	border-radius:50%/ 50% 50% 25% 25%;
	box-shadow:0 0 1.5em var(--head-shadow);

	transition:
		gap var(--head-time-mood-change),
		background-size var(--head-time-mood-change),
		background-position var(--head-time-mood-change);
}

.👨‍🦲[data-mood="😀"] {
	gap:2%;
	background-size:200% 100%;
	background-position:50% 0%;
}





/**************/
/* DE GLIMMER */
/**************/

.👨‍🦲 .🌟 {
	position:absolute;
	inset:0;
	z-index:500;
	border-radius:inherit;

	-webkit-mask:
		linear-gradient(
			red calc( (var(--head-glimmer-y-max) - var(--head-glimmer-size)/4) * 100%),
			transparent calc( (var(--head-glimmer-y-max) + var(--head-glimmer-size)/4) * 100%)
		);
	mask:
		linear-gradient(
			red calc( (var(--head-glimmer-y-max) - var(--head-glimmer-size)/4) * 100%),
			transparent calc( (var(--head-glimmer-y-max) + var(--head-glimmer-size)/4) * 100%)
		);
}

.👨‍🦲 .🌟 em {
	position:absolute;
	left:calc( 
			( 
				clamp(
					var(--head-glimmer-x-min), 
					var(--head-light-x, var(--head-light-x-default)), 
					var(--head-glimmer-x-max)
				) 
				- var(--head-glimmer-size) / 2 
			) * 100%
		);
	top:calc( 
			( 
				clamp(
					var(--head-glimmer-y-min), 
					var(--head-light-y, var(--head-light-y-default)), 
					var(--head-glimmer-y-max)
				)
				- var(--head-glimmer-size) / 2 
			) * 100%
		);

	width:calc(var(--head-glimmer-size) * 100%);
	aspect-ratio:1/1;

	filter:blur(2px);
	-webkit-mask:radial-gradient(closest-side circle, #f00c 25%,#f003);
	mask:radial-gradient(closest-side circle, #f00c 25%,#f003);

	cursor:grab;

	transition: filter var(--head-glimmer-time-filter);
	animation:🌟 var(--head-glimmer-time-rotate) linear infinite;
}

.👨‍🦲 .🌟 em:focus-visible {
	outline:none;
	filter:none;
}

.👨‍🦲.moving .🌟 em {
	transition:var(--head-glimmer-time-move);
}

.👨‍🦲.dragging,
.👨‍🦲.dragging *,
.👨‍🦲.dragging .🌟,
.👨‍🦲.dragging .🌟 em {
	cursor:grabbing;
} 

.👨‍🦲[data-mood="😀"] .🌟 em {
	animation-duration:var(--head-glimmer-time-rotate-happy);
}

@keyframes 🌟 {
	to {
		transform:rotate(1turn);
	}
}

.👨‍🦲 .🌟 em::before,
.👨‍🦲 .🌟 em::after {
	content:"";
	position:absolute;
	inset:0;
	background-color:var(--head-glimmer-clr);
	transform:rotate(var(--ry, 0deg)) skew(25deg, 25deg) scale(.5);
}

.👨‍🦲 .🌟 em::after {
	--ry:90deg;
}

/* empty drag image */
img {
	position:fixed;
	left:-9999em;
}





/**********/
/* BALKJE */
/**********/
.👨‍🦲 .🕶 {
	position:relative;
	z-index:1000;
	width:70%;

	display:none;
	grid-area:1 / 1;
	place-self:center;

	transform:translateY( calc( var(--head-size) * var(--ty, -.04) )  );
	transition:transform var(--head-balkje-time-mood-change);
}

/* positie tov ogen */
.👨‍🦲[data-mood="😦"] .🕶 {
	--ty:-.04;
}

.👨‍🦲[data-mood="😠"] .🕶 {
	--ty:-.02;
}

.👨‍🦲[data-mood="😮"] .🕶 {
	--ty:-.086;
}

.👨‍🦲[data-mood="😀"] .🕶 {
	--ty:-.03;
}

/* visible */ 
.👨‍🦲:is(
	[data-private="🔒"], 
	[data-private="🔓"]
) .🕶 {
	display:block;
}


/* het password field */
.👨‍🦲 .🕶 .🔏 {
	display:block;
	width:100%;
	line-height:1.5em;

	appearance:none;
	font-size:1em;
	font-weight:bold;
	text-align:center;
	
	color:var(--head-balkje-clr);
	background-color:var(--head-balkje-bg);
	border:none;
	border-radius:.25em;
	outline:none;
	
	transition:var(--head-balkje-time-fcs);
}

/* safari password widget */
.👨‍🦲 .🕶 .🔏::-webkit-credentials-auto-fill-button {
	position:fixed;
	left:-9999em;
}

/* placeholder */
.👨‍🦲 .🕶 .🔏::placeholder {
	color:var(--head-balkje-placeholder-clr);
	transition: inherit;	
}


/* hover */
.👨‍🦲 .🕶 .🔏:hover::placeholder {
	color:var(--head-balkje-placeholder-clr-hvr);
}


/* focus */
.👨‍🦲 .🕶 .🔏:focus {
	padding:.25em 0;
	border-radius:.5em;
}

.👨‍🦲 .🕶 .🔏:focus::placeholder {
	color:var(--head-balkje-placeholder-clr-fcs);
}


/* correct password */
.👨‍🦲[data-private="🔓"] .🕶 .🔏 {
	animation:🤗 var(--head-balkje-time-correct) ease-in forwards;
}

@keyframes 🤗 {
	67% {
		/* background-color:var(--head-balkje-bg-correct); */
	}
	100% {
		opacity:0;
		transform:scale(8);
		filter:blur(20px);
		background-color:var(--head-balkje-bg-correct);
	}
}

/* incorrect password */
.👨‍🦲 .🕶 .🔏.🛑 {
	animation:
		🌫 var(--head-balkje-time-incorrect) 2 linear alternate,
		😵‍💫 calc(var(--head-balkje-time-incorrect)/2) 4 ease-in-out;
}

@keyframes 🌫 {
	0% {
		filter:none;
	}	
	100% {
		filter:blur(5px);
	}
}

@keyframes 😵‍💫 {
	0%, 50%, 100% {
		transform:none;
	}	
	25% {
		transform:rotate(15deg) skewX(15deg) scale(1.2);
	}
	75% {
		transform:rotate(-15deg) skewX(-15deg) scale(1.2);
	}
}

/* buttton */
.👨‍🦲 .🕶 .🆗 {
	display:none;
}





/***********/
/* DE OGEN */
/***********/

/* @property --sc {
	syntax: '<number>';
  inherits: true;
  initial-value: 1;
} */

.👨‍🦲 .👀 {
	margin:0; padding:0;
	list-style:none;
	
	grid-area:1 / 1;
	justify-self:stretch;
	align-self:end;
	margin-bottom:20%;
	z-index:200;
	
	display:flex;
	justify-content:center;
	gap:4%;
		
	transition:var(--head-time-mood-change);

	pointer-events:none;
}

/* EEN OOG */
.👨‍🦲 .👁 {
	position:relative;
	width:33%;
	aspect-ratio:2/1;

	background-color:var(--head-oog-wit-bg);
	background-image:radial-gradient(
		circle, 
		var(--head-oog-pupil-bg) calc(25% - .5px), 
		var(--clr-eye, var(--head-oog-iris-bg)) calc(25% + .5px) calc(55% - .5px), 
		transparent calc(25% + .5px)
	);
	background-size:80% 160%;
	background-position:center 80%;
	background-repeat:no-repeat;

	border-radius:50% / 20% 20% 80% 80%;
	box-shadow:0 .375em 0 var(--head-oog-shadow);

	transform:scaleX(var(--sc, 1)) rotate(var(--r, -5deg));
	transition:var(--head-time-mood-change);
}

.👨‍🦲 .👁 + .👁 {
	--sc:-1;
}

.👨‍🦲[data-mood="😦"] .👁 {
	aspect-ratio:4/3;
	border-radius:50%;
	background-size:75% 140%;
	background-position:center -10%;
}

.👨‍🦲[data-mood="😠"] .👁 {
	--clr-eye:var(--head-oog-iris-bg-boos);
	--r:10deg;
	aspect-ratio:8/3;
	background-position:center top;
}

.👨‍🦲[data-mood="😮"] .👀 {
	gap:12%;
}

.👨‍🦲[data-mood="😮"] .👁 {
	width:27.5%;
	aspect-ratio:1/1;
	background-size:100% 100%;
	background-position:center;
	border-radius:50%;
}

.👨‍🦲[data-mood="😀"] .👁 {
	--r:-15deg;
	border-radius:50%;
	background-size:80% 160%;
	background-position:center 40%;
}

/* DE WENKBRAUWEN */
.👨‍🦲 .👁::before {
	content:"";
	position:absolute;
	left:0; top:0;
	width:75%;
	aspect-ratio:15/4;
	
	background-color:var(--head-wenkbrouw-bg);
	border-radius:100% 0 20% 20% / 100% 50% 50% 0;
	transform:translate(var(--tx, 10%), var(--ty, -175%)) rotate(var(--r, -5deg));
	transition:var(--head-time-mood-change);
}

.👨‍🦲 .👁 + .👁::before {
	background-color: rgba(255 255 204 /.75);
}

.👨‍🦲[data-mood="😦"] .👁::before {
	--tx:5%;
	--ty:-225%;
	--r:-15deg;
}

.👨‍🦲[data-mood="😠"] .👁::before {
	--ty:-200%;
	--r:20deg;
}

.👨‍🦲[data-mood="😮"] .👁::before {
	--tx:-10%;
	--ty:-275%;
	--r:-20deg;
}

.👨‍🦲[data-mood="😀"] .👁::before {
	--tx:5%;
	--ty:-225%;
	--r:-20deg;
}

/* DE HIGHLIGHTS */
/* container */
.👨‍🦲 .⭐ {
	--maat:20%;
	--top:0%;

	--left:calc(var(--head-highlight-x-limit) + (100% - var(--head-highlight-x-limit) * 2) * var(--head-light-x, var(--head-light-x-default)));
	
	position:absolute;
	left:calc(var(--left) - var(--maat) / 2);
	top:var(--top);
	
	display:block;
	width:var(--maat);
	aspect-ratio:1/1;
	
	transition:
		top var(--head-time-mood-change), 
		transform var(--head-time-mood-change), 
		width var(--head-time-mood-change);
}

.👨‍🦲 .👁 + .👁 .⭐ {
	left:calc(100% - var(--left) - var(--maat) / 2);
}

.👨‍🦲.moving .⭐ {
	transition:var(--head-highlights-time-move);
}

.👨‍🦲[data-mood="😦"] .⭐ {
	--top:40%;
}

.👨‍🦲[data-mood="😠"] .⭐ {
	--top:10%;
}

.👨‍🦲[data-mood="😮"] .⭐ {
	--maat:25%;
	--top:27%;
	--left-start:30%;
}

.👨‍🦲[data-mood="😀"] .⭐ {
	--top:10%;
}

/* de actual highlight */
.👨‍🦲 .⭐::after {
	content:"";
	position:absolute;
	inset:0;
	background-color:var(--head-highlight-bg);
	clip-path:polygon(50% 0, 61.2% 34.5%, 97.6% 34.5%, 68.2% 55.9%, 79.4% 90.4%, 50% 69%, 20.6% 90.4%, 31.8% 55.9%, 2.4% 34.5%, 38.8% 34.5%); /* ⭐ */
	animation:⭐ var(--head-highlight-time-rotate) infinite linear;
	transition:var(--head-time-mood-change);
}

.👨‍🦲 .👁 + .👁 .⭐::after {
	animation-direction:reverse;
}

@keyframes ⭐ {
	to {
		transform:rotate(1turn);
	}
}

@keyframes ⚡ {
	to {
		transform:scale(1.5);
	}
}

.👨‍🦲[data-mood="😠"] .⭐::after,
.👨‍🦲[data-mood="😠"] .👁 + .👁 .⭐::after{
	clip-path:polygon(50% 0, 50% 40%, 70% 40%, 50% 100%, 50% 100%, 50% 60%, 50% 60%, 50% 60%, 30% 60%, 30% 60%); /* ⚡ */
	animation-name:⚡;
	animation-duration:var(--head-highlight-time-flash);
	animation-direction:alternate;
}

.👨‍🦲[data-mood="😀"] .⭐::after {
	animation-duration:var(--head-highlight-time-spin);
}





/***********/
/* DE NEUS */
/***********/

.👨‍🦲 .👃 {
	z-index:300;
	grid-area:1 / 1;
	transform:
		translateX(-5%)
		rotate(10deg)
		skew(-15deg, -5deg);

	width:25%;
	aspect-ratio:1/2;
	
	background-image:
		linear-gradient(
			67.5deg, 
			var(--head-neus-bg) calc(50% + .15em),
			transparent 0%
		);

	border-radius:10% 0 10% 50% / 50%;
	box-shadow:inset .25em -.25em 0 var(--head-neus-shadow);
	
	pointer-events:none;
}





/***********/
/* DE MOND */
/***********/

.👨‍🦲 .👄 {
	z-index:700;

	width:10%;
	aspect-ratio:2/1;
	margin-bottom:1em;

	background-color:var(--head-mond-bg);
	border-radius:20% 80% 80% 20% / 40% 50% 50% 40%;
	
	transition:var(--head-time-mood-change);
	
	pointer-events:none;
}

.👨‍🦲[data-mood="😦"] .👄 {
	width:24%;
	aspect-ratio:5/2;
	border-radius:50% 50% 20% 20% / 60% 60% 40% 40%;
}

.👨‍🦲[data-mood="😠"] .👄 {
	width:12%;
	aspect-ratio:3/1;
	border-radius:50% 50% 0 0 / 60% 60% 0 0;
}

.👨‍🦲[data-mood="😮"] .👄 {
	width:6%;
	aspect-ratio:4/5;
	border-radius:50%;
}

.👨‍🦲[data-mood="😀"] .👄 {
	width:85%;
	aspect-ratio:8/5;
	border-radius:5% 5% 50% 50% / 40% 40% 57.5% 57.5%;
	box-shadow:inset 0 1em 1.5em -.5em var(--head-mond-shadow);
	margin-bottom:.6em;
}





/***********/
/* DE OREN */
/***********/

.👨‍🦲 .👂 {
	position: absolute;
	top:43%;
	
	width:8%;
	aspect-ratio:1/4;
	
	transform-origin:right center;
	transform:rotateZ(var(--r, -7.5deg)) scalex(1);
	
	appearance:none;
	background-color:inherit;
	border:none;
	border-radius:1em;
	outline:none;
	
	text-align:center;
	
	pointer-events:auto;
}

.👨‍🦲 .👂 {
	right:98%;
}

.👨‍🦲 .👂 + .👂 {
	--r:7.5deg;
	left:98%;
	transform-origin:left center;
}

.👨‍🦲[data-mood="😀"] .👂 {
    animation:👂 var(--head-oren-time-flap) infinite alternate;
}

@keyframes 👂 {
  to {
		transform:rotateZ(var(--r, -7.5deg)) scalex(1.25);
	}
}





/*******/
/* NAV */
/*******/
nav {
	position:fixed;
	left:.5em;
	top:.5em;
	order:1;

	font-size:1rem;

	background-color: steelblue;
	padding:0 .5em;
	color:white;
	font-variation-settings:'wdth' 75;
	/* border-radius: 2em; */
	user-select: none;
}

nav ul {
	margin:0;
	padding:0;
	list-style:none;
	display:flex;
}

nav ul li:not(:last-of-type)::after {
	content:"\00A0\2192\00A0";
}

nav a {
	color:bisque;
	text-decoration-style:dotted;
	text-decoration-thickness:.06em;
	text-underline-offset:.15em;
}

nav a:focus,
nav a:hover {
	text-decoration-style:solid;
	text-decoration-thickness:.08em;
	outline:none;
}



/**************/
/* MOODS FORM */
/**************/
.🎛 {
	position:relative;
	display:flex;
	align-items:center;
	padding:0;
}

.🎛 .🔘 {
	position:absolute;
	left:-9999em;
}

.🎛 .🆗 {
	display: none;
}


.🎛 .🏷 {
	font-size:1.75em;
	margin:0;
	padding:.1em;
	line-height:1em;
	border-radius:50%;
	filter:var(--radio-filter);
	cursor:pointer;
}

.🎛 .🔘:checked + .🏷 {
	transform:scale(1.2);
}

.🎛 .🔘:is(:active, :focus) + .🏷 {
	filter:var(--radio-filter-fcs);
}