/* It should work nicely on Firefox, Chrome, and Edge */

/* to contain the eyes */
section {
	position: relative;
	display: flex;
	font-size: 1.8vmin;
	margin-bottom: 11vmin;
	transform: rotate(30deg) scale(0);
	animation: bounce cubic-bezier(0.18, 0.89, 0.32, 1.28) 0.4s forwards;
	animation-play-state: var(--play-state, running);
	pointer-events: none;

	--color-sclera: #fff;
	--color-eyes: #5e9cff;
	--color-eyebrows: #5e9cff;
	--color-eye-border: rgba(8, 33, 133, 0.16);
	--color-blush: rgb(255, 194, 212);
	--color-blush-border: rgba(0, 0, 0, 0);
}

section[data-green] {
	--color-eyes: rgb(158, 221, 109);
	--color-eyebrows: rgb(158, 221, 109);
	--color-eye-border: rgb(67, 46, 27);
	--color-blush: rgb(255, 194, 212);
	--color-blush-border: rgb(223, 149, 169);
}

@keyframes bounce {
	to {
		transform: rotate(0deg) scale(1);
	}
}

/* blush spots */
section::before,
section::after {
	content: '';
	position: absolute;
	bottom: 0;
	width: 6em;
	height: 6em;
	background-color: var(--color-blush);
	box-shadow: 0 0 0 0.5em var(--color-blush-border);
	border-radius: 54% 46% 53% 47% / 52% 36% 64% 48%;
	animation: blush ease-out 9s 0.4s forwards;
	animation-play-state: var(--play-state, running);
	opacity: 0;
}

@keyframes blush {
	10%,
	35% {
		opacity: 1;
	}
	40%,
	65% {
		opacity: 0;
	}
	70%,
	100% {
		opacity: 1;
	}
}

section::before {
	transform: translate(-100%, 160%);
	left: 0;
}

section::after {
	transform: translate(100%, 160%) scaleX(-1);
	right: 0;
}

.eye {
	position: relative;
	width: 11em;
	height: 20em;
	border-radius: 10em;
	margin: 1.8em;
	background-color: var(--color-sclera);
	flex: 1;
	overflow: hidden;
	box-shadow: 0 0 0 0.5em var(--color-eye-border);
	box-sizing: border-box;
}

/* pupil */
.eye::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	font-size: 50%;
	width: 11em;
	height: 24em;
	background-color: var(--color-eyes);
	background-repeat: no-repeat;
	transform: translate(-50%, -50%) translate(0, 0);
	border-radius: inherit;
	display: block;

	-webkit-mask: linear-gradient(#fff, #fff);
	-webkit-mask-composite: source-in;
	-webkit-mask-size: 100% 100%;
	-webkit-mask-position: left 0px bottom 50%;
	-webkit-mask-repeat: no-repeat;

	mask: linear-gradient(#fff, #fff);
	mask-composite: add;
	mask-size: 100% 100%;
	mask-position: left 0px bottom 50%;
	mask-repeat: no-repeat;

	animation:
		blink ease 2.4s forwards 2,
		lookaround cubic-bezier(0.79, 0.14, 0.15, 0.86) 4s forwards 1,
		suspect cubic-bezier(0.19, 1, 0.22, 1) 0.8s 3.1s forwards 1,
		shocked cubic-bezier(0.19, 1, 0.22, 1) 0.8s 4.3s forwards 1,
		lookup cubic-bezier(0.79, 0.14, 0.15, 0.86) 1s 5.1s forwards 1,
		eyetear steps(5) 200ms 6.1s forwards 1,
		tearflowstart steps(2) 200ms 6.2s forwards infinite;

	animation-play-state: var(--play-state, running);

	background-image: linear-gradient(transparent, transparent);

	background-size:
		7.5em 7.5em,
		3.5em 3.5em,
		3.5em 3.5em;

	background-position:
		-1em -1em,
		5.5em 4em,
		4em 4.8em;

	background-repeat: no-repeat;
}

@keyframes blink {
	10% {
		-webkit-mask-size: 100% 0%;
		mask-size: 100% 0%;
	}
	22%,
	100% {
		-webkit-mask-size: 100% 100%;
		mask-size: 100% 100%;
	}
}

@keyframes lookaround {
	20% {
		transform: translate(-50%, -50%) translate(-4em, 5em);
	}
	40% {
		transform: translate(-50%, -50%) translate(4em, 5em);
	}
	60% {
		transform: translate(-50%, -50%) translate(4em, -1em);
	}
	80%,
	to {
		transform: translate(-50%, -50%) translate(-4em, 4em);
	}
}

@keyframes suspect {
	from {
		-webkit-mask-position: left 0 bottom 0;
		mask-position: left 0 bottom 0;
	}
	to {
		-webkit-mask-position: left 0 bottom 0;
		mask-position: left 0 bottom 0;
		-webkit-mask-size: 100% 72%;
		mask-size: 100% 72%;
	}
}

@keyframes shocked {
	from {
		-webkit-mask-position: left 0 bottom 0;
		mask-position: left 0 bottom 0;
		-webkit-mask-size: 100% 72%;
		mask-size: 100% 72%;
	}
	to {
		-webkit-mask-position: left 0 bottom 0;
		mask-position: left 0 bottom 0;
		-webkit-mask-size: 100% 100%;
		mask-size: 100% 100%;
	}
}

@keyframes lookup {
	from {
		transform: translate(-50%, -50%) translate(-4em, 4em);
	}
	50%,
	80% {
		transform: translate(-50%, -50%) translate(-4em, -3em);
	}
	to {
		transform: translate(-50%, -50%) translate(0, 0);
	}
}

@keyframes eyetear {
	0% {
		--circle-1: 0%;
		--circle-2: 0%;
		--circle-3: 0%;

		background-image:
			radial-gradient(circle at center, white var(--circle-1), transparent calc(var(--circle-1) + 1px)),
			radial-gradient(circle at center, white var(--circle-2), transparent calc(var(--circle-2) + 1px)),
			radial-gradient(
				circle at center,
				rgba(255, 255, 255, 0.3) var(--circle-3),
				transparent calc(var(--circle-3) + 1px)
			);
	}
	20% {
		--circle-1: 12.5%;
		--circle-2: 12.5%;
		--circle-3: 12.5%;

		background-image:
			radial-gradient(circle at center, white var(--circle-1), transparent calc(var(--circle-1) + 1px)),
			radial-gradient(circle at center, white var(--circle-2), transparent calc(var(--circle-2) + 1px)),
			radial-gradient(
				circle at center,
				rgba(255, 255, 255, 0.3) var(--circle-3),
				transparent calc(var(--circle-3) + 1px)
			);
	}
	40% {
		--circle-1: 25%;
		--circle-2: 25%;
		--circle-3: 25%;

		background-image:
			radial-gradient(circle at center, white var(--circle-1), transparent calc(var(--circle-1) + 1px)),
			radial-gradient(circle at center, white var(--circle-2), transparent calc(var(--circle-2) + 1px)),
			radial-gradient(
				circle at center,
				rgba(255, 255, 255, 0.3) var(--circle-3),
				transparent calc(var(--circle-3) + 1px)
			);
	}
	60% {
		--circle-1: 37.5%;
		--circle-2: 37.5%;
		--circle-3: 37.5%;

		background-image:
			radial-gradient(circle at center, white var(--circle-1), transparent calc(var(--circle-1) + 1px)),
			radial-gradient(circle at center, white var(--circle-2), transparent calc(var(--circle-2) + 1px)),
			radial-gradient(
				circle at center,
				rgba(255, 255, 255, 0.3) var(--circle-3),
				transparent calc(var(--circle-3) + 1px)
			);
	}
	80%,
	to {
		--circle-1: 50%;
		--circle-2: 50%;
		--circle-3: 50%;

		background-image:
			radial-gradient(circle at center, white var(--circle-1), transparent calc(var(--circle-1) + 1px)),
			radial-gradient(circle at center, white var(--circle-2), transparent calc(var(--circle-2) + 1px)),
			radial-gradient(
				circle at center,
				rgba(255, 255, 255, 0.3) var(--circle-3),
				transparent calc(var(--circle-3) + 1px)
			);
	}
}

@keyframes tearflowstart {
	from {
		--circle-1: 50%;
		--circle-2: 50%;
		--circle-3: 50%;

		background-image:
			radial-gradient(circle at center, white var(--circle-1), transparent calc(var(--circle-1) + 1px)),
			radial-gradient(circle at center, white var(--circle-2), transparent calc(var(--circle-2) + 1px)),
			radial-gradient(
				circle at center,
				rgba(255, 255, 255, 0.3) var(--circle-3),
				transparent calc(var(--circle-3) + 1px)
			);
	}
	to {
		--circle-1: 46%;
		--circle-2: 46%;
		--circle-3: 46%;

		background-image:
			radial-gradient(circle at center, white var(--circle-1), transparent calc(var(--circle-1) + 1px)),
			radial-gradient(circle at center, white var(--circle-2), transparent calc(var(--circle-2) + 1px)),
			radial-gradient(
				circle at center,
				rgba(255, 255, 255, 0.3) var(--circle-3),
				transparent calc(var(--circle-3) + 1px)
			);
	}
}

/* eyelids to express surprise and joy */
.eye::after {
	--lid-height: 40%;
	--lid-subtract: calc(100% - var(--lid-height));
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 100%;
	padding: 50% 0;
	height: auto;
	background: var(--color-sclera);
	display: block;
	transform: translate(-50%, 100%);
	transform-origin: 50% 100%;
	border-radius: 50% 50% 50% 50% / var(--lid-height) var(--lid-height) var(--lid-subtract) var(--lid-subtract);
	animation: eyelid cubic-bezier(0.68, -0.55, 0.27, 1.55) 0.8s 6s forwards;
	animation-play-state: var(--play-state, running);
}

@keyframes eyelid {
	to {
		transform: translate(-50%, 30%);
	}
}

/* parent object to control both eyebrows */
svg {
	overflow: visible;
	width: 15em;
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%) translate(0, 0);
	background-color: rgba(0, 0, 0, 0);
	animation:
		show-eyebrows ease 100ms 300ms forwards,
		eyebrows-move cubic-bezier(0.79, 0.14, 0.15, 0.86) 4s forwards 1,
		eyebrows-rig-shocked cubic-bezier(0.18, 0.89, 0.32, 1.28) 0.4s 4s forwards 1;
	animation-play-state: var(--play-state, running);
	opacity: 0;
}

@keyframes show-eyebrows {
	to {
		opacity: 1;
	}
}

/* eyebrow curve and symbol */
symbol {
	overflow: visible;
}

.eyebrow-path {
	fill: none;
	stroke: var(--color-eyebrows);
	stroke-width: 4.5;
	stroke-linecap: round;
	stroke-dasharray: 19, 42;
	stroke-dashoffset: -0.2em;
	animation:
		eyebrows-focus linear 3s forwards,
		eyebrows-disappear cubic-bezier(0.19, 1, 0.22, 1) 0.8s 3.3s forwards 1,
		eyebrows-shocked cubic-bezier(0.18, 0.89, 0.32, 1.28) 0.4s 4.3s forwards 1,
		eyebrows-happy cubic-bezier(0.68, -0.55, 0.27, 1.55) 0.8s 6s forwards;
	animation-play-state: var(--play-state, running);
}

@keyframes eyebrows {
	to {
		stroke-dashoffset: -1.91em;
	}
}

@keyframes eyebrows-move {
	20% {
		transform: translateX(-50%) translate(-2em, 3.5em);
	}
	40% {
		transform: translateX(-50%) translate(2em, 3.5em);
	}
	60% {
		transform: translateX(-50%) translate(2em, -1.5em);
	}
	80%,
	to {
		transform: translateX(-50%) translate(-2em, 3em);
	}
}

@keyframes eyebrows-focus {
	20% {
		stroke-dashoffset: -0.3em;
	}
	40% {
		stroke-dashoffset: -0.6em;
	}
	60% {
		stroke-dashoffset: -0.2em;
	}
	80%,
	to {
		stroke-dashoffset: -0.4em;
	}
}

@keyframes eyebrows-disappear {
	to {
		stroke-width: 0;
	}
}

@keyframes eyebrows-shocked {
	to {
		stroke-width: 4.5;
		stroke-dashoffset: -2em;
		stroke-dasharray: 21, 40;
	}
}

@keyframes eyebrows-rig-shocked {
	from {
		transform: translateX(-50%) translate(-2em, 3em) scale(1.2);
	}
	to {
		transform: translateX(-50%) translate(0, 0) scale(1);
	}
}

@keyframes eyebrows-happy {
	to {
		stroke-dashoffset: -1.2em;
	}
}

/* clone the eyebrow curve for both eyes */
use {
	--r: 50deg;
	--y: -15px;
	x: 14px;
	y: -10px;
	transform-origin: 50% 50%;
	transform: rotate(var(--r)) translateY(var(--y));
}

use.eyebrow-inverted {
	transform: scaleX(-1) rotate(var(--r)) translateY(var(--y));
}

/* pause animation when the page (primary user input or button) loses focus */
/* button{
	appearance: none;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: block;
	background: rgba(0, 0, 0, 0);
	border: none;
	outline: none;
}

button:not(:focus) + section{
	--play-state: paused;
} */

/* layout and decoration */
html,
body {
	position: relative;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}

html {
	display: block;
	background-image: radial-gradient(circle at 50%, #fff, rgb(250, 247, 240));
	background-size: 100% 100%;
	background-attachment: fixed;
}

body {
	display: grid;
	place-items: center;
	background-color: transparent;
}

/* Made with Coffee, Care, and Curiosity by @ShadowShahriar */